利用Photoshop制作風(fēng)格化電子商務(wù)網(wǎng)站

2022-12-26 14:02:55 來(lái)源/作者: / 己有:8人學(xué)習(xí)過(guò)
利用Photoshop制作風(fēng)格化電子商務(wù)網(wǎng)站

創(chuàng)建畫(huà)布,背景為白色,根據(jù)需要設(shè)定畫(huà)布大小,這里以 760 x 770 像素為例。

選擇圓角矩形工具,圓角大小為3個(gè)像素,繪制矩形,完成網(wǎng)站整體布局的架構(gòu)。

為這些矩形添加圖層樣式。

圖層 >> 圖層樣式 >> 投影:

漸變疊加:

漸變條設(shè)置如下:

描邊:

我們將得到如下效果:


現(xiàn)在,我們來(lái)為這些矩形添加一些細(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ù)制圖層,通過(guò)改變顏色疊加和描邊設(shè)置,得到如下效果:

添加導(dǎo)航按鈕和導(dǎo)航文字。

將事先準(zhǔn)備好的LOGO和素材圖片添加到適當(dāng)位置。

最終效果如下,本教程只是起到一個(gè)拋磚引玉的左右,希望大家都能做出具有各自風(fēng)格的網(wǎng)頁(yè)。