PS網頁設計教學XXIV－從頭設計一個漂亮的網站

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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 appo. 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網格佈局模版

 

. ore 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 twoifferent types of templates。 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 反對詞 you have 3 if you have 3 東西the 12_col grid, because 12 is pisable 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 pisable 4.mthis this 3. s​​idables in ​​集文章 Iable 3. .

我的設計幾乎都是基於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 貢獻網頁結構

Before weed poo ite. 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 . Set the canvas to 1200px wide and 1700px . Setffff.在定義好我們網站的結構之後繼續。開啟16_col.psd模版。點選：
圖片 > 畫布大小。設定畫布為1200px寬和1700px高。並設定背景顏色： #ffffff

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

 

Step 4

步驟 4

Now pwid the ptid and fool the fool the fool the full fg. with the color # dddddd.

現在用

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

 

Step 5

步驟5

Create a new layer above tangle 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 eff ect. Additionally you can link these two layers.

在矩形的上方新建圖層，圖層的

混合模式選擇疊加。 Ctrl+click點選矩形圖層。會出現該矩形的選取範圍。選擇600px的軟刷，設定顏色為白色，然後用筆刷的底部貼近選區的上方點擊幾次。透過這個你畫出了一個細微的光亮的效果。現在可以把這兩層連結起來了。

 

 

 

Step 6. in dark grey rectangle, as shown in the image.

新建圖層。再選長方形工具，如上圖繪製一個瘦長的深灰色長方形（0，0，1200，6），

顏色： #454545

 

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 #d2d2d:0ffff選擇長方形工具

，在距離上端長方形500px處畫一個高575px的長方形（0，

540

，1200，575）。

註：原文的尺寸似乎是約數，不是很精細，有誤差，故在本文中作了修正。 設定漸層疊加圖層樣式，顏色由#d2d2d0到#ffffff 的漸層色，角度為-90，縮放為100%。

 

Step 8

步驟8

Now we are going to ate the samelight ate 5. 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 cew times edge abit few times edge a few times with the edge edge the just of the part the few times 字 edge a few times with the edge edge the just of the part the func times with the edge a few times edge abit few times with the edge abit page the edge a few . , as shown in the image.

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

 

Step 9

步驟9
 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以下展示顏色的微妙變化：

步驟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%, Angistle: shadow use Blend mode: Multiply, Opacity: 65%, Angistle: 90, Dpize, Dpize, Dpize, Dpize: 65%) 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. yevery

在頁首長方塊底端畫一條1px的暗藍色（0，539，1200，1）的線，

顏色： #0e517e，加入投影效果。混合模式：正片疊底，不透明度：65%，方向：-90，距離：1px，大小：6px。之後再建一個新層，在暗藍色線下面畫一條1px的白線（0，540，1200，1）。透過這種方式，我們就可以創造一個輪廓鮮明的邊緣。你可以在你的設計上把這個技巧用在其他色塊。

Step 11

步驟11

Create a new

步驟11

Create a 新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

set 5% tangle, 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 – Blendcolor: normal, mode: color, glow – Blendcolor: #normal, color: #normal, color: #normal, mode: color, glow – Blendcolor: #normal, color: color, glow – Blendcolor: 顏色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 smal 5, smal. add the navigation text. I used Arial for navigation links, all caps and Antialias set to “none”.

在上面新建圖層, 把混合模式設置成疊加，然後按照步驟5那樣加照亮效果，不過這次用的是小筆刷。然後增加導航列文字.我用Arial字體作為導航的連結字體，所有效果設定為「無」。

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

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 layout and in the middle of the top gray stripe from Step 4. Add these layout and in the middle of the top gray stripe from Step 4. Add these layout styles: er – 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 rag and the Cake the search 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 狀態 . the middle of the navigation stripe.

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

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

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

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

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

Again we're creating the effect from Step 5.

我們再次創建步驟5中的特效

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圓角矩形的上方和下方添加高亮效果

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

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

 

 

Step 16

lewe 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.

創建另一個組並命名為另外一個組並命名為另一個組並命名為另一個組並命名為另一個組並命名為。這裡用於放置頭部圖層。如圖所示

 

Step 17

步驟17

Our header looks a bit plain right now

Our header looks a bit plain right now Our header looks a bit plain right now

goingOur orame there swhe smewhe now or or yame theremew whe she she . 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 s more depth, we can switch the color to black and do the iname more depth、we can switch the color to the header. Give it a try!

選一個600px的大軟刷，顏色： #ffffff。然後在導覽列的下方點擊幾次。如果想更有層次感，你也可以把顏色調為黑色，然後在頭部區底部重複同樣操作。試吃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 section. 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

可新建一層，設定此層混合模式為疊加，重複步驟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

I 19

youcan s 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 10 px radtan 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 rea with the horizo​​ntal 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

it to 1px. 選取

直線工具

，並設定為1px 

Step 21

步驟按住Shift鍵畫一些分隔符號（364，589，1，70）、（600，589，1，70）、（836，589，1，70），

顏色： #b0b0b0

步驟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 in active. 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 do​​hious, we're speive weal s片n subtract from the selection to get only the first tab selected.為了使活動的切換頁更加明顯，我們將給它添加漸白的背景。為了達到這樣的效果我們把整個物件選中然後裁切選區，最終使選中的範圍只有第一個按鈕。  

This is what your selection should look like.

你的選區如下圖所示

With a smaller soft brush, paintol

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

Step 24

步驟24kk shown in the image.

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

Add a vector mask by clicking the little icon in the bottom of the 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.

設定顏色為黑色，選區一個大的軟刷，然後開始刪除矩形的部分。結果，我們創建了一個比較好看的陰影效果

也可以用

漸變工具

在蒙版內添加一個黑色到透明的漸變，如下圖所示

inatail 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 bar that the dow line that follows our s .

最後我們加點細節。在切換頁下方畫一條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 fir

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, drawtle a white rectangle with a featured design image. To do this, drawtle a white rectangle with a 1ppx and gray veryd 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 sidel. 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 bereed image bottom of our layer palette. You will get nicely bereed image effect like inject

把你選好的圖片導進來，放在白色長方形上面。不用擔心圖片會超出方塊，我們會修復它。依照最上面的長方形新建一個選區，點選：

選擇 > 修改 > 收縮，輸入5px，確認。然後在圖層管理區下方點選新增圖層蒙版，這樣圖片就只顯示選取範圍範圍。

 

This is how your layer order should look like.

你現在的圖層順序看起來如下圖

步驟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，加粗字號的字號：Verdana；字號：12px；顏色： #494949

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

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

 

圖片下方的字體：Verdana字號； 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 big after the recx 20. 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.

的縮影920，202），

顏色：#f7f7f7。也加入1px的灰色的邊框

 

Finally add some text and we're done!

最後加上一些文字完成這部分的製作

號

粗；顏色： #de8d55

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

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

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

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

 

It's time for the footer. Draw a big 400px high, dark gray rectangle.現在開始製作頁腳。畫一個大的高400px深灰色

（顏色： #4b4d4a）

的長方形（0，1300，1200，400）

Step 29

ect the same way as described in Step 5.

依照步驟5的做法加入一些光亮的效果

Step 30

c 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），顏色：#ffffffff；（0，1299，1200，1），顏色： #ffffff；（0，1300，1200，1），顏色： #3e3e3e

 

Step 31

peated navigation will be placed . You can copy the rectangle from the top where the navigation is 地方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 p give it a nice border effect.

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

Step 33

步驟33

Add some footer content and separate it nicenice fin

用

直線工具

畫四條直線（130，1346，220，1）、（370，1346，220，1）、（610，1346，220，1）、（850，1346，220， ，顏色： #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

再用一個

多邊形工具三角形

用路徑選擇工具

選擇這個三角形，並拖曳到適當的位置

點上移到適當的位置

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

描邊的顏色： #fb

335

的顏色

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

rogcc ，#b95cef，#494949

在下方加上文字和圖示

文字字體：Androgyne；

在下面加上一條白線，顏色： #f3f3f3

在右側添加圖片

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

🜎

步驟34

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

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

The Design

最終設計

 

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

更多PS網頁設計教學XXIV－從頭設計一個漂亮的網站 相關文章請關注PHP中文網！