作者:情非得已 出處:
本教程主要用Photoshop來(lái)設(shè)計(jì)一張銀灰色的網(wǎng)頁(yè)模板教程,最終的效果圖非常的漂亮,大家可以一起來(lái)跟著教程學(xué)習(xí),老話題了,網(wǎng)頁(yè)模板主要注重顏色的搭配和布局的排版.教程主要是運(yùn)用矩形選擇框工具(M),添加圖層樣式。難點(diǎn)可能在于創(chuàng)建那3個(gè)主題圖標(biāo),需要自己琢磨下。 先看下結(jié)果圖: 新建文檔:寬1200px,高1500px,背景層以顏色(#e9e3c9)填充。 一、創(chuàng)建網(wǎng)頁(yè)頭部(head) 1、新建圖層,選中矩形選擇框工具(M),在畫布頭部添加矩形,寬1200px,高度大約100px,并設(shè)置如下圖層樣式 “漸變疊加” “描邊” 頭部將會(huì)是這樣子:
2、在頭部添加網(wǎng)站的標(biāo)題,廣告語(yǔ)和logo和一點(diǎn)公司簡(jiǎn)介。大概布局是這樣的: 對(duì)于標(biāo)題Design.Studio,應(yīng)用了如下樣式: “陰影” “漸變疊加” “描邊”
至于logo,選擇圓角矩形工具,半徑為20px,可填充任何顏色,然后設(shè)置圖層樣式。 “漸變疊加” “描邊” 二、創(chuàng)建導(dǎo)航菜單 像上述的第1步那樣,創(chuàng)建一個(gè)短點(diǎn)的矩形,復(fù)制標(biāo)題圖層的圖層樣式,禁用”陰影”。結(jié)果如下圖: 接下來(lái),添加菜單文字,其中一個(gè)菜單文字顏色為白色。(想知道為什么,就往下看)
在菜單左右創(chuàng)建兩個(gè)1px的直線,如下圖所示: 最終菜單的結(jié)果圖: 在白色菜單文字下方新建圖層,使用矩形選擇框工具(M)選中白色菜單,以顏色(#9bcd00)填充,并設(shè)置透明度為20%。結(jié)果如下圖: 用相同方法創(chuàng)建二級(jí)菜單導(dǎo)航條。
三、創(chuàng)建主題圖標(biāo) 接下來(lái),在導(dǎo)航菜單下添加3個(gè)突出的網(wǎng)站主題。 用創(chuàng)建logo的方法添加3個(gè)logo,主題圖標(biāo)從photoshop中自帶的圖形庫(kù)中選擇,并添加文字說(shuō)明和分隔線。 四、創(chuàng)建網(wǎng)站主要內(nèi)容 再一次使用矩形選擇框工具(M),創(chuàng)建一大的盒子,以#a9a282填充,描邊使用顏色(#7c6c4b)。 在這個(gè)大盒子里將要?jiǎng)?chuàng)建4個(gè)小盒子,包含了主題的主要內(nèi)容和主題尾部?jī)?nèi)容。
像blog的主題一樣,格式化這幾個(gè)盒子。 最后,添加網(wǎng)頁(yè)底部 與頭部相呼應(yīng),復(fù)制標(biāo)題,logo,添加copyright信息。 最終效果圖:
|