PS網頁設計教程XXIV——從頭設計一個漂亮的網站

做爲編碼者，美工基礎是偏弱的。咱們能夠參考一些成熟的網頁PS教程，提升自身的設計能力。套用一句話，「熟讀唐詩三百首，不會做詩也會吟」。

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

約定：

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

二、原教程的截圖是英文的，本人在從新制做的基礎上，從新截了中文版的圖

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

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

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

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

 

 

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

你曾否想過設計一個漂亮的網頁，可是殊不知道如何入手？實話說，之前我也是這樣。當我瀏覽網頁的時候我看到這麼多好看的網頁，我就但願本身有技術創做這樣的做品。今天，我將教你怎麼作這樣的設計！實際上，它須要一點PS技能和把握細節的能力。在本教程中，我將會指出這些細微的細節之處，而這些細節將使你的網頁設計看起來很漂亮。打開PS，讓咱們開始吧！

 

Step 1 - Download the 960 Grid System Template

步驟1：下載960網格佈局模版

 

The designs I create are nearly all based on the 960 Grid System. So, before we begin we need to download the grid system Photoshop templates. You can find them on the 960.gs official website. Simply unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col. The difference between these two are, as the name suggests, one is made with 12 columns and the other one with 16 columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either 12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will see this in action.

個人設計幾乎都是基於960網格系統。因此，在咱們開始以前，咱們須要下載960網格系統的PS模板。你能夠在960.gs官方網站上找到他們。解壓zip文件，找到PSD模板。你會看到兩種不一樣類型的模板：一個是12_col的，另外一種是16_col的。這二者之間的差別，正如其名所示，一個是12列而另外一個16列的。爲了更好解釋這一點，若是在你的設計中有3個方塊，你會選擇12_col的，由於12能被3整除的，或者若是你的設計有4個方塊，你會選擇12_col或16_col的，由於12和16都能被4整除。若是按照本教程中，您將看到這個動做。

 

Step 2 - Defining the Structure

步驟2：定義網頁結構

Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. This is a bit more of a complicated structure because we have a layout inside a layout. You can see this exemplified in the image above.

在咱們打開PSD網格模板並開始繪製前，咱們首先須要定義咱們的網站的佈局結構。你能夠看到上面的圖片顯示的例子。這是一個比較複雜的結構，是由於咱們每個佈局都還有各自的佈局。

 

Step 3

步驟3

After we’ve defined our site structure we’re ready to move on. Open your 16_col.psd template. Go to Image > Canvas size . Set the canvas to 1200px wide and 1700px high. Set the background color to #ffffff.
在定義好咱們網站的結構以後繼續。打開16_col.psd模版。點擊：圖像 > 畫布大小。設置畫布爲1200px寬和1700px高。並設置背景顏色： #ffffff

因爲本翻譯教程不下載960佈局系統，故本步改成新建文檔，尺寸：1200px*1700px。背景色： #ffffff

 

Step 4

步驟4

Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Fill it with the color #dddddd.

如今用矩形工具畫一個矩形（0，0，1200，80），寬度爲整個畫布，高度爲80px。填充的顏色： #dddddd

 

Step 5

步驟5

Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers.

在矩形的上方新建圖層，圖層的混合模式選擇疊加。Ctrl+click點擊矩形圖層。會出現該矩形的選區。選擇一個600px的軟刷，設置顏色爲白色，而後用筆刷的底部貼近選區的上方點擊幾回。經過這個你畫出了一個細微的光亮的效果。如今能夠把這兩層連接起來了。

 

 

 

Step 6

步驟6

New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the image.

新建圖層。再次選擇矩形工具，如上圖所示畫一個瘦長的深灰色矩形（0，0，1200，6），顏色： #454545

 

Step 7

步驟7

With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle. Make it 575px high and give it a Linear Gradient overlay from #d2d2d0 to #ffffff, direction -90, Scale 100%.

繼續選擇矩形工具，在距離上端長方形500px處畫一個高575px的長方形（0，540，1200，575）。注：原文的尺寸彷佛是約數，不是很精細，有偏差，故在本文中做了修正。設置漸變疊加圖層樣式，顏色由#d2d2d0到#ffffff 的漸變色，角度爲-90，縮放爲100%。

 

Step 8

步驟8

Now we are going to create the same light effect as described in Step 5. We will be using this technique a lot; so next time I will just refer you to Step 5 for the effect.

如今咱們要象步驟5同樣添加相同的光照效果。咱們將屢次使用這種技術，因此下一次，我將提示使用步驟5的效果。

 

Create a new layer above all the current layers. Ctrl+click the big rectangle. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, as shown in the image.

在本層上新建圖層。Ctrl+Click這個大的矩形。選擇一個600px的軟刷，設置顏色爲白色，而後用筆刷的底部貼近選區的上方點擊幾回。如圖所示，經過這個你畫出了一個細微的光亮的效果。

 

Step 9

步驟9

Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd.

See how subtle the color change is?

新建一個圖層並畫一個大的高400px的矩形（0，130，1200，410）。這個將用於咱們的頁頭。用一個漂亮的藍色漸變去填充它，顏色從 #2787b7到 #258fcd

如下展現顏色的微妙變化：

 

 

Step 10

步驟10

Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next, create a new layer above and draw another 1px white line under the dark blue one. This way we create sharp edges for our content box. Basically you can apply this border technique on every box in your design just with different colors.

在頁首長方塊底端畫一條1px的暗藍色（0，539，1200，1）的線，顏色： #0e517e，添加投影效果。混合模式：正片疊底，不透明度：65%，方向：-90，距離：1px，大小：6px。以後再建一個新層，在暗藍色線下面畫一條1px的白線（0，540，1200，1）。經過這種方式，咱們就能夠建立一個輪廓鮮明的邊緣。你能夠在你的設計中把這個技巧用於其餘色塊。

Step 11

步驟11

Create a new layer, and with the Rectangle Tool, draw a 50px high rectangle in the top part of the canvas, just as shown in the image. This will be used for our navigation.

新建圖層，在畫布的頂部區域，用矩形工具畫一個高50px的矩形（0，80，1200，50），顏色： #e4e4e4，如圖所示。這個將用於咱們的導航欄。

Apply a Drop shadow. Use the values shown in the image.

添加投影效果，如圖所示設置參數。

 

Step 12

步驟12

Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle, fill it with #f6a836, and apply the following effects:
Inner Shadow – color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px.
Inner glow – Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default.
Stroke – Size: 1px, Position: inside, color: #ce7e01.

開始製做導航欄。用圓角矩形工具，設置半徑爲5px，畫一個圓角矩形（130，92，70，27），顏色： #f6a836，以後給他添加如下效果：

一、內陰影—顏色： #ffffff，混合模式：疊加，不透明度：60%，角度：120，距離：7px，大小：6px。

二、內發光—混合模式：正常，顏色： #ffffff，大小：4px。其餘參數默認設置。

三、描邊—大小：1px，位置：內部，顏色： #ce7e01。

Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.

按Ctrl+click選擇圓角矩形。點擊：選擇 > 修改 > 收縮，輸入1px肯定

Create a new layer above, set the Blend mode to Overlay and create the same effect described in the Step 5 using a smaller brush size this time. Then add the navigation text. I used Arial for navigation links, all caps and Antialias set to 「none」.

在上面新建圖層, 把混合模式設置成疊加，而後依照步驟5那樣加照亮效果，不過此次用的是小筆刷。而後增長導航欄文字.我用Arial字體做爲導航的連接字體，全部效果設置爲「無」。

字體：Arial，字號：12點，活動連接的文字顏色： #7b3600，非活動連接的文字顏色： #838383

Step 13

步驟13

Now let’s create the search box. With the Rounded Rectangle Tool, radius 5px, create a search box positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add these layer styles:
Inner Shadow – color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px.
Stroke – Size: 1px, Position: inside, color: #dfdfdf.

如今開始建立搜索框，用圓角矩形工具，半徑5px，在網格佈局的右側、步驟4中建立的頂端灰色矩形中部建立一個用於搜索的矩形（925，26，142，30），顏色： #5c6457。添加如下樣式：

內陰影—顏色： #000000，混合模式：正片疊底，不透明度：9%，角度：90，距離：0px，大小：6px。

描邊—大小：1px，位置：內部，顏色：#dfdfdf。

I added the 「search」 text and a light gray 「GO」 button. This is how it should look.

在上面添加search的文本和一個亮灰色的GO按鈕。以下圖所示：

文字的顏色： #a0a39c。白色的圓角矩形的描邊和搜索框的描邊同樣。

So far we have a lot of layers and need to organize things a bit so we will create a new Layer folder and name it 「search」. Select all layers that make the search field and just Click + drag inside the new folder. Later we’re going to organize other content inside the folders so we have a nice organized layer palette.

到目前爲止已經建立了不少圖層，爲了條理清楚，咱們創建search組。 把全部和搜索相關的層一併拖到這個組裏面去。遲點，咱們都會這樣組織其餘部分的內容。這樣咱們擁有一個漂亮組織合理的圖層面板。

Step 14

步驟14

Now create a new layer and draw a 「Sign Up」 button the same way we created the search field – just half the width. Place it under the search field in the middle of the navigation stripe.

新建圖層，用建立搜索框一樣的方法畫一個Sign Up按鈕（998，91，73，30），顏色： #258dca——只有一半的寬度。把它擺放在搜索框的下面的導航區域的中部。

用PS新建文檔，尺寸：4px*4px，背景透明，用畫筆從左上角到右下角點4個白點

而後定義圖案，關閉新建的文檔。回到主文檔，給該按鈕添加圖案疊加的樣式

添加和搜索框同樣的描邊樣式，並按照下圖添加內陰影樣式

在按鈕上添加SIGN UP文字，文字顏色白色。在按鈕的左側添加Login（黑色） or（灰色）的文字

Again we’re creating the effect from Step 5.

咱們再次建立步驟5中的特效

Use a smaller soft brush size. In this case it was 45px.

用一個小尺寸的軟刷。在這裏用的是45px

 

Step 15

步驟15

After adding the logo and the Tagline this is how our site should look like now.

加了LOGO和網站描述以後，咱們的網頁就以下所示。

LOGO的製做：

用圓角矩形工具新建一個圓角矩形（132，20，77，43），顏色： #2c2c2c

用步驟5的方法在圓角矩形的上方和下方添加高亮效果

用文字工具添加文字BVD，和導航欄的文字字體、字號相同。文字縱向縮放300%，水平縮放180%，文字顏色： #ffffff。給它添加以下的投影樣式

在LOGO的右側，添加文字Beautiful website design。字體：Androgyne，字號：30點，顏色：fdfdfd。添加描邊樣式：描邊的顏色： #8e8e8e

 

 

Step 16

步驟16

Now we’re coming back to our layer organization mentioned a few steps earlier. Create a new empty layer folder and name it 「top_bar」. Move all graphics from the top of the layout inside this folder (logo, tagline, search field, sign up button, navigation and backgrounds).

如今回到咱們以前一些步驟提到的圖層結構。建立一個新組top_bar。移動全部的圖層到這個組裏面（包括LOGO，說明文字，搜索框，SIGN UP按鈕，導航欄和背景）。

Create another empty layer folder and name it 「header」. This is where we will put our header graphics. This is how it should look.

建立另一個組並命名爲header。這裏用於放置頭部圖層。如圖所示

 

Step 17

步驟17

Our header looks a bit plain right now so we’re going to add the same light effect everywhere else on the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.

頭部看起來有的平淡，所以咱們能夠在任意位置加相同的亮光效果。選中藍色的頭部區域。在它上面建立一個新層並設置其混合樣式爲疊加。

Pick a large soft brush 600px, color #ffffff and click a few times in the area under the navigation. Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the bottom part of the header. Give it a try!

選一個600px的大軟刷，顏色： #ffffff。而後在導航欄的下方點擊幾回。若是想更有層次感，你還能夠把顏色調爲黑色，而後在頭部區底部重複一樣操做。試一試

Step 18

步驟18

In this step I will explain to you how I created the reflection for the header images. Take two images of your choice, I used Safari screenshots of my two other templates, scale one down and place it behind the bigger one. Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool. Go to Select > Modify > Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.

在這步，我將向你展現如何建立頭部區域的圖像的反光效果。選擇你的兩張圖片，我用的是個人其餘模版的Safari的屏幕快照（我這裏用以前的兩個網頁快照），縮放其中一張並擺放在大的圖片的後方。複製全部的圖層，並用自由變換工具，翻轉第一張圖片和另外一張圖片。按住Shift鍵，並將圖片下移一些像素。用矩形選框工具建立一個從第一張翻轉圖片的底部的外邊到圖片中部的選區。點擊：選擇 > 修改 > 羽化，輸入30px或者更多。你將得到以下圖所示的類似選區。按Delete鍵幾回，你會建立一個漂亮的原始圖像的淡出反光效果。對第二張圖片重複這些步驟。

 

Now to make those two images stand out a bit, create a new layer and set the mode to Overlay. Create the effect described in Step 5.

爲了讓兩個圖片更加突出，能夠新建一層，設置該層混合模式爲疊加，重複步驟5的添加效果。（這一步是不是必須，還得視狀況而定，我用了這兩張圖片後，反而以爲這一步是多餘的）

This is how our header should look after adding a nice tagline and some buttons. Don’t forget to put all these graphics inside the 「header」 layer

folder to keep things organized here ;)

在添加了一些按鈕和漂亮的文字以後，頭部區域就是如圖所示。不要忘記把圖層都放在header組裏面。

左側第一段文字的字體以下設置

左側第二段文字的字體設置以下

左側第三段文字的字體設置以下

下面的兩個按鈕，右側的按鈕（310，455，159，38），顏色： #f6a836，樣式複製導航欄的左邊按鈕的樣式。文字的顏色： #ffffff

左側的按鈕（130，455，159，38），顏色： #c8c8c8，樣式複製剛纔右邊的按鈕，描邊的顏色改成： #7d7d7d。文字的顏色： #5c5c5c

 

Step 19

步驟19

If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we’ll need to perform a few extra steps, but it’s definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it’s still deformed. You see the little handle. Click on it and move it upwards to the point of the path.

若是你看最終效果圖，你會看到在內容區域裏面有很漂亮的切換頁。爲了建立這種切換頁咱們須要一些額外操做，但這是頗有必要的。首先用圓角矩形工具建立一個高70px圓角半徑爲10px的圓角矩形（128，589，944，70），顏色： #e1e1e1。如今咱們不要底部圓角，使它造成一個完美的角。用直接選擇工具單擊這個圖形的路徑，單擊垂直方向的點而後按住shift鍵往下拉到水平座標軸的高度。如今看起來不錯了，可是仍是比較簡陋。而後你看見一個小的控制點。單擊它並移動到路徑上的點。

Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner.

如今咱們建立一個完美的角。就像圖中所示。在右下角也重複該步驟，並給它添加一個1px的描邊，描邊的顏色： #b0b0b0

Step 20

步驟20

Pick the Line tool and set it to 1px.
選取直線工具，並設置爲1px

 

Step 21

步驟21

Draw in gray separators while holding the Shift key.

按住Shift鍵畫一些分隔符（364，589，1，70）、（600，589，1，70）、（836，589，1，70），顏色： #b0b0b0

Step 22

步驟22

Place some icons, headings, and a description for each tab. I used Ray Cheung icons available from – WebAppers.com. Usually one tab is always active and the others are inactive. To make this clear in our design, we need to find a way to accomplish this. I desaturated the other icons and reduced the opacity for the headings and text while keeping the first active tab colorful and bright.

在每一個切換頁擺放一些圖標、標題、和一些說明文字。我用的是Ray Cheung icons——來自WebAppers.com（並將其中一個圖標放在頭部區域的圖片處）。一般一個標籤頁是活動的，而其餘活動頁是非活動的。要在咱們的設計中明確說明這點，咱們須要找到方法來實現它。我下降其餘圖標的飽和度（點擊：圖像 > 調整 > 去色）而且下降標題文字和描述文字的不透明度（60%）以保證活動的切換頁處於高亮狀態。

Step 23

步驟23

To make the active tab more obvious, we’re going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.

爲了使活動的切換頁更加明顯，咱們將給它添加漸白的背景。爲了達到這樣的效果咱們把整個對象選中而後裁切選區，最終使選中的範圍只有第一個按鈕。

 

This is what your selection should look like.

你的選區以下圖所示

With a smaller soft brush, paint in a white background.

新建圖層，用一個小的軟刷，用白色塗抹背景

Step 24

步驟24

Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.

添加投影。在切換頁的背後建立一個深灰色的矩形（78，609，1044，50），顏色： #303030，如圖所示

Add a vector mask by clicking the little icon in the bottom of the layer palette.

點擊圖層面板底部的小圖標建立圖層蒙版

Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.

設置顏色爲黑色，選區一個大的軟刷，而後開始刪除矩形的部分。結果，咱們建立了一個比較好看的陰影效果

也能夠用漸變工具在蒙版內添加一個黑色到透明的漸變，以下圖所示

Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.

最後咱們加點細節。在切換頁下方畫一個1px的灰線（78，659，1044，1），顏色： #b0b0b0。而後如上一步同樣的方式使左右兩端產生漸變，也能夠用上面所講的用漸變來實現。如今咱們就在切換頁的後方緊挨着陰影的地方獲得一條比較時尚好看的線。

This is how our tabs should look.
這就是咱們切換頁看起來的樣子。

 

Step 25

步驟25

It’s time to design the content for our first tab. We need a featured design image, a nice heading and some text. First we will create the featured image. I thought that it would be nice to break the edginess of the design by creating a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.

是時候設計第一個切換頁的內容了。咱們須要一個有特點的設計圖像，有好看的標題和一些文字內容。首先咱們得建立這個有特點的圖片。我想，這將是很好的打破尖銳棱角的設計的時候，咱們爲特點設計圖像的創造一個好看的疊照片的效果。要作到這一點，繪製一個1px淺灰色（顏色： #b0b0b0）邊框的白色矩形（136，714，404，224），和一個很是微妙的陰影效果。

 

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.

複製這一層並用自由變形工具稍微旋轉。重複這個操做幾回（3次比較好）

Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify > Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.

把你選好的圖片導進來，放在白色長方形上面。不用擔憂圖片會超出方塊，咱們會修復它。按照最上面的矩形新建一個選區，點擊：選擇 > 修改 > 收縮，輸入5px，確認。而後在圖層管理區下方點擊添加圖層蒙版，這樣圖片就只顯示選區範圍。

 

This is how your layer order should look like.

你如今的圖層順序看起來以下所示

 

Step 26

步驟26

Don’t forget to keep things organized. So create more layer folders and organize your palette. This is how I have done it.

不要忘記整理圖層，這裏新建圖層夾把圖層歸類。

By adding a nice heading, some text, and bullet lists, our web design work is finished. Let’s move on.

增長一個漂亮的標題、一些文本和列表，咱們的設計工做又完成一部分。如今繼續下一步吧。

 

標題文字字體：Verdana；字號：30px，加粗；顏色： #227dac

副標題文字字體：Verdana；字號：14px，加粗；顏色： #494949

列表文字字體：Verdana；字號：12px；顏色： #494949

列表前的項目號，由圓和自定義形狀中的勾這個形狀組合起來的，圓的顏色： #227dac；勾的顏色： #ffffff

列表下的文字字體：Verdana；字號：12px，加粗；顏色： #494949

 

圖片下方的字體：Verdana；字號：12px，傾斜；左側文字顏色： #227dac，右側文字顏色： #494949

And again some layer organization.
再組織一下圖層

 

當前的結果：

 

 

 

Step 27: Testimonials

步驟27：感謝信

I thought this one should be huge; so I’ve put this in a big box right after the main section. First draw a big light gray rectangle about 220px high. Give it a 1px gray border.

我想這應該是巨大的，因此我把它放在一個在主要部分下方的大方塊裏。首先畫一個大的高220px的亮灰色矩形（130，1016，940，222），顏色： #f2f2f2。給它一個1px的灰色（顏色： #b0b0b0）邊框。

 

Then draw in another brighter rectangle by 10px smaller on all sides. Also add a 1px light gray border.

而後畫另外一個各邊都縮進10px的亮一點的矩形（140，1116，920，202），顏色： #f7f7f7。也添加1px的灰色的邊框

 

Finally add some text and we’re done!

最後添加一些文本完成這部分的製做

擡頭文字的字體：Verdana；字號：12px，加粗；顏色： #de8d55

正文文字的字體：Androgyne；字號：24px；顏色： #696969

落款文字，左側文字：Androgyne；字號：14px；顏色： #696969；右側文字：Verdana；字號：14px，加粗；顏色： #494949

左側按鈕，圓角矩形（257，1190，186，27），圓角半徑：3px，顏色： #f5f5f5，描邊顏色： #b0b0b0

按鈕文字的字體：Verdana，字號：12px；水平縮放80%；顏色： #494949

 

Step 28

步驟28

It’s time for the footer. Draw a big 400px high, dark gray rectangle.

如今開始製做頁腳。畫一個大的高400px深灰色（顏色： #4b4d4a）的矩形（0，1300，1200，400）

Step 29

步驟29

Add some light effect the same way as described in Step 5.

按照步驟5的作法添加一些光亮的效果

Step 30

步驟30

Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more lines on top and bottom like shown in the image.

下來，如圖所示，在區域上方畫一個10像素高的矩形（0，1290，1200，10），顏色： #dcdcdc，而且經過在頂端和底部各多加兩條線加強細節處理。

四條線分別是：（0，1290，1200，1），顏色： #a3a3a3；（0，1291，1200，1），顏色： #ffffff；（0，1299，1200，1），顏色： #ffffff；（0，1300，1200，1），顏色： #3e3e3e

 

Step 31

步驟31

Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout.

在最底部的地方建立重複導航欄。您能夠複製放置頂部導航欄的矩形（0，1260，1200，40），將其移動，並使其40px的高。將其放置在你的畫布的最底部，活動頁的文字顏色改成： #494949。請注意，您可能須要擴大你的畫布，以便讓全部的圖形適合。若是你須要，點擊：圖像 > 畫布大小，設置合適的高度，以適應整個佈局。在導航欄的左側添加版權信息。

 

 

Step 32

步驟32

Attention to detail again. Add a 1px white line above the footer navigation box to give it a nice border effect.

再次強化細節。給頁腳的導航區頂端加一條1px的白色邊，這樣有比較好的邊框效果。

Step 33

步驟33

Add some footer content and separate it nicely within your grid.

給頁腳增長內容，你能夠依據網格合理安置它們。

用直線工具畫四條直線（130，1346，220，1）、（370，1346，220，1）、（610，1346，220，1）、（850，1346，220，1），顏色： #acacac

在直線的上方用文字工具添加LATEST BLOG ENTRIES、RECENT COMMENTS、ADVERTISING、TWEETER STUFF。文字字體：Verdana；字號：12px，垂直縮放150%；顏色： #e6e6e6

在第一列的下方，創建三個博客條目。左側的按鈕是用圓角矩形，半徑5px，尺寸：40px*18px，顏色： #da7203。圖層的樣式複製上面導航欄中黃色按鈕的圖層樣式

按鈕文字的字體：Verdana Bold；字號：9px，加粗、傾斜；顏色： #e6e6e6

按鈕右側文字的字體：Verdana；字號：12px，加粗；顏色： #e6e6e6

下方文字的字體：Verdana；字號：12px；顏色： #e6e6e6

置入對話圖片

給它添加顏色疊加的圖層樣式，顏色： #ff8a00

在第二列的下方，有留言列表

每一個列表前有剛纔作好的對話圖標，右側的文字字體：Verdana；字號：12px；顏色： #e6e6e6。人名加粗

下面的留言文字字體：Verdana；字號：12px；顏色： #e6e6e6

在第三列的下方，用矩形工具畫四個矩形，尺寸：100px*100px，分別是（610，1368）、（730，1368）、（610，1482）、（730，1482）

給他們添加白色的描邊

而後添加合適的廣告圖片，移動每一個圖片到矩形的上方，右鍵選擇建立剪貼蒙版

 

在第四列的下方，用圓角矩形工具新建一個圓角矩形（850，1367，221，135），圓角半徑爲5px

再用多邊形工具建立一個正倒三角形

用路徑選擇工具選擇這個三角形，並拖動到合適的位置

再用直接選擇工具選擇最下面的點，按住Shift，將點上移到合適的位置

最後給該圖層添加以下的圖層樣式

描邊的顏色： #fbfbfb

內發光的顏色： #a3a3a3

再把該形狀的填充色改爲： #eaeaea

在該形狀內添加文字，字體：Androgyne；字號：12px；顏色分別是： #cc580f，#b95cef，#494949

在下方添加文字和圖標

文字字體：Androgyne；字號：12px；顏色是： #f3f3f3。在下面添加一條白線，顏色： #f3f3f3

在右側添加圖片

給圖片添加以下的圖層樣式，顏色： #2e0909，並將圖層的不透明度改成28%

 

 

Step 34

步驟34

Finally organize all your layers inside the layer folders. This is how I’ve done it.

而後就是把相關的圖層整合起來。

The Design

最終設計

 

後記：整個設計中規中矩。前面的步驟比較詳細，後面的步驟就一筆帶過了。爲此，補充後面的設計過程花了很多的時間。總體來講，仍是用到了一些技巧。例如，圖標的灰化處理，圖片的色相改變等等。我認爲最後一個對話框設計（是根據原圖補充步驟的）也是亮點。