利用Photoshop制作風(fēng)格化電子商務(wù)網(wǎng)站
創(chuàng)建畫布,背景為白色,根據(jù)需要設(shè)定畫布大小,這里以 760 x 770 像素為例。
選擇圓角矩形工具,圓角大小為3個(gè)像素,繪制矩形,完成網(wǎng)站整體布局的架構(gòu)。
為這些矩形添加圖層樣式。
圖層 >> 圖層樣式 >> 投影:
漸變疊加:
漸變條設(shè)置如下:
描邊:
我們將得到如下效果:
現(xiàn)在,我們來為這些矩形添加一些細(xì)節(jié)。
首先,按住 CTRL 鍵,并點(diǎn)擊圖層。
得到相應(yīng)矩形選區(qū)。
創(chuàng)建新圖層,選擇橢圓選框工具,并將頂部狀態(tài)欄設(shè)置為“交叉選區(qū)”。
在如下位置繪制一個(gè)圓。
這是你將得到如下選區(qū)。
選擇油漆桶工具,用白色填充選區(qū)。
圖層 >> 圖層樣式 >> 投影。
描邊,這里我們將描邊大小設(shè)為5像素,位置“內(nèi)部”。
描邊類型設(shè)為“漸變”,漸變條設(shè)置如下:
這時(shí)我們得到如下效果:
選擇 >> 修改 >> 收縮,收縮量為5像素(同描邊大小相同)。
創(chuàng)建新的圖層并用白色填充選區(qū),圖層 >> 圖層樣式 >> 投影:
內(nèi)陰影:
斜面和浮雕:
顏色疊加:
描邊:
效果如下:
復(fù)制圖層,通過改變顏色疊加和描邊設(shè)置,得到如下效果:
添加導(dǎo)航按鈕和導(dǎo)航文字。
將事先準(zhǔn)備好的LOGO和素材圖片添加到適當(dāng)位置。
最終效果如下,本教程只是起到一個(gè)拋磚引玉的左右,希望大家都能做出具有各自風(fēng)格的網(wǎng)頁。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 陰影效果,教你制作各類陰影教程
- Photoshop制作網(wǎng)站導(dǎo)航圖
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop制作網(wǎng)頁搜索條
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- banner教程,用ps制作960*90的廣告圖片
- 用ps制作豎列導(dǎo)航
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧