本系列的教程來源于網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。

約定：

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

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

3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數

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

例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定

4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。

In this web design tutorial I will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. We will go from finding sources of inspiration to setting up the document in Photoshop and creating design elements that fit with the theme of the web layout. I will also give you some practical examples of how using smart objects in a web design project can improve your workflow and save you some time.

在這個網頁設計教程中，我將向您展示如何使用Adobe Photoshop創建一個擁有時尚、現代的外觀的web布局。我們將為在PS中找尋一些資源為網頁布局的主題設計元素，找到一些設計靈感。我也會給你一些實際的例子，在一個網頁設計項目中如何使用智能對象，可以提高您的工作流程，節省您的時間。

Step 1: Set Up the 960 Grid System

步驟1：設置960布局系統

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

在本教程中，我們使用960布局系統來組織和擺放頁面布局元素。在我們開始之前，下載該布局系統到你的電腦上。

Unzip the archive 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.

解壓下載好的文件，到templates文件夾里的photoshop的文件夾。你可以找到3個PSD文件。這些文件中包括了12列、16列、24列的網格

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.

在本教程中，你需要創建一些特定尺寸的形狀。要看創建的形狀或選區的確切尺寸，點擊：窗口 > 信息。你的形狀或選區的寬和高會在該面板上顯示。

Tip: If you need a more thorough guide for using 960 GS, I suggest reading the guide called The 960 Grid System Made Easy.

提示：如果你需要更詳細的960布局系統的參考，我建議你去讀一篇參考：The 960 Grid System Made Easy。

Step 2: Setting Up the Photoshop Grid

步驟2：設置PS的網格

Open the Preferences window in Photoshop (Ctrl/Cmd + K), click on Guides, Grid & Slices and then set Gridline Every to 10px and Subpisions to 5px. To activate the grid, go to View > Show > Grid, or use the shortcut Ctrl/Cmd + ‘.

在Photoshop中（按Ctrl / Cmd+ K），打開“首選項”窗口中，單擊參考線，網格和切片“，然后設置網格線間隔為10px，并細分為5px。要激活網格，點擊：查看 > 顯示 > 網格，或者使用快捷鍵Ctrl/ Cmd的+'。

You can activate the grid every time you create a shape such as a rectangle or an ellipse.

您可以在每一次創建一個矩形或橢圓形等形狀時激活網格。

Step 3: Setting Up the Document

步驟3：設置文檔

For this web layout we will use the 12-column grid. Open the "960_grid_12_col.psd" file in Photoshop. Then go to Image > Canvas Size and set the width to 1200px and the height to 1480px.

在本網頁布局中，我們將使用12列的網格。在PS中打開960_grid_12_col.psd。然后點擊：圖像 > 畫布大小。并設置寬度為1200px和高度1480px

在本翻譯教程中由于不使用960布局系統，故本步驟改為新建文檔，尺寸：1200px*1480px

Step 4: Create the Background

步驟4：創建背景

As you can see in the Layers Panel, the Background layer has a lock icon next to it. This means that we can’t modify the layer unless we unlock it.

當你看到圖層面板的時候，背景圖層右側有一個鎖的圖標。這意味著在我們解鎖之前我們不能編輯。

To unlock the layer, click on the black lock icon from the top area of the Layers Panel (underneath the blending modes). Now we can edit the layer, but the position is still locked (the black lock icon changed into a white lock icon) which means that we can’t move the layer. We don’t need to change the position of this layer, so we’ll leave it locked. However, if you do need a layer to be completely unlocked, click on the Lock Position icon (underneath the blending modes, next to the black lock icon).

為了解鎖圖層，點擊在圖層面板的頂部（在圖層混合模式的下方）的黑鎖圖標。現在我們可以編輯該圖層，但是位置任然鎖定著（黑色鎖的圖標改為白色鎖的圖標），這意味著我們不能移動該圖層。我們不需要改變圖層的位置，所以我們保持它任然鎖定著。當然了，如果你需要一個完全解鎖的圖層，單擊位置鎖的圖標（在混合模式的下方，在黑色鎖圖標的旁邊）

上面的兩步都是在打開960布局系統情況下的說明，在新建文檔的時候，背景層是被完全鎖住的，只有雙擊背景層，才能解鎖它

Double-click on the thumbnail of the Background layer and change its color to #dfe4e6. Right-click on this layer and select Convert to Smart Object.

雙擊背景層的縮略圖，更改它的顏色為： #dfe4e6。在該圖層上右鍵，選擇轉換為智能對象

由于是新建文檔，先是雙擊背景層去解鎖背景層，然后用油漆桶工具改變背景層的顏色

Note: We converted the layer into a Smart Object because we will apply a noise filter to it and we will be able to edit the filter’s settings at any time, just like the layer styles. If we apply a filter to a regular layer, we can’t edit it anymore.

注意：我們轉換圖層為智能對象是因為我們要給它添加一個雜色濾鏡，我們可以在任何時候編輯濾鏡設置，就像圖層樣式一樣。如果只是在普通圖層上添加濾鏡，我們不需要做轉換

Now go to Filter > Noise > Add Noise and use the settings from the following image.

現在點擊：濾鏡 > 雜色 > 添加雜色。按照下圖進行設置

Step 5: Creating a Diagonal Stripe Pattern

步驟5：創建斜條紋圖案

Create a new document (Ctrl/Cmd + N) with the dimensions 5px by 5px. Use the Zoom Tool (Z) to zoom in as much as you can.

新建一個文檔（Ctrl/Cmd+N），尺寸：5px*5px。用縮放工具所放到你感覺合適的大小

Then create a new layer (Ctrl/Cmd + Shift + N) and select the Pencil Tool. Set the size to 1px and use the Pencil Tool to create a diagonal line from the lower left corner of the document to the upper right corner. Hide the Background layer by clicking on its eye icon from the Layers Panel. Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

然后新建圖層（Ctrl/Cmd + Shift + N)）并選擇鉛筆工具，設置大小為1px，用鉛筆工具創建一條從文檔的左下角到右上角的對角線。點擊圖層面板上的背景圖層前的眼睛圖標去隱藏背景層。然后點擊：編輯 > 定義圖案，給你的圖案一個名字，并點確定。現在你可以關閉這個文檔了。

Step 6: Create a Bar at the Top

步驟6：創建頂部的橫條

Select the Rectangle Tool (U), activate the grid (Ctrl/Cmd + ‘) and create a rectangle with the height 20px at the top of the document using the color #b0b7ba.

選擇矩形工具，激活網格（Ctrl/Cmd+`），在文檔的頂部創建一個高20px的矩形（0，0，1200，20），顏色： #b0b7ba

Name this layer "top bar", double-click on it to open the Later Style window and use the settings from the following image. The color that I used for Bevel and Emboss Shadow Mode is #bec3c6 and the one I used for Stroke is #9da5a9.

命名此圖層為top bar，雙擊打開圖層樣式窗口，并按照下圖設置。斜面與浮雕的顏色： #bec3c6，描邊的顏色： #9da5a9

Step 7: Creating a Modern Laboratory Desk Design Element

步驟7：建立現代實驗臺設計元件

Create a new group (Layer > New > Group) and name it "header". Activate the guides (Ctrl/Cmd + ;) and the grid (Ctrl/Cmd + ‘). Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 40px using the color #535d62. Name this layer "top surface".

創建新組header（圖層 > 新建 > 組），激活參考線（Ctrl/Cmd+;）和網格。然后選擇矩形工具創建一個矩形（130，79），尺寸：940px*40px，顏色： #535d62。命名此圖層為top surface

Use the Direct Selection Tool (A) to select the upper left corner of this rectangle. Then hold down the Shift key and hit the Right Arrow key on your keyboard 6 times to move this anchor point 60px to the right. Then select the upper right corner of this rectangle and move it 60px to the left.

用直接選擇工具選擇矩形的左上角。然后按住Shift鍵并按鍵盤上的右方向鍵6次向右移動控制點60px。然后選擇矩形的右上角的控制點，向左移動60px

Double-click on the "top surface" layer to open the Layer Style window and use the settings from the following image. For Stroke I used the color #282f32.

雙擊top surface圖層打開圖層樣式窗口，并按照下圖設置樣式。描邊的顏色： #282f32

Create a new rectangle underneath the top surface of the desk with the dimensions 940×10px and the color #414a4f. Name this layer "middle surface", right-click on it and use the settings from the following image for Stroke. The color that I used is #252b2e.

創建一個矩形在桌子上表面的下方，尺寸：940px*10px，顏色： #414a4f。命名此圖層middle surface，在之上右鍵并按照下圖設置描邊。描邊的顏色： #252b2e

Select the Rectangle Tool (U) and create another rectangle underneath the middle surface of the desk with the dimensions 920×40px and the color #b0b7ba. We will use this area for the navigation bar.

選擇矩形工具在桌子的middle surface的下方創建另一個矩形（140，130），尺寸：920px*40px，顏色： #b0b7ba。這部分將用來做導航欄。

Double-click on this layer to open the Layer Style window and use the settings from the following image. For Stroke I used the color #818b8f. Name this layer "bottom surface" and put it underneath the "top surface" layer in the Layers Panel.

雙擊圖層打開圖層樣式窗口，按照下圖進行設置。描邊的顏色： #818b8f。命名此圖層為bottom surface，然后在圖層面板里把該圖層放在top surface圖層的下方。

Now you can deactivate the grid and the guides.

現在你可以隱藏參考線和網格

Step 8: Adding Noise to the Lab Desk

步驟8：給實驗室桌子添加雜色

Hold down the Ctrl/Cmd key and select the three surface layers that you created. Then right-click on one of them and select Convert to Smart Object from the menu that appears. Name this layer "desk", go to Filter > Noise > Add Noise and use the settings from the following image.

按住Ctrl/Cmd鍵選擇之前創建的3個surface圖層。然后右鍵在出現的菜單中選擇轉換為智能對象。命名這個圖層為desk，然后點擊：濾鏡 > 雜色 > 添加雜色，并按照下圖進行設置

Note: When you convert a layer into a smart object, you can no longer edit it directly (e.g., you can’t use the Brush Tool to paint on the layer). If you need to edit a smart object, double-click on its thumbnail. A new document will be opened with the source of the smart object (the layers that you converted). After you edit the source document, save it, close that document and the smart object will be updated in your current document.

注意：當你轉換一個圖層為智能對象，你就不能再直接編輯它了（舉例：你不能用畫筆工具在圖層上涂抹）。如果你需要編輯一個智能對象，雙擊它的縮略圖。你的智能對象（圖層被你轉換）作為源文件在一個新的文檔中被打開。在你編輯源文檔之后，保存它，關閉該文檔，你當前文檔中的的智能對象會被更新。

Step 9: Creating the "Design Lab" Logo

步驟9：創建Design Lab標志

Now we will create a logo related to the theme of the web layout. The name of our layout will be "Design Lab", and we will replace the letter "A" with a chemistry bottle. First, create a new group (Layer > New > Group) and name it "logo". Then select the Type Tool (T) and write "Design Lab" using the color #85a3b3. The font that I used is Futura Heavy.

現在我們將創建web布局的相關主題的一個logo。 我們的布局的名稱將Design Lab，我們將用化學瓶替換字母A。 首先，創建一個新組logo（圖層 > 新建 > 組）。 然后選擇文字工具，書寫Design Lab，顏色： #85a3b3。 字體：Futura Heavy。

Double-click on this text layer to open the Layer Style window and use the settings from the following image. The color I used for Drop Shadow is #6e8a99.

雙擊該文字圖層打開圖層樣式窗口，按照下圖進行設置。投影的顏色： #6e8a99

Create a new group (Layer > New > Group) and name it "chemistry bottle". Select the Pen Tool (P) and create a shape over the letter "A" of the text layer. Take a look at the following image for reference. The color is not important at the moment. I made my shape red so you can see it better. Name this layer "bottom area".

新建組chemistry bottle（圖層 > 新建 > 組）。選擇鋼筆工具在文字圖層中的A的上方創建一個形狀，就像下圖展示的一樣。這會兒顏色不是很重要。我設置為紅色，你看起來更醒目一點。命名此圖層為bottom area

該形狀也可以用矩形工具畫一個矩形，然后用自由變換中的透視，來達到同樣的效果。

Click and hold on the Pen Tool in the Tools Panel to reveal additional tools, and then select the Add Anchor Point Tool. Then click on the vector mask of the "bottom area" layer to make it active (if the vector mask is active, you can see the path of your shape, and the thumbnail has a white stroke).

單擊并按住工具面板中的鋼筆工具，出現額外工具，然后選擇增加錨點工具。然后點擊bottom area圖層的向量蒙版去激活它，你可以看見該形狀的路徑，并且縮略圖有一個白色的描邊。

Zoom in, and then use the Add Anchor Point Tool to add an anchor point on the bottom path of the chemistry bottle, in the middle. Then use the Direct Selection Tool (A) to select that anchor point and drag it 2px down. This will make the bottom line of the chemistry bottle more rounded. Take a look at the following image for reference.

放大，并用增加錨點工具在化學瓶的底部路徑上中部增加一個錨點。然后用直接選擇工具選擇剛才增加的錨點往下拖動2px。這會讓化學瓶底部的線條看起來更圓滑一點，就像下圖一樣。

Select the Rectangle Tool (U) and create a rectangle like you see in the following image. This will be the neck of the chemistry bottle. Name this layer "middle area".

用矩形工具創建一個矩形，如下圖所示。這將是化學頸的瓶頸。命名此圖層為middle area

Select the Ellipse Tool (U) and create an ellipse at the top of the chemistry bottle’s neck using the color #85a3b3. Name this layer "top area", double-click on it and use the settings from the following image. For Stroke I used the color #708c9b.

用橢圓工具在化學瓶瓶頸的頂部創建一個橢圓，顏色： #85a3b3.命名此圖層為top area，雙擊并按照下圖設置圖層樣式。描邊的顏色： #708c9b

Change the color of the "bottom area" and "middle area" layers to #85a3b3. Then select the Pen Tool (P) and create a shape like you see in the following image. Use the color #b8d1df. Name this layer "water", double-click on it to open the Layer Style window and use the settings from the following image.

改變bottom area和middle area圖層顏色為： #85a3b3。然后選擇鋼筆工具按照下圖創建一個形狀，顏色： #b8d1df。命名此圖層為water，雙擊打開圖層樣式按照下圖設置樣式

Select the Pen Tool (P) again and create a shape like the one below. This will be the top area of the water. Name this layer "water top", double-click on it and use the settings from the following image. For the Stroke I used the color #9dbccd.

再次用鋼筆工具創建如下的形狀。這是水的上表面。命名為water top，雙擊打開圖層樣式，按照下圖進行設置，描邊的顏色： #9dbccd

Hold down the Ctrl/Cmd key and select the three layers that form the chemistry bottle ("bottom area", "middle area" and "top area"). Right-click on one of these layers, select Duplicate Layers from the menu that appears and click OK. With the duplicated layers selected, right-click on one of them and select Convert to Smart Object.

按住Ctrl/Cmd鍵選擇化學瓶的三個圖層（bottom area，middle area，top area）。在之上右鍵，在出現的菜單中選擇復制圖層，并按確定。保持這些圖層選中，右鍵其中之一選擇轉換為智能對象。

Name the new layer "gradient" and move it above the "water top" layer. Double-click on the "gradient" layer to open the Layer Style window and use the settings from the following image.

命名新圖層為gradient，并移動到water top圖層的上面。雙擊gradient圖層打開圖層樣式窗口，按照下圖進行設置。

Note: By settings the Fill to 0%, the layer becomes completely invisible, but we are still able to add layer styles. If we set the Opacity of the layer to 0%, both the layer and the layer effects will be invisible. That’s why we used the Fill property instead of Opacity.

注意：當填充設置為0%的時候，圖層變成完全不可見，但是我們仍然能添加圖層樣式。如果我們把圖層的不透明度設置為0，圖層和圖層效果就都不可見了。這也就是為什么我們用填充屬性取代不透明度的原因

Use the Pen Tool (P) to create a white shape on the left side of the chemistry bottle. Take a look at the following image for reference. Name this layer "highlight".

用鋼筆工具創建一個白色的形狀在化學瓶的左側。就像下圖一樣。命名此圖層為highlight

Duplicate this layer. Then go to Edit > Transform > Flip Horizontal. Change the color of this layer to black and move it in the right side of the chemistry bottle using the Move Tool (V). Name this layer "shadow".

復制該圖層。然后點擊：編輯 > 變換 > 水平翻轉。把顏色改成黑色并用移動工具把它移動到化學瓶的右側。命名該圖層為shadow

Set the blend mode of the "highlight" and "shadow" layers to Overlay 20%.

設置highlight和shadow圖層的混合模式為疊加，不透明度為20%

Now what’s left to do is delete the "A" letter from the text layer. Before that, I selected the "LAB" word and changed its font from Futura Heavy to Futura Bold.

接下來要做的就是把文字圖層中的字母A刪除。在做之前，選擇文字LAB，改變他的字體，從Futura Heavy到Futura Bold

Using the Type Tool (T), select the "A" letter and delete it. To push the "B" letter to the right, you can use the space bar. Then select the Move Tool (V) and reposition the chemistry bottle icon between the letters "L" and "B". Now the logo is finished.

用文字工具選擇字母A，并刪除。為了把字母B推到右邊，你可以按空格鍵。用移動工具把化學瓶定位到字母L和B之間。現在你的logo就完成了

Step 10: Add Social Media Icons

步驟10：添加社會媒體圖標

Download these icons from Noupe and open in Photoshop the social icons that you want to use. I used the rss, twitter, facebook and email icons. Make sure that you use the 48px by 48px images.

從Noupe上下載這些社會媒體圖標，并在PS中打開你需要的。我用的是rss、teitter、facebook和email圖標，請確保你使用的是48px*48px的圖像

To move the icons to your web layout document, select the Move Tool (V) and simply drag them over the document. Name each of these layers and group them (select the layers and hit Ctrl/Cmd + G). Name the group "social media icons".

移動這些圖標到你的網頁布局文檔上，選擇移動工具并拖動他們到你的文檔上。把它們歸并到一個組（選擇這些圖層并按Ctrl/Cmd+G）。命名組為social media icons

Using the Move Tool (V), place the icons in the right hand side of the layout, at a distance of 10px from each other. Take a look at the following image for reference.

用移動工具擺放這些圖標在布局的右手邊，每個圖標之間的距離為10px。就像下圖一樣

These icons look a bit dark for our web layout. To make them brighter, I used some Brightness/Contrast adjustment layers. Go to Layer > New Adjustment Layer > Brightness/Contrast and set the Brightness to 20.

在網頁布局中這些圖標看起來有點暗。把他們弄得亮一點，我要用一些亮度/對比度調整圖層。點擊：圖層 > 新建調整圖層 > 亮度/對比度，亮度設置為20

Put this adjustment layer above the first icon layer, right-click on the adjustment layer and select Create Clipping Mask from the menu that appears. This way, the adjustment layer will only be applied on the layer underneath it. Repeat this process for the other icons as well.

把這個調整圖層移到第一個圖標圖層的上方，在調整圖層上右鍵出現的菜單中選擇創建剪貼蒙版。這意味著該調整圖層僅僅對下面的圖層有效果。對每個圖標都重復該過程

Select the Type Tool (T) and write the word "Subscribe" using a script font. I used Handwriting Dakota and the color #696e70. Then create a new layer (Ctrl/Cmd + Shift + N), select the Brush Tool (B), set the Size to 1px and the Hardness to 100%, and draw an arrow pointing towards the social media icons. Use the same color that you used for the text. Name this layer "arrow".

選擇文字工具并書寫文字subscribe，用一個腳本字體。我用的是Handwriting Dakota（本翻譯教程中用Pristina替代），顏色： #696e70。然后創建一個新層（Ctrl/Cmd+Shift+N）,選擇畫筆工具，設置粗細為1px，硬度為100%，并話一個箭頭指向社會媒體圖標。用的顏色和之前的文本的顏色一樣。命名此圖層為arrow

Step 11: Adding the Navigation Bar Items

步驟11：添加導航欄菜單項

I already mentioned that we would use the bottom area of the desk as a navigation bar. Now we need to add the navigation items and some separators.

我已經提到，我們將把在桌面的底部區域作為一個導航欄。現在，我們需要添加導航菜單項和一些分隔符。

Create a new group (Layer > New > Group) and name it "navigation". Then select the Type Tool (T) and write the name for your navigation menu items. I used the font Futura Light Condensed and the color #313a3e.

創建新組navigation（圖層 > 新建 > 組）。然后選擇文字工具書寫你的導航菜單項。我用的字體：Futura Light Condensed和顏色： #313a3e

Create a new group (Layer > New > Group) and name it "separators". Zoom in so you can see the navigation bar better.

新建組separators（圖層> 新建 > 組），放大導航欄到合適的大小

Select the Line Tool (U), set the Weight to 1px and the color #818b8f. Then hold down the Shift key and draw a straight vertical line from the top of the navigation bar to the bottom. Name this layer "1px line".

選擇直線工具，設置粗細為1px，顏色： #818b8f。然后按住Shift鍵，去畫一條從導航欄頂部到底部的垂直的直線。命名此圖層為1px line

Hit Ctrl/Cmd + J to duplicate this layer. Select the Move Tool (V) and hit the Right Arrow key on your keyboard once to move this layer 1px to the right. Change the color of this new line to #c0c5c8.

按Ctrl/Cmd+J復制該圖層。選擇移動工具并按鍵盤上的右箭頭鍵一次，向右移動圖層1px。更改新圖層的顏色： #c0c5c8

Hold down the Ctrl/Cmd key and select the two line layers. Right-click on one of them and select Convert to Smart Object from the menu. Name this layer "separator". Duplicate this layer as many times as you need and use the Move Tool (V) to put a separator between each of the navigation items.

按住Ctrl/Cmd鍵選擇兩條直線的圖層。在其中一個上右鍵出現的菜單上選擇轉換為智能對象。命名該圖層為separator，復制該圖層你需要的次數，然后用移動工具移動這些分隔符到每兩個菜單項之間

Tip: When you need to duplicate a layer many times, you can select the Move Tool (V), hold down the Alt/Option key, click on the image and drag the cursor to create a copy of that layer. In our case, you can hold down Alt/Option + Shift keys and when you click and drag a copy of the current separator to the right you’ll see that it’s easier to move the new layer sideways and not go up or down.

提示：當你需要復制一個圖層多次的時候，你可以選擇移動工具，按住Alt/Option鍵，點擊圖像并拖動光標去創建該圖層的一個拷貝。在我們的步驟里，你可以按住Alt/Option+Shift鍵，當你點擊并拖動當前分隔符的一個拷貝往右邊的時候，新的圖層更容易橫向移動，而不會向上或向下。

Note: Another advantage of smart objects is that if you edit one smart object, all the copies of that smart object will be updated as well. For example, if you have the separators as shape layers and you want to change their colors, you would have to edit each layer inpidually. By creating one separator, converting it into a smart object and duplicating that smart object as many times as we needed, we can now double-click on the thumbnail of a separator layer, edit the source of the smart object (which contains the two line layers that we converted), save the document and then all the other separator layers will be updated.

注意：智能對象的另一個優點是，如果你編輯一個智能對象，該智能對象所有的副本都將被更新。舉例來說，如果你有若干個分隔符的形狀圖層，你要改變自己的顏色，你就必須單獨編輯每一個圖層。盡可能多的時間，當你創建一個分隔符，把他轉換為智能對象然后復制該智能對象我們需要的次數，我們現在可以雙擊分隔符的縮略圖，編輯源智能對象（其中包含兩個已經轉換的直線的圖層），保存文檔，然后所有其他的分隔符都將被更新。

Step 12: Creating a Search Bar

步驟12：創建一個搜索欄

Create a new group (Layer > New > Group) and name it "search". Select the Rectangle Tool (U) and create a rectangle with the dimensions 260×26px and the color #f4f4f4. Add a 1px Stroke to this rectangle using the color #7f898d.

創建新組search（圖層 > 新建 > 組）。選擇矩形工具創建一個矩形（780，138），尺寸：260px*26px，顏色： #f4f4f4。給矩形添加1px的描邊，描邊的顏色： #7f8989d

Download this set of icons from Smashing Magazine and open the "search.png" image in Photoshop. Move the icon into your first document using the Move Tool (V). Put the icon inside the search bar and use Free Transform (Ctrl/Cmd + T) to change the size of the icon.

從Smashing Magazine上下載set of icons，在PS中打開search.png。用移動工具移動該圖標到你的第一個文檔。擺放你的圖標在搜索欄中，并用自由變形工具（Ctrl/Cmd + T）改變圖標的大小

Select the Type Tool (T) and write "Type and hit Enter to search" inside your search bar. I used the font Helvetica Oblique and the color #848e92.

用文字工具在你的搜索欄中書寫文字Type and hit Enter to search。我用的字體是Helvetica Oblique（用Tahoma替代），顏色： #848e92

Now we’re done with the header. Let’s move on to creating an image slider.

現在我們完成了頭部區域的制作。現在我們開始創建圖片滑動塊

Step 13: Creating an Image Slider Area

步驟13：創建圖像滑動塊

To keep the laboratory look of our layout, we will create an image slider that looks like a white board. Create a new group (Layer > New > Group) and name it "image slider".

為了使我們的布局看起來像實驗室，我們將創建一個圖像滑動塊，看起來像一個白板。創建一個新組image slider（圖層 > 新建 > 組）。

Activate the guides and the grid. Then select the Rounded Rectangle Tool (U), set the Radius to 6px and create a rounded rectangle with the dimension 960×320px. Name this layer "image_slider_bg", right-click on it and select Convert to Smart Object from the menu.

激活參考線和網格。然后選擇圓角矩形工具，設置半徑為6px，創建一個圓角矩形（120，169），尺寸： 960px*320px，顏色： #b0b7ba，命名此圖層為image_slider_bg，右鍵在出現的菜單中選擇轉換為智能對象

Double-click on this layer to open the Layer Style window and use the settings from the following image. The color that I used for Stroke is #818b8f.

雙擊該圖層打開圖層樣式窗口，按照下圖進行樣式設置。描邊的顏色為 #818b8f。

Go to Filter > Noise > Add Noise and use the settings from the image below.

然后點擊：濾鏡 > 雜色 > 增加雜色，按照下圖設置

Activate the grid (Ctrl/Cmd + ‘), select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 30×30px and the color #848d91. Put this square in the upper left corner of the rounded rectangle you created. Name this layer "top left corner".

激活網格（Ctrl/Cmd + `），選擇矩形工具，按住Shift鍵創建一個30px*30px的正方形（120，169），顏色： #848d91。把這個正方形移到剛才創建的圓角矩形的左上角，命名此圖層為top left corner

Duplicate this layer three times and put one square in each corner of the big rounded rectangle. Then hold down the Ctrl/Cmd key, select all the square layers, right-click on one of them and select Create Clipping Mask. Now the squares will be visible only on the surface of the big rounded rectangle. Set the Opacity of these layers to 80%.

復制這個圖層3次，然后把這些正方形移到大的圓角矩形的每個角。按住Ctrl/Cmd鍵，選擇這些正方形的圖層，在其中一個圖層上右鍵，選擇創建剪貼蒙版。現在這些正方形只露出在大的圓角矩形表面上的部分。設置這些圖層的不透明度為80%

其中右上角的坐標（1050，169），左下角的坐標（120，459），右下角的坐標（1050，459）

Activate the grid (Ctrl/Cmd + ‘), select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 940×300px. Take a look at the following image for reference. Name this layer "image_holder".

激活網格（Ctrl/Cmd + `），選擇圓角矩形工具，設置半徑為4px，創建一個圓角矩形，尺寸：940px*300px。就像下圖一樣。命名此圖層為image_holder

Now you can add an image above this layer, right-click on it and select Create Clipping Mask to make it visible only over the "image_holder" layer.

現在你可以增加一個圖像在此圖層上，在之上右鍵選擇創建剪貼蒙版，使得圖像只有在image_holder圖層中的部分才顯示出來

Step 14: Creating Navigation Arrows for the Image Slider

步驟14：給圖像滑動塊添加導航箭頭

Create a new group (Layer > New > Group) and name it "right arrow". Select the Ellipse Tool (U), activate the grid, hold down the Shift key and create a circle with the dimensions 40×40px. Double-click on this layer to open the Layer Style window and use the settings from the following image. For Stroke I used the color #818b8f.

創建新組right arrow（圖層 > 新建 > 組）。選擇橢圓工具，激活網格，按住Shift鍵創建一個圓（1075，329），尺寸：40px*40px，顏色： #c0c6c8。雙擊圖層打開圖層樣式窗口，按照下圖添加樣式。描邊的顏色： #818b8f

Select the Pen Tool (P) and create an arrow shape like you see in the image below. Use the color #656b6e. Name this layer "arrow", double-click on it to open the Layer Style window and use the settings from the following image for Gradient Overlay.

選擇鋼筆工具創建一個如下圖的箭頭形狀。顏色： #656b6e。命名此圖層為arrow，雙擊打開圖層樣式窗口按照下圖設置漸變疊加

Right-click on the "right-arrow" group and select Convert to Smart Object. Hit Ctrl/Cmd + J to duplicate this layer. Then go to Edit > Transform > Flip Horizontal. Name this layer "left arrow", select the Move Tool (V) and move it to the left side of the image slider.

在right arrow組上右鍵選擇轉換為智能對象。按Ctrl/Cmd + J復制該圖層。然后點擊：編輯 > 變換 > 水平翻轉。命名此圖層為left arrow，選擇移動工具移動到圖像滑動塊的左邊（148，306）

Step 15: Creating the Main Content Area

步驟15：創建主內容區域

Create a new group (Layer > New > Group) and name it "content". Create another group inside the first one and name it "services".

創建新組content（圖層 > 新建 > 組），在其中創建另一個新組services

Activate the grid (Ctrl/Cmd + ‘) and the guides (Ctrl/Cmd + ;). Select the Rounded Rectangle Tool (U) and set the Weight to 4px. Then create a square with the dimensions 300×300px and the color #f9f9f9. Leave a distance of 30px between the image slider and this square.

激活網格（Ctrl/Cmd + `）和參考線（Ctrl/Cmd + ;）。選擇圓角矩形工具，設置半徑為4px。然后創建一個正方形（130，520），尺寸：300px*300px，顏色： #f9f9f9。保持圖像滑動塊和這個正方形之間的距離為30px

Name this layer "services_bg", double-click on it to open the Layer Style window and add a 1px Stroke using the color #a5adb1.

命名此圖層services_bg，雙擊打開圖層樣式窗口，添加1px的描邊，描邊的顏色： #a5adb1

In order to save some time later, we can save the layer style that we applied to the "services_bg" layer and use it again whenever we need it.

為了以后節省時間，我們可以保存給services_bg添加的圖層樣式，并在日后需要的時候直接調用。

Open the Styles Panel (Window > Styles). Make sure that the "services_bg" layer is selected and click on the Create new style button from the bottom of the Styles Panel. A new window will appear. Name this style "content area 1px stroke". Leave the Include Layer Effects option checked and click OK. Now, when we need to use this layer style, you can click it from the Styles Panel to apply it to any layer you want.

打開樣式面板（窗口 > 樣式）。確保services_bg圖層選中，然后點擊樣式面板底部的創建新樣式按鈕。一個新的窗口出現。命名此樣式為content area 1px stroke。勾選包含圖層效果，并點擊確定。現在，當我們需要這個圖層樣式，你可以在樣式面板中點擊該樣式添加到你需要的圖層

Select the Rectangle Tool (U) and create a rectangle with the dimensions 300×60px and the color #c2c9cc. Name this layer "top bar" and put it at the top of the white rounded square. Double-click on this layer to open the Layer Style window and use the settings from the following image. For Stroke I used the color #a5adb1 and for Pattern Overlay I used the diagonal stripe pattern that we created in this tutorial.

選擇矩形工具創建一個矩形（130，520），尺寸：300px*60px，顏色： #c2c9cc。命名此圖層為top bar并把它擺放到白色圓角矩形的頂部。雙擊打開圖層樣式窗口，并按照下圖設置樣式。描邊的顏色： #a5adb1，圖案疊加用的是本教程中創建的斜對角線圖案

Right-click on the "top bar" layer and select Create Clipping Mask to make it visible only over the white square

在top bar圖層上右鍵選擇創建剪貼蒙版，只有在白色方塊中的部分才顯示出來

Again, save th

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com