在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.

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