PS網頁設計教程XXI——在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個正方形選區，如下所示

 

Create a new layer (Ctrl/Cmd + Shift + N) and fill the selection with black. Then hide the "Background" layer by clicking on its eye icon.

創建一個新的圖層（Ctrl/Cmd + Shift + N），用黑色填充選區。點擊Background圖層前的眼睛圖標去隱藏該圖層

建議：新建文檔的時候選擇背景色爲透明，然後用鉛筆工具製作如下的圖案比較簡單

 

To create the pattern, go to Edit > Define Pattern and click OK. Now you can close this document.

創建圖案，點擊：編輯 > 定義圖案，然後點擊確定。現在你可以關閉該文檔

 

Step 4: Creating the Navigation Bar

步驟4：創建導航條

 

Create a new group and name it "Navigation". Select the Rectangle Tool (U) and create a rectangle with the height 50px and the same width as your document. Use the color #b8c0c3. Right-click on this layer and select Convert to Smart Object.

創建新組Navigation。用矩形工具創建一個矩形（0，111），高度爲50px，寬度和文檔的寬度一樣，顏色： #b8c0c3。右鍵該圖層選擇轉換爲智能對象

 

Double-click on this layer to open the Layer Style window and use the settings from the following image. Then go to Filter > Noise > Add Noise and add a 0.59% Gaussian Monochromatic noise.

雙擊該圖層打開圖層樣式窗口，按照下圖設置樣式。然後點擊：濾鏡 > 雜色 > 添加雜色。設置數量爲0.59%，高斯分佈，單色。

 

Select the Line Tool (U), set the Weight to 1px and create a horizontal line at the top of your navigation bar using the color #cdd3d7. Name this layer "1px line".

用直線工具，設置寬度爲1px，在你的導航欄的頂部創建一條水平線（0，111），顏色： #cdd3d7。命名圖層爲1px line

 

Duplicate this layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the up arrow key on your keyboard to move this layer 1px upwards. Set the color of the new line to #818b91.

複製該圖層（Ctrl/Cmd + J），用移動工具並按住鍵盤上的上方向鍵，向上移動該圖層1px。設置新線（0，110）的顏色： #818b91

 

Now add two more horizontal lines at the bottom of the navigation bar using the same colors.

現在在導航欄的底部添加更多的水平線，用同樣的顏色。兩條直線的位置爲（0，161）和（0，162）

 

Step 5: Adding the Navigation Menu Items

步驟5：添加導航菜單的菜單項

 

Select the Type Tool (T) and write the name for your navigation menu items. I used the font Helvetica Bold with the size 14pt and the color #ffffff.

Add a drop shadow effect to these text layers using the settings from the image below.

用文字工具書寫你的導航欄菜單的文字。我用的字體：Helvetica Bold，字號：41pt，顏色： #ffffff

 

Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a black rounded rectangle with the dimensions 70px by 26px and the color #1d2d34 over the first navigation menu item. Name this layer "active menu item", put it underneath the text layer and set its opacity to 35%.

用圓角矩形工具，設置半徑爲4px，創建一個黑的圓角矩形（130，124）在導航欄的第一個菜單處，尺寸：70px*26px，顏色： #1d2d34。命名此圖層爲active menu item，把該圖層置於文字圖層的下方，設置不透明度爲35%

 

 

Step 6: Creating a Pattern for the Slider

步驟6：創建滑動欄的圖案

 

Now I will show you a technique for creating a seamless mosaic pattern for the image slider background. Create a new document (Ctrl/Cmd + N) with the dimensions 200px by 200px.

現在，我會告訴你一個技術，創造一個無縫的拼接圖案的滑動欄的背景。新建文檔（Ctrl/Cmd + N），尺寸：200px*200px

 

Hit the "D" key on your keyboard to reset the foreground and background colors to black and white. Create a new layer (Ctrl/Cmd + Shift + N) and go to Filter > Render > Clouds.

按鍵盤上的D鍵，重置前景色爲白色和背景色爲黑色。創建新的圖層（Ctrl/Cmd + Shift + N），然後點擊：濾鏡 > 渲染 > 雲彩 

Right-click on the "Layer 1" layer and select Convert to Smart Object. Then go to Filter > Pixelate > Mosaic and set the Cell Size to 40.

在該圖層上右鍵選擇轉換爲智能對象。然後點擊：濾鏡 > 像素化 > 馬賽克，設置單元格大小爲40

Duplicate the "Layer 1" layer (Ctrl/Cmd + J). Then go to Filter > Other > High Pass and set the radius to 5px. Set the blend mode of this layer to Hard Light. This will make mosaic effect sharper and add some shadow around the squares.

複製該圖層（Ctrl/Cmd + J）。然後點擊：濾鏡 > 其他 > 高反差保留，設置半徑爲5px。設置混合選項爲強光。這將使得馬賽克效果更清晰，在方格的周圍添加一些陰影。

 

Now we will make the mosaic effect even sharper. Create a new layer above all the other ones (Ctrl/Cmd + Shift + N). Then go to Image > Apply Image and click OK. This will create a rasterized image from all the current layers, but keep all the other layers intact. You can also use the shortcut Ctrl/Cmd + Alt/Option + Shift + E.

現在，我們將使馬賽克效果更清晰。創建一個在所有其它層上方的新層（Ctrl / Cmd+ Shift+ N）。然後點擊：圖像 > 應用圖像，在出現的對話框點「確定」。這將從目前所有的層創建一個柵格化圖像，但所有其他層保持不變。您也可以使用快捷鍵Ctrl/Cmd + Alt/Option + Shift + E。

 

Right-click on the layer that you created and select Convert to Smart Object. I usually like to use Smart Object whenever I can so I know what filters I have previously applied and to play around with the filters.

您創建的圖層上單擊鼠標右鍵，選擇轉換爲智能對象。我通常喜歡使用智能對象，是因爲我可以知道以前應用的濾鏡。

 

Now go to Filter > Sharpen > Sharpen. Hit Ctrl/Cmd + F to apply this filter one more time. Two times should be enough for the image to get those nice highlights between squares.

點擊：濾鏡 > 銳化 > 銳化。按Ctrl/Cmd + F應用該濾鏡多次。要使正方形之間出現足夠的亮光的話，兩次就足夠了

Go to Layer > New Adjustment Layer > Brightness/Contrast and use the settings from the following image. Then create a new layer above all the other ones and go to Image > Apply Image to create a rasterized image of all the layers.

點擊：圖層 > 新建調整圖層 > 亮度/對比度，並按照下圖進行設置。然後創建一個新層在其他層的上方，點擊：圖像 > 應用圖像，創建一個所有層的柵格化圖像。

 

To create the first pattern go to Edit > Define Pattern and click OK. In the next steps I will show you how to use this pattern to create a diagonal mosaic pattern. Do not close this document, we will it later.

創建第一個圖案，點擊：編輯 > 定義圖案，並按確定。在接下來的步驟中，我將向您展示如何使用這種圖案創建一個對角線的馬賽克圖案。不要關閉這個文件，我們會在以後步驟裏使用。

Now comes the tricky part – creating the diagonal mosaic pattern. I tried a few different techniques in order to achieve this, but only one was successful and I will explain it to you in the following steps. I am not sure this is the best way to do it, but it does work.

現在到了棘手的部分 - 創建對角線馬賽克圖案。爲了實現這一目標，我嘗試了一些不同的技術，但只有一個是成功的，我會解釋接下來的步驟。我不確定這是最好的方式，但它的確做的很好。

 

Create a new document (Ctrl/Cmd + N) with the dimensions 800px by 800px. Create a new layer (Ctrl/Cmd + Shift + N) and fill it with white. Double-click on this layer to open the Layer Style window and apply the pattern you created at the previous step.

新建文件（按Ctrl / Cmd+ N），尺寸：800x800px。新建圖層（Ctrl / Cmd+ Shift + N），並用白色填充它。雙擊層，打開圖層樣式窗口，應用你在上一步中創建的圖案。

Right-click on the "Layer 1" layer and select Convert to Smart Object. Then go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key and rotate this layer 45°.

在該圖層上右鍵，選擇轉換爲智能對象。然後點擊：編輯 > 自由變換（Ctrl/Cmd + T），按住Shift鍵旋轉該圖層45度

Go back to the document where you created the initial mosaic effect and move the rasterized layer ("Layer 4") into this new document.

返回之前創建的馬賽克效果的文檔，移動最後的柵格化的圖層到本文檔。（可以在圖層上右鍵選擇複製圖層，目標選擇新建的文檔）

 

Right-click on this layer and select Convert to Smart Object. Then use Free Transform (Ctrl/Cmd + T) to rotate this layer 45° as well.

右鍵該圖層，選擇轉換爲智能對象。然後用自由變換，旋轉45度

 

Select the Move Tool (V) and move this layer around to integrate it in the background pattern. I used the darker square from pattern as reference in order to find the right position for this layer. You can also use the arrow keys while having the Move Tool (V) selected in order to move the layer pixel by pixel. In the image below I highlighted the small pattern with red so you can see it.

選擇移動工具（V），將其層左右移動，對齊到背景圖案。我用的是暗方塊的方式式作爲參考，以便找到合適的位置，這一層。您也可以使用移動工具（V）同時用方向鍵，以使圖層一個像素一個像素。在下圖中，我給圖案添加了紅色的顏色疊加，就像你看到的一樣。

 

Tip: to test if the small pattern is integrated in the background pattern, you can make its layer invisible and then visible again. If you don’t see any differences in your image, the layer is in the right position.

提示：測試對齊背景圖案的小圖案，可以使這一層隱藏，然後再次可見。如果您沒有看到任何圖像中的差異，該層是在正確的位置。

 

Hold down the Ctrl/Cmd key and click on the thumbnail of "Layer 2" to create a selection of the small pattern. Then activate the Rulers (Ctrl/Cmd + R) and drag some guides from the rulers towards each corner of the selection, as you see in the image below.

按住Ctrl/Cmd鍵單擊該圖層的縮略圖，去創建一個小的圖案的選區。然後**標尺（Ctrl/Cmd + R），並從標尺上拖動一些參考線緊挨着選區的每一個角，如下圖所示

Now the square that was formed using the guides will be our new pattern. Hit Ctrl/Cmd + D to deselect. Then delete the layer of the small pattern. We don’t need it anymore.

現在參考線包圍的正方形會是我們新的圖案。按Ctrl/Cmd + D取消選擇。然後刪除小圖案的圖層。我們不再需要它了。

 

Select the Rectangular Marquee Tool (M) and select the square between guides.

用矩形選框工具選擇參考線之間的正方形

With the "Layer 1" layer selected go to Edit > Copy (Ctrl/Cmd + C). Create a new document (Ctrl/Cmd + N). Photoshop will use the dimensions of the selection you made as dimensions for the new document. Click OK and paste (Ctrl/Cmd + V) the image you selected.

在該圖層選中的情況下，點擊：編輯 > 複製（Ctrl/Cmd + C）。創建新文檔（Ctrl/Cmd + N）。PS會用你選區的尺寸作爲新文檔的尺寸。點去頂並粘貼（Ctrl/Cmd + V）你選擇的圖像

 

Now go to Edit > Define Pattern, give your pattern a name and click OK.

現在點擊：編輯 > 定義圖案，給你的圖案一個名字，並點確定

 

Step 7: Creating the Image Slider Background

步驟7：創建圖片滑動欄的背景

 

Now we will apply the pattern to the image slider background. Create a new group and name it "Image Slider". Select the Rectangle Tool (U) and create a rectangle with the height 410px and the same width as your document. Use the color #81aaba. Name this layer "slider_bg", right-click on it and select Convert to Smart Object.

現在我們要給圖片滑動欄添加背景圖案。創建新組Image Slider。用矩形工具創建一個矩形（0，163），高度爲410px，寬度和你的文檔一致，顏色： #81aaba。命名該圖層爲slider_bg，右鍵選擇轉換爲智能對象。

 

Double-click on this layer to open the Layer Style window and use the settings from the following image. Then go to Filter > Noise > Add Noise and add a 0.6 Gaussian Monochromatic noise.

雙擊該圖層打開圖層樣式窗口按照下圖設置樣式。然後點擊：濾鏡 > 雜色 > 添加雜色，設置數量爲0.6%，高斯分佈，單色

 

Use the Line Tool (U) to create two horizontal lines with the weight 1px at the bottom of the image slider background. For the first line use the color #b8c8ce and for second one use #849ba4.

用直線工具在圖片滑動欄背景的底部創建兩條寬度爲1px的直線。第一條直線（0，571）的顏色： #b8c8ce，第二條直線（0，572）的顏色： #849ba4

 

Step 8: Creating the Image Slider

步驟8：創建圖像滑動欄

 

Create a rectangle with the dimensions 620px by 340px and the color #d2dade. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #819098.

創建一個矩形（450，185），尺寸：620px*340px，顏色： #d2dade。雙擊該圖層打開圖層樣式窗口，按照下圖設置樣式。描邊的顏色： #819098。命名該圖層爲Border

 

Create a new rectangle with the dimensions 600px by 320px and put it in the middle of the previous rectangle that you created. Name this layer "image_holder", double-click on it to open the Layer Style window and use the settings from the following image for Inner Glow.

新建一個矩形（460，195），尺寸：600px*320px，並把它放在之前的創建的矩形的中間。命名此圖層爲Image_Holder，雙擊打開圖層樣式窗口，按照下圖設置內發光的樣式

 

Open an image in Photoshop that you want to display in your image slider. Use the Move Tool (V) to move it into your initial document and put it over the "image_holder" layer.

在PS中打開你想顯示在圖片滑動欄中的圖片。用移動工具移動到你的文檔，並把它放在Image_Holder圖層的上方

 

Name this layer "image", right-click on it and select Create Clipping Mask to make it visible only over the area of the "image_holder" layer.

命名此圖層Image，在其上右鍵並選擇創建剪貼蒙版，是之只顯示在Image_Holder圖層上方的部分

Now we will create a shadow at the bottom of the image slider. Select the Ellipse Tool (U), hold down the Shift key and create a black circle in the middle of the bottom edge of the image slider (1).

現在我們要在圖片滑動欄底部的創建陰影。用橢圓工具，按住Shift鍵創建一個黑色的圓在圖片滑動欄底邊的中間

 

Name this layer "shadow", right-click on it and select Convert to Smart Object. Then go to Filter > Blur > Gaussian Blur and set the Radius to 3px. Then go to Edit > Free Transform, hold down the Alt/Option + Shift keys and drag the right edge of the layer until it reaches the right edge of the image slider. Take a look at the following image for reference (2).

命名此圖層爲shadow，右鍵選擇轉換爲智能對象。然後點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑爲3px。然後點擊：編輯 > 自由變換，按住Alt/Option + Shift鍵拖動右邊的邊直到圖片滑動欄的右邊。可以參考下面的圖片

 

Put this layer underneath the "border" layer and set its opacity to 15% (3, 4).

把該圖層移到Border圖層的下方，設置不透明度爲15%

 

Now we will create some radio buttons to indicate how many images does the slider contain and which is the active one. Create a new group and name it "radio buttons". Then select the Ellipse Tool (U), hold down the Shift key and create a circle shape with the color #f6f6f6 and the diameter 10px. Name this layer "radio button".

現在，我們將創建一些圓按鈕來表示滑動欄包含多少張圖像，和當前是哪一張。創建一個新組radio buttons。然後用橢圓工具（U），按住Shift鍵並創建一個圓，顏色：#f6f6f6，直徑10px的。命名此層爲radio button。

 

Duplicate this layer (Ctrl/Cmd + J) a few times and arrange your circle shapes as you see in the following image.

複製該圖層（Ctrl/Cmd + J）幾次，並按照下圖擺放這些圓

 

Now create another circle in the middle of the first one using the color #8bb2bf and the diameter 6px. Name this layer "active".

在第一個圓的中間創建另一個圓，顏色： #8bb2bf，直徑：6px。命名此圖層爲active

 

Step 9: Creating the Image Slider Arrows

步驟9：創建圖片滑動欄的箭頭

 

Create a new group and name it "right arrow". Then select the Ellipse Tool (U), hold down the Shift key and create a circle with the color #e7edef and the diameter 45px. Name this layer "circle" and put it in the right side of the image slider. Double-click on this layer to open the Layer Style window and use the settings from the following image.

創建新組right arrow。然後選擇橢圓工具（U），按住Shift鍵並創建一個圓，顏色： #e7edef，直徑：45px。命名此層爲circle，並把它放在圖像滑動欄的右側。雙擊層打開圖層樣式窗口，按照下圖設置圖層樣式。

描邊的顏色： #95a2a8

 

Copy this symbol "»" go back to Photoshop, select the Type Tool (T) and paste it. I used the font Gotham Bold with the size 32pt and the color #727e84. Put this arrow in the middle of the circle.

複製符號»回到PS，選擇文字工具（T），並將其粘貼。我使用的字體：Gotham Bold，字號：32pt，顏色： #727e84。把這個箭頭擺放在圓的中間。

Duplicate the "right arrow" group (right-click on it and select Duplicate Group). Then go to Edit > Transform > Flip Horizontal. Put this new group in the left side of the image slider and name it "left arrow".

複製right arrow組（在其上右鍵選擇複製組），然後點擊：編輯 > 變換 > 水平翻轉。把新組擺放到圖片滑動欄的左邊，命名爲left arrow

 

Step 10: Adding Content for the Image Slider

步驟10：添加圖像滑動欄的內容

 

Now we will create an area for the description of the current image presented in the slider. Select the Rounded Rectangle Tool (U) and create a rectangle with the width 300px and the color #2c5a6b. The height depends on how much content you will include in this area. Name this layer "text bg" and set its opacity to 30%.

現在，我們將創建一個區域來描述當前圖像滑動塊。選擇圓角矩形工具（U）創建一個圓角矩形（130，185），寬度：300px，顏色： #2c5a6b。高度取決於包括多少內容。命名此層text bg，並設置其不透明度爲30％。

 

Select the Type Tool (T) and add some content in this area. For the headline I used the font Futura Bold with the size 26pt and the color #ebebeb. For the block of text I used Helvetica Regular with the size 15pt and the color #ffffff. Add a Drop Shadow effect to these text layers using the settings from the image below.

用文字工具在此區域中添加一些內容。對標題文字，我用字體：Futura Bold，字號：26pt，顏色： #ebebeb。對文本塊，字體：Helvetica Regular，字號：15pt，顏色： #ffffff，按照下圖對這些文本添加投影的圖層樣式。

 

Step 11: Create Web Buttons

步驟11：創建網頁按鈕

 

Create a new group and name it "Description". This area can be used for a short bio of the freelancer. Select the Type Tool (T) and add a short paragraph of text. I used the font Helvetica Bold with the size 16pt and the color #555555. I also centered the text and set the leading (the distance between the lines of text) to 25pt from the Character panel (Window > Character).

創建新組Description。這個區域可以用來做自由職業者的很短的說明。選擇文字工具（T），並添加一段簡短文字。用字體：Helvetica Bold，字號：16pt，顏色： #555555。我設置行間距（文本行之間的距離）爲25pt，從字符面板（窗口 > 字符）。

Now we will add some call-to-action buttons underneath the paragraph of text. Create a new group and name it "buttons". Then select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the color #bbbbbb, as you see in the image below. Name this layer "button", double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #a7a7a7.

現在我們要添加一些命令按鈕在文本段落的下方。創建新組buttons。然後用圓角矩形工具（430，662，160，42），設置半徑爲4px，創建一個圓角矩形，顏色： #bbbbbb，就像你看到的一樣。命名該圖層爲button，雙擊打開圖層樣式窗口按照下圖設置圖層樣式。描邊的顏色： #a7a7a7

 

Select the Type Tool (T) and add some text to your button such as "View Portfolio »". I used the font Helvetica Bold with the size 15pt and the color #fafafa.

用文字工具在按鈕上添加View Portfolio »。字體：Helvetica Bold，字號：15pt，顏色： #fafafa

並對文字添加投影樣式

Create another button using the same settings, but change its color to #7fb6cd and the Stroke effect color to #6799ad.

創建另一個按鈕（610，662），用同樣的設置，不過顏色改爲 #7fb6cd，描邊效果的顏色爲 #6799ad

 

Step 12: Creating a Separator

步驟12：創建分割符

 

Create a new group and name it "separator". Select the Line Tool (U), set the Weight to 1px and create a horizontal line with the width 940px and the color #c8c8c8. Name this layer "1px line".

創建新組separator。用直線工具，設置粗細爲1px，創建一條水平線（130，744，940，1），寬度爲940px，顏色： #c8c8c8，命名此圖層爲1px line

 

Duplicate this layer (Ctrl/Cmd + J), move it one pixel upwards and change its color to #f2f2f2.

複製該圖層（Ctrl/Cmd + J），把它上移一個像素（130，743，940，1），更改顏色爲 #f2f2f2

 

Now we will add a gradient to the separator. Select the Rectangular Marquee Tool (M) and create a selection above the two horizontal lines with the dimensions 940px by 18px. Create a new layer and fill the selection with black. Name this layer "gradient" and hit Ctrl/Cmd + D to deselect (1).

現在我要給分隔符添加漸變。選擇矩形選框工具創建一個選區在兩條水平線的上方，尺寸：940px*18px。創建一個新的圖層，用黑色填充選區。命名此圖層爲gradient，按Ctrl/Cmd + D取消選擇

 

Double-click on the "gradient" layer to open the Layer Style window and use the settings from the following image (2).

雙擊打開gradient圖層打開圖層樣式窗口，按照下圖設置圖層樣式

 

Add a mask to the "separator" group (Layer > Layer Mask > Reveal All). Then select the Gradient Tool (G), hold down the Shift key and drag a black to transparent gradient in the left side of the separator to make it fade out. Do the same for the right side of the separator. Take a look at the following image for reference.

給separator組添加蒙版（圖層 > 圖層蒙版 > 顯示全部）。然後選擇漸變工具，按住Shift鍵拖動一個黑色——透明的漸變在分隔符的左邊，使其看起來像是淡出。做同樣的操作在分隔符的右邊。看看下面的圖片，以供參考。

 

Then right-click on the "separator" group and select Convert to Smart Object.

在separator組上右鍵選擇轉換爲智能對象

 

Step 13: Creating the "Services" Area

步驟13：創建Services區域

 

Create a new group and name it "Main Content". We’ll design this area using tabs to showcase services that a freelancer might offer to their clients.

創建新組Main Content。我們會設計這個領域，用標籤來展示一個自由職業者，可能會爲他們的客戶提供的服務。

 

Select the Rectangle Tool (U) and create a white rectangle with the dimensions 940px by 300px. Name this layer "main content bg" and add a 1px stroke effect to it using the color #bfc5c8.

用矩形工具創建一個白色的矩形（130，795），尺寸：940px*300px。命名此圖層爲main content bg，添加1px的描邊，描邊的顏色： #bfc5c8

Create a new group and name it "tabs". Select the Rectangle Tool (U) and create a rectangle with the height 44px at the top of the white rectangle using the color #b5bdc1. Name this layer "title bar", double-click on it to open the Layer Style window and use the settings from the following image.

創建新組tabs。選擇矩形工具在白色矩形的頂部創建一個矩形（130，795），高度爲44px，寬度爲940px，顏色： #b5bdc1。命名此圖層爲title bar。雙擊該圖層打開圖層樣式。按照下圖設置圖層樣式

 

Select the Rectangle Tool (U) again and create a rectangle with the height 4px and the color #9da5a9 at the top of the title bar. Name this layer "top line".

再次用矩形工具在title bar的頂部創建一個矩形（130，791），高度爲4px，寬度爲940px，顏色： #9da5a9.命名此圖層爲top line

Select the Rectangle Tool (U) and create a white rectangle, as you see in the following image. This will be the active tab. Make sure this rectangle does not go over the "top line" layer and the stroke from the left side of the big white rectangle.

用矩形工具創建一個白色的矩形（131，795，219，40），就像你看到的下圖。這會是活動的選項。確保這個矩形沒有遮住top line圖層和大白色矩形左邊的描邊

 

Select the Type Tool (T) and add the name of the service you want to display in this area. In my case, I put "Web Design" using the font Futura Bold with the size 17pt and the color #9ba3a8. I also added a Drop Shadow effect to this text layer.

用文字工具添加你想顯示在其中的內容。我的選擇，我用Web Design，字體：Futura Bold，字號：17pt，顏色： #9ba3a8。我也給文字圖層添加投影的效果

Download this set of icons and open the .PSD file in Photoshop. Then move an icon that suits the name of the service into your initial document. I used the iMac icon. Put the icon in front of the service name, double-click on its layer and use the settings from the following image. The gradient that I used is from #b5bdc1 to #a1aab0.

下載該圖標集，並在PS中打開.PSD文件。然後移動複合我的服務名字的圖標到我的文檔上。我用的是iMac圖標。把圖標擺放在服務名字的前面，雙擊打開該圖層按照下圖設置樣式，漸變的顏色我用的是從 #b5bdc1到 #a1aab0。

 

Tip: to select the icon that you want without having to look through all the layers, select the Move Tool (V) and from the drop-down menu from the option bar above your image select ‘Layer’. Now hold down the Ctrl/Cmd key and click on the icon that you want to use. The layer of that icon will be automatically selected and you can move it into your web layout document.

提示：選擇你想要的圖標，而無需翻閱所有的層，選擇移動工具（V），從圖像上方的選項欄中的下拉菜單中選擇「層」。現在按住Ctrl / Cmd的鍵，然後單擊要使用的圖標層，該圖標將被自動選擇，您可以將它移動到您的網頁佈局文件。

Select the Type Tool (T) and add the name of other services to the title bar, such as "web development" or "iPad/iPhone apps". Use the same font that you used for the first service name (in my case Futura Bold), but change the color to white. Then add a Drop Shadow effect to these text layers using the settings from the image below.

用文字工具在標題欄上添加其他服務的名字，就像web development或iPad/iPhone apps。用和第一個服務名字相同的字體（我的選擇是Futura Bold），不過改顏色爲白色。然後按照下圖添加投影樣式給這些文字圖層。

Now add some icons for these services from the icons pack you downloaded earlier. Use the same layer style that you used for the first icon, but change the gradient colors to #f8f8f8 and #f0f0f0.

現在給這些服務添加一些圖標，這些圖標是之前你下載的。用和第一個圖標的同樣的圖層樣式，不過漸變顏色改爲 #f8f8f8和 #f0f0f0。

 

Step 14: Adding the Content to the "Services" Area

步驟14：給Services區域添加內容

 

We will split the content for the "web design" service into two columns: "about" and "case studies". Create a new group and name it "column 1". Select the Type Tool (T) and write the word "About". I used the font Futura Book with the size 19pt and the color #9ba3a8.

我把web design服務的內容分成兩列：about和case studies。新建組column 1.用文字工具書寫文字About。我用的字體：Futura Book（用Frutiger LT 75 Black代替），字號19pt，顏色： #9ba3a8

 

Download this iMac vector and open the .AI file in Illustrator. Select the iMac using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop and paste it as smart object (Ctrl/Cmd + V). Name this layer "imac" and use Free Transform (Ctrl/Cmd + T) to change its size. Take a look at the following image for reference.

下載這個iMac矢量圖，並在Illustrator中打開.AI文件。用選擇工具選擇iMac，複製它（Ctrl/Cmd + C），回到PS並粘貼爲智能對象（Ctrl/Cmd + V）。命名此圖層爲iMac，並用自由變換（Ctrl/Cmd + T）改變它的大小。看看下面的圖片，以供參考。

Select the Rectangle Tool (U) and create a rectangle over the computer screen. Name this layer "image_holder". Then open in Photoshop an image that you want to display on the screen and move it into your initial document using the Move Tool (V). Name this layer "image", put it over the screen, right-click on it and select Create Clipping Mask.

用矩形工具創建一個矩形覆蓋計算機圖像的屏幕。命名此圖層爲image_holder。在PS中打開你想顯示在屏幕中的圖像，用移動工具移到你的文檔。命名此圖層爲image，把它移到屏幕的上方，右鍵選擇創建剪貼蒙版。

Select the Type Tool (T) and add a paragraph of text next to the image. I used the font Helvetica Regular with the size 13pt and the color #333333. Set the width of this text layer to 460px. Also, set the leading to 20pt from the Character panel to make the text more readable.

選擇文字工具（T）和添加圖片旁邊的文字段。我用字體：Helvetica，字號：13pt，顏色：#333333。將這個文本層的寬度爲460像素。另外，設置行間距爲20pt，使文本更具可讀性。

 

Now we will create a call-to-action button for the "services" area. First, select the Rounded Rectangle Tool (U), set the Radius to 5px and create a rounded rectangle with the dimensions 600px by 50px and the color #f3f3f3. Name this layer "button border", double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #d1d1d1.

現在我要給Services區域創建一個命令按鈕。首先，選擇圓角矩形工具，設置半徑爲5px，創建一個圓角矩形（150，1015），尺寸：600px*50px，顏色： #f3f3f3。命名此圖層爲button border，雙擊圖層打開圖層樣式窗口，並按照下圖設置圖層樣式。描邊樣式用的顏色： #d1d1d1

Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 586px by 36px and the color #7fb6cd in the middle of the gray rectangle. Name this layer "button", double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #6698ad.

用圓角矩形工具，設置半徑爲4px，創建一個圓角矩形，尺寸：586px*36px，顏色： #7fb6cd，在灰色矩形的中間。命名此圖層爲button，雙擊打開圖層樣式窗口，按照下圖設置樣式，描邊樣式用的顏色： #6698ad

Select the Type Tool (T) and add some text to your button. I used the font Helvetica with the size 17pt and the color #fafafa. Add a Drop Shadow effect to this layer using the settings from the image below.

用文字工具在按鈕上添加一些文本。字體：Helvetica，字號：17pt，顏色： #fafafa。按照下圖添加投影的圖層樣式

 

Step 15: Designing an Area for Case Studies

步驟15：設計Case Studies區域

 

Create a new group and name it "column 2". Select the Type Tool (T) and write the words "Case Studies". I used the font Futura Book with the size 19pt and the color #9ba3a8.

新建組column 2。用文字工具添加文字Case Studies，我用的字體：Futura Book（用Frutiger LT 75 Black代替），字號：19pt，顏色： #9ba3a8

 

Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 80px by 80px and the color #f7f7f7. Name this layer "border", double-click on it to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #a3b2b9.

用矩形工具，按住Shift鍵創建一個正方形（770，885），尺寸：80px*80px，顏色： #f7f7f7。命名此圖層爲border，雙擊打開圖層樣式窗口，並按照下圖設置樣式。描邊的顏色： #a3b2b9

Create another square with the dimensions 70px by 70px in the middle of the "border" square shape. Name this layer "image_holder". Then open an image in Photoshop that you want to display in this area and move it into your initial document. Name this layer "image", put it over the "image_holder" layer, right-click on it and select Create Clipping Mask.

在border正方形中間創建另一個正方形（775，890），尺寸：70px*70px。命名此圖層爲image_holder。然後在PS中打開你想顯示的圖片，並移到你的文檔。命名此圖層image，把它擺放到image_holder圖層的上方，右鍵選擇創建剪貼蒙版

 

Hold down the Ctrl/Cmd key, select the "border", "image_holder" and "image" layers, and duplicate them five times (to duplicate these layers drag them over the "Create a new layer" button from the bottom of the Layers panel). Then arrange all your images as you see in the following image.

按住Ctrl/Cmd鍵，選擇border，image_holder和image圖層，並且複製他們5次（爲了複製這些圖層，拖動它們到圖層面板底部的創建新圖層按鈕）。擺放你們的圖像按照下圖所示。

這六個方塊的位置分別是（770，885）、（870，885）、（970，885）、（770，985）、（870，985）、（970，985）

 

Step 16: Creating the "Portfolio" Area

步驟16：創建Portfolio區域

 

Create a new group and name it "Portfolio". Then create a background for this area just like you did for the "services" section.

創建新組Portfolio。然後創建該區域的背景，就像你創建的Services區域一樣

 

Make this area 620px wide and 280px high. Copy the colors and layer styles for the background, title bar and top line from the "services" area. Then add a headline for this area and an icon.

這個區域有620px寬，280px高，白色矩形的位置（130，1128），從Services區域複製Background、title bar、top line的顏色和圖層樣式。然後添加這個區域的標題和圖標

Now we will create a highlight for the title bar. Select the Line Tool (U), set the Weight to 1px and create a horizontal white line at the bottom of the title bar. Leave a distance of 1px between the bottom edge of the title bar and this layer (1).

現在，我們將創建的標題欄的一大亮點。選擇直線工具（U），粗細設置爲1px，並在標題欄的底部創建水平白線（130，1166）。標題欄的底邊和本層之間的距離爲1px。

 

Add a mask to this layer (Layer > Layer Mask > Reveal All). Select the Gradient Tool (G), hold down the Shift key and drag a black to transparent gradient in the left side of the white line to make it fade away. Do the same for the right side of the line. Name this layer "highlight" and set its opacity to 70% (2).

添加蒙版層（圖層 > 圖層蒙版 > 顯示全部）。選擇漸變工具（G），按住Shift鍵並拖動一個黑色到透明的漸變在白線的左邊，使其消失。該直線的右側做相同的步驟。命名此層爲highlight，並設置其不透明度爲70%。

Now we will add some images for the latest projects and a short description of each project. Add an image like the ones you created for the "case studies" area.

現在我們將添加一些最新項目的圖片，每個項目的簡短說明。像您創建的case studies區域一樣添加圖像。

 

Select the Type Tool (T) and add some text next to it. For the headline I used the font Futura Book with the size 17pt and the color #9ba3a8. For the paragraph of text I used the font Helvetica Regular with the size 13pt and the color #9ba3a8. Also, set the leading for the paragraph to 18pt from the Character panel.

選擇文字工具（T），並在它旁邊添加一些文字。標題的字體：Futura Book（用Frutiger LT 75 Black代替），字號：17pt，顏色： #9ba3a8。對於一段文字，字體：Helvetica Regular ，字號：13pt，顏色： #9ba3a8。同時，在字符面板中設置行間距爲18pt。

 

The width of this project area should be 280px. Put all these layers inside a group (Ctrl/Cmd + G) and name it "project #1". Duplicate this group three times and arrange them as you see in the image below.

本項目區的寬度是280px。把所有這些層（按Ctrl / Cmd+ G）歸爲一組，並將其命名爲project #1。重複此組三次，並按照下圖擺放他們。

四個內容塊的正方形的位置分別是（150，1188）、（450，1188）、（150，1298）、（450，1298）

 

Step 17: Creating the "Blog" Area

步驟17：創建Blog區域

 

Create a new group and name it "Blog". Then create a content background just like you did for the "portfolio" section. Add a headline in the title bar and a suitable icon from the icons pack you downloaded.

創建新組Blog。創建內容背景，就像你之前做的Portfolio區域一樣。在標題欄添加一個頭線，和合適的圖標之前你下載中的。

該區域的白色背景的矩形的位置爲（770，1128，300，280）

 

Select the Type Tool (T) and add a couple of posts to this area using the same fonts and colors that you used for the projects in the "portfolio" area. For the "Continue reading »" links I used the color #7fb6cd.

選擇文字工具（T），並添加一對博客，這方面使用的字體和顏色和之前你使用的Portfolio區域中一樣。對於Continue reading »鏈接，顏色： #7fb6cd。

Now we will create a dashed line pattern which we will use for a horizontal separator. First, create a new document (Ctrl/Cmd + N) with the dimensions 10px by 1px.

現在，我們將創建一個虛線的圖案，用在一個水平分隔上。首先，創建一個新文件（Ctrl / Cmd+ N），尺寸：10px*1px。

 

Create a new layer (Ctrl/Cmd + Shift + N) and use the Rectangular Marquee Tool (M) to create a selection with the dimensions 6px by 1px. Fill this selection with black.

創建一個新層（Ctrl / Cmd+ Shift + N），使用矩形選框工具（M）創建一個選區，尺寸：6px*1px。用黑色填充選區。

 

Hide the Background layer and go to Edit > Define Pattern. Give your pattern a name and click OK. Now you can close this document.

隱藏背景層，點擊：編輯 > 定義圖案。給你的圖案的名稱，然後單擊確定。現在，您可以關閉此文件。

 

Go to your initial web layout document, select the Line Tool (U) and create a horizontal line with the dimensions 260px by 1px. Set the Fill of this layer to 0% and the Opacity to 20%.

轉到您的網絡佈局文檔，選擇直線工具（U）創建一個水平線（790，1277），尺寸：260px*1px。設置該圖層的填充爲0％，不透明度爲20％。

 

Double-click on this layer to open the Layer Style window and use the settings from the following image for Pattern Overlay.

雙擊層打開圖層樣式窗口，並按照下圖設置圖案疊加樣式。

 

Step 18: Creating the Footer

步驟18：創建頁腳

 

Create a new group and name it "Footer". Then duplicate the "separator" layer from the "Description" group and move it to the "Footer" group. Use the Move Tool (V) to move this layer underneath the "portfolio" and "blog" areas.

創建新組Footer。然後複製Description組中的separator圖層，並移到Footer組。用移動工具移動該圖層到Portfolio和blog區域的下方

Now we will create an area for the Twitter feed. Create a new group and name it "recent tweets".

現在我們要創建一個Twitter feed區域。創建新組recent tweets

 

Move the bird icon from the icons pack you downloaded into your web layout document. Right-click on this layer and select Clear Layer Style. Then double-click on it to open the Layer Style window and use the settings from the following image. For the gradient I used the colors #8b8b8b and #c7c7c7.

移動之前下載的圖標集中的鳥的圖標到你的網頁佈局中。在該圖層上右鍵選擇清除圖層樣式。然後雙擊打開圖層樣式窗口按照下圖設置樣式。漸變填充用的顏色分別是： #8b8b8b和 #c7c7c7

 

Select the Type Tool (T) and write "Recent Tweets" next to the icon. I used the font Futura Bold with the size 15pt and the color #585858.

用文字工具書寫Recent Tweets在圖標的右側。字體：Futura Bold，字號：15pt，顏色： #585858

Select the Type Tool (T) and add a couple of tweets to this area. Make sure that the width of the text is 300px. I used the font Helvetica Regular with the size 12pt and the color #333333. For the links I used the color #7fb6cd.

用文字工具添加一對tweets在這個區域。確保文本的寬度爲300px。我用的字體：Helvetica Regular，字號：12pt，顏色： #333333；鏈接的顏色： #7fb6cd

 

I also added separators for the tweets using the Line Tool (U). I created two lines for each separator using the colors #c8c8c8 and #fefefe.

我也用直線工具給tweets添加分隔符。我給每條分隔符創建兩條直線，顏色分別是 #c8c8c8和 #fefefe

一共四條直線，分別是（130，1515，300，1）、（130，1516，300，1）、（130，1615，300，1）、（130，1616，300，1）

Add a button underneath the tweets that reads "Follow us »". Style this button just like the "Work With Me" button from the "description" area.

添加一個按鈕（131，1724，100，30）在tweets的下方，文字Follow us »。這個按鈕的樣式就像Description區域中的Work with me按鈕

 

Step 19: Creating the "About" Area

步驟19：創建About區域

 

Create a new group and name it "about". Then add an icon from the icons pack you downloaded. Copy the layer style from the "bird icon" layer and paste it to this layer.

創建新組About。添加之前下載的圖標集中的一個圖標，複製bird icon圖層的圖層樣式，並粘貼到本圖層樣式

 

Select the Type Tool (T) and write "About" next to the icon using the same font and color that you used for "Recent Tweets" headline.

用文字工具書寫About在圖標的右側，用和Recent Tweets相同的字體和顏色

 

Now add a paragraph of text that is 300px wide.

現在添加一段文字，寬度爲300px

 

Step 20: Creating a Contact Form

步驟20：創建聯繫表單

 

Create a new group and name it "contact". Then add the envelope icon from the icons pack you downloaded. Copy the layer style from the "bird icon" layer and paste it to this layer.

創建新組contact。添加之前下載的圖標集中的郵件圖標，複製bird icon圖層的圖層樣式，並粘貼到本圖層樣式

 

Select the Type Tool (T) and write "Contact" next to the icon using the same font and color that you used for "Recent Tweets" and "About" headlines.

用文字工具書寫Contact在圖標的右側，用和Recent Tweets和About相同的字體和顏色

 

Select the Rectangle Tool (U) and create the rectangles of the contact form using the color #f7f7f7. Add a 1px Stroke effect to these layers using the color #8c9295. Then select the Type Tool (T) and write inside each box what it represents. I used the font Helvetica Regular with the size 13pt and the color #676f73.

用矩形工具給聯繫表單創建一些矩形，顏色： #f7f7f7。添加1px的描邊樣式，顏色： #8c9295。然後用文字工具在每個矩形中書寫其代表意義。我用的字體：Helvetica Regular，字號：13pt，顏色： #676f73

Name對應的矩形爲（770，1514，220，36）、Email對應的矩形爲（770，1560，220，36）、Subject對應的矩形爲（770，1606，220，36）、Message對應的矩形爲（770，1652，299，130）

 

Create a "Send" button underneath the contact form just like you created the "Follow us" button from the "Recent tweets" area.

在聯繫表單的下方創建Send按鈕（771，1792，80，30），就像你在Recent Tweets區域中的Follow us按鈕一樣

 

Step 21: Adding Copyright Information

步驟21：添加版權信息

 

Create a new group and name it "Copyright". Duplicate the "separator" layer from the "Footer" group and move it into the "Copyright" group.

新建組Copyright。從Footer組複製separator圖層，並移到Copyright組

 

Flip this layer vertically by going to Edit > Transform > Flip Vertical. Use the Move Tool (V) to move this layer underneath the footer area.

垂直翻轉該圖層，點擊：編輯 > 變換 > 垂直翻轉。用移動工具把該圖層移到Footer區域的下方

 

Select the Type Tool (T) and write a copyright statement. I used the font Helvetica Regular with the size 12pt and the color #5a5a5a.

用文字工具添加一些版權信息。字體：Helvetica Regular，字號：12pt，顏色： #5a5a5a

 

最後完成的作品

 

後記：

本教程是非常詳細的教程。特色主要有兩點，一是斜紋圖案的製作，二是選項卡的製作，這在其他的教程中不常見的

    本文轉自萬倉一黍博客園博客，原文鏈接：http://www.cnblogs.com/grenet/archive/2012/12/24/2820473.html，如需轉載請自行聯繫原作者