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

萬倉一黍發表於2013-06-23

網頁網站

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。

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

約定：

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

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

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

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

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

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

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，之後給他新增以下效果：

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

2、內發光—混合模式：正常，顏色： #ffffff，大小：4px。其他引數預設設定。

3、描邊—大小：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。請注意，您可能需要擴大你的畫布，以便讓所有的圖形適合。如果你需要，點選：影象 > 畫布大小，設定合適的高度，以適應整個佈局。在導航欄的左側新增版權資訊。