本教程介紹簡(jiǎn)單的電子商務(wù)網(wǎng)站制作方法。網(wǎng)站大致由四大部分構成：頂部導航、中間橫幅、中間主要產(chǎn)品列、底部。中間部分最為重要，盡量要制作精美大氣一點(diǎn)，這樣才有吸引力。
最終效果
<點(diǎn)小圖查看大圖>
1、首先第一步，需要下載這個(gè)紋理圖片。
3、使用油漆桶工具，設定圖案，選擇剛制作好的圖案紋理。點(diǎn)擊畫(huà)布，得到如下圖的效果。
4、在頁(yè)面上方使用圓角矩形工具，創(chuàng )建一個(gè)圓角矩形，位置如下圖所示。參數值：半徑5px，size：330*45px。
5、對該矩形添加如下圖層樣式。你可以找到漸變的顏色值。
6、請記住這個(gè)矩形圖層樣式，因為在下面的步驟中會(huì )多次用到它。下一步，需要創(chuàng )建一個(gè)搜索框，如下圖所示。我們開(kāi)始再一次使用圓角矩形工具。
7、為該層添加如下圖層樣式。為方便后面使用，需要保存下這個(gè)圖層樣式的配置信息，加入到樣式庫中。
8、現在你可以點(diǎn)擊” New Style ”按鈕，應用到下一個(gè)需要做的矩形樣式上，并加入一些文字和圖標。
9、接下來(lái)創(chuàng )建一個(gè)黑色的導航。
10、對導航欄使用下面的圖層樣式。并保存這個(gè)style。
11、在導航欄中創(chuàng )建另一個(gè)形狀，然后將它柵格化。我選擇用橡皮擦工具，刪除上部的形狀，然后將添加黃色。
12、有時(shí)候，做頁(yè)面切片時(shí)，你需要一些焦點(diǎn)狀態(tài)，表示當前鼠標操作時(shí)間。這就是接下來(lái)要做的，使用矩形工具創(chuàng )建按鈕，繼續使用黃色的圖層樣式。
13、向導航內添加一些文本。如下圖所示。
14、制作banner，隨著(zhù)Apple網(wǎng)站UI設計的成功范例，越來(lái)越多的網(wǎng)站采用趕緊大版面的banner圖片吸引大家的注意力。所以，在導航欄中我將添加一個(gè)MacBook Pro筆記本電腦圖片。
<點(diǎn)小圖查看大圖>
15、然后在banner圖片內添加一些圓角矩形工具按鈕。
16、在banner下方，創(chuàng )建一個(gè)白色區域,用于添加一些產(chǎn)品。
17、在這個(gè)區域內展示出你要展銷(xiāo)的產(chǎn)品圖片，我隨機排列了一些圖片做例子。
18、在每個(gè)產(chǎn)品之間用直線(xiàn)工具畫(huà)一些線(xiàn)條做分割，這些線(xiàn)條用淺灰色即可。
19、接下來(lái)開(kāi)始制作左側豎排導航。用圓角矩形工具制作黃色Title,黃色title之下制作一些灰色的形狀。如果你仔細看一下我的PSD文件,你會(huì )看到這些灰色形狀實(shí)際上是黑暗的形狀,但他們有一個(gè)非常低的透明度:大約20%。你可以在層調色板中改變透明度值。
20、使用圓角矩形工具,創(chuàng )建一些按鈕，在按鈕內添加一些文本。
21、創(chuàng )建一個(gè)簡(jiǎn)單的頁(yè)腳。
22、最后一步，創(chuàng )建一個(gè)Logo樣式，如下圖所示，通常情況下，網(wǎng)站的logo下面會(huì )有對應的Tagline，看個(gè)人需求而定。
最終效果：
<點(diǎn)小圖查看大圖>
