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

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

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

最終效果預(yù)覽

第一步

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

第二步

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

第三步

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

第四步

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

第五步

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

第六步

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

第七步

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

第八步

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

第九步

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

第十步

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

第十一步

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

第十二步

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

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

第13步

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

第十四步

使用Rockwell字體在圖上寫一些小的標示文字。然後新建一個圖層，畫兩個白色矩形作為標示文字背景，然後把字體顏色改為藍色。

第十五步

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

第十六步

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

第十七項

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

第十八步

使用淡灰色畫上一個矩形框作為新聞項的背景樣式。

第十九步

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

第二十步

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

第二十一步

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

第二十二步

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

第二十三步

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

第二十四步

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

進入論壇參與討論：http://www./thread-429354-1-1.html

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

本貼文轉(zhuǎn)載自思源設(shè)計網(wǎng) 如有轉(zhuǎn)載請註明