photoshop設計黑色風格的網站界面實例

先看看最終效果圖:



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



左上角添加網站名稱，應用一下圖層樣式：



圖片3



圖片4



圖片5



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



圖片7



下面來做導航欄。選擇圓角矩形工具，半徑為10px，拖出導航條。



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



圖片10



圖片11



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



右鍵單擊導航圖層，復制圖層樣式，粘貼到新層。透明度跳到100%。




添加導航文字，新建一圖層，拖出一白色方框，制作高光區。



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



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



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



制作下面的內容板塊



最終效果：



圖片20