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

　　雙擊你的文字圖層打開圖層樣式窗口，按照下圖設置圖層樣式

　　Now we will add the social media icons. Download this set of icons and open the RSS, Twitter and Facebook icons in Photoshop (or any other icons you want to include in your design). Use the Move Tool (V) to move these icon into your web layout document and put them in the right side of the web layout. Leave a distance of 10px between icons.

　　現在，我們要添加一些社會媒體圖標。下載該圖標集，然後在PS中打開RSS、Twitter和Facebook圖標(或者是其他你想要的圖標)。用移動工具移動這些圖標到你的網頁布局文檔，然後擺放他們在網頁布局的右邊。保持每個圖標間有10px的間距

　　Select all these layers, hit Ctrl/Cmd + G to group them and name the group "social icons".

　　選擇這些圖標的圖層，按Ctrl/Cmd + G把他們歸為一組，命名組為social icons

　　Step 3: Creating a Diagonal Stripe Pattern

　　步驟3：創建一個對角條紋圖案

　　Now we will create a pattern that we will use for the navigation bar and other areas of the web layout. Create a new document (Ctrl/Cmd + N) with the dimensions 5px by 5px. Select the Rectangular Marquee Tool (M), hold down the Shift key and create five square selections, as you see in the image below.

　　我們要創建一個用於導航欄和網頁布局其他部分的圖案。新建文檔(Ctrl/Cmd + N)，尺寸：5px*5px。選擇矩形選框工具，按住Shift鍵創建5個正方形選區，如下所示