Photoshop設(shè)計銀灰色的WEB模板教程

來源:未知 作者:bbs.16xx8.com 學(xué)習(xí):378人次


作者:情非得已   出處:

本教程主要用Photoshop來設(shè)計一張銀灰色的網(wǎng)頁模板教程,最終的效果圖非常的漂亮,大家可以一起來跟著教程學(xué)習(xí),老話題了,網(wǎng)頁模板主要注重顏色的搭配和布局的排版.教程主要是運(yùn)用矩形選擇框工具(M),添加圖層樣式。難點(diǎn)可能在于創(chuàng)建那3個主題圖標(biāo),需要自己琢磨下。

先看下結(jié)果圖:

新建文檔:寬1200px,高1500px,背景層以顏色(#e9e3c9)填充。

一、創(chuàng)建網(wǎng)頁頭部(head)

1、新建圖層,選中矩形選擇框工具(M),在畫布頭部添加矩形,寬1200px,高度大約100px,并設(shè)置如下圖層樣式

“漸變疊加”

“描邊”

頭部將會是這樣子:


2、在頭部添加網(wǎng)站的標(biāo)題,廣告語和logo和一點(diǎn)公司簡介。大概布局是這樣的:

對于標(biāo)題Design.Studio,應(yīng)用了如下樣式:

“陰影”

“漸變疊加”

“描邊”


至于logo,選擇圓角矩形工具,半徑為20px,可填充任何顏色,然后設(shè)置圖層樣式。

“漸變疊加”

“描邊”

二、創(chuàng)建導(dǎo)航菜單

像上述的第1步那樣,創(chuàng)建一個短點(diǎn)的矩形,復(fù)制標(biāo)題圖層的圖層樣式,禁用”陰影”。結(jié)果如下圖:

接下來,添加菜單文字,其中一個菜單文字顏色為白色。(想知道為什么,就往下看)


在菜單左右創(chuàng)建兩個1px的直線,如下圖所示:

最終菜單的結(jié)果圖:

在白色菜單文字下方新建圖層,使用矩形選擇框工具(M)選中白色菜單,以顏色(#9bcd00)填充,并設(shè)置透明度為20%。結(jié)果如下圖:

用相同方法創(chuàng)建二級菜單導(dǎo)航條。


三、創(chuàng)建主題圖標(biāo)

接下來,在導(dǎo)航菜單下添加3個突出的網(wǎng)站主題。

用創(chuàng)建logo的方法添加3個logo,主題圖標(biāo)從photoshop中自帶的圖形庫中選擇,并添加文字說明和分隔線。

四、創(chuàng)建網(wǎng)站主要內(nèi)容

再一次使用矩形選擇框工具(M),創(chuàng)建一大的盒子,以#a9a282填充,描邊使用顏色(#7c6c4b)。

在這個大盒子里將要創(chuàng)建4個小盒子,包含了主題的主要內(nèi)容和主題尾部內(nèi)容。


像blog的主題一樣,格式化這幾個盒子。

最后,添加網(wǎng)頁底部

與頭部相呼應(yīng),復(fù)制標(biāo)題,logo,添加copyright信息。

最終效果圖:



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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

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

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