photoshop制作博客網(wǎng)站模板實(shí)例教程(11)

博客網(wǎng)站已經(jīng)越來(lái)越多的被國(guó)內(nèi)用戶所接受與使用,由于博客的內(nèi)容比較簡(jiǎn)單,大多作為個(gè)人的心情抒發(fā)或日記形式,所以BLOG界面也比較直接,往往排版就分為左右內(nèi)容與導(dǎo)航區(qū),不過(guò)簡(jiǎn)單的東西不一定容易設(shè)計(jì),往往優(yōu)秀的BLOG界面還是比較稀少的,本文的BLOG網(wǎng)站是由國(guó)外設(shè)計(jì)師設(shè)計(jì),截面清爽簡(jiǎn)潔,細(xì)節(jié)處理比較到位,值得借鑒
本教程主要是告訴大家如何在Photoshop里面設(shè)計(jì)一個(gè)有活力并具有現(xiàn)代感的博客界面。
我們會(huì)從零開(kāi)始告訴大家如何從一個(gè)空白的畫(huà)布來(lái)一步步的制作出整個(gè)界面。

這是我為Springy Developments的一個(gè)WordPress主題項(xiàng)目中的一個(gè)特別的設(shè)計(jì)，將來(lái)我想我們一起來(lái)看看如何將這個(gè)設(shè)計(jì)轉(zhuǎn)化為編碼的過(guò)程以及最后如何將他們制作成最終的產(chǎn)品。
牢記最初的概念設(shè)計(jì)稿，下面的教程將會(huì)一步一步來(lái)明確這個(gè)過(guò)程。想要一個(gè)好的設(shè)計(jì)，大量的試驗(yàn)和一些元素的重新安排是不可或缺的，因?yàn)檫@將讓我們很好的理解為什么使用這些工具，為什么這樣布局來(lái)設(shè)計(jì)這樣一個(gè)產(chǎn)品。




打開(kāi)PS然后創(chuàng)建一個(gè)空白文檔。我比較喜歡在一個(gè)大一點(diǎn)寬屏文檔上面開(kāi)始制作。切記使用RGB色彩模式以及設(shè)置為72DPI就好，因?yàn)槲覀兙o緊是在屏幕上使用（注，一般印刷是300dpi，而屏幕只要72就夠了，CMYK為印刷色）

首先我們來(lái)處理頁(yè)面的背景，這個(gè)地方?jīng)]什么特別有趣的填充物。給背景選擇一個(gè)素色，然后從上面使用放射性漸變工具一直拖到中間。當(dāng)然你也可以選用自己喜歡的顏色，在這里我就選擇了我選擇的是藍(lán)綠色的漸變。

打開(kāi)一個(gè) 牛皮紙 素材， 我們將用它來(lái)為背景增加一些有趣的材質(zhì)效果。



將材質(zhì)去色 (CTRL+SHIFT+U),然后選擇高斯模糊用大一點(diǎn)的像素來(lái)抹掉牛皮紙上面的一些細(xì)節(jié)。

將修改過(guò)的牛皮紙材質(zhì)放在漸變的背景色上面，然后選擇混合模式的疊加選項(xiàng)，再修改透明度為90%。

在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)合理的用戶顯示器范圍是網(wǎng)頁(yè)布局一個(gè)重要的步驟。除非另有要求，我一般都是將分辨率調(diào)整到1024×768，因此我在文檔的中部將參考線設(shè)置為960px寬，兩邊空白處各有20px寬，這是為了以防一些元素超出之前設(shè)置的屏幕分辨率。



使用圓角矩形工具畫(huà)一個(gè)內(nèi)容區(qū)域如上圖所示，顏色為淺灰色（#eeeeee)，圓角半徑為20px。注意在這種情況下圓角矩形并不要兩邊頂滿，因?yàn)橄旅嬗覀?cè)還要添加一些東西。

雙擊圓角矩形圖層然后添加8白色描邊，寬度為8px，混合模式為疊加然后調(diào)整透明度為30%，這樣就會(huì)有一個(gè)很酷的透明效果-_-"

再次為這個(gè)圓角矩形兄添加一個(gè)內(nèi)發(fā)光，白色的5像素即可，這樣會(huì)讓邊線產(chǎn)生一個(gè)很細(xì)小的傾斜效果。



最后添加一個(gè)外發(fā)光，黑色的15%透明度的，于是一個(gè)淡淡的內(nèi)容區(qū)的陰影就這樣出現(xiàn)了。

新建一層，再畫(huà)一個(gè)圓角矩形寬度一樣，但這次要改改圓角半徑，10px足矣。在下面給這個(gè)灰色區(qū)域添加一點(diǎn)點(diǎn)漸變讓他有一種傾斜度。

復(fù)制一個(gè)之前的內(nèi)容區(qū)域，然后用橡皮工具從中間將兩側(cè)的邊線擦出一個(gè)漸變來(lái)。（注，這里最好選擇一個(gè)圖層蒙版然后用漸變做，橡皮的透明度不好控制，不知道他是怎么做到的-_-"）

在整個(gè)邊線上再用鉛筆工具畫(huà)1px的垂線。這里可以按住shift來(lái)保持角度和垂直。



還是要慢慢擦出來(lái)漸變（其實(shí)這一步可以在擦邊線之前做好然后再套上圖層蒙版做漸變。）

這樣一個(gè)巨大的灰色內(nèi)容區(qū)就這么的呈現(xiàn)在眼前鳥(niǎo)，并且下部還有些漸變哦�；仡櫹聛�(lái)看看，頂端的圓角要比下面的大，邊線是在中部漸變透明的。

將一個(gè)紙張的材質(zhì)蓋住內(nèi)容區(qū)頭部的一部分�？梢杂蒙�/飽和度（ctrl+U）將其調(diào)整為藍(lán)綠色。

按住CTRl然后點(diǎn)右邊圖層中內(nèi)容區(qū)的縮略圖，可以創(chuàng)建一個(gè)選框，然后反選（CTRL+ALT+I）然后刪除多于的部分（注：這里更推薦另一種方法，首先確定紙張層與內(nèi)容層相鄰并且紙張層在內(nèi)容層上面，然后在紙張層上右鍵，創(chuàng)建圖層蒙版，就可以出現(xiàn)類(lèi)似的效果，后面調(diào)整起來(lái)比較方便），然后還是擦出一條漸變來(lái)。

用鉛筆工具在頭部的下面畫(huà)一條1px的橫線。



選擇內(nèi)容圖層然后用上面的方法建立一個(gè)選取，按住ALT鍵來(lái)縮小選區(qū)如上圖。然后新建一個(gè)圖層在這個(gè)選區(qū)內(nèi)填充上白色并且改變透明度為90%這樣然后略微做一下漸變，這樣就在頭部添加了一點(diǎn)高光。

繼續(xù)用矩形選框工具在內(nèi)容區(qū)域上面畫(huà)一個(gè)側(cè)邊欄。依舊填充灰色背景（#eeeeee）

添加一個(gè)透明的邊框，跟上面做的方法差不多選擇描邊選項(xiàng)即可。

繼續(xù)用外發(fā)光來(lái)添加一個(gè)淺灰色的邊，調(diào)整擴(kuò)展值到最大這樣我們可以得到一個(gè)雙邊線效果。



再用內(nèi)發(fā)光工具給側(cè)邊欄添加一個(gè)白色的邊線效果，方法跟上面的一樣。調(diào)整阻塞選項(xiàng)到最大值，可以讓光出現(xiàn)的比較柔和。

最后在側(cè)邊欄上添加一個(gè)從白色到灰色的漸變來(lái)增加些細(xì)節(jié)和層次。

將側(cè)邊欄裁開(kāi)，因?yàn)橹坝?jì)劃的是每一個(gè)菜單目錄都是一個(gè)單獨(dú)的區(qū)域。
>
博客日志區(qū)的設(shè)計(jì)方法跟前面的很類(lèi)似，每一日志都需要有一個(gè)自己的封閉區(qū)域。畫(huà)一個(gè)矩形來(lái)模擬這些區(qū)域。

填充上白色，然后右鍵點(diǎn)擊側(cè)邊欄將他的圖層樣式拷貝走然后粘貼到這個(gè)日志區(qū)域圖層上。（偷懶的方法一定不要忘記嘎）



到這一步基本上框架已經(jīng)搞定了，下面我們?cè)陧?yè)面上做一些文本測(cè)試來(lái)看看我們的顏色和大小有沒(méi)有問(wèn)題

創(chuàng)建一個(gè)導(dǎo)航區(qū)域，注意要有漸變，做法參照頭部的方法。輸入導(dǎo)航文字。

隨便扒拉一篇你要發(fā)布的日志復(fù)制過(guò)來(lái)，調(diào)整顏色和大小和行間距。標(biāo)題是相當(dāng)重要的元素所以必須要粗點(diǎn)顏色要醒目點(diǎn)。一些作者信息例如時(shí)間日期等到時(shí)不重要的，所以他們可以小一點(diǎn)顏色淺一點(diǎn)。

在內(nèi)容區(qū)域底部畫(huà)一個(gè)淺色矩形。



用一些看起來(lái)很棒而且免費(fèi)的按鈕來(lái)設(shè)置一些函數(shù)，添加一些次級(jí)信息例如留言數(shù)，繼續(xù)閱讀等。這些信息對(duì)訪客來(lái)講還是很有用的所以將他們另外隔開(kāi)放到另一個(gè)地方來(lái)。

最后添加寫(xiě)其他頁(yè)面原色比如訂閱啦等。RSS圖標(biāo)你可以在教程很多地方找到例如

咣當(dāng)當(dāng)最后一個(gè)華麗麗擁有良好的頁(yè)面信息和清楚的框架結(jié)構(gòu)的博客界面設(shè)計(jì)就這樣的出來(lái)鳥(niǎo)。下面我們會(huì)講解如何將這個(gè)設(shè)計(jì)稿轉(zhuǎn)化為真正的網(wǎng)頁(yè)。

下一次,我們就來(lái)學(xué)習(xí)一下如何把做好的模板設(shè)計(jì)切圖為XHTML+CSS網(wǎng)頁(yè)用圖片 http://bbs.16xx8.com/thread-73781-1-1.html