先看看效果圖

1、首先第一步，需要下載這個(gè)紋理圖片。

2、在PS中打開紋理圖片，然后點(diǎn)擊“編輯>定義圖案”，給予圖案的命名，并單擊OK。

做完這個(gè)準(zhǔn)備工作，可以關(guān)閉該文件。然后創(chuàng)建一個(gè)新文件，size：1100*1300px。

3、使用油漆桶工具，設(shè)定圖案，選擇剛制作好的圖案紋理。點(diǎn)擊畫布，得到如下圖的效果;

4、在頁面上方使用圓角矩形工具，創(chuàng)建一個(gè)圓角矩形，位置如下圖所示。

參數(shù)值 半徑5px，size：330*45px。

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

6、請記住這個(gè)矩形圖層樣式，因?yàn)樵谙旅娴牟襟E中會(huì)多次用到它。

下一步，需要?jiǎng)?chuàng)建一個(gè)搜索框，如下圖所示。我們開始再一次使用圓角矩形工具。

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

8、現(xiàn)在你可以點(diǎn)擊” New Style ”按鈕，應(yīng)用到下一個(gè)需要做的矩形樣式上，并加入一些文字和圖標(biāo)。

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

10、對導(dǎo)航欄使用下面的圖層樣式。并保存這個(gè)style。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23、這是最后的結(jié)果。我希望你會(huì)喜歡這個(gè)電子商務(wù)網(wǎng)站的布局。

您可以使用本教程來創(chuàng)建自己的店鋪,為不同類型的CMS像Presta Shop, osCommerce, creLoaded, Magento, etc等等。