後記：本篇教程用了和其他教程不同的技巧（大量的運用直接選擇工具建立特殊的形狀，以及用蒙版實作不少的效果），整體上的風格和其他的教程也略有不同，大量的卡通書的風格，别具一格。
作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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.
最後仔細檢查所有的層都在其各自的檔案夾。
最後效果圖
作者：萬倉一黍
出處：http://grenet.cnblogs.com/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。