作為編碼者，美工基礎(chǔ)是偏弱的。咱們能夠參閱一些成熟的網(wǎng)頁(yè)P(yáng)S教程，提高本身的規(guī)劃才能。套用一句話，“熟讀唐詩(shī)三百首，不會(huì)作詩(shī)也會(huì)吟”。

本系列的教程來(lái)源于網(wǎng)上的PS教程，都是國(guó)外的，全英文的。自己測(cè)驗(yàn)翻譯這些優(yōu)秀的教程。由于翻譯才能有限，翻譯的細(xì)節(jié)上還有待推敲，希望廣闊網(wǎng)友不吝賜教。

約好：

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

2、原教程的截圖是英文的，自己在從頭制造的基礎(chǔ)上，從頭截了中文版的圖

3、原文中有些操作沒(méi)有給出參數(shù)。自己在反復(fù)測(cè)驗(yàn)的情況下測(cè)定了一些參數(shù)，以赤色的文字顯現(xiàn)。有些錯(cuò)誤的參數(shù)，直接以赤色文字顯現(xiàn)正確的參數(shù)

例如：（90，22，231，77），表示矩形的左上角的坐標(biāo)是（90，22），寬231，高77

例如：（90，22），表示矩形的左上角的坐標(biāo)是（90，22），矩形的其他兩個(gè)參數(shù)教程里現(xiàn)已指定

4、在教程的最后會(huì)附上自己的心得。有些是對(duì)教程中的一些過(guò)程的優(yōu)化等。

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. 
在本網(wǎng)頁(yè)規(guī)劃教程中，咱們將創(chuàng)立一個(gè)光質(zhì)感的網(wǎng)頁(yè)布局。我會(huì)告知你怎么在網(wǎng)頁(yè)布局中增加奇妙的紋理，怎么創(chuàng)立一個(gè)無(wú)縫的對(duì)角拼接模式，以及怎么創(chuàng)立一個(gè)“服務(wù)”部分的選項(xiàng)卡的內(nèi)容區(qū)。

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.

在本教程中，咱們將運(yùn)用960網(wǎng)格體系，來(lái)組織和組織咱們的網(wǎng)頁(yè)布局的元素。在開(kāi)始之前，將其下載到您的計(jì)算機(jī)。

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.

解壓下載好的文件，點(diǎn)到templates文件夾下的photoshop文件夾。你會(huì)發(fā)現(xiàn)有3個(gè).PSD文件。它們別離包含了12列、16列、24列網(wǎng)格。在本教程中，咱們運(yùn)用12列網(wǎng)格

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文件現(xiàn)已包含了一些設(shè)置好的網(wǎng)格，這會(huì)對(duì)錯(cuò)常有用。為了激活網(wǎng)格點(diǎn)擊：視圖 > 顯現(xiàn) > 網(wǎng)格，或許用快捷鍵，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.

在本教程中，您將需要?jiǎng)?chuàng)立具有特定尺度的形狀。當(dāng)你在創(chuàng)立過(guò)程中要查看確切的大小，點(diǎn)擊：窗口 > 信息，翻開(kāi)信息面板。你的形狀或挑選的寬度和高度的將被顯現(xiàn)在此面板中。

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!

現(xiàn)在，咱們?cè)u(píng)論了運(yùn)用960網(wǎng)格體系的基礎(chǔ)知識(shí)，咱們能夠繼續(xù)創(chuàng)立的網(wǎng)絡(luò)布局。讓咱們開(kāi)始吧！

Step 1: Creating the Background of the Web Layout

過(guò)程1：創(chuàng)立網(wǎng)頁(yè)布局的布景

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中翻開(kāi)960_grid_12_col.psd文件。然后點(diǎn)擊：修改（應(yīng)該是圖像） > 畫(huà)布尺度，然后設(shè)置寬度為1200px，高度為1900px。如果網(wǎng)頁(yè)布局需要更多的空間，你能夠在后面調(diào)整網(wǎng)頁(yè)高度。

由于翻譯教程不運(yùn)用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.

現(xiàn)在，咱們要把布景色從白色改為亮灰色。當(dāng)Background圖層選中的時(shí)分，單擊圖層面板上方的小黑鎖的圖標(biāo)去解鎖該圖層。然后把布景圖層的色彩改為： #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.

在該圖層上右鍵，挑選轉(zhuǎn)換為智能目標(biāo)。然后點(diǎn)擊：濾鏡 > 雜色 > 增加雜色。設(shè)置數(shù)量為1%，設(shè)置為高斯分布，勾選上“單色”。

Step 2: Creating the Header

過(guò)程2：創(chuàng)立頭部區(qū)域

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.

咱們將用網(wǎng)站的姓名和一些社會(huì)媒體圖標(biāo)創(chuàng)立普通的頭部區(qū)域。創(chuàng)立新組Header。然后用文字東西書(shū)寫(xiě)你的布局的姓名。我用的字體：Gotham Bold，字號(hào)：42pt，色彩： #707679。依照下圖對(duì)齊你的布局

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

雙擊你的文字圖層翻開(kāi)圖層樣式窗口，依照下圖設(shè)置圖層樣式