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.pspsd" ？ 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 Paintem Size. Use the settings from the following image. Then select the Paint the Paintet. 1color and

步驟1

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

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

結果如下：

 

Step 2

 

Step 2

 Step 2

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 1pxstroke 6.

步驟2

在你的文檔，用矩形工具從頂部到底部創建一個寬940px的白色矩形

（130，0，940，1470）

，距離底邊20px。命名圖層為content bg，雙擊該圖層開啟圖層樣式對話框，並在其中新增一個描邊的樣式，寬度為1px，顏色： #ded6c4

 

- 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 10p 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 horizo​​​​ntal line at the bottom of the rectangle you created at the previous Name the prev. 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 Tool (V) and hit the up arrow once to move this

步驟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 undertangle with the height 100px and the color #e8c271 underneath the first 的矩形下面，用矩形工具建立一個高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 Lill Layer that. 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 頭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按一下勾選它。然後點選，圖層 > 新填滿圖層 > 漸層。選擇的區域就像轉換成了蒙板，這樣線性漸變只能在頭部區域可見。

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

 

Step 7

Select the Line Tool (U) and create 4ighty 4ight. 8f 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 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

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。 (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

 

 

color #fffcf4 . Add a shadow to your text layers using the settings from the following image.

步驟10

用文字工具新增導覽列的選單，顏色： #fffcf4。對文字加上投影，設定如下圖：

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 100px 10 月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. click on the "image" layer and select Create Clipping Mask.

步驟12

用矩形工具在剛才的大圓角矩形中建立一個矩形

（160，150），尺寸：600px*260px，顏色：

啟動輔助線以幫助你創建剛才的矩形，命名此圖層為image holder

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

 

Step 13

Now we will create two arrows for the featured area. Select the Roundeddgle Tate the Rounded and Recallpate the featured area。 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 #18c. Name this layer "rounded rectangle".

我們要在特色區域建立2個箭頭。選擇圓角矩形工具建立一個小的圓角矩形工具

（710，260，60，40）

，顏色： #d9cdb2。雙擊此圖層，開啟圖層樣式視窗按圖設定參數，描邊的顏色： #aaa18c。命名此圖層rounded rectangle

 

,p 14 孔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 arrowc, is small rounded the is select. Make sure that the "right arrowced as small .

步驟15

用矩形選取工具選擇小的圓角矩形的右邊。確保right arrow組被選中，然後點選選單：圖層> 圖層遮色片> 隱藏選取範圍

 

Steparrow to lay
Right-click on theright to Object" lay

. Duplicate this layer (Ctrl/Cmd + J). Then go to Edit > Transform > Flip Horizo​​ntal. Name the new layer "left arrow" and move it in the left side of the featured area.

鼠標步驟right arrow圖層，選擇轉換為智慧型物件。複製該圖層（Ctrl+J）。然後點選選單：編輯 > 變換 > 水平翻轉。將新圖層命名為left arrow並移動到特色區域的左邊

 

Step 17

Select the Rectangle Tool (U) and create a rectangle with the size 280pgle by 280put. the 260p 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

Cprl/Cmderlick 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 the adient. While the Gradient Fill window is opened, click on 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.

199

195 ，第一條直線的顏色： #c7bca0，第二條直線的顏色： #fffdf7

 

Step 20

Select the Type Tool (T) and add some text for the featured a 55us and the font Helvetica.

步驟20

在特色區域用文字工具添加一些文字，顏色： #6e6758，字體：Helvetica

（本譯文用Verdana字體

（本譯文用Verdana字體12

the Line Tool (U) and create a horizo​​ntal 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 the , group 與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 following image to create a double stroke effect. I 48 for colorect. I 48 for Infage 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 p

 

Step 23 psooo atpun​​ial the 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.🎜 Rechio (Select) ) 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 color #e0dace. Name this layer "search bar". Then select the color) the Tool the select the Type and the Type and then select the Type 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 color it "footer". Then select the Rectangle Tool (U) and create color 5086p the color thebf . bottom of your layout. Name this layer "bottom bar". Then select the Line Tool (U) and create a horizo​​ntal 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. Prectangle with the height 250px and the color #d8c293. Prectangle with the height 250px and the color #d8c293. Prectangle with the height 250px and the color #d8c293. Prectangle with the height 250px and the color #d8c293. Prectangle with the oright 250px and the color #d8c293. Prectangle with the oright 250px and the color #d8c293。 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.

步驟一個高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 #ada28 . "separators".

步驟27

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

從左至右四條直線分別為

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

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.

content in the footer of your web layout.

。

 

Step 30
Select the Type Tool (T) and add a copyright statement at the bottom of your layout using the color #867859.用文字在你的底部加入文字的佈局版權訊息，顏色： #867859

 

最終的成品如下：

 

心得：

雙描邊效果（用內發光和描邊模擬雙描邊效果）

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

更多PS網頁設計教程IV——如何在Photoshop中建立一個專業部落格網站版面 相關文章請關注PHP中文網！