Photoshop制作簡潔干凈的網(wǎng)頁效果圖(3)
創(chuàng)建一個新群組,命名為”left arrow”。用橢圓工具l (U),創(chuàng)建一個圓形,填充顏色#406f94。雙擊圖層打開圖層樣式面板,按照上圖設(shè)置。
Step 32: 在藍(lán)色圓圈中創(chuàng)建一個箭頭
新建圖層,用用戶自定義圖形,創(chuàng)建白色箭頭。雙擊打開圖層樣式面板,按照上圖進(jìn)行設(shè)置。設(shè)置圖層透明度為50%。
Step 33: 在右邊創(chuàng)建另一個箭頭。
重復(fù)以上步驟,在矩形的右邊創(chuàng)建對稱的圓圈和箭頭。
Step 34: 創(chuàng)建特色圖片
新建群組。命名為 “image” 。在這個群組中放置一個小的圖片,命名這個圖層為”image” 。雙擊打開圖層樣式面板。按照上圖設(shè)置。
Step 35: 給你的圖片添加陰影
點開圖層>圖層樣式>新建圖層,在原始圖層上面新建了一個圖層。打開圖層>圖層夢般>顯示全部,設(shè)置漸變,畫一個黑色到透明的漸變,從小圖片的底部到中間的位置。給這個圖層命名為 “shadow”。
Step 36: 添加文字
新建群組。用文字工具添加一些文字,命名這個群組為 “text”。
Step 37: 創(chuàng)建白色矩形
新建群組,命名為 “content”,在其中再新建一個群組,命名為 “shadows” 。用矩形工具,新建一個矩形,填充白色,向上圖一樣。命名這個圖層為”white shape” ,設(shè)置圖層透明度為90%。
Step 38: 添加頂部陰影
按住Ctrl單擊圖層面板上圖層”white shape”的小縮略圖,創(chuàng)建選取。創(chuàng)建一個新圖層,用漸變工具,畫一個從 #8f8f8f 到透明的漸變,參照上圖。設(shè)置該圖層透明度為 50% ,命名這個圖層為”top shadow” 。然后用移動工具,向下移動2個像素。
Step 39:創(chuàng)建橫向的陰影
新建圖層,,用矩形工具,創(chuàng)建一個選區(qū),如上圖。用漸變工具畫一個從 #8f8f8f 到透明的漸變。給這個圖層創(chuàng)建蒙版,用一個直徑較大的軟筆刷,創(chuàng)建陰影。設(shè)置該圖層透明度為 30% ,命名該圖層為 “vertical shadow 1″ 。復(fù)制這個圖層 (Ctrl+J),命名這個新圖層為 “vertical shadow 2″ ,并且把它移動到右邊。
Step 40: 創(chuàng)建橫向線條
用直線工具 (U)創(chuàng)建一個橫向線條,如上圖,高為1px,顏色#aebcc7。命名為 “line”。
Step 41: 添加文字
選擇文字工具,添加一些文字。你也可以添加一些圖片。
Step 42: 給底部創(chuàng)建漸變
新建群組,命名為 “footer”。在里面新建一個圖層,用選區(qū)工具(M) 創(chuàng)建一個選區(qū),如上圖。設(shè)置前景色為#555555,用一個直徑比較大的軟筆刷,在選取頂部的位置涂抹。設(shè)置該圖層透明度為 50% ,命名該圖層為”gradient”。
Step 43: 在底部,添加一個1個像素高的線條
新建圖層。按照以前的做法,創(chuàng)建一個1px高的線條,填充顏色黑色,設(shè)置圖層透明度為15% ,命名該圖層為 “line”。
Step 44: 給底部區(qū)域添加文字
在底部添加一些文字
Final Result
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導(dǎo)航欄
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PhotoShop設(shè)計制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- ps設(shè)計制作居家風(fēng)格美食Blog網(wǎng)頁特效
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop繪制好看的老式wordpress主題
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板