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

約定：

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

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

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

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

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

4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優(yōu)化等。

Before Getting Started

開始之前

Let’s get it started! In order to speed up the reading I will avoid some of the most basic explanations (like how to create a layer mask or how to edit the handlers or Beziers of a vector shape). You will need some basic knowledge about Layers, Guides, Vector and Layer Masks, Brushes, the Pen Tool, and working with Typography (Character and Paragraphs).

讓我們開始！為了加快閱讀，我會省略一些最基本的解釋（比如如何創(chuàng)建一個圖層蒙版或如何編輯貝齊爾矢量形狀）。您將需要一些基本知識，如層、參考線、向量和圖層蒙版、筆刷、鋼筆工具，和文字工具（字符和段落）。

The first step is creating a mock up, doodle, or even just a sketch the layout on a napkin. Having a rough draft of the site’s structure makes easy placing the elements on the design. Below you will see a simple sketch showing the following elements:

第一步是創(chuàng)建一個模擬、涂鴉、甚至只是在一張餐巾紙上的布局草圖。網站的結構有一個粗略的草稿，便于放置一些設計元素。下面你將看到一個簡單的草圖顯示以下元素：

A header, with the logo, search bar and social media links, besides the main navigation bar.

一個頭部區(qū)域，有LOGO、搜索欄、社會媒體連接，除了主導航欄。

A banner, with featured posts, notice how the post text is placed over the image into a talk bubble to depict the "comic" style.

一個橫幅區(qū)域，包含精選文章，注意到文本內容已被放置到對話框中以刻畫“漫畫”的風格。

A content area, with a list of posts displayed in two columns, each post have a picture associated and the text is shown into a talk bubble as well.

一個內容區(qū)域，包含兩列的列表，每個列表項含有關聯的圖片并且文本也是很好的顯示在對話框中。

A footer, with a list of the blog’s categories, archive and popular post and recent comments and the copyright information.

一個頁腳區(qū)域，包含博客分類列表、歸檔和熱門的帖子，最近的評論和版權信息

Step 1: Setting Up the Document

步驟1：設置文檔

Open Photoshop, download the 12 columns Photoshop template from 960 Grid System or create a new document 960px with and make draw some Guides to the left and right borders.

打開PS，下載12列的960網格系統的PS模版或者創(chuàng)建新文檔，寬960px，并且左邊和右邊畫一些參考線

Increase the working area to see how it looks on wider resolutions and increase the height as well. I’m setting the document dimensions to 1420px width and 1200px height. Finally go to Layer > New Fill Layer > Solid Color… and set a Black (#000000) background for the canvas.

調整工作區(qū)域使得看起來更加寬，同時合理的調整高度。我設置文檔1420寬和1200高。最后點擊：圖層 > 新建填充圖層 > 純色，設置畫布的背景色為黑色。

新建文檔，尺寸：1420*1365，背景色設為黑色

Step 2: Header Background

步驟2：頭部區(qū)域的背景

Draw a horizontal Guide around 450px from the top border, we will use it as a reference guide to add a shade on top of the page. Using the Rectangle tool, draw a wide rectangle using this color as foreground (#AA0001). Then apply a Gradient Layer Mask (Black to White) to the rectangle in order to hide the bottom part of it.

用頂邊下來450px處畫一條水平參考線，我們將要用它給頂部添加陰影作為參考。用矩形工具，畫一個寬的矩形（0，0，1420，450），前景色： #AA0001。然后在矩形上添加一個漸變蒙版（黑到白）用來隱藏底部。

Tip: do not ever use a Gradient Layer for backgrounds, because when increasing the height of the canvas (a very common practice in web design) the background gets distorted.

提示：永遠不要在背景上用漸變圖層，因為當調整畫布的高度時（網頁設計時很常見的做法），背景會被扭曲

注：也可以直接給矩形圖層添加如下的漸變疊加來實現相同的效果，漸變疊加的顏色： #00000， #AA0001

Step 1: Add a Texture to theBackground

步驟3：給背景添加紋理

Open the "Paper Texture" from the assets Copy and Paste it above the red gradient layer. Scale it in order to make it fit into the bounds of the design and change the layer’s Blending Mode to Linear Burn. We will slice this as a large image background, but for wider resolutions we need to subtle merging the edges of the paper with the black background, for this, using the Burn Tool, darken the areas close to the Left and Right edges of our paper texture. You can use a big and soft Brush (0% Hardness).

從素材中打開Paper Texture，復制并粘貼到紅色漸變圖層的上方。調整它的大小使其正好適合整個頭部區(qū)域的設計并改變圖層的混合選項為線性加深。我們要切片這個為一個大的圖片背景，但更好的建議，我們需要用黑色背景微妙的合并紙張邊緣，對于這一點，使用加深工具，將接近我們紋理的左，右邊緣的地方變暗。您可以使用一個大而軟刷（硬度為0％）。

Always keep your layers organized, put both layers ("Paper" and "Rectangle") into a folder named "Header Bg".

為了保持你的圖層的組織性，把這些圖層（Paper和Rectangle）合并到一個名為Header Bg的文件夾

Step 1: Sunbursts

步驟4：日輝紋

Moving forward with the comic style, let’s add some sunburst stripes to create a dramatic background for the logo.

展望未來的漫畫風格，讓我們給LOGO添加一些日輝紋創(chuàng)造一個戲劇性的背景

Open the "Sunburst" shapes from the assets. On the Custom Shape tool, choose your favorite sunburst shape an draw it over the red gradient layer. Place the shape to near to the left border of the 960 template (show the Guides to see the bounds). Apply to the "Sunburst" layer a Radial Gradient Layer Mask (white in the center and black in the outside). Change the Layer Opacity to 50%. Optional: using an irregular Brush, paint with Black over the Layer Mask to create a more grunge merge between the sunburst and the background.

打開素材里的Subburst形狀。打開自定義形狀工具，選擇你的日輝紋形狀，并繪制在紅色漸變層的上方（顏色： #C30000）。擺放該形狀靠近960布局模版的左邊（打開參考線查看邊界）。給Subburst圖層一個徑向漸變蒙版（白色在中央，黑色在邊界）。把圖層的不透明度改為50%。可選操作：使用一個不規(guī)則的畫筆，在圖層蒙版上方用黑色涂抹，在日輝紋與背景之間的創(chuàng)造一個更多的污漬聯合。

Step 1: Halftone

步驟5：半色調

In order to enforce the comic style, we will add some Halftone points over the header background. Create a new layer above the "Sunburst" layer, and render some Black and White Clouds in there (Filter > Render > Clouds). Then go to Filter > Pixelate > Color Halftone. Change the "Halftone" layer’s Blending Mode to Multiply and add a Layer Mask > Hide All to it. Then using a big and soft Brush (Color: White and Opacity and Flow to 75%) paint some areas of the layer mask to make visible only a bit of the halftone pattern.

為了實施漫畫風格，在頭部區(qū)域的背景上，我們將添加一些半色調點。Sunburst層上創(chuàng)建新層，并呈現一些黑色和白色的云在那里（點擊： 濾鏡 > 渲染 > 云彩）。然后點擊： 濾鏡 > 像素化 > 彩色半調。更改Halftone層的混合模式為正片疊底，并添加：圖層蒙版 > 隱藏全部。然后用一個大而柔軟的刷子（顏色：白色，不透明度和流量為75％）涂抹圖層蒙版的一些區(qū)域，使人們看到只有一些的半色調圖案。

Step 1: The Title

步驟6：標題

Now you have the header background finished, let’s add the Logo. First draw a reference Guide around 180 px below the top border, the logo shouldn’t be below that guide. Using the "Komika Title" font face from the assets type the title of the site ("Comicastic") Font Size: 68pt and foreground color: #FFB401. Then Add more text element, like the exclamation sign or the slogan in white (font size 16pt).

現在你已經完成頭部區(qū)域的背景，讓我們添加LOGO。首先，在頂邊下來180px處畫一條水平參考線，LOGO不會在這條參考線的下方。用素材包里的Komika Title字體并輸入網站的標題（Comicastic），字號：68px，顏色： #FFB401。然后添加一些文字元素，像白色的感嘆號標志（字號：76px）和口號（字號：16px）

Then using the Free Transform Tool rotate the text a few degrees left to make it look less formal. Try to get something like the image below, but remember not to place any element below the guide. Finally put all these layers into a folder labeled "Logo".

然后用自由變換工具旋轉文本向左旋轉一些角度（LOGO在4度左右、標語在1度左右、驚嘆號除了放大到150%左右，并垂直作了斜切），使其看起來不那么正式的。試試按照下圖做些東西，不過要記住不要在參考線下方擺放元素。最后把這些圖層合并到一個名為Logo的文件夾

Step 7: Logo Layer Styles

步驟7：LOGO圖層樣式

Add a Layer Style > Gradient Overlay (#EA9403 – #FFC501) a Stroke (Size:1px, Inside, #FCB600) and a Drop Shadow (Black, 50% Opacity, Distance and Size: 2px) to the "logo" layer. Use a similar Style to the slogan, but change the colors of the Gradient Overlay to #EDEDED - #FFFFFF and the Stroke to White (#FFFFFF). If you place the exclamation sign to the logo, you can try converting it into a shape (Layer > Type > Convert to shape) and distorting it a bit as shows the bottom of the image below.

給Logo的圖層添加圖層樣式：漸變疊加（ #EA9403- #FFC501）、描邊（大小：1px，內部， #FCB600）、投影（黑，不透明度50%，距離和大小：2px）。給口號以類似的圖層樣式，不過把漸變疊加的顏色改為 #EDEDED - #FFFFFF，描邊改為白色（ #FFFFFF）。如果你在LOGO中擺放驚嘆號，你可以嘗試把它轉換為形狀（圖層 > 文字 > 轉換為形狀）并扭曲一點點就像下面底部的圖片。（這一步在之前已經用斜切來替代了，沒必要再做了）

LOGO的圖層樣式

口號和驚嘆號的圖層樣式

Featured Posts Banner

精選發(fā)布的橫幅

Step 8: Background

步驟8：背景

Use the Rounded Rectangle Tool (Radius 5px) to draw a wide rectangle all across the banner below the logo as shows the image below, the height if the rectangle is up to you, I’m setting 250px. Then apply a Gradient Overlay (Colors: #DA7E00 – #F0AD00, Angle: 90°) and Stroke (Color: #F2AA00, Size: 1px, Position: Inside).Layer Styles to it.

用圓角矩形工具（半徑：5px）畫一個穿過LOGO下方的橫幅的寬的圓角矩形（240，180，940，250），就像下圖所示，矩形的高度取決于你，我的是250px。然后給圖層添加一個漸變疊加（顏色： #DA7E00 - #F0AD00，角度：90）和描邊（顏色： #F2AA00，大�。�1px，位置：內部）的樣式

Step 9: Changing the Top Banner

步驟9：改變橫幅的頂部

Using the Direct Selection Tool (A) over our brand new rounded rectangle, grab the points of the top left corner and move them to the right (you can use the cursors for an accurate move). Then move the bottom right points a few pixels left.

用直接選擇工具在我們創(chuàng)建的新的圓角矩形，向右拖動左上角的點（你可以用光標準確的拖動）。然后向左拖動右下角的點。（實際上按Ctrl + T自由變換后，右鍵選擇扭曲，把左上角的點向右拖動，H：13.97；把右下角的點向左拖動，H：-7.07。這樣也能達到同樣的效果）

Step 10: Adding the sliding picture container

步驟10：添加滑動的圖片內容

Now, using the Rectangle Tool draw a gray rectangle inside the yellow banner (630px x 250px aprox.), you can leave the bottom part of the gray rectangle a few pixels away to the bottom of the yellow banner to create an out-of-bounds effect. Add a Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and a Drop Shadow (Color: #000000, Opacity:50%, Distance: 0px, Spread: 0px, Size: 5px) and try to place the rectangle as shows the image below. Finally, put both layers (Gray and Yellow rectangles) into a folder named "Top Banner".

現在，用矩形工具在你的黃色橫幅中畫一個灰色的矩形（360，190，630，250）（630px*250px），你可以讓灰色矩形的底部距黃色橫幅一些像素以便出現一個出界的效果。添加描邊（尺寸：1px，位置：內部，顏色： #FFFFFF）和投影（顏色： #000000，不透明度：50%，距離：0px，擴展：0px，大�。�5px）和嘗試按照下圖所示擺放矩形。最后，把所有的圖層（灰色和黃色矩形）合并到一個文件夾Top Banner

Step 11: Main Navigation

步驟11：主導航

Using the font family "Komika Text" type the pages navigation at the top right of the top banner, set the font Size to 18px and color: #FFFFFF. Put it on a folder named "Pages Navigation", be sure this folder is behind the "Top Banner". Then using the Rounded Rectangle Tool (Radius: 3px, Color: #EFA800), draw a rectangle just behind the first word of the navigation, name the layer "Selected Tab". Next using the Direct Selection Tool (A) move the points of the bottom left as shows the image below. Next apply a Gradient Overlay to the "Selected Tab" layer (Colors: #F0A900 – #FEBF00, Angle: 90°). If you want to, you can add a very subtle Drop Shadow (Color: #000000, Opacity: 25%) to the navigation text.

在橫幅頂部的右上側用字體Komika Text輸入頁面導航，設置字號18px，顏色： #FFFFFF。把它放入到一個文件夾Pages Navigation，確保該文件夾在Top Banner的后方。然后用圓角矩形工具（半徑：3px，顏色： #EFA800），畫一圓角矩形矩形（828，149，92，40）在導航欄的第一個選項的后面，命名圖層Selected Tab。接下來用直接選擇工具按照下圖拖動左下角（按Ctrl + T自由變換后，用斜切，向右拖動左上角的點，H：-14.04）。然后在Selected Tab添加漸變疊加（顏色： #F0A900 - #FEBF00，角度：90度）。如果你想，你可以給導航欄的文字添加一個微妙的投影（顏色： #000000，不透明度：25%）

Step 12: Add the banner images

步驟12：添加橫幅圖片

To show an actual sample, paste any image over the banner. If the image is bigger that the rectangle you can use a Clipping Mask, for this paste the image above the gray rectangle, then Option / Alt – Click between the two layers, this will clip the image inside the rectangle no cropping needed.

為了顯示真實的圖片，粘貼任何圖片在橫幅上。如果圖片大小超過矩形，你可以使用一個剪貼蒙版。對于這個在灰色矩形上方的粘貼圖片，在兩個圖層之間按Alt - Click，這會剪切圖片使其在矩形范圍之內而無須剪裁。注：相當于在圖片層上右鍵添加剪貼蒙版

Step 13: Banner Controls

步驟13：橫幅控制按鈕

Select the Custom Shape Tool and chose one of the arrows, and draw a couple one next to the other, both pointing left. Then Apply to both a Gradient Overlay (#6D0004 – #980000) and a Stroke (Size: 1px, Position: Inside, Color: #B20002). Put both arrows into a folder named "Prev" and using the Free Transform Controls and holding the Command / Ctrl key, distort the arrows a little bit. Then duplicate the folder and rename it to "Next", move it to the right of the banner and go to Edit > Transform > Flip Horizontal to change its direction. Finally put both folders "Next" and "Prev" into a new folder named "Controls".

選擇自定義形狀工具并選擇其中一個箭頭，畫一對，一個挨著一個，都是指向左邊。然后給他們添加樣式，漸變疊加（ #6D0004 - #980000）和描邊（尺寸：1px，位置：內部，顏色： #B20002）。把這些箭頭合并到名為Prev的文件夾，用自由變換工具，按住Ctrl鍵，扭曲箭頭一點點。然后復制文件夾改名為Next，移動到橫幅的右側，并點擊：編輯 > 自由變換 > 水平翻轉改變他們的方向。最后把Next和Prev文件夾歸并到Controls文件夾

Step 14: Controls Hover

步驟14：浮動按鈕

Now duplicate the "Next" and "Prev" folders and apply a different layer style to the arrows in order to create a hover effect for each one. I’m Copying the Layer Style from the exclamation sing of the title.

現在復制Next和Prev文件夾并給每個箭頭添加不同的圖層樣式創(chuàng)建一個浮動的效果。我是復制標題口號的圖層樣式。（這個在轉換為HTML時有用，暫時跳過這一步）

Step 15: Halftone details

步驟15：半色調的細節(jié)

With the same process of Step 5, create a Halftone Layer above the yellow banner. With the "Halftone" layer selected do Command / Ctrl – Click over the yellow banner, then hit Command / Ctrl + Shift + I to invert the selection, then delete the exceeding. Change "Halftone" layer’s Blending Mode to Overlay and Opacity to 25%. Finally add a Layer Mask > Hide All and using a big soft White Brush, paint over some areas on the layer mask to make visible only a few portions of the pattern.

和步驟5的過程一樣，在黃色橫幅上面創(chuàng)建一個Halftone圖層。當Halftone圖層選中的時候，按Ctrl + Click在黃色橫幅圖層上，然后按Ctrl + Shift + I反轉選區(qū)，然后刪除超出的部分。改變Halftone圖層的混合選項為疊加，不透明度為25%。最后點擊：圖層蒙版 > 隱藏全部，用一個大軟白刷，在圖層蒙版里涂抹一些區(qū)域，使圖案的一部分能夠顯示出來。

Step 16: Featured Article Talking Bubble

步驟16：特色文章的談話框

Now is time to add a field to put the featured post’s content. For this, using the Custom Shape Tool look for the Rounded Cornered and Rectangular talking bubble. Draw it over the "Featured Image" Banner and place it on the right as shows the image below. Before designing any of this features you need to do some research if it’s possible to achieve this kind of effect, even if you don’t know how to code, you can look for some existing libraries of Ajax (JQuery / MooTools) and see what is already done and working, and then adapt your design to an existing library.

現在是時間添加一個擺放特色發(fā)表內容的區(qū)域了。為此，用自定義形狀工具選擇圓角長方形的談話框。繪制在Featured Image橫幅的上方，并按照下圖擺放在右側。在設計任何此功能之前，您需要做一些研究，看看是否有可能實現這種效果，即使你不知道如何為代碼，你可看看 Ajax 的一些現有的庫 （JQuery / MooTools) 已經做了什么工作，然后依據現有庫適應您設計。

Then, using the Direct Selection Tool (A) distort the shape of the bubble a little bit. Finally apply a Drop Shadow (Color: #000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).
然后，用直接選擇工具扭曲談話框形狀一點點。最后添加投影（顏色： #000000，不透明度：25%，距離：5px，擴展：0px，大�。�10px）

Step 17: Featured Post Text

步驟17：特色發(fā)布的文字

It’s time to add the title and a brief to our featured post. For the title use "Komika Title", 18pt. #680001. For the Body text, use "Komika Text Tight", Size: 16pt, Color: #1B1B1B. Place the text layers right aligned as shown on the image below.

是給我們的特色列發(fā)布添加標題和簡介的時候。標題用Komika Title字體，字號：18px，顏色： #680001。段落文字，用Komika Title字體，尺寸：16px，顏色： #1B1B1B。按照下圖右對齊擺放這些文字圖層

Step 18: Comments Box and Post Meta

步驟18：回復框和列表信息

Now, add another bubble, but smaller this time, use this color as foreground: #9C0001 and add a Stroke layer style (Color: #D00000, Size: 1px, Position: Inside), just as shows the image below, then add the comments number with "Komika Title" font face, Color: #FFFFFF and Size: 24pt. And the word "Comments" with "Komika Title", Size: 12pt, Color: #FFB301.

現在，添加另一個談話框（建議直接復制之前的談話框，然后再適當的調整一下），不過這次小一點，前景色用 #9C0001，并按照下圖添加描邊的圖層樣式（顏色： #D00000，尺寸：1px，位置：內部），然后添加回復的數字，字體用Komika Title，顏色： #FFFFFF，尺寸：24px；文字Comments，字體Komika Title，尺寸：12px，顏色： #FFB301

Finally add a small Meta (information about the post) below the post brief with "Tahoma" font, Size: 10pt, Color: #1B1B1B. If there’s no enough space to put the Meta text, you can use the Direct Selection Tool to increase the height of the featured post bubble box a little bit.

最后添加一個小的元信息（列表信息）在發(fā)布簡介的下方，字體：Tahoma，尺寸：10px，顏色： #1B1B1B。如果沒有足夠的空間放置信息文本，你可以使用直接選擇工具調整特色列標談話框的高度一點點

Tip: Do not ever transform a Vector Rounded Corner element using the Free Transform Tool in Photoshop, this will distort the corner, select the points you want to move using the Direct Selection Tool and then displace them.

提示：永遠不要在PS中用自由變換工具變換矢量圓角元素，這會扭曲圓角，用直接選擇工具選擇你想移動的點并移動他們。

Step 19: Featured Post Title’s background

步驟19：特色發(fā)布的標題的背景

Duplicate the featured post background bubble, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, using the Rectangular Marquee Selection Tool, select all the yellow bubble below the title line, then Delete the selection. Next, add a line of border, with the "Bubble Title" layer selected, Command / Ctrl – Click over the "Bubble Background" Vector mask. Then Go to Edit > Modify > Contract and set the value to 1px. Finally, hit Command / Ctrl + Shift + I to invert the selection and delete it.

復制特色發(fā)布的背景談話框，隱藏投影，改變填充色為黃色（ #FFC001）并柵格化。然后，用矩形選框工具，選擇在標題線下方的整個黃色談話框，然后刪除選區(qū)內容。接下來，添加一條邊框線，當Bubble Title圖層選中的時候，Ctrl + Click點擊Bubble Background圖層的矢量蒙版。然后點擊：編輯 > 修改 > 收縮，設置值為1px（建議2px，比較明顯）。最后，按Ctrl + Shift + I反轉選區(qū)并刪除選區(qū)內容（也可以直接給Bubble Title圖層添加2px白色的描邊來實現同樣的效果）

This is a good time to set everything related to the top banner organized into folders and add more detail if you want to, I’m adding a yellow line between the Post brief and the Meta.

這是設置任何有關頂部橫幅的東西組織到文件夾的好時機，并添加更多的你想添加的細節(jié)，我添加一條黃色（ #ffc000）的線（927，302，288，1）在發(fā)表簡介和元信息之間

在橫幅的左側，添加說明文字FEATURED NEWS。顏色： #FFFFFF；字體：Komika Title；字號：24px；行間距：24px。并添加如下的圖層樣式。最后按Ctrl + T自由變換，角度：-74。

漸變疊加的顏色： #EEEEEE，#FFFFFF

描邊的顏色： #FFFFFF

Main Content

主內容區(qū)

Step 20: Content Background

步驟20：內容區(qū)的背景

Now let’s move forward with the main content background, create a Folder named "Page Content" and draw a white (#FFFFFF) Rounded Corner Rectangle (5 px radius) several pixels height (If the original canvas size becomes too small at this time you can increase its size, just ensure to keep the top border as is).

現在讓我們關注主內容區(qū)的背景，創(chuàng)建名為Page Conten文件夾并畫一個白色（ #FFFFFF）的幾個像素高的圓角矩形（240，452，910，544）（半徑：5px）（如果這時感覺畫布的尺寸太小，你可以增加它的大小，只是確保之前創(chuàng)建的頂部橫幅不動）

Step 21: Post Image

步驟21：發(fā)布文章的圖片

It’s time to start adding content to the page, as default on blogs we will design a list of the latest posts.

是時候開始添加頁面的內容，像默認博客一樣，我們要設計一個最新發(fā)布的列表

Draw two squares (3 columns width aprox.) and place them as shows the image below. Doing the same process than step 12 add some images over the squares using them as Clipping Masks. Finally select the square and add a Stroke Layer Style to it (Color: #FFB801, Size: 1px, Position: Inside).

畫兩個正方形（250，462，228，228）、（710，462，228，228）（大約3列寬左右）并按照下圖擺放他們。和步驟12中的一樣，給正方形添加一些圖片，就像使用剪貼蒙版。最后，選中正方形并添加描邊（顏色： #FFB801，尺寸：1px；位置：內部）

We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage.

我們將要完成給內容添加圖片，然后復制這些多次并按照你的所想擺放這些發(fā)布的內容

Step 22: Add posts’ Titles and Categories.

步驟22：添加列表的標題和分類

Draw two wide rectangles, one yellow (#F2AA00) and another White with yellow border below (#FFB401). Over the yellow stripe, type the title of the post using "Komika Title", Color: #670003, Size: 18pt. And on the white stripe, type the Categories names using "Komika Text Tight" Size: 13pt, Colors #212121 for links and #670003 when mouse over.

畫兩個寬的矩形，一個黃色（ #F2AA00）黃邊（ #FFB401）（250，616，300，28）和另一個在下面的白色黃邊（ #FFB401）（250，643，270，28）。在黃色的矩形上，輸入列表的標題，字體：Komika Title，顏色： #670003，尺寸：18px。在白色的矩形上，輸入分類的名字，字體：Komika Text Tight，尺寸：13px，鏈接的顏色： #212121，鼠標懸浮的顏色： #670003

Step 23: Post brief and Meta

步驟23：發(fā)布的簡介和元信息

Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using "Komika Text Tight" Size: 14pt, Color: #FFFFFF, a sample Meta text using "Tahoma" 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

再次畫一個談話框，在圖片和黃色矩形的上方，給它填充顏色： #333333，1px的描邊（顏色： #696969）并添加我們之前給橫幅添加的投影樣式。然后添加一個示例簡介文本，字體：Komika Text Tight，字號：14px，顏色： #FFFFFF；一個示例信息文本，字體：Tahoma，字號：10px，顏色： #979797，和你想在它們之間添加的分割線（顏色： #4B4B4B）

Step 24: Finishing the main content

步驟24：完成主內容區(qū)

To finish this part add a Comments bubble, basically repeating the process of Step 18. Then put everything on folders, I’m naming the post folder "A post". Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

為完成這個部分，要添加一個回復的談話框，基本上是重復步驟18的步驟（可以把步驟18的談話框復制，并適當的調整大小，回復數字的字號：18px，COMMENTS字號：10px）。然后把他們合并到文件夾，我給文件夾命名為A Post。然后復制（Ctrl + Drag）并擺放到右側。按照下圖重復這個過程使列表兩到三行。調整白色背景的高度使之能包含所有的發(fā)布。

Step 25: Page Content Corner

步驟25：內容區(qū)的邊角

To increase the "comic book" style, we will add a simple page curl at the bottom right of the white background.

為了增加Comic book風格，我們要在白色背景的右下角添加一個頁面卷曲的效果

First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a "reflex" of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named "Page Curl". Keep it handy because we are using it later.

首先在右下角畫一個黑色三角形（可以用鋼筆工具）（建議用矩形工具創(chuàng)建一個矩形（1098，951，52，45），然后用直接選擇工具選擇左上角的點，刪除即可得到三角形），然后復制它并移動三角形使之成為黑色的“反射”，你可以給這個復制的三角形填充任意顏色。接下來彎曲第二個三角形，使其變成一點點曲線狀。然后，用漂亮的混合顏色給彎曲三角形一個漸變疊加（ #9C0001 - #FE0000 - #9C0001），根據彎曲的角度調整漸變的角度使其看起來更舒服，在這里是108度。接下來用一個軟刷（黑色，不透明度和流量為50%）在新的圖層里給彎曲的三角形添加一個陰影。如果你想，添加一些點在彎曲的三角形上使其添加一個圓角，就像下圖所示。最后，把所有的彎角的圖層合并到Page Curl文件夾。把它放在顯眼的位置，因為我們后面還要用到它。

Step 26: Footer Background

步驟26：頁腳背景

We are almost done, first create a folder named "Footer" and ensure is below the "Page Content" folder, inside it draw a red (#9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

我們完成的差不多了，首先確保在Page Content文件夾下面新建文件夾Footer，在里面畫一個紅色（ #9C0001）的圓（560，850，300，300），然后添加一個半徑至少65px的高斯模糊。然后變換產生的模糊光圈（240，787，910，420），使其適合邊界的參考線。

Step 27: Background sunbursts

步驟27：背景日輝紋

Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

現在，用自定義形狀工具，選擇一個日輝紋，在中間畫一個黑色的日輝紋，然后將不透明度降低到50%。然后添加半色調在紅色圓光暈的上方，用圖層蒙板隱藏它，僅僅顯示其中的一小部分。最后將紅色圓的不透明度改為50%（建議70%比較好）。

Step 28: Footer content background

步驟28：頁腳內容背景

We will add common elements of a blog such Categories and Archive on the footer.

我們要在頁腳添加一個博客普通的分類和歸檔的元素

Now, let’s add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

現在，讓我們給頁腳元素添加一個背景，畫一個圓角矩形（240，1050，220，250）（半徑：5px），顏色： #1A1A1A，然后把填充設置為50%，使其有3列寬。你可以創(chuàng)建它的副本使其正好4個適應整個頁腳

Step 29: Footer content background – Curl

步驟29：頁腳內容背景——彎角

Select the first rectangle, (you can delete the others at this point). Then duplicate the "Page Curl" folder and place it inside the "Footer" folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

選擇第一個矩形，（你可以刪除其他的矩形）。然后復制Page Curl文件夾并把它放進Footer文件夾，變換它使其適合矩形的右下角（建議縮放70%），然后更改漸變疊加的顏色為不同的石頭灰色（分別是： #232323， #97918a， #252525）。最后給矩形添加一個描邊（1px，內部， #242424）

Step 30: Categories

步驟30：分類

Now, add the title of the section, in this case "Categories" using "Komika Title", Size: 14px Color: #F2AA00. Use guides to delimit the title baseline, keep it at least 20 px below the end of the page content background. Then add some rows as sample categories, using "Komika Text Tight", Size: 16px, Color: #FFFFFF, and Red (#EC000A) as hover effect. As an additional detail for the hover effect, add a little yellow (#FFB301) arrow using the Custom Shape Tool. Put all the layers into a folder named "Footer Element".

現在，給這個部分添加標題，在這里是Categories，用字體：Komika Title，字號：14px，顏色： #F2AA00。用參考線劃定標題的基本線，保持它距主內容區(qū)背景下方至少20px。然后添加一些分類，用字體：Komika Text Title，字號：16px，顏色： #FFFFFF，紅色（ #EC000A）的是浮動的效果。作為浮動效果的額外的一個細節(jié)，用自定義形狀工具添加一個小黃（ #FFB301）箭頭。把這些圖層歸并到一個名為Footer Element文件夾

Step 31: Duplicate the footer section

步驟31：復制頁腳部分

Duplicate the "Footer element" folder and move it to the right, change the words to depict "Archives" this time.

復制Footer element文件夾并移動到右側，這次用文字Archives來描述。

Then duplicate the folder again but this time expand the translucent background to make it twice wider, on top, type the titles for "Popular Posts", "Latest Posts" and "Recent Comments", use yellow for the first one and gray for the other two. As you guess, this will have a similar functionality than a tabbed pane. Then add a little yellow triangle to mark the selected tab.

然后再次復制文件夾但是這次要擴展半透明背景為2倍寬（矩形的參數（720，1050，460，250）），在頂部，輸入標題Popular Posts、Latest Posts、Recent Comments，給第一個用黃色（ #F2AA00），其余兩個用灰色（ #5A5A5A）。正如您所猜，這將有一個類似選項卡式窗格的功能。然后加一點黃色三角形標記在選定的選項卡。

Step 32: Tabbed pane content

步驟32：選項卡式的窗格內容

Since this part will have mostly lists of posts, lets add them, basically is a combination of "Komika Title" and "Komika Text Tight" with different colors (See the screenshot below). The first row will be a sample of the selected (hover) item, on this, add a black (#000000) rounded rectangle behind the text and add a Horizontal Gradient (Black to White) Layer Mask.

由于這部分將有大量的發(fā)布的列表，讓我們添加他們，基本上用Komika Title和Komika Text Tight的字體組合，用不同的顏色（看下面的截圖）。第一行是一個被選中的行（懸浮），在這里，添加一個黑色（ #000000）的圓角矩形在文字的后面，并添加一個水平漸變（黑到白）的圖層蒙版

Finally, add a little Pager at the bottom of this section.

最后，在本部分的底部添加一個頁碼

黃色標題的顏色： #F2AA00；段落文字的顏色： #909090；黃色頁碼的顏色： #F2AA00；灰色頁碼的顏色： #484848

Step 33: Search Bar

步驟33：搜索欄

It’s time to add some details to finish up our graphic. Let’s start with the search bar. Create a folder named "Search Bar" on top of everything, create a Rounded Rectangle (3px Radius, Color: #000000 with a Stroke Effect Size: 1px, Position: Inside, Color: #7C0000) as the search input, and a small rectangle for the search button; Copy the Layer Style of the selected item on the main navigation and paste it to the search button. For the actual button, type the word "Go!" over it with White, and apply the same Drop Shadow than the main navigation text (recycling layer styles is a great time saver). On the Search input, type the Word "Looking for something" using "Komika Text Tight" Color: #F9A600.

現在是添加一些細節(jié)來完成我們的作品。讓我們開始做搜索欄。在所有圖層上創(chuàng)建Search Bar文件夾，創(chuàng)建一個圓角矩形（939，11，180，30）（半徑：3px，顏色： #000000；填充：50%；描邊：1px，位置：內部，顏色： #7C0000）當作搜索輸入框，和一個小的矩形（1128，11，61，30）作為搜索按鈕；復制主導航欄的選中項的圖層樣式并粘貼給搜索按鈕。對于實際的按鈕，在上面輸入白色文字GO！，然后添加和主導航欄同樣的投影（循環(huán)利用圖層樣式是一個很好的節(jié)省時間的方法）。在搜索輸入框，添加文本Looking for something，字體：Komika Text Tight，顏色： #F9A600

Then add a Rectangle behind all the layers inside "Search Bar", fill it with a dark red #380001 (Fill: 50%) and apply a Stroke using this Color: #890101. Convert it to a Smart Object and apply a Layer Mask > Hide All to it, fill the mask with a Reflected Black – White Gradient to create the effect show at the bottom of the image below.

在Search Bar文件夾里的所有圖層的下方添加一個矩形（720，0，560，50），用深紅色（ #380001，填充：50%）填充并添加一個描邊樣式，顏色： #890101。把他轉換為智能對象并點擊：圖層蒙版 > 隱藏全部，用一個對稱的黑—白（即黑—白—黑漸變）的漸變填充蒙版創(chuàng)建如下圖的效果

Step 34: Social Media Icons

步驟34：社會媒體圖標

Repeat the process of the search bar background but this time using a less height bar and with a sightly different Stroke color (#860001). Then type the word "Follow us" using "Komika title" and paste all the icons you want to add, you can use the mini icons from the assets. Don’t forget to keep your layers organized under folders.

重復制作搜索欄背景的過程，不過這次高度小一點（480，33，470，25），和另一個悅目的描邊顏色（ #860001）。然后輸入文字Follow us，字體用Komika title，然后粘貼所有你想添加的圖標，你可以用素材包里的迷你圖標。不要忘記把你的圖層組織在一個文件夾

Step 35: Footer navigation and copyright information

步驟35：頁腳導航和版權信息

Finishing today’s work, let’s add the Footer navigation. Delimit the section with a white Line, masked with a reflected black – white gradient. Type the navigation links using Arial, Size 10px, Color: #515151 and highlight a hover effect with yellow: #F2AA00. Then add the copyright text Right aligned.

要完成今天的工作了，讓我們添加頁腳導航。用白色的線（230，1322，960，1）分開，用一個對稱的黑—白的漸變給它蒙版。輸入導航欄鏈接，字體：Arial，字號：10px，顏色： #515151，并高亮的懸浮效果的顏色： #F2AA00。然后在右側添加版權信息

Step 36: This is it!

步驟36：完工了！！

Finally double check all the layers are on its respective folder.

最后仔細檢查所有的層都在其各自的文件夾。

最后效果圖

后記：本篇教程用了和其他教程不同的技巧（大量的運用直接選擇工具創(chuàng)建特殊的形狀，以及用蒙版實現不少的效果），整體上的風格和其他的教程也略有不同，大量的卡通書的風格，別具一格。

更多PS網頁設計教程XXX——在PS中創(chuàng)建一個漫畫書主題網頁布局相關文章請關注PHP中文網！