ps設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模

2022-12-26 11:35:41 來源/作者: / 己有:18人學(xué)習(xí)過

12、有時候,做頁面切片時,你需要一些焦點狀態(tài),表示當(dāng)前鼠標(biāo)操作時間。

這就是接下來要做的,使用矩形工具創(chuàng)建按鈕,繼續(xù)使用黃色的圖層樣式。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

13、向?qū)Ш絻?nèi)添加一些文本。如下圖所示。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

14、制作banner,隨著Apple網(wǎng)站UI設(shè)計的成功范例,越來越多的網(wǎng)站采用趕緊大版面的banner圖片吸引大家的注意力。

所以,在導(dǎo)航欄中我將添加一個MacBook Pro筆記本電腦圖片。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

15、然后在banner圖片內(nèi)添加一些圓角矩形工具按鈕。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

16、在banner下方,創(chuàng)建一個白色區(qū)域,用于添加一些產(chǎn)品。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

17、在這個區(qū)域內(nèi)展示出你要展銷的產(chǎn)品圖片,我隨機排列了一些圖片做例子。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

18、在每個產(chǎn)品之間用直線工具畫一些線條做分割,這些線條用淺灰色即可。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn

19、接下來開始制作左側(cè)豎排導(dǎo)航。用圓角矩形工具制作黃色Title,黃色title之下制作一些灰色的形狀。如果你仔細(xì)看一下我的PSD文件,你會看到這些灰色形狀實際上是黑暗的形狀,但他們有一個非常低的透明度:大約20%。你可以在層調(diào)色板中改變透明度值。

Photoshop設(shè)計時尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站,PS教程,th7.cn