在Photoshop中创建一个光质感网页设计

作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。

本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。

约定：

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77

例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

In this web design tutorial, we’ll be creating a light textured web page layout. I will show you how apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and how to create a tabbed content area design for the “Services” section.
在本网页设计教程中，我们将创建一个光质感的网页布局。我会告诉你如何在网页布局中添加微妙的纹理，如何创建一个无缝的对角拼接模式，以及如何创建一个“服务”部分的选项卡的内容区。

In this tutorial, we will use the 960 Grid System to organize and arrange the elements of our web layout. Before we begin, download it to your computer.

在本教程中，我们将使用960网格系统，来组织和安排我们的网页布局的元素。在开始之前，将其下载到您的计算机。

Unzip the archived file you downloaded, go to the “templates” folder and then go to the “photoshop” folder. You will find three .PSD files. Each of these files contains a grid with 12, 16 and 24 columns. In this tutorial we will be using the 12 columns grid.

解压下载好的文件，点到templates文件夹下的photoshop文件夹。你会发现有3个.PSD文件。它们分别包含了12列、16列、24列网格。在本教程中，我们使用12列网格

The .PSD files have some guides already set up, which will be very useful. To activate the guides, go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;.

.PSD文件已经包含了一些设置好的网格，这会是非常有用。为了激活网格点击：视图 > 显示 > 网格，或者用快捷键，Ctrl/Cmd + ;

During this tutorial you will need to create shapes with specific dimensions. To see the exact size of a shape or selection while you are creating it, open the Info Panel by going to Window > Info. The width and the height of your shapes and selections will be displayed in this panel.

在本教程中，您将需要创建具有特定尺寸的形状。当你在创建过程中要查看确切的大小，点击：窗口 > 信息，打开信息面板。你的形状或选择的宽度和高度的将被显示在此面板中。

Now that we covered the basics of using the 960 Grid System, we can move on to creating the web layout. Let’s get started!

现在，我们讨论了使用960网格系统的基础知识，我们可以继续创建的网络布局。让我们开始吧！

Step 1: Creating the Background of the Web Layout

步骤1：创建网页布局的背景

Open the "960_grid_12_col.psd" file in Photoshop. Then go to Edit > Canvas Size and set the width to 1200px and the height to 1900px. You can adjust the height later on if you need more space for the web layout.

在PS中打开960_grid_12_col.psd文件。然后点击：编辑（应该是图像） > 画布尺寸，然后设置宽度为1200px，高度为1900px。如果网页布局需要更多的空间，你可以在后面调整网页高度。

由于翻译教程不使用960布局系统，故本步改为，新建文档，尺寸：1200px*1900px

Now we will change the color of the background from white to a light gray. With the "Background" layer selected, click on the little black lock icon from the top of the Layers panel to unlock this layer. Then change the color of the background layer to #ededed.

现在，我们要把背景色从白色改为亮灰色。当Background图层选中的时候，单击图层面板上方的小黑锁的图标去解锁该图层。然后把背景图层的颜色改为： #ededed

由于是新建文档，故改为双击背景图层，去解锁它

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and set the Amount to 1%, the Distribution to Gaussian and tick the Monochromatic box.

在该图层上右键，选择转换为智能对象。然后点击：滤镜 > 杂色 > 添加杂色。设置数量为1%，设置为高斯分布，勾选上“单色”。

Step 2: Creating the Header

步骤2：创建头部区域

We will create a simple header with the name of the web layout and some social media icons. Create a new group and name it "Header". Then select the Type Tool (T) and write the name of your layout. I used the font Gotham Bold with the size 42pt and the color #707679. Align this layer with the grid, as you see in the image below.

我们将用网站的名字和一些社会媒体图标创建普通的头部区域。创建新组Header。然后用文字工具书写你的布局的名字。我用的字体：Gotham Bold，字号：42pt，颜色： #707679。按照下图对齐你的布局

Double-click on your text layer to open the Layer Style window and use the settings from the following image.

双击你的文字图层打开图层样式窗口，按照下图设置图层样式