#PS基礎(chǔ)教學(xué)#PS學(xué)習(xí) #PS新手教學(xué)

960網(wǎng)格目前已經(jīng)在網(wǎng)頁設(shè)計(jì)普遍使用，利用960的分割特點(diǎn)可以很方便的對網(wǎng)頁設(shè)計(jì)中的元素進(jìn)行分區(qū)與排版。本文中就是利用960網(wǎng)格的分塊特點(diǎn)設(shè)計(jì)的一個(gè)簡潔的博客網(wǎng)頁模板。

在photoshop中學(xué)習(xí)製作基於960網(wǎng)格系統(tǒng)的網(wǎng)頁模板，你將會(huì)學(xué)到圖層效果和定位元素相關(guān)知識(shí)。

最終效果預(yù)覽

第一步

一般在Photoshop中製作網(wǎng)頁模板的時(shí)候，我使用960網(wǎng)格系統(tǒng)?，F(xiàn)而今這個(gè)網(wǎng)格系統(tǒng)在web設(shè)計(jì)中相當(dāng)流行。然而我仍然相信網(wǎng)格系統(tǒng)不應(yīng)該被過度的依賴。我使用960的主要原因是它psd文件中自帶的參考線可以大大提高web設(shè)計(jì)的效率。所以我推薦到這裡免費(fèi)下載960。下載完成後用PS打開一個(gè)12行的psd文件(960_grid_12_col.psd)，將會(huì)看到下面這個(gè)文件。

第二步

如果參考線沒有打開，請通過-視圖>顯示->智能參考線和視圖->對齊到->參考線打開，快捷鍵Ctrl ;。以下你看到的是我已經(jīng)在圖中間畫好了一個(gè)黑色矩形，接下來所有的元素都將包含在這個(gè)矩形中。其實(shí)你沒有必要畫這個(gè)矩形，因?yàn)楸尘笆前咨?，如果你覺得有幫助，不妨畫之。

第三步

新建一個(gè)圖層，選擇漸變工具然後選擇如下圖白色到黑色的一個(gè)漸變效果。畫的時(shí)候按住shift使?jié)u變線絕對水平。如果效果上有差異，可以多試幾次。

第四步

選擇矩形選定工具沿著參考線從左上到右下在第二步中的漸變圖中選定如下區(qū)域。按ctrl shift I反選，然後按delete刪除反選區(qū)域。

第五步

重複上面兩個(gè)步驟，讓右邊也同樣加入一個(gè)漸變圖層，確保它們是對稱的。

第六步

新建一個(gè)圖層組把兩個(gè)邊沿漸變矩形拖入其中，然後選定圖層組，將不透明度設(shè)置為10%。

第七步

接下來加入兩邊的虛線效果。如果只需要在css中使用dashed邊框，那麼這個(gè)虛線效果在PS中是沒有必要製作的。一個(gè)聰明的辦法是使用圖形變換 工具;首先創(chuàng)建一個(gè)新圖層，然後按Ctrl T，然後把這個(gè)藍(lán)色矩形稍微下移一些，然後連續(xù)按Ctrl Shift Alt T。如果你感覺這個(gè)方法複雜 了，可以手動(dòng)的創(chuàng)建每個(gè)藍(lán)色矩形。然後選定所有藍(lán)色矩形，按Ctrl E將它們合併。然後複製這個(gè)圖層到右邊，做成兩個(gè)對稱的邊沿。

第八步

現(xiàn)在加入網(wǎng)頁標(biāo)題和標(biāo)識(shí)性語言，這裡我使用到的字體是“Rockwell”。使用同樣的藍(lán)色。如果你熟悉色板，一個(gè)聰明的辦法是分別新建一個(gè)藍(lán)色、一個(gè)灰色色板以供後續(xù)使用。

第九步

現(xiàn)在用Helvetica或者Tahoma無襯線字體創(chuàng)建菜單項(xiàng)。只需要輸入一些大寫的同色的字體。一般我喜歡把大寫字體的字間距調(diào)大一點(diǎn)。選擇字體，勾選窗口>字符，然後在字符面板中調(diào)整字間距。每個(gè)菜單項(xiàng)都在不同的圖層中調(diào)整。

第十步

把所有的菜單項(xiàng)加入一個(gè)圖層組，複製一個(gè)副本，然後把色彩調(diào)為灰色，這樣就有兩個(gè)菜單組了，一個(gè)是藍(lán)色的，一個(gè)是灰色的。這樣做是為了在網(wǎng)頁中產(chǎn)生一個(gè)鼠標(biāo)懸停變色效果。每次同時(shí)只讓一個(gè)菜單項(xiàng)可見，效果如圖：

第十一步

如果站點(diǎn)需要RSS訂閱功能，那麼可以加入一個(gè)自定義的RSS訂閱圖標(biāo)。首先創(chuàng)建一個(gè)藍(lán)色矩形框，然後用Rockwell字體寫上“RSS”。訂閱圖標(biāo)可以到這裡下載，選擇“Developer Kit”，然後放入我們的psd文件中。 然後把圖標(biāo)放入一個(gè)新的圖層組，然後複製組，把藍(lán)色矩形換成灰色，同樣是為了實(shí)現(xiàn)鼠標(biāo)懸停換色的效果。

第十二步

我覺得主頁加入一個(gè)主題圖片將會(huì)看起來不錯(cuò)。我從stock image上下載一個(gè)符合這個(gè)網(wǎng)頁配色的圖片，如果你有興趣可以到SXC這裡下載。將圖片放入文檔然後調(diào)整大小和位置，如下圖：

(譯者註：原作者提供的圖片地址已經(jīng)失效)

第13步

通過矩形框選定工具，在圖上拖動(dòng)一個(gè)選定框(也就是你需要的部分)，然後反選，刪除其他部分。

第十四步

使用Rockwell字體在圖上寫一些小的標(biāo)示文字。然後新建一個(gè)圖層，畫兩個(gè)白色矩形作為標(biāo)示文字背景，然後把字體顏色改為藍(lán)色。

第十五步

在幻燈圖片的右邊，將加入一些帶引號(hào)的文字，文字內(nèi)容可以是“歡迎光臨本站”之類的話。用無襯線字體灰色寫上這些文字，然後在不同的圖層中加入超大號(hào)的引號(hào)，然後調(diào)整好位置。

第十六步

在頁面的中間加入類似於博客格式顯示的新聞。首先用Rockwell字體、灰色輸入“news”。然後新建圖層組，命名為“Item 1”，組中是第一條新聞項(xiàng)的所有元素。

第十七項(xiàng)

然後加入新聞內(nèi)容字體，右上角加入一個(gè)日期，這些都是“Item 1”圖層組的元素。

第十八步

使用淡灰色畫上一個(gè)矩形框作為新聞項(xiàng)的背景樣式。

第十九步

複製2個(gè)圖層組“item 1”，把中間那個(gè)圖層組的灰色背景去掉。

第二十步

我認(rèn)為可以利用邊框來放一個(gè)flickr組?，F(xiàn)在在設(shè)計(jì)類的站點(diǎn)是相當(dāng)流行的，比如PSDlearning和Fuel Your Creativity都是這麼做的。首先放置一個(gè)類似於新聞樣式的標(biāo)題。然後加入尺寸為75×75的圖片?？梢缘缴厦嫣峒暗恼军c(diǎn)上下載縮略圖，然後按照下面的樣式排版。

第二十一步

選擇所有縮略圖，然後按Ctrl E合併圖層。然後圖層選擇混合選項(xiàng)，按照下圖設(shè)定：

第二十二步

在頁面中加入一個(gè)帶描邊樣式的廣告欄。

第二十三步

接下來頁腳區(qū)域加入一些額外信息，比如友情鏈接，客戶，版權(quán)等。

第二十四步

最後一步需要在頁面的各區(qū)域之間加入分割線，讓頁面看起來更有序一些。創(chuàng)建新圖層，選擇畫筆工具，直徑設(shè)置為1px，然後把前景色設(shè)置為中灰色，可以參照下圖畫線，記住按住shift哦。

進(jìn)入論壇參與討論：http://www./thread-429354-1-1.html

#PS基礎(chǔ)教學(xué)#PS學(xué)習(xí) #PS新手教學(xué)

本貼文轉(zhuǎn)載自思源設(shè)計(jì)網(wǎng) 如有轉(zhuǎn)載請?jiān)]明