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

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

點擊圖片，進(jìn)行全屏預(yù)覽。

本教程需用到的資源

· Search

· 社交圖標(biāo)

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

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

標(biāo)尺工具在本教程中非常有用，使用之前要確保標(biāo)尺和參考線已經(jīng)顯示

• 標(biāo)尺快捷鍵：Ctrl+R

• 參考線快捷鍵：Ctrl +

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

第2步：背景制作

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

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

 

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

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

第3步：頁眉制作

頁眉（header）區(qū)域包含Logo，導(dǎo)航條，搜索欄。為了做到井然有序，分別創(chuàng)建3個文件用來放置logo，導(dǎo)航條和搜索欄的圖層文件。制作一個基本形狀容納頁眉里的所有元素。選用矩形工具（Rectangle Tool）創(chuàng)建一個960像素 x 50像素的矩形�？捎萌魏晤伾畛�，因為稍后我們會對其應(yīng)用圖層樣式。

應(yīng)用圖層樣式

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

描邊顏色： #081010

 

Logo

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

應(yīng)用圖層樣式

· 投影（顏色）： #000000

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

導(dǎo)航條

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

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

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

 

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

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

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

搜索欄

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

應(yīng)用圖層樣式

· 內(nèi)陰影（顏色）： #4f4f4f

· 投影（顏色）： #000000

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

 

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

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

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

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

應(yīng)用圖層樣式

· 描邊（顏色）： #4e4e4e

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

 

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

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

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

將矩形的顏色改為#fea702

應(yīng)用圖層樣式

· 投影（顏色）： #000000

· 內(nèi)陰影（顏色）： #ffffff

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

最后一項操作是添加分割線。選用文本工具，輸入“--------”內(nèi)容作為分割線，填充顏色為#4e4e4e，復(fù)制文本層（寫了很多“-----”的這層），改變原始圖層顏色為#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。

應(yīng)用圖層樣式

· 內(nèi)陰影（顏色）：#ffffff

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

在預(yù)覽圖片中選定一個選區(qū)，選擇矩形圖層，應(yīng)用圖層蒙版�？雌饋砣缦聢D。

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

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

第6步：文章分類

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

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

將以上制作好的圖層進(jìn)行分組，復(fù)制該組，放在下圖所示的相應(yīng)位置。

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

 

第7步：側(cè)邊欄制作

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

社交網(wǎng)站鏈接

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

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

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

 

打開事先準(zhǔn)備好的社交網(wǎng)絡(luò)圖標(biāo)，按照下圖所示位置放置。使用快捷鍵Ctrl+T進(jìn)行變換大小操作，直到大小合適為止，為各個圖標(biāo)添加1像素的投影。

About Us Widget

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

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

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

Tabs

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

 

為Most Recent下的圖形應(yīng)用圖層樣式。

· 漸變疊加（顏色）： #4f4f4f， #141e1e

為Most Popular下的圖形應(yīng)用圖層樣式。

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

創(chuàng)建一個基本層放置內(nèi)容，該形狀的大小為302像素 x 435像素，顏色為#4f4f4f。

將分類區(qū)域的文字放在下圖所示位置。

用直線工具添加大小為1像素的直線，放在下圖所示位置。

廣告區(qū)域

 

找?guī)讖?25像素 x 125像素的廣告樣圖放在下圖所示位置。（上下廣告圖之間的間距為35像素）

第8步：頁腳制作

頁腳（footer）包含的內(nèi)容有twitter feed，widget，flickr微件，置頂評論。創(chuàng)建一個容納所有元素的基本圖層，頁腳基本圖層大小為960像素 x 345像素，因為與側(cè)邊欄的基本圖層制作方式一樣，此處不再贅述。

Twitter Feed

用矩形工具創(chuàng)建一個框

 

應(yīng)用圖層樣式

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

在下圖區(qū)域?qū)懮衔淖�，字體為Arial，字體樣式為Regular-Italic，字體大小為12pt，字體顏色為#c7c7c7，另增加1像素的投影。

將Twitter關(guān)注圖標(biāo)放在下圖所示位置。另外，在一旁寫Twitter的個人鏈接和總的關(guān)注人數(shù)。

最后一步是添加1像素大小的直線。直線顏色與工具條顏色一致。

About Widget

復(fù)制一份之前在側(cè)邊欄區(qū)域所做的about us widget內(nèi)容，放在下圖所示區(qū)域。（上下縮略圖的間距為5像素）
 

置頂評論

復(fù)制2份之前在tab步驟所制作的most popular的內(nèi)容以及一條分割線，放在下圖所示位置

復(fù)制2條分割線，放在下圖所示位置。

最后，添加copyright的文本。

終于完成了WordPress新聞博客模板，希望該教材對你有幫助。（jaysming）