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教程網站