PS網頁設計教程XXIX——如何在PS中設計一個畫廊佈局

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

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

約定：

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

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

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

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

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

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

 

 

In this week’s tutorial we will create a gallery layout. I will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.

在這個每週教程中，咱們要建立一個畫廊的網頁佈局。我將在本教程中不使用960網格系統，目的是給初學者展現標尺工具在PS中開始設計網頁是多麼重要。咱們也會演示如何建立使用圖案、使用蒙版和濾鏡

 

Step 1: Setting up the Document

步驟1：設置文檔

 

Start by creating a 1200px x 1850px document in Photoshop.

開始於在PS中新建文檔，尺寸：1200px*1850px

 

As I mentioned earlier we will be using the Ruler Tool. Make sure that rulers and guides is turned on.

正如剛纔所說，咱們要使用標尺工具。確保標尺和參考線都是打開的

 

• Rulers: Ctrl + R
• Guides: Ctrl + ;
• 標尺：Ctrl + R
• 參考線：Ctrl + ;

 

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

此外在使用標尺工具中重要的一件事是信息面板。它的用途是當你正在測量時，將標尺信息顯示在信息面板中。請確保這在您右邊的面板中顯示。若是它不顯示，您能夠經過點擊：窗口 > 信息去顯示它。

 

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px in the center of our canvas.

你的網頁的總寬度會是960px。因此，讓咱們建立咱們第一條參考線，點擊：視圖 > 新建參考線，設置值爲120px。重複步驟建立一條參考線，不過把值改成1080px，這會使你的畫布的中間部分一共有960px寬。

 

Step 2: Creating the Header

步驟2：建立頭部區域

 

TheHeader section is composed of Logo, Navigation, and Search. First thing you need to do is to create a folder name it Header and inside of it create sub folders and name them Logo, Navigation, and Search. It is important that you group all the things you do properly in order to be organized and easily locate things in the future for coding purposes.

頭部區域包含LOGO、導航欄、搜索欄。首要的事是你須要建立一個名爲Header的文件夾，並在其中建立名爲Logo、Navigation、Search的子文件夾。把各項分組是很是重要的，以便正確的組織元素和未來編碼的時候很容易定位元素。

 

Inside Header folder create a new layer and name it bg. Using Rectangle Tool create a 100% x 100px. By looking at the Info Panel you can view the dimension of the shape that you’re making. Or you can do this by creating a new guide by going to View – New Guide – 100px Horizontal. It’s up to you what way you choose.

在Header文件夾裏新建bg圖層。用矩形工具建立100%*100px的矩形。查看信息面板時，你能夠看見你建立的形狀的尺寸。或者你能夠新建一條參考線來完成這件事，點擊：視圖 > 新建參考線，參數設置爲：水平100px。這取決於你用什麼方法來完成。

 

Add this Blending Option

添加以下的混合選項

• Gradient Overlay: #dcdcdc, #ffffff
• 漸變疊加： #dcdcdc， #ffffff

 

Next thing you do is create two lines using Line Tool 55px distance from the top. But I suggest to use Rectangular Marquee Tool to make the line pixel perfect.

接下來的事你要用直線工具建立兩條直線（（0，55，1200，1）、（0，56，1200，1）），距離頂部55px。不過我建議你使用矩形選框工具讓直線的像素完美

• Line 1: #cfcfcf
• Line 2: #ffffff
• 直線1： #cfcfcf
• 直線2： #ffffff

 

As you can see in the preview of our header there is a pattern above the lines. Create a new document 9px x 7px, background content Transparent. Using Pencil Tool with a fill color of #cfcfcf create a pattern as shown in the screenshot below. When you are done go to Edit – Define Pattern and name it whatever you wish to call it.

就像你看到的咱們頭部區域的預覽，那兒有一個圖案在直線的上方。建立新文檔，尺寸：9px*7px，背景是透明的。用鉛筆工具按照下面的截圖建立圖案，填充色： #cfcfcf。當你完成後，點擊：編輯 > 定義圖案，取個你想取的名字。

 

Using Paint Bucket Tool instead of foreground change it to pattern and select the pattern we made. Apply this pattern by making a selection and fill with pattern using Paint Bucket Tool.

選擇油漆桶工具，並把填充內容替換爲咱們以前建立的圖案。建立一個選區，用油漆桶工具填充圖案以完成添加圖案的工做。

建議用矩形工具建立一個矩形（0，48，1200，7），填充爲0，添加以下的圖案疊加的圖層樣式

 

 

Step 3: Creating Logo

步驟3：建立LOGO

 

This is just a simple site name logo. Start by using Text Tool and type your desired site name.

這僅僅是簡單的網站名字LOGO。用文字工具並輸入你指望的網站的名字

字體：Helvetica BOLD，字號：30px，TEMPLATE的顏色： #494367；SHOW的顏色： #A5AB0D

 

Add this Blending Option

添加以下的混合選項

• Inner Shadow: #000000
• 內陰影： #000000

 

Step 4: Creating Navigation

步驟4：建立導航菜單

 

Again using Text Tool lets place our navigation links.

再次用文字工具擺放咱們的導航連接

字體：Helvetica BOLD，字號：16px，About的顏色： #252525；其他文字的顏色： #555555

 

Add this Blending Option

添加以下的混合選項

• Drop Shadow: #ffffff
• 投影： #ffffff

 

Step 5: Creating Search

步驟5：建立搜索欄

 

To create our search bar use Rounded Rectangle Tool and set the radius to 10px, then create a shape as shown in the screenshot below.

用圓角矩形工具建立咱們的搜索欄，設置半徑爲10px，而後按照下面的截圖建立一個圓角矩形（65，805，275，70）

建議先新建四條參考線：垂直780、垂直80五、水平6五、水平100

 

 

As you can see in the preview above, the left side of our search bar is slanting. So, we need to transform our shape by selecting the layer and press Ctrl + T then Right Click to the work area and select Distort.

如你所見的預覽圖中，咱們搜索欄中的左邊是斜的。因此，咱們要變換咱們的形狀，選則圖層並按Ctrl + T，而後在工做區域右鍵，選擇扭曲。按照下圖進行變形，高度設置70是合適的，只要寬度變成325px，左邊就正好穿過交點。

 

Next we need to mask the bottom part of our shape to be equal in our header. First set the foreground to #000000, then select the layer bg in our header and make a selection of it. While it is selected select the shape of our search the press the Mask Icon in the layers panel area beside the fx icon. Just refer to the screenshot below.

下一步，咱們須要遮罩掉咱們的形狀的底部，使其等於咱們的頭部區域。首先設置前景色爲 #000000，而後在咱們的頭部區域的bg圖層作出一個選區。當它被選中，選擇咱們搜索欄的形狀，而後在圖層面板中區fx圖標（添加圖層樣式圖標）旁邊的蒙版圖標。參照下面的截圖。

 

Add this Blending Option

添加以下的混合選項

• Inner Shadow: #000000
• Inner Glow: #fff
• Gradient Overlay: #e6e6e6, #dcdcdc
• 內陰影： #000000
• 內發光： #ffffff
• 漸變疊加： #e6e6e6， #dcdcdc

 

Now let’s create the search button. Make a selection of the search bar, contract it by 2px, and fill it with any color. To contract go to Select – Modify – Contract.

如今讓咱們建立搜索欄按鈕。建立搜索欄的選區，收縮2px，而後用任意顏色填充（新建圖層，而後用油漆桶工具填充顏色）。經過點擊：選擇 > 修改 > 收縮，收縮選區

建議先作後一步後再作收縮2px

 

 

Select Rectangular Marquee Tool, by pressing Alt key you will notice that there is a - sign beside the selection pointer, this sign means to deselect selection. Now you can deselect the section you want to deselect.

選擇矩形選擇工具，按住Alt鍵，你能夠注意到在選擇光標一側有一個減號，這個減號意味着去除選區。如今你能夠去除你想去除的選區

 

Add this Blending Option

添加以下的混合選項

• Inner Glow: #ffffff
• Gradient Overlay: #dcdcdc, #f9f9f9
• Stroke: #c2c2c2
• 內發光： #ffffff
• 漸變疊加： #dcdcdc， #f9f9f9
• 描邊： #c2c2c2

 

Open up the search icon, align it and add a 1px drop shadow #ffffff.

打開search圖標，對齊擺放並添加1px白色的投影

由於圖標有本身的顏色，所以，再給圖標添加顏色疊加： #c2c2c2，以使風格統一

 

再給搜索欄添加文字：search for something..。字體：Arial 斜體，字號：14px，顏色： #666666

 

 

Step 6: Creating Slider

步驟6：建立圖片滑動欄

 

Create a folder above Header folder and name it Slider. Using Rectangle Tool with a fill color of #413f6b create a 100% by 250px.

在Header文件夾上新建Slider文件夾。用矩形工具建立一個寬100%高250px的矩形（0，99，1200，250），填充顏色： #413f6b

 

 

Add this Blending Option

添加以下的混合選項

• Inner Shadow: #ffffff
• 內陰影： #ffffff

 

Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters. Now, go to filter again and add noise

經過點擊：濾鏡 > 轉換爲智能濾鏡把該形狀圖層轉換爲智能對象。如今，再次點擊：濾鏡 > 添加雜色

 

 

Controls

控制按鈕

 

Create a folder inside Slider and name it Controls. Controls should have sub folders named: NextPrev and Slider Control. Inside NextPrev let’s create our Next and Previous buttons start by selecting Ellipse Tool with a fill color of #676589 and create a shape 40px x 40px.

在Slider組裏添加Controls文件夾。Controls有兩個子文件夾：NextPrev和Slider Control。在NextPrev中，咱們用橢圓工具建立咱們的Next和Previous按鈕，顏色填充： #676589，形狀尺寸：40px * 40px。（120，204，40，40）

 

Download the arrow icon provided in the resources and place it on our canvas. Resize and position it as shown in the screenshot below.

下載資源中提供的箭頭圖標並將它置於咱們的畫布上。調整大小並按照下面的截圖擺放

 

We are going to mask the shape, first set the foreground color to #000000, next make a selection of the arrow icon by Ctrl + Click to the layer and Inverse the selection by pressing Ctrl + Shift + I. While it is selected select the Ellipse shape and press the Mask Icon beside the fx icon in the layers panel.

咱們打算給形狀添加遮罩，首先設置前景色爲 #000000，接下來經過在圖層上按Ctrl + Click建立箭頭的選區，並按Ctrl + Shift + I翻轉選區。當出現選區時，選擇橢圓形狀圖層而後按在圖層面板中區fx圖標（添加圖層樣式圖標）旁邊的蒙版圖標。而後把箭頭圖層隱藏。

 

Duplicate the shape and place it on the other side. Grab some sample images to put in our slide. Also, using Text Tool add some text: a sample title and a little content just follow the formatting of the text as shown in the screenshot below.

複製該形狀並擺放到另外一邊（1040，204，40，40）。獲取一些示例圖片放在咱們的圖片滑動欄上。並，用文字工具添加一些文本：按照下面截圖上的文本格式的一個示例標題和一些內容文字。

標題字體：Helvetica BOLD，字號：22px，顏色： #ffffff；

段落字體：Arial，字號：12px，顏色： #E0DEFF；黃色的more的顏色： #EAEC25

Now we are going to work on our Slider Controls. Using Rounded Rectangle Tool with a 10px radius create a shape as shown in the screenshot below. Transform the shape the same as we did in our Search bar.

如今咱們打算建立咱們的滑動欄的導航按鈕。用圓角矩形工具，設置半徑爲10px，按照下圖建立一個圓角矩形。像和以前作搜索欄同樣進行變換

 

Also mask the layer as we did previously, refer to Step: 5 Creating Search.

給這個圖層添加蒙版，就像以前作的，查看步驟5：建立搜索欄

這個步驟比較省略，所以在這兒補充完整

用圓角矩形工具，半徑10px，建立一個圓角矩形（960，324，100，50）

按Ctrl + T自由變換，在形狀上右鍵選擇扭曲，按住Shift鍵，往右拖動右下角的控制塊，直到寬度變爲130；再按住Shift鍵往左拖動左下角的控制塊，直到寬度變爲160。

在紫色背景層上按Ctrl + Click，得到矩形選區，而後選中紅色形狀的圖層，按圖層面板上的蒙版按鈕

 

Add this Blending Option

添加以下的混合選項

• Gradient Overlay: #dcdcdc, #ffffff
• 漸變疊加： #dcdcdc， #ffffff

 

Using Ellipse Tool create a shape as shown in the screenshot below.

用橢圓工具建立以下面截圖所示的形狀（978，333，9，9）、（996，333，9，9）、（1014，333，9，9）、（1032，333，9，9）

灰色的顏色： #D4D4D4，綠色的顏色： #A5AB0D

 

Add this Blending Option

添加以下的混合選項

• Drop Shadow: #ffffff
• Inner Shadow: #000000
• 投影： #ffffff
• 內陰影： #000000

 

This will be the result.

這是最終的效果

 

Using Rectangle Tool with a fill color of #000000 create a 100% by 5px shape, then set the layer mode to multiply and opacity to 30% in the layers panel.

用矩形工具建立一個寬100%高5px的矩形（0，344，1200，5），填充色： #000000，而後在圖層面板中設置圖層模式爲正片疊底，不透明度30%

 

Make a selection of the slider control shape and expand it by 5px by going to Select – Modify – Expand.

建立滑動欄導航塊的選區，並經過點擊：選擇 > 修改 > 擴展，擴展選取5px。

新建圖層，命名爲Border，用黑色填充，圖層模式改成正片疊底，不透明度改成30%

選中紫色背景圖層，按Ctrl + Click建立選區，而後選中Border圖層，點擊圖層面板上的蒙版按鈕

左右有兩個深色色塊，不和諧，繼續修改。在Border圖層上右鍵選擇轉換爲智能對象。在以前的橫條矩形圖層上按Ctrl + Click建立選區，並按Ctrl + Shift + I反選選區

而後選中Border圖層，點擊圖層面板上的蒙版按鈕

 

Final step to create our slider is to add highlights. First make a selection of our slider base, then select Brush Tool set the hardness to 0% and size about 400px. Fill the selection in a separate layer with #ffffff color and set the blend mode to Soft Light in the layers panel.

最後給咱們的滑動欄添加高亮效果。首先給咱們的滑動欄建立選區，而後選擇畫筆工具，設置硬度0%、尺寸400px。在單獨的圖層裏填充顏色： #ffffff，而後在圖層面板裏設置混合模式爲柔光

 

Step 7: Featured Gallery

步驟7：精選畫廊

 

Create a new folder and name it Featured Gallery. Using Rectangle Tool with a fill color of #ededed create a shape 100% by 200px. Also, create two 1px lines, first line color #ffffff will be placed on the top of our shape and the second line color #c2c2c2 will be on the bottom.

建立新的文件夾Featured Gallery。用矩形工具建立一個矩形（0，349，1200，200），寬100%，高200px，顏色： #ededed。並，建立兩條1px的直線，第一條直線擺放在矩形的頂部（0，349，1200，1），顏色： #ffffff，第二條直線擺放在矩形的底部（0，548，1200，1），顏色： #c2c2c2。

能夠看出，在滑動欄的控制塊的底部有條白線。在控制塊圖層上按Ctrl + Click，建立選區，按Ctrl + Shift + I反向選區。選中白色直線的圖層，點擊圖層面板上的蒙版按鈕

 

Create a new layer above the shape and name it highlight. Then, make a selection of the shape. Using Brush Tool with a fill color of #ffffff brush in the center of the selection then, set the layer mode to Soft Light.

在形狀的圖層上新建圖層highlight。而後，建立形狀的選區。用畫筆工具在選區的中央填充白色，並設置圖層的混合模式爲柔光

 

Now let’s work on our sample post for our featured gallery. First, create a folder named post then put a 100px x 100px sample thumbnail on our canvas. Also, Using Text Tool add a Title and Content.

如今讓咱們建立精選畫廊中的示例列表。首先，建立一個文件夾post，而後在咱們畫布上擺放一個100px*100px的示例縮略圖，用文字工具添加一個標題和內容

標題字體：Arial，字號：16px，顏色： #363636；內容字體：Arial，字號：12px，顏色： #636363

 

Create a new layer below the thumbnail and name it shadow, using Pen Tool create a shape as shown in the screenshot below. Then, go to Filter – Blur – Gaussian Blur 1px, and set the Opacity to 50% in the layers panel.

在縮略圖的下面建立一個新的圖層shadow，用鋼筆工具按照截圖建立形狀。而後，點擊：濾鏡 > 模糊 > 高斯模糊，單位1px，並在圖層面板中設置不透明度爲50%

 

Create a new folder and name it rate. Now, open up the star icon and place it to our canvas and place it as shown in the screenshot below.

建立新的文件夾rate。如今，打開star圖標並按照下面截圖擺放到咱們的畫布上

 

Add this Blending Option

添加以下的混合選項

• Drop Shadow: #000000
• Gradient Overlay: #e7e918, #fffd76
• Stroke: #eaec25
• 投影： #000000
• 漸變疊加： #e7e918， #fffd76
• 描邊： #eaec25

 

Make a selection of the star and deselect starting from the middle to bottom and in a separate layer fill it with Linear Gradient #ffffff to Transparent then, set the Opacity to 70% in the layers panel.

給star圖層建立選區，去除star中間到底部的選區，在單獨的一個圖層裏用線性漸變填充，從#ffffff到透明，在圖層面板裏設置不透明度爲70%

 

This will be the result.

這是結果

 

Duplicate the star four times.

複製star四次

 

Duplicate the post folder two times a position it as shown in the screenshot below.

複製post文件夾兩次並按照下面的截圖擺放

 

 

Step 8: Posts

步驟8：列表

 

Fill the Background layer with #ededed. Create a new folder and name it Body Posts, create a sub folder and name it post. Now, create a sample 300px by 200px image thumbnail for our post and place it in our canvas. Using Rectangle Tool create a 300px by 45px shape just fill it with any color. Just refer to the screenshot below.

填充背景圖層，顏色： #ededed。建立新文件夾Body Posts，建立一個子文件夾post。如今，建立一個咱們列表的300px*200px的縮略圖在咱們的畫布上。用矩形工具建立一個300px*45px的矩形，用任意色填充。參看下面的截圖

 

Add this Blending Option

添加以下的混合選項

• Drop Shadow: #000000
• Gradient Overlay: #f7f7f7, #ffffff
• 投影： #000000
• 漸變疊加： #f7f7f7， #ffffff

 

Duplicate rate folder from our featured gallery and place it in the post folder. Also, using Text Tool create a sample title, just follow the settings in the screenshot below.

從featured gallery複製rote文件夾（評價星）到post文件夾，並擺放到合適位置。而且，用文字工具建立一個示例標題，按照下面的截圖設置

標題文字，字體：Helvetica，字號：16px，顏色： #363636

 

For unrated star style just remove the Gradient Overlay and replace it with Inner Shadow.

沒有標示的星星的樣式是去掉漸變疊加，而後替換爲內陰影，還得去掉投影和描邊和添加白色的顏色疊加。

 

Duplicate post folder five times and align it as shown in the screenshot below.

複製post文件夾五次，並按照下面的截圖擺放，水平間距20px，垂直間距19px

 

Step 9: Pagination

步驟9：分頁按鈕

 

Select Rounded Rectangle Tool and set the radius to 5px then, create a 620px by 45px shape below those posts.

選擇圓角矩形工具，半徑5px，建立一個620px*45px的圓角矩形（120，1403，620，45）在列表的下面，顏色： #fffcfd

 

Add this Blending Option

添加以下的混合選項

• Inner Shadow: #000000
• 內陰影： #000000

 

Using Text Tool place the number of pages as shown in the screenshot below.

用文字工具按照下面的截圖書寫頁碼

文字字體：Verdana，字號：12px。頁碼文字的顏色： #7E7E7E，頁碼1的顏色： #363636，Last的顏色： #7266FE

 

Step 10: Sidebar

步驟10：側邊欄

 

Create a #c2c2c2 1px line 40px distance from our post, Mask the line and make the tip faded using Brush Tool with a fill color of #000000. You may have something that looks like the screenshot below.

距離咱們的列表40px建立一條直線（780，549，1，300），顏色： #c2c2c2，給直線添加蒙版，做出一個淡出的效果，用畫筆工具，填充顏色： #000000。你作的東西就像下面的截圖同樣

做出淡出的效果，建議用，點擊：圖層 > 矢量蒙版 > 顯示所有。而後自下而上用漸變工具填充，從黑色到透明

 

Duplicate the line and move it to the left and change the color to #ffffff. Create a Horizontal line with the same color place it as shown in the screenshot below.

複製這條直線並移動到左邊，並改顏色爲 #ffffff。用一樣的顏色建立一條水平直線並按照下面的截圖擺放。

 

Next, create a new layer below those lines we have just created and name it shadow. Using Selection, Gradient Tool, and Eraser Tool perform what you have seen in the screenshot below. The set the shadow layer to Multiply, Opacity to 50%.

接下來，在這些直線下面新建圖層shadow。用選區工具、漸變工具、和橡皮擦工具配合使用，就像你看到的截圖同樣。設置shadow圖層爲正片疊底，不透明度爲50%

 

Duplicate the layer and place it on the top as shown in the screenshot below. It’s up to you to make adjustments, just erase the portion that you don’t like.

複製該圖層並按照下面的截圖擺放到頂部。這取決於你的調整，擦除你不喜歡的部分

建議新建選區，而後用漸變工具水平和垂直方向各劃一下，而後添加和豎直直線同樣的蒙版

 

Select Rounded Rectangle Tool then set the radius to 10px. Create a shape as shown in the screenshot below. The width of the shape is the remaining width of our canvas and the height will be 40px.

選擇圓角矩形工具，設置半徑爲10px。按照下圖建立一個形狀（760，597，320，40），形狀的寬度是咱們畫布剩下的寬度，高度40px

用矩形選框工具，建立一個選區（780，500，350，200），而後在選擇矩形的圖層，點擊圖層面板上的蒙版按鈕

 

Add this Blending Option

添加以下的混合選項

• Gradient Overlay: #494367, #6b6393, #494367
• 漸變疊加： #494367， #6b6393， #494367

 

Using Text Tool add a header title.

用文字工具添加一個標題。字體：Helvetica，字號：24px，顏色： #ffffff。並添加投影樣式

 

Next open up the social icons and place them on our canvas, align them as shown in the screenshot below, and also add their corresponding social icon names using Text Tool.

接下來打開社會媒體圖標並把它們擺放到咱們的畫布，按照下面的截圖擺放，並用文字工具給每一個圖標添加對應的說明文字。字體：Helvetica，字號：16px，顏色： #363636

 

Create two new folders and name them: Categories and Our Partners. Using Text Tool and Line Tool perform what you can see on the screenshot below.

建立兩個新的文件夾：Categories和Our Partners。用文字工具和直線工具配合使用，就像下面的截圖同樣

標題的字體：Helvetica，字號：18px，左邊文字的顏色： #363636，右邊文字的顏色： #655DF3

列表的字體：Tohoma，字號：12px，顏色： #7266FE

分割線：上面的顏色： #C2C2C3，下面的顏色： #FFFFFF

 

Step 11: Footer

步驟11：頁腳

 

Create a new folder and name it Footer. Inside footer there are sub folders named: About, Most Love, and Site Links. Using Rectangle Tool with a fill color of #413f6b create a footer that is the right size to you.

新建文件夾Footer。在Footer文件裏有這些子文件夾：About、Most Love、Site Links。用矩形工具建立一個合適頁腳的矩形（0，1498，1200，352），顏色： #413f6b

 

Add this Blending Option

添加以下的混合選項

• Inner Shadow: #ffffff
• 內陰影： #ffffff 應該是 #000000

 

Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters, go to filter again and add noise.

經過點擊：濾鏡 > 轉換爲智能濾鏡，轉換該形狀爲智能對象，再次點擊濾鏡，添加雜色

並添加一條白色的水平直線（0，1501，1200，1），不透明度設置爲20%

 

We were going to add info text in our about folder. Using Text Tool put in some dummy text and for the formatting of the text just refer to the screenshot below.

咱們要在about文件夾裏添加一些信息文字。用文字工具添加一些文字，並按照下面的截圖設置文字的格式

標題：字體：Helvetica，字號：18px，About的顏色： #FFFFFF；右邊文字的顏色： #ECED2B

段落及版權信息文字：字體：Helvetica，字號：12px，文字顏色： #E0DEFF

 

 

Using Text Tool add links on Site Links folder.

用文字工具在Site Links文件夾添加文字

標題：字體：Helvetica，字號：18px，Site的顏色： #FFFFFF；右邊文字的顏色： #ECED2B

列表文字：字體：Helvetica，字號：12px，文字顏色： #E0DEFF

分割線：上面的直線顏色： #2F2A47；下面直線的顏色： #5C5A89

 

Using Text Tool add a Post Title, Love this, and comments. Create also a 50px x 50px thumbnail and place it as shown in the screenshot below.

用文字工具添加列表標題，Love this，comments。建立50*50的縮略圖並按照下面的截圖擺放

標題：字體：Helvetica，字號：18px，Most的顏色： #FFFFFF；右邊文字的顏色： #ECED2B

列表標題：字體：Arial，字號：14px，顏色： #FFFFFF

下面的小文字：字體：Arial，字號：11px，顏色： #ECED2B、#E0DEFF

分割線：上面的直線顏色： #2F2A47；下面直線的顏色： #5C5A89

 

Final steps are adding copyright and back to top button. Open up the arrow icon and rotate it facing top.

最終要添加版權信息和回到頂部按鈕。打開arrow圖標並旋轉，使之箭頭朝上

 

Add this Blending Option

添加以下的混合選項

• Drop Shadow: #000000
• Gradient Overlay: #dcdcdc, #ffffff
• 投影： #000000
• 漸變疊加： #dcdcdc， #ffffff

 

Finally we’re done!

最終咱們完成了

 

後記：

這是一篇很好的教程。大量的運用了蒙版的技術。總體配色簡潔和諧，讓人賞心悅目。

在網上查閱到這篇教程的時候，只剩下文字說明和無效的死連接。感謝這個網站 WayBack Marchine 使我查到了這篇教程的備份，得以順利的完成本教程的翻譯。

同時，再介紹一個網站 TinEYE 它能根據你上傳的圖片找尋相似的圖片（新功能還包括，根據你指定顏色的比例來找尋相關的圖片）

下圖就是我把教程中的摺紙上傳後，找到的PSD素材，很好很強大。