教你用PS打造網(wǎng)頁效果圖全過程

作者：北極 日期：2007-6-5 15:21:42 來源：PConline

平面廣告和網(wǎng)站頁面設(shè)計的宗旨就是吸引眼球，符合平面視覺沖擊特點(diǎn)，如何設(shè)計一款有特色、另類能吸引眼球的作品是擺在平面設(shè)計人員和photoshop愛好者面前的難題

　　現(xiàn)在以一款網(wǎng)頁平面設(shè)計效果圖為實例，講解網(wǎng)頁設(shè)計方面的創(chuàng)意知識，從網(wǎng)頁效果圖布局創(chuàng)意、顏色選擇，裁減效果圖和制作網(wǎng)頁特效等方面來學(xué)習(xí)。下面我們就一起來學(xué)習(xí)吧。

　　首先聲明一下，這款網(wǎng)頁效果圖在得到朋友許可后拿來制作教程實例，切勿抄襲和用做其他用途。先看效果圖0。

（圖1）

一、 創(chuàng)意設(shè)計思路

　　一個網(wǎng)站在制作前需要確定網(wǎng)站風(fēng)格、網(wǎng)站主題、和主色調(diào)，在沒有確切的方案之前，最好不要貿(mào)然動手制作，不然最后的結(jié)果很可能是以失敗而告終。
　　
　　筆者決定從關(guān)鍵字"路行""獨(dú)自行走"加上是暗色系的要求上下手，敲定顏色采用沙漠黃，沙漠很容易讓人聯(lián)想到孤單；板式確定為戶外廣告的樣式沙漠黃配合生銹的廣告牌。符合"頹廢""艱辛路途"主題。

　　二、 網(wǎng)站效果圖及LOGO的制作。

　　1、LOGO的樣式采用的是圖形和字符的組合。漢字LOGO的字體不是下載的字體，是筆者用鋼筆工具畫出來的字體。如圖1和1-1。

（圖2）

　　鋼筆工具勾勒出圖1的行走的人樣式，填充紅色，然后調(diào)整混合模式"斜面和浮雕"選擇浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默認(rèn)。這LOGO 的創(chuàng)意是，一個人在崎嶇不平的路上堅持自己的方向，配合網(wǎng)站的英文加中文名字，構(gòu)成一個形象LOGO，剛好"路"字和"行"字采用紅色，突出了路行。
　　

（圖3）

　　文字LOGO筆者用鋼筆工具勾畫出字的各個部件，然后拼接在一起，這里只給出"路"字的方法，"行"字方法如同。

2、制作布局參考圖。如圖2。

（圖4）

　　3、根據(jù)布局效果圖，新建文件大小1000X765，填充黑色。布局中的"顯示區(qū)域"為廣告牌是要掛到墻上的，使用"石頭材質(zhì)"放置在頁面最上方來制作石板墻；使用"銹跡皮革材質(zhì)"制作"顯示區(qū)域""LOGO"區(qū)域的邊框（注：一些材質(zhì)的制作方法省略，平時可自行制作也可去圖片站下載保存，用的時候方便），將LOGO區(qū)域的邊框復(fù)制一層，調(diào)整不透明度為60%放置到LOGO曾下方，這樣大體的框架就完成了。如圖3和3-1。
　　

（圖5）

（圖6）

　　4、找來一張沙漠公路的圖片，把這張圖片進(jìn)行聚焦處理。點(diǎn)圖4示例的按扭進(jìn)入"以快速蒙版編輯模式"，選擇漸變，漸變模式為"徑向漸變"在圖中間向兩邊拉，屏幕會出現(xiàn)一團(tuán)紅色；然后再點(diǎn)"以標(biāo)準(zhǔn)模式編輯"畫面會出現(xiàn)一個圓圈選擇區(qū)域，按"DELETE"刪除即可。如圖4和圖4-1。

（圖7）

（圖8）

5、在"路"圖片上方新建一層，按住CTRL "路"圖層，單擊新建的圖層，填充顏色4E341B，調(diào)整為暗系沙漠黃。如圖5。

（圖9）

　　制作文字LOGO牌。找來圖5-1中的灰色材質(zhì)，在"LOGO邊框"下面新建一層，然后在其之上新建一層，放置沙漠圖片，將其混合模式修改為"顏色"然后打開一開始制作的文字LOGO，CTRL T變性調(diào)整到合適的角度，，雙擊文字層，調(diào)節(jié)內(nèi)陰影、外發(fā)光、內(nèi)發(fā)光、斜面浮雕、光澤，漸變疊加，具體數(shù)值可自由設(shè)定。如圖5-1。

（圖10）　　

　　形象LOGO的制作方法和文字LOGO的制作方法一致。

　　6、廣告牌路燈制作。鋼筆工具勾勒出路燈形狀，放在文字LOGO上面，將路燈顏色調(diào)整為沙漠黃。新建一層，用多邊型工具勾勒出圖6示"路燈發(fā)出的光源"形狀，填充從左上到右下、白色到透明漸變；用同樣方法制作"牌子上反射的光源"如圖6和圖6-1。

（圖11）

（圖12）

7、電力系統(tǒng)制作。發(fā)電機(jī)邊框下放置一張發(fā)電機(jī)的圖片就可以。（這里用到了移花接木的拼接）。
　　還要用到制作LOGO時候的那張"灰色材質(zhì)"和"沙漠黃"顏色的材質(zhì)。菜單部分在最初設(shè)計時要做出反光的感覺，立體感很重要，所以用了6個圖層來表現(xiàn)。最下面的圖層是區(qū)域分布，隨后是反光層，然后加條標(biāo)線，清楚的分界。為了更能熔入整體背景給它的邊緣加上點(diǎn)陰影，不至于矩形的菜單破壞整體效果，最后是顏色層，注意圖層模式。如圖7及7- 1。

（圖13）

（圖14）

　　將剛才制作的燈分別復(fù)制兩張，放到"顯示區(qū)域"的下面，用來照亮菜單上的字，右邊的燈要制作一個倒影，用鋼筆工具或筆刷，制作幾跟電線連接燈。如圖7-2。

（圖15）

　　燈光的制作如圖7-3。

（圖16）

　　最后，用筆刷刷出類似血跡的樣式，加上文件散落的特殊效果，加上網(wǎng)站要求的特定菜單，一張完整的效果圖就制作完畢。

三、 網(wǎng)頁的裁剪及樣本站制作。

　　網(wǎng)頁的制作方法有很多，制作工具也很多，這個部分只提供基本網(wǎng)站表現(xiàn)形式的理論知識，具體制作網(wǎng)頁制作方法不在此討論了。我們知道一個網(wǎng)站的制作，一般是要靠網(wǎng)頁設(shè)計師、動畫設(shè)計師以及后臺程序師三部分工作小組一起完成的。當(dāng)然，作為個人主頁，一般使用HTML靜態(tài)網(wǎng)頁就行了。現(xiàn)在我們來裁剪網(wǎng)頁效果圖。這里要根據(jù)動畫特效、菜單位置等等預(yù)留好位置。網(wǎng)頁的具體裁剪方法《Photoshop另類實用技巧:切網(wǎng)頁》教程中已經(jīng)介紹了，這里只給出裁剪的布局。如圖8。

（圖17）

　　2、在得到樣本站后是做純FLASH站、靜態(tài)站或是程序站完全看自己的技術(shù)水平了。

　　總 結(jié)：本次教程主要針對示例網(wǎng)站的創(chuàng)意，收集所需材料，效果圖的制作，效果圖裁剪等做了介紹，希望能給廣大PS愛好者特別是網(wǎng)頁制作愛好者一點(diǎn)幫助。