Photoshop網(wǎng)頁制作教程

來源:不詳 作者:佚名 學習:1681人次
Photoshop網(wǎng)頁制作教程效果圖:

步驟 1

創(chuàng)建 750x500px 畫布,并將前景色設為白色。

創(chuàng)建新的圖層,利用矩形選框工具創(chuàng)建如下選區(qū)。

步驟 2

用白色填充選區(qū)。圖層 >> 圖層樣式 >> 投影。設置如下:

描邊:大小 1像素,顏色 #939393 不透明度 44%。

步驟 3

創(chuàng)建新圖層,再次利用矩形選框工具在畫布頂端建立如下矩形選框。(注意:為了實現(xiàn)網(wǎng)頁的層次感,這次的矩形邊框與之前的矩形左右兩邊各空出2個像素)

步驟 4

為選區(qū)填充 #2061A8。

步驟 5

圖層 >> 圖層樣式 >> 投影。設置如下:


漸變疊加:



圖案疊加:

步驟 6

為網(wǎng)站添加文字LOGO 。


步驟 7

創(chuàng)建新的圖層。

步驟 8

按照與步驟 3相同的方法在畫布底部建立矩形。

步驟 9

填充顏色(#2061A8),并添加投影效果。



圖層 >> 圖層樣式 >> 投影。


步驟 10

利用圓角矩形工具繪制如下形狀。



步驟 11

圖層 >> 圖層樣式 >> 投影。

漸變疊加:



步驟 12

為導航欄添加文字。

步驟 13

按照如上方法建立其余導航條。



步驟 14

現(xiàn)在我們開始制作內(nèi)容框,利用圓角矩形繪制如下矩形框。



將圖層面板的填充屬性設為 0%。


圖層 >> 圖層樣式 >> 漸變疊加。



步驟 15

按照之前的方法建立另一個內(nèi)容框。



學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
lqme1232007-11-11 10:32
不錯. 支持..
癲癲不癲2007-11-11 07:09
估計是下課時間到了!~下課休息
晴風2007-10-08 01:43
這個教程好象沒說完吧

關注大神微博加入>>

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