PS設計教程之制作WordPress新聞博客模(14)

來源：站長之家作者：佚名　發(fā)布學習：1747人次

通常在第一次制作新聞博客模板，很難把握方向。這篇教程將為你提供如何在Adobe Photoshop中制作WordPress新聞博客主題的參考。該主題包括頁眉區(qū)，圖片輪換區(qū)域（包含特色文章，最近消息，按照分類顯示，側邊欄，widget）。如果你是初學者，跟著本教程一步一步來就可以。如果你有一定基礎，亦可從本教程中獲得新的收獲。

點擊圖片，進行全屏預覽。

本教程需用到的資源

· Search

· 社交圖標

第1步：創(chuàng)建文檔

在PS中創(chuàng)建一個1200像素 x 1700像素的文檔

標尺工具在本教程中非常有用，使用之前要確保標尺和參考線已經顯示

• 標尺快捷鍵：Ctrl+R

• 參考線快捷鍵：Ctrl +

使用標尺工具時，信息面板也非常重要，用標尺進行測量時，相關信息會先在在信息面板。如果沒有顯示，你可以到窗口（Windows）勾選上信息（Info）這一選項。

第2步：背景制作

用#081010顏色填充背景圖層。接下來，創(chuàng)建一個網格圖案。該圖案的文檔大小為20像素 x 20像素，背景為透明。

用鉛筆工具填充#ffffff顏色，創(chuàng)建一個如圖所示的圖案。

進入編輯（Edit）-創(chuàng)建圖案（Define Pattern）。打開油漆桶工具（Paint Bucket Tool），在下拉列表中選擇“圖案”（pattern），用之前創(chuàng)建好的圖案填充畫布上。要確保圖案是放在一個新的圖層。

填充圖案之后，將圖層模式修改為柔光（Soft Light），不透明度（Opacity）改為50%。

第3步：頁眉制作

頁眉（header）區(qū)域包含Logo，導航條，搜索欄。為了做到井然有序，分別創(chuàng)建3個文件用來放置logo，導航條和搜索欄的圖層文件。制作一個基本形狀容納頁眉里的所有元素。選用矩形工具（Rectangle Tool）創(chuàng)建一個960像素 x 50像素的矩形�？捎萌魏晤伾畛洌驗樯院笪覀儠䦟ζ鋺脠D層樣式。

應用圖層樣式

· 漸變疊加顏色：#353535， #505050

描邊顏色： #081010

Logo

Logo字體選用Helvetica Black，大小為24pt。

應用圖層樣式

· 投影（顏色）： #000000

· 漸變疊加（顏色）： #92b4b5， #ffffff

導航條

導航條包含鏈接和分割線。各個鏈接與左右的分割線保持18像素的距離。導航條的位置離Logo標志距離為208像素，用標尺工具（Ruler Tool）進行定位。

用矩形選區(qū)工具（ Rectangular Marquee Tool ）在離Logo標志208 像素處創(chuàng)建1像素的矩形選區(qū)。接下來用漸變工具（Gradient Tool）選擇從前景色漸變到透明，前景色為#4f4f4f，最后由下往上在該選區(qū)拉漸變色。

用直線工具（Line Tool）創(chuàng)建另外一條1像素的直線，填充顏色為#081010

鏈接與左右分割線的距離應為18像素，鏈接的文本內容選用大小為14pt的 Helvetica Roman字體。

在制作導航條時一定要注意鏈接與分割線之間的18像素的距離。導航條鏈接內容有world，business，sports，tech，web，science。完成上述操作之后，復制文本層，將文本顏色改為#1b1b1b，并上移1像素。

余下的空間用來放置搜索欄。

搜索欄

用圓角矩形工具（Rounded Rectangle Tool）創(chuàng)建一個半徑為20像素的形狀，顏色為#363636，放在圖示位置。

應用圖層樣式

· 內陰影（顏色）： #4f4f4f

· 投影（顏色）： #000000

最后一步添加搜索圖標，變換成合適大小放在圖示位置。

第四步：圖片輪換區(qū)域

圖片輪換區(qū)域包含圖像預覽，縮略圖，標題，內容，read more按鈕以及輪換控制鍵。首先，創(chuàng)建一個大小為620像素 x 1305像素，顏色為#e1eaea的矩形，做安放內容之用。

在基本圖層上添加噪點。進入濾鏡-轉換為智能濾鏡，然后再進入濾鏡-雜色-添加雜色-數(shù)量-1

在下圖所示位置分別放上大小為300像素 x 200像素的預覽樣圖和60像素 x 60像素的縮略樣圖。（圖片的擺放距離如圖上的紅體字所示）

應用圖層樣式

· 描邊（顏色）： #4e4e4e

接下來，我們?yōu)轭A覽圖和縮略圖分別添加標題，內容以及read more 按鈕。文字的字體參數(shù)參見下圖的紅體字部分。

制作一個80像素 x 25像素的矩形作為read more按鈕，放在下圖所示位置。

新建圖層，用鉛筆工具（Pencil Tool）在該圖層上描出下圖所示的箭頭形狀。

在上一步的箭頭圖層中使用蒙版工具，在箭頭圖層載入選區(qū)。然后適用快捷鍵Ctrl + Shift + I 進行反選（Inverse），選中矩形圖層，然后點擊下圖中fx圖標前的蒙版圖標。完成之后，隱藏箭頭圖層或是刪掉。

將矩形的顏色改為#fea702

應用圖層樣式

· 投影（顏色）： #000000

· 內陰影（顏色）： #ffffff

用文字工具在read more按鈕的正中位置上添加文字，字體名為Helvetica Roman，字體大小12pt，字體顏色#fffffff。完成之后，復制該形狀圖層并上移1像素，將顏色修改為：#cb8500.

最后一項操作是添加分割線。選用文本工具，輸入“--------”內容作為分割線，填充顏色為#4e4e4e，復制文本層（寫了很多“-----”的這層），改變原始圖層顏色為#ffffff。

第5步：Latest News區(qū)域制作

Latest news區(qū)域包含featured image，a categories，ribbon，post title，content和read more按鈕。在分割線下方40像素處，寫上Latest News，字體選用Helvetica Roman，大小18pt，顏色#141e1e。接著在下方的圖片展示區(qū)域放上275像素 x 120像素的樣圖。

用矩形工具創(chuàng)建一個顏色為#fea702，100像素 x 15像素的形狀，用文字工具在形狀的中央位置寫上文字BUSSINESS，字體為Helvetica Roman，大小8pt，顏色#ffffff。

應用圖層樣式

· 內陰影（顏色）：#ffffff

復制文本圖層，并將原圖層顏色改為#c88300。上移文字圖層1像素。選中剛剛制作好的幾個圖層（矩形圖層，兩個business文字圖層），按住快捷鍵Ctrl+T調出變換操作，如圖旋轉45°。

在預覽圖片中選定一個選區(qū)，選擇矩形圖層，應用圖層蒙版。看起來如下圖。

使用文字工具添加上下圖的內容。相應內容的字體名，字體樣式，字體大小及字體顏色見下面中的紅色文字部分。

將本步驟制作好的圖層進行分組，取名為post。復制該組，并整體右移30像素。將飄帶的顏色修改為#8170e8，并修改文字內容。（譯者注：其實這里的操作就是一個整體復制的過程，因為內容圖示版面相同，所以創(chuàng)建文件夾，進行整體復制，然后進行局部修改）

第6步：文章分類

此處文字的參數(shù)與recent news的字體參數(shù)一樣。在下圖所示的展示區(qū)域放上60像素 x 60像素的樣圖，并為其添加上類別名。（注意下圖所示的紅色字體所顯示的距離）

用文字工具添加下圖所示的文字內容。文字的顏色和字體與latest news中保持一致。

將以上制作好的圖層進行分組，復制該組，放在下圖所示的相應位置。

將題目分類分組。復制3份，放在下圖所示位置。

第7步：側邊欄制作

側邊欄包含社交網站鏈接，widget，tabs和廣告。首先制作基本圖層，用矩形工具創(chuàng)建一個顏色為#353535的矩形，重復在基本圖層的內容區(qū)域使用智能濾鏡和雜色。

社交網站鏈接

創(chuàng)建一個顏色為#4e4e4e，340像素 x 50像素的矩形。

使用直線工具創(chuàng)建1像素的直線，放在下圖所示位置。

添加Follow us文本，字體選用Helvetica Roman，大小為18pt，顏色#ffffff。（添加1像素的投影，不透明度為75%）

打開事先準備好的社交網絡圖標，按照下圖所示位置放置。使用快捷鍵Ctrl+T進行變換大小操作，直到大小合適為止，為各個圖標添加1像素的投影。

About Us Widget

widget包括縮略圖，頁眉，內容，read more按鈕。首先，創(chuàng)建一個顏色與放社交圖標區(qū)域一樣的基本圖層，大小340像素 x 210像素。頁眉的文本字體格式與社交圖標區(qū)域不變。

創(chuàng)建大小為90像素 x 90像素，顏色為#121b1b的正方形。放在圖示About Yana的下方。

用文字工具在之前的方形右邊添加顏色為#cccccc的文字，并加上1像素的頭像。另外，復制之前制作的read more按鈕，將其顏色改為#616161，放在圖示位置。

Tabs

tabs包含Most Recent posts和Most Popular兩部分內容。創(chuàng)建一個125像素 x 50像素的矩形。在該矩形放上Most Recent的字樣，字體為Helvetica Roman，大小14pt，顏色#fffffff，并添加1像素的投影。復制這兩個圖層，將文本改為Most Popular。