作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟體是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出引數。本人在反覆測試的情況下測定了一些引數，以紅色的文字顯示。有些錯誤的引數，直接以紅色文字顯示正確的引數
例如：（90，22，231，77），表示矩形的左上角的座標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的座標是（90，22），矩形的其他兩個引數教程裡已經指定
4、在教程的最後會附上本人的心得。有些是對教程中的一些步驟的優化等。
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).
讓我們開始！為了加快閱讀，我會省略一些最基本的解釋（比如如何建立一個圖層蒙版或如何編輯貝齊爾向量形狀）。您將需要一些基本知識，如層、參考線、向量和圖層蒙版、筆刷、鋼筆工具，和文字工具（字元和段落）。
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:
第一步是建立一個模擬、塗鴉、甚至只是在一張餐巾紙上的佈局草圖。網站的結構有一個粗略的草稿，便於放置一些設計元素。下面你將看到一個簡單的草圖顯示以下元素：
A header, with the logo, search bar and social media links, besides the main navigation bar.
一個頭部區域，有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.
一個橫幅區域，包含精選文章，注意到文字內容已被放置到對話方塊中以刻畫“漫畫”的風格。
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.
一個內容區域，包含兩列的列表，每個列表項含有關聯的圖片並且文字也是很好的顯示在對話方塊中。
A footer, with a list of the blog’s categories, archive and popular post and recent comments and the copyright information.
一個頁尾區域，包含部落格分類列表、歸檔和熱門的帖子，最近的評論和版權資訊
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模版或者建立新文件，寬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.
調整工作區域使得看起來更加寬，同時合理的調整高度。我設定文件1420寬和1200高。最後點選：圖層 > 新建填充圖層 > 純色，設定畫布的背景色為黑色。
新建文件，尺寸：1420*1365，背景色設為黑色
Step 2: Header Background
步驟2：頭部區域的背景
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，複製並貼上到紅色漸變圖層的上方。調整它的大小使其正好適合整個頭部區域的設計並改變圖層的混合選項為線性加深。我們要切片這個為一個大的圖片背景，但更好的建議，我們需要用黑色背景微妙的合併紙張邊緣，對於這一點，使用加深工具，將接近我們紋理的左，右邊緣的地方變暗。您可以使用一個大而軟刷（硬度為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新增一些日輝紋創造一個戲劇性的背景
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%。可選操作：使用一個不規則的畫筆，在圖層蒙版上方用黑色塗抹，在日輝紋與背景之間的創造一個更多的汙漬聯合。
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.
為了實施漫畫風格，在頭部區域的背景上，我們將新增一些半色調點。Sunburst層上建立新層，並呈現一些黑色和白色的雲在那裡（點選： 濾鏡 > 渲染 > 雲彩）。然後點選： 濾鏡 > 畫素化 > 彩色半調。更改Halftone層的混合模式為正片疊底，並新增：圖層蒙版 > 隱藏全部。然後用一個大而柔軟的刷子（顏色：白色，不透明度和流量為75％）塗抹圖層蒙版的一些區域，使人們看到只有一些的半色調圖案。
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).
現在你已經完成頭部區域的背景，讓我們新增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
精選釋出的橫幅
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.
用直接選擇工具在我們建立的新的圓角矩形，向右拖動左上角的點（你可以用游標準確的拖動）。然後向左拖動右下角的點。（實際上按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資料夾並給每個箭頭新增不同的圖層樣式建立一個浮動的效果。我是複製標題口號的圖層樣式。（這個在轉換為HTML時有用，暫時跳過這一步）
Step 15: Halftone details
步驟15：半色調的細節
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的過程一樣，在黃色橫幅上面建立一個Halftone圖層。當Halftone圖層選中的時候，按Ctrl + Click在黃色橫幅圖層上，然後按Ctrl + Shift + I反轉選區，然後刪除超出的部分。改變Halftone圖層的混合選項為疊加，不透明度為25%。最後點選：圖層蒙版 > 隱藏全部，用一個大軟白刷，在圖層蒙版裡塗抹一些區域，使圖案的一部分能夠顯示出來。
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.
現在是時間新增一個擺放特色發表內容的區域了。為此，用自定義形狀工具選擇圓角長方形的談話框。繪製在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：特色釋出的文字
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.
是給我們的特色列釋出新增標題和簡介的時候。標題用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.
最後新增一個小的元資訊（列表資訊）在釋出簡介的下方，字型：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：特色釋出的標題的背景
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.
複製特色釋出的背景談話框，隱藏投影，改變填充色為黃色（ #FFC001）並柵格化。然後，用矩形選框工具，選擇在標題線下方的整個黃色談話框，然後刪除選區內容。接下來，新增一條邊框線，當Bubble Title圖層選中的時候，Ctrl + Click點選Bubble Background圖層的向量蒙版。然後點選：編輯 > 修改 > 收縮，設定值為1px（建議2px，比較明顯）。最後，按Ctrl + Shift + I反轉選區並刪除選區內容（也可以直接給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.
這是設定任何有關頂部橫幅的東西組織到資料夾的好時機，並新增更多的你想新增的細節，我新增一條黃色（ #ffc000）的線（927，302，288，1）在發表簡介和元資訊之間
在橫幅的左側，新增說明文字FEATURED NEWS。顏色： #FFFFFF；字型：Komika Title；字號：24px；行間距：24px。並新增如下的圖層樣式。最後按Ctrl + T自由變換，角度：-74。
漸變疊加的顏色： #EEEEEE，#FFFFFF
描邊的顏色： #FFFFFF
Main Content
主內容區
Step 20: Content Background
步驟20：內容區的背景
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).
現在讓我們關注主內容區的背景，建立名為Page Conten資料夾並畫一個白色（ #FFFFFF）的幾個畫素高的圓角矩形（240，452，910，544）（半徑：5px）（如果這時感覺畫布的尺寸太小，你可以增加它的大小，只是確保之前建立的頂部橫幅不動）
Step 21: Post Image
步驟21：釋出文章的圖片
It’s time to start adding content to the page, as default on blogs we will design a list of the latest posts.
是時候開始新增頁面的內容，像預設部落格一樣，我們要設計一個最新發布的列表
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.
我們將要完成給內容新增圖片，然後複製這些多次並按照你的所想擺放這些釋出的內容
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：釋出的簡介和元資訊
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：完成主內容區
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）並擺放到右側。按照下圖重複這個過程使列表兩到三行。調整白色背景的高度使之能包含所有的釋出。
Step 25: Page Content Corner
步驟25：內容區的邊角
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.
首先在右下角畫一個黑色三角形（可以用鋼筆工具）（建議用矩形工具建立一個矩形（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列寬。你可以建立它的副本使其正好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。用參考線劃定標題的基本線，保持它距主內容區背景下方至少20px。然後新增一些分類，用字型：Komika Text Title，字號：16px，顏色： #FFFFFF，紅色（ #EC000A）的是浮動的效果。作為浮動效果的額外的一個細節，用自定義形狀工具新增一個小黃（ #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.
由於這部分將有大量的釋出的列表，讓我們新增他們，基本上用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.
現在是新增一些細節來完成我們的作品。讓我們開始做搜尋欄。在所有圖層上建立Search Bar資料夾，建立一個圓角矩形（939，11，180，30）（半徑：3px，顏色： #000000；填充：50%；描邊：1px，位置：內部，顏色： #7C0000）當作搜尋輸入框，和一個小的矩形（1128，11，61，30）作為搜尋按鈕；複製主導航欄的選中項的圖層樣式並貼上給搜尋按鈕。對於實際的按鈕，在上面輸入白色文字GO！，然後新增和主導航欄同樣的投影（迴圈利用圖層樣式是一個很好的節省時間的方法）。在搜尋輸入框，新增文字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。把他轉換為智慧物件並點選：圖層蒙版 > 隱藏全部，用一個對稱的黑—白（即黑—白—黑漸變）的漸變填充蒙版建立如下圖的效果
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.
最後仔細檢查所有的層都在其各自的資料夾。
最後效果圖
後記：本篇教程用了和其他教程不同的技巧（大量的運用直接選擇工具建立特殊的形狀，以及用蒙版實現不少的效果），整體上的風格和其他的教程也略有不同，大量的卡通書的風格，別具一格。