日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > PS電子商務在線購物網(wǎng)站美工教程

PS電子商務在線購物網(wǎng)站美工教程

時間:2024-02-25 19:30作者:下載吧人氣:14

簡介:一篇簡單快速構(gòu)架商務網(wǎng)站的教程。在本教程中,我將告訴你如何用時髦的布局方法制作電子商務型的在線購物網(wǎng)站。你可以使用這個布局做出任何你喜歡的電子商務購物平臺及CMS系統(tǒng)。

效果圖:

PS電子商務在線購物網(wǎng)站美工教程

1、首先第一步,需要下載這個紋理圖片。

PS電子商務在線購物網(wǎng)站美工教程

2、在PS中打開紋理圖片,然后點擊“編輯>定義圖案”,給予圖案的命名,并單擊OK。
做完這個準備工作,可以關(guān)閉該文件。然后創(chuàng)建一個新文件,size:1100*1300px。

3、使用油漆桶工具,設定圖案,選擇剛制作好的圖案紋理。點擊畫布,得到如下圖的效果;

PS電子商務在線購物網(wǎng)站美工教程

4、在頁面上方使用圓角矩形工具,創(chuàng)建一個圓角矩形,位置如下圖所示。
參數(shù)值 半徑5px,size:330*45px。

PS電子商務在線購物網(wǎng)站美工教程

5、對該矩形添加如下圖層樣式。你可以找到漸變的顏色值。

PS電子商務在線購物網(wǎng)站美工教程

6、請記住這個矩形圖層樣式,因為在下面的步驟中會多次用到它。
下一步,需要創(chuàng)建一個搜索框,如下圖所示。我們開始再一次使用圓角矩形工具。

PS電子商務在線購物網(wǎng)站美工教程

7、為該層添加如下圖層樣式。為方便后面使用,需要保存下這個圖層樣式的配置信息,加入到樣式庫中。

PS電子商務在線購物網(wǎng)站美工教程

PS電子商務在線購物網(wǎng)站美工教程

PS電子商務在線購物網(wǎng)站美工教程

8、現(xiàn)在你可以點擊” New Style ”按鈕,應用到下一個需要做的矩形樣式上,并加入一些文字和圖標。

PS電子商務在線購物網(wǎng)站美工教程

9、接下來創(chuàng)建一個黑色的導航。

PS電子商務在線購物網(wǎng)站美工教程

10、對導航欄使用下面的圖層樣式。并保存這個style。

PS電子商務在線購物網(wǎng)站美工教程

11、在導航欄中創(chuàng)建另一個形狀,然后將它柵格化。我選擇用橡皮擦工具,刪除上部的形狀,然后將添加黃色。

PS電子商務在線購物網(wǎng)站美工教程

12、有時候,做頁面切片時,你需要一些焦點狀態(tài),表示當前鼠標操作時間。
這就是接下來要做的,使用矩形工具創(chuàng)建按鈕,繼續(xù)使用黃色的圖層樣式。

PS電子商務在線購物網(wǎng)站美工教程

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

PS電子商務在線購物網(wǎng)站美工教程

14、制作banner,隨著Apple網(wǎng)站UI設計的成功范例,越來越多的網(wǎng)站采用趕緊大版面的banner圖片吸引大家的注意力。
所以,在導航欄中我將添加一個MacBook Pro筆記本電腦圖片。

PS電子商務在線購物網(wǎng)站美工教程

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

PS電子商務在線購物網(wǎng)站美工教程

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

PS電子商務在線購物網(wǎng)站美工教程

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

PS電子商務在線購物網(wǎng)站美工教程

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

PS電子商務在線購物網(wǎng)站美工教程

19、接下來開始制作左側(cè)豎排導航。用圓角矩形工具制作黃色Title,黃色title之下制作一些灰色的形狀。如果你仔細看一下我的PSD文件,你會看到這些灰色形狀實際上

是黑暗的形狀,

但他們有一個非常低的透明度:大約20%。你可以在層調(diào)色板中改變透明度值。

PS電子商務在線購物網(wǎng)站美工教程

20、使用圓角矩形工具,創(chuàng)建一些按鈕,在按鈕內(nèi)添加一些文本。

PS電子商務在線購物網(wǎng)站美工教程

21、創(chuàng)建一個簡單的頁腳。

PS電子商務在線購物網(wǎng)站美工教程

22、最后一步,創(chuàng)建一個Logo樣式,如下圖所示,通常情況下,網(wǎng)站的logo下面會有對應的Tagline,看個人需求而定。

PS電子商務在線購物網(wǎng)站美工教程

23、這是最后的結(jié)果。我希望你會喜歡這個電子商務網(wǎng)站的布局。
您可以使用本教程來創(chuàng)建自己的店鋪,為不同類型的CMS像Presta Shop, osCommerce, creLoaded, Magento, etc等等。

PS電子商務在線購物網(wǎng)站美工教程

標簽網(wǎng)頁,設計教程,購物網(wǎng)站,在線,設計,電子商務,PS

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 高清欧美日本视频免费观看 | 久久久久久久久久久久久久久久久 | 一区二区三区久久 | 亚洲精品xxxxx | 亚洲欧美在线观看 | 成人亚洲视频在线观看 | 免费的三级网站 | 免费一级视频在线播放 | 精品久久成人免费第三区 | 在线成人免费 | 久久久国产精品福利免费 | 久久久久久久久中文字幕 | 在线观看免费视频网站色 | 国产精品亚洲欧美云霸高清 | 亚洲一级毛片免观看 | 日韩一级精品视频在线观看 | 在线免费观看一级片 | 免费观看欧美一区二区三区 | 欧美精品 日韩 | 亚洲国产成人久久99精品 | 亚洲欧美94色 | 艳女伦交一级毛片 | 免费国产不卡午夜福在线观看 | 18年大片免费在线观看 | 国产精品免费一区二区三区四区 | 欧美精品三区 | 国产呦系列呦 | 亚洲国产视频在线 | 国产精品合集久久久久青苹果 | 国产亚洲午夜精品a一区二区 | 日韩一级片播放 | 国产女人自拍 | 亚洲综合无码一区二区 | 久久精品香蕉 | 国产韩国精品一区二区三区 | 亚洲精品韩国美女在线 | 一级片久久 | 日韩在线观看一区 | 精品外国呦系列在线观看 | 久久中文字幕久久久久91 | 欧美成人三级网站 |