PS網頁設計教程IV——如何在Photoshop中創建一個專業博客網站佈局

向Talk-Mania網站致敬。一年前，在該網站上看過許多不錯的網頁設計教程。一年後，再回頭想看看有沒有什麼新的教程的時候，驀然發現該網站已經打不開了。也許是關閉了，也許是改了網站名了。幸好，去年本人還是下載保存了幾個教程，本教程就是其中之一。也希望能看到更多的PS網頁設計教程的網站，以及更多優秀的設計。

 

約定：

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

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

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

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

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

 

In this tutorial I will show you how to create a professional blog web layout in Photoshop.

在本教程裏，我將展示如何在Photoshop中創建一個專業博客網站佈局。

 

We will use the 960 Grid System to create the web layout. Download the archive file from the site, unzip it and open the "960_grid_12_col 2.psd" file from the "photoshop" folder.

我將用960 Grid System創建網站佈局，從站點上下載該文件，解壓後從photoshop文件夾打開960_grid_12_col 2.psd。

由於Talk-Mania網站已經無法訪問，再加上該PSD實際上是一個定位輔助文件，故本譯文就沒有用該文件。

 

Step 1 
Increase the size of your document by going to Image > Canvas Size. Use the settings from the following image. Then select the Paint Bucket Tool (G) and fill the background with the color #f6f0e2.

步驟1

從菜單：圖像 > 畫布大小，在增加你的文檔的大小。使用如下的圖中的配置，然後選擇油漆桶工具，給文檔添加背景顏色： #f6f0e2

由於沒有打開PSD，因此本步驟就變成新建一個文檔，尺寸：1200*1500px。用油漆桶工具給文檔添加背景顏色： #f6f0e2

結果如下：

 

Step 2 
Select the Rectangle Tool (U) and create a white rectangle with the width 940px from the top of your document to the bottom. Leave a distance of 30px from the bottom edge of your document. Name this layer "content bg", double-click on it to open the Layer Style window and add a 1px stroke using the color #ded6c4.

步驟2

在你的文檔，用矩形工具從頂部到底部創建一個寬940px的白色矩形（130，0，940，1470），距離底邊20px。命名該圖層爲content bg，雙擊該圖層打開圖層樣式對話框，對該矩形添加一個描邊的樣式，寬度1px，顏色： #ded6c4

 

 

Step 3 - Creating the header 
Click on the 'Create a new group' button from the bottom of the Layers panel to create a new group and name it "header". 
Select the Rectangle Tool (U) and create a rectangle with the height 10px at the top of your document using the color #aa915c. Name this layer "top bar".

步驟3-創建頭部

在圖層面板的底部單擊‘創建新組’按鈕，創建一個新組，命名爲header。

用矩形工具在文檔的頂部創建10px高的矩形（0，0，1200，10），顏色： #aa915c，命名爲top bar。

 

Step 4 
Select the Line Tool (U), set the weight to 1px and create a horizontal line at the bottom of the rectangle you created at the previous step using the color #968051. Name this layer "1px line". 
Hit Ctrl/Cmd + J to duplicate this layer. Change the color of the new line to #c3a76a. Then select the Move Tool (V) and hit the up arrow once to move this layer one pixel up.

步驟4

用直線工具在剛纔創建的矩形的底部畫一條寬度1px的水平直線，顏色： #968051。命名爲1px line

Ctrl+J複製該圖層，對新的直線更改顏色爲 #c3a76a。然後選中移動工具，按上方向鍵一次，使得該直線上移一個像素。

 

Step 5 
Select the Rectangle Tool (U) and create a rectangle with the height 100px and the color #e8c271 underneath the first rectangle. Name this layer "header bg".

在上面的矩形的下面，用矩形工具創建一個高100px的矩形，顏色： #e8c271。命名爲header bg

 

Step 6 
Ctrl/Cmd-click on the vector mask of the "header bg" layer to select it. Then go to Layer > New Fill Layer > Gradient. The selection that you made has now been transformed into a mask and the gradient will be visible only over the header. 
Use the settings from the following image for the Gradient Fill layer and move the gradient in the left side of the header (to move the gradient, click on the image and drag the cursor white the Gradient Fill window is opened). Set the blend mode of this layer to Overlay 20%.

步驟6

Ctrl+click單擊header bg圖層去選中它。然後點擊，圖層 > 新建填充圖層 > 漸變。選擇的區域就像轉換成了一個蒙板，這樣線性漸變只能在頭部區域可見。

漸變填充的參數參考下面的圖像，然後移動漸變圖層到頭部區域的左邊（移動漸變圖層的時候，單擊該圖層，拖動的時候要注意出現白色的光標），設置圖層的不透明度20%

 

 

Step 7 
Select the Line Tool (U) and create two lines with the weight 1px at the bottom of the header. Use the color #f4d48f for the first line and #c6a661 for the second one.

步驟7

用直線工具在頭部區域的底部創建2條寬度1px的水平直線。第一條直線的顏色： #f4d48f；第二條直線的顏色： #c6a661

 

Step 8 
Select the Type Tool (T) and write the name of your web layout in the left side of the header using the color #f6eedd and the font Myriad Pro Bold Italic. 
Activate the guides to help you position this text layer correctly. 
Double-click on this layer to open the Layer Style window and use the settings from the following image. I used the color #8e7849 for Drop Shadow.

步驟8

在你的網站佈局的頭部區域的左邊用文字工具書寫你網站的名字，顏色： #f6eedd，字體：Myriad Pro，粗斜體

激活你的輔助線，幫助你正確定位你的文字圖層。

雙擊你的文字圖層，打開圖層樣式對話框，然後按照下圖設置參數，投影的顏色設置爲 #8e7849

 

 

Step 9 - Creating the navigation bar 
Create a new group and name it "navigation". Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 550px by 50px and the color #e9d09b. Name this layer "navbar" and use the Move Tool (V) to move it in the right side of your layout at 10px underneath the header. I used the color #cdbd9b for Drop Shadow.

步驟9 - 創建導航欄

創建一個新組，命名爲navigation。用圓角矩形工具創建一個圓角矩形（500，70），尺寸：550px*50px，顏色： #e9d09b，命名爲navbar，用移動工具移到文檔的右側，下邊沿在頭部區域的下方10px。如圖添加樣式，投影的顏色： #cdbd9b

 

 

Step 10 
Select the Type Tool (T) and write the name for your navigation menu items using the color #fffcf4. Add a shadow to your text layers using the settings from the following image.

步驟10

用文字工具添加導航欄的菜單，顏色： #fffcf4。對文字添加投影，設置如下圖所示：

 

Step 11 - Creating the featured area 
Create a new group and name it "featured". Then select the Rounded Rectangle Tool (U) and create a rectangle with the dimensions 900px by 280px and the color #d9cdb2. Name this layer "featured bg" and move it at a distance of 30px from the bottom edge of the header.

步驟11 - 創建特色區域

創建新組，命名爲featured。然後用圓角矩形工具創建一個圓角矩形（150，140），尺寸：900px*280px，顏色： #d9cdb2。命名此圖層爲featured bg，移動到距頭部區域底邊30px的位置。

 

Step 12 
Select the Rectangle Tool (U) and create a rectangle inside the big rounded rectangle with the dimensions 600px by 260px and the color #f9f5ed. 
Activate the guides to help you create this shape. Then name this layer "image holder". 
Open an image in Photoshop and move it into your web layout document using the Move Tool (V). Name this layer "image" and put this image over the "image holder" layer. Right-click on the "image" layer and select Create Clipping Mask.

步驟12

用矩形工具在剛纔的大圓角矩形中創建一個矩形（160，150），尺寸：600px*260px，顏色： #f9f5ed

激活輔助線以幫助你創建剛纔的矩形，命名此圖層爲image holder

在PS中打開一個圖片，用移動工具移動到你的網頁佈局上。命名此圖層爲image，並且移動此圖層到圖層image holder的上方。在image圖層上右鍵鼠標並選擇創建剪貼蒙板

 

Step 13 
Now we will create two arrows for the featured area. Select the Rounded Rectangle Tool (U) and create a small rounded rectangle with the color #d9cdb2. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Stroke I used the color #aaa18c. Name this layer "rounded rectangle".

步驟13

現在我們要在特色區域創建2個箭頭。選擇圓角矩形工具創建一個小的圓角矩形工具（710，260，60，40），顏色： #d9cdb2。雙擊此圖層，打開圖層樣式窗口按下圖設置參數，描邊的顏色： #aaa18c。命名此圖層rounded rectangle

 

Step 14 
Select the Custom Shape Tool (U) and create an arrow shape inside the rounded rectangle using the color #e8e0c8. Duplicate this arrow and move the new one to the left. 
Select the "rounded rectangle" layer and the two arrow layers and hit Ctrl/Cmd + G to put them inside a group. Name the group "right arrow".

步驟14

選擇自定形狀工具創建一個箭頭形狀在剛纔的圓角矩形中，顏色： #e8e0c8。複製該箭頭並移動到左邊一點

選擇rounded rectangle圖層和兩個箭頭圖層，Ctrl+G把他們歸併到一個組。命名該組爲right arrow。

 

Step 15 
Use the Rectangular Marquee Tool (M) to select the right side of the small rounded rectangle. Make sure that the "right arrow" group is selected, then go to Layer > Layer Mask > Hide Selection.

步驟15

用矩形選擇工具選擇小的圓角矩形的右邊。確保right arrow組被選中，然後點擊菜單：圖層 > 圖層蒙版 > 隱藏選區

 

Step 16 
Right-click on the "right arrow" layer and select Convert to Smart Object. Duplicate this layer (Ctrl/Cmd + J). Then go to Edit > Transform > Flip Horizontal. Name the new layer "left arrow" and move it in the left side of the featured area.

步驟16

鼠標右鍵right arrow圖層，選擇轉換爲智能對象。複製該圖層（Ctrl+J）。然後點擊菜單：編輯 > 變換 > 水平翻轉。命名新圖層爲left arrow並移動到特色區域的左邊

 

Step 17 
Select the Rectangle Tool (U) and create a rectangle with the size 280px by 260px and the color #f4ecd8. Put the rectangle next to the featured image and name this layer "text bg". Double-click on this layer to open the Layer Style and add a 1px stroke using the color #f8f4ea.

步驟17

用矩形工具創建一個矩形（760，150），尺寸：280px*260px，顏色： #f4ecd8。矩形緊貼到特色區域的圖片的右邊，命名爲text bg。雙擊該圖層打開圖層樣式，添加1px的描邊，描邊顏色： #f8f4ea

 

Step 18 
Ctrl/Cmd-click on the vector mask of the "text bg" layer to select the rectangle. Then go to Layer > New Fill Layer > Gradient and use the settings from the following image. I used a #362D1A-to-transparent gradient. While the Gradient Fill window is opened, click on the image and move the gradient in the left side of the rectangle. Then set the opacity of this layer to 10%.

步驟18

Ctrl+click點擊text bg圖層去選擇矩形。然後點擊菜單：圖層 > 新建填充圖層 > 漸變，然後按照下圖設置參數。在線性漸變中，設置顏色爲#362D1A到透明，當漸變填充窗口打開的時候，單擊漸變移動到矩形的左邊。然後設置不透明度爲10%。

 

Step 19 
Create two vertical lines in the left side of the rectangle. Use the color #c7bca0 for the first line and #fffdf7 for the second one.

步驟19

創建兩條豎直的直線在矩形的左邊，第一條直線的顏色： #c7bca0，第二條直線的顏色： #fffdf7

 

Step 20 
Select the Type Tool (T) and add some text for the featured area using the color #6e6758 and the font Helvetica.

步驟20

在特色區域用文字工具添加一些文字，顏色： #6e6758，字體：Helvetica（本譯文用Verdana字體代替）

 

Step 21 
Select the Line Tool (U) and create a horizontal line underneath the featured area using the color #e7e1d5.

步驟21

用直線工具創建一條水平線（150，445，900，1）在特色區域的下方，顏色：# e7e1d5

 

Step 22 - Creating the content area 
Create a new group and name it "content". Then select the Rectangle Tool (U), hold down the Shift key and create a square with the size 200px by 200px and the color #d9cdb2. Name this layer "image holder", double-click on it and use the settings from the following image to create a double stroke effect. I used the color #f4ecd8 for Inner Glow and #ada48f for Stroke. 
Select the Type Tool (T) and add some text next to the square.

步驟22 - 創建內容區域

創建新組命名爲content。用矩形工具，按住Shift鍵創建一個正方形（150，470），尺寸：200px*200px，顏色： #d9cdb2。命名此圖層爲image holder，雙擊該圖層按下圖設置創建雙色描邊效果，內發光的顏色： #f4ecd8；描邊的顏色： #ada48f。

用文字工具添加一些文本在正方形的右邊

 

Step 23 
Duplicate the layers that you created at the previous step a couple of times. Use the Move Tool (V) to move the new layers underneath the original ones.

步驟23

複製剛纔的幾面幾個步驟的圖層幾次，用移動工具移動新的圖層到源圖層的下方

 

Step 24 - Creating the sidebar 
Create a new group and name it "sidebar". Select the Line Tool (U) and create a vertical line next to the blog posts using the color #e7e1d5.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 270px by 30px and the color #fcf9f4. Add a 1px stroke to this rectangle layer using the color #e0dace. Name this layer "search bar". Then select the Type Tool (T) and add the content for your sidebar.

步驟24 - 創建側邊欄

創建新組，命名爲sidebar。用直線工具在剛纔區域的右邊創建一條豎直的直線（760，470，1，675），顏色： #e7e1d5。

用矩形工具創建一個矩形（780，500），尺寸：270px*30px，顏色： #fcf9f4。添加1px的描邊，顏色： #e0dace。命名此圖層爲search bar。然後用文字工具添加側邊欄的文字內容。

Step 25 - Creating the footer area 
Create a new group and name it "footer". Then select the Rectangle Tool (U) and create a rectangle with the height 40px and the color #b3a078 at the bottom of your layout. Name this layer "bottom bar". Then select the Line Tool (U) and create a horizontal line at the top of this rectangle using the color #918161.

步驟25 - 創建底部區域

創建新組，命名爲footer。然後選擇矩形工具在文檔的底部創建一個高40px的矩形（130，1430，940，40），顏色： #b3a078。命名爲bottom bar。用直線工具在矩形的頂部創建一條水平線，顏色： #918161

 

Step 26 
Create another rectangle with the height 250px and the color #d8c293. Put this rectangle at the top of the previous one. Name this layer "footer bg". 
Select the Line Tool (U) and create two lines at the top of this rectangle. Use the color #ece4d1 for the first line and #ada28b for the second one.

步驟26

創建另一個高250px的矩形（130，1180，940，250），顏色：#d8c293。把這個矩形移到剛纔的矩形的上方，命名爲footer bg

用直線工具在這個矩形的頂部創建兩條直線，第一條直線顏色： #ece4d1；第二條直線顏色： #ada28b

 

Step 27 
Use the Line Tool (U) to create two separators, each containing two lines - one with the color #ece4d1 and the other one with the color #ada28b. Put these layers inside a group and name the group "separators".

步驟27

用直線工具創建兩個分割線，每個分割線包括兩條直線，一條直線顏色： #ece4d1，另一條直線顏色： #ada28b。把這些圖層歸併到一個組，該組命名爲separators

從左至右四條直線分別爲

（440，1200，1，210），#ece4d1

（441，1200，1，210），#ada28b

（760，1200，1，210），#ece4d1

（761，1200，1，210），#ada28b 

Step 28 
Add a mask to the "separators" group by going to Layer > Layer Mask > Reveal All. Then select the Gradient Tool (G) and drag two black to transparent gradients - one at the top of the separators and one at the bottom.

步驟28

對separators組添加蒙版，點擊菜單：圖層 > 圖層蒙版 > 顯示全部。選擇漸變工具，拖動兩個黑到透明的漸變——一個是在分割線的頂部，一個在分割線的底部

感覺沒必要拖動兩次漸變工具，直接設置好一次漸變工具，如下圖所示，然後拖動一次就可以了 

 

Step 29 
Select the Type Tool (T) and add some content in the footer of your web layout.

步驟29

用文字工具添加一些底部區域的內容。

 

Step 30 
Select the Type Tool (T) and add a copyright statement at the bottom of your layout using the color #867859.

步驟30

用文字工具在你的佈局的底部添加版權信息，顏色： #867859

 

最終的成品如下：

 

心得：

本篇教程的特色有2個：一個是蒙版用的比較多，一個就是雙描邊效果（用內發光和描邊模擬雙描邊效果）

向Talk-Mania致敬，但願還能看到類似高質量的PS教程網站

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