PS網頁設計教程XXX——在PS中建立一個漫畫書主題網頁佈局

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

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

約定：

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

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

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

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

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

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

 

 

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.

最後仔細檢查全部的層都在其各自的文件夾。

 

最後效果圖

 

 

後記：本篇教程用了和其餘教程不一樣的技巧（大量的運用直接選擇工具建立特殊的形狀，以及用蒙版實現很多的效果），總體上的風格和其餘的教程也略有不一樣，大量的卡通書的風格，別具一格。