Photoshop設(shè)計銀灰色的WEB模板教程(3)
本教程主要用Photoshop來設(shè)計一張銀灰色的網(wǎng)頁模板教程,最終的效果圖非常的漂亮,大家可以一起來跟著教程學(xué)習(xí),老話題了,網(wǎng)頁模板主要注重顏色的搭配和布局的排版.教程主要是運用矩形選擇框工具(M),添加圖層樣式。難點可能在于創(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和一點公司簡介。大概布局是這樣的:
對于標(biāo)題Design.Studio,應(yīng)用了如下樣式:
“陰影”
“漸變疊加”
“描邊”
至于logo,選擇圓角矩形工具,半徑為20px,可填充任何顏色,然后設(shè)置圖層樣式。
“漸變疊加”
“描邊”
二、創(chuàng)建導(dǎo)航菜單
像上述的第1步那樣,創(chuàng)建一個短點的矩形,復(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í) · 提示
相關(guān)教程
推薦教程
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- ps設(shè)計制作居家風(fēng)格美食Blog網(wǎng)頁特效
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導(dǎo)航欄
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制好看的老式wordpress主題
- PhotoShop設(shè)計制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程