photoshop設(shè)計(jì)黑色風(fēng)格的網(wǎng)站界面實(shí)例

先看看最終效果圖:



新建一850px*830px的文件，前景色 #3b3b3b,背景色 #181818，“漸變”--“徑向梯度”從上向下，實(shí)現(xiàn)以下效果：



左上角添加網(wǎng)站名稱，應(yīng)用一下圖層樣式：



圖片3



圖片4



圖片5



,                                            
標(biāo)題后面添加 1像素高 2像素寬的，背景色為 #ff0e00的小圖標(biāo)，外發(fā)光。



圖片7



下面來(lái)做導(dǎo)航欄。選擇圓角矩形工具，半徑為10px，拖出導(dǎo)航條。



給這個(gè)圓角矩形添加如下樣式：投影--斜面浮雕--漸變疊加。



圖片10



圖片11



,                                            
調(diào)整導(dǎo)航圖層不透明度為25%，新建一圖層，按“ctrl”，單擊導(dǎo)航層，選擇“選擇”--“修改”--“收縮”4像素，填充黑色



右鍵單擊導(dǎo)航圖層，復(fù)制圖層樣式，粘貼到新層。透明度跳到100%。




添加導(dǎo)航文字，新建一圖層，拖出一白色方框，制作高光區(qū)。



按ctrl鍵單擊選中導(dǎo)航圖層，選擇--反向--刪除，調(diào)整白色框透明度為4%。



使用圓角矩形工具，制作一個(gè)大的矩形，按照同樣的方法制作下面的版塊。



,                                            
為矩形邊框左右邊，添加，白色高光。按ctrl鍵單擊，選擇里面黑色圖層。描邊。



制作下面的內(nèi)容板塊



最終效果：



圖片20