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

來(lái)源:不詳 作者:佚名 學(xué)習(xí):16095人次
教你用PS打造網(wǎng)頁(yè)效果圖全過(guò)程

作者:北極 日期:2007-6-5 15:21:42 來(lái)源:PConline

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

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

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖1)

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

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

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

  1、LOGO的樣式采用的是圖形和字符的組合。漢字LOGO的字體不是下載的字體,是筆者用鋼筆工具畫(huà)出來(lái)的字體。如圖1和1-1。

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖2)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖3)


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

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖4)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖5)

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖6)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖7)

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖8)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖9)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖10)  

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

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖11)

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖12)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖13)

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖14)

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖15)

  燈光的制作如圖7-3。

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖16)

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

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

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

photoshop打造極富創(chuàng)意網(wǎng)頁(yè)效果圖
(圖17)

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

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



學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
時(shí)代作品2008-04-05 04:36
很好看啦,支持萬(wàn)分感謝樓主
?艸吢ー厷宔2008-04-05 03:58
嗚嗚~~~~~~~看八憧
聰明組合2008-04-05 03:55
還不是很懂啊,但我也從中學(xué)到了思路。謝謝你啊!
金辛2008-03-09 12:03
迷茫鳥(niǎo)——||多謝分享。。。
標(biāo)標(biāo)o2008-01-22 11:09
真是復(fù)雜~ps:Q
橫財(cái)神2008-01-22 10:36
ps:淚奔豬 ps:淚奔豬
x/man2007-06-15 04:39
哇哇哇..!!!!! 可惜看卜懂...!!

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!