Photoshop網(wǎng)頁設計購物類網(wǎng)站設計現(xiàn)如今，網(wǎng)上購物不但是時尚達人的購物首選方式，同時也逐漸成為了人們生活中的重要組成部分。在網(wǎng)絡上購物既方便，又快捷，同時也給我們帶來了很多的樂趣。購物網(wǎng)站能夠隨時讓顧客參與購買，更方便，更詳細，更安全。要達到這樣的網(wǎng)站水平就要使網(wǎng)站中的產(chǎn)品有秩序、科學化的分類，便于購買者查詢。把網(wǎng)頁制作得有指導性和更加美觀，來吸引大批的購買者。本節(jié)中，講述了購網(wǎng)站的分類和網(wǎng)站配色規(guī)則。并通過一個購物網(wǎng)站為實例，設計出一整套網(wǎng)站效果圖。1鵬樂購物網(wǎng)站首頁設計購物網(wǎng)站時一個網(wǎng)絡購物站點，是做產(chǎn)品的銷售和服務性質(zhì)的網(wǎng)站，如果設計不當就很可能導致客戶的流失。確定網(wǎng)站設計風格時，考慮怎樣的設計才能更加有效的吸引住顧客，從而構(gòu)造一個具有自身特色的網(wǎng)上購物網(wǎng)站。網(wǎng)站設計的外觀最能決定網(wǎng)站所具備的價值。一個設計精美的網(wǎng)站，產(chǎn)品或服務質(zhì)量也很有競爭力，所促成的銷售量會是很高的。網(wǎng)站色彩也對人們的心情產(chǎn)生影響，不同的色彩及其色調(diào)組合會使人們產(chǎn)生不同的心理感受。購物網(wǎng)站以綠色為基調(diào)，會給人一種充滿活力的感覺。綠中添加黃色為基調(diào)，給人以柔和明快之感，使人充滿希望。例如本案例購物網(wǎng)站首頁，以草綠色為色調(diào)，如圖14-12所示。這里的購物網(wǎng)站主要以筆記本電腦、手機和照相機為產(chǎn)品。首頁在設計過程中，以3種產(chǎn)品圖像做了展示。制作過程中，首要確定的是網(wǎng)頁的布局及色調(diào)，然后根據(jù)色調(diào)制作網(wǎng)站背景.

KHPfe*n.at冢醫(yī)調(diào).圖14-12鵬樂購物網(wǎng)首頁?巡瓶咫物網(wǎng)”nv.rl-4H"jpif；.r-3ii星里理國網(wǎng)上中期丁訴1*KHPfe*n.at冢醫(yī)調(diào).圖14-12鵬樂購物網(wǎng)首頁?巡瓶咫物網(wǎng)”nv.rl-4H"jpif；.r-3ii1.1設置網(wǎng)頁布局(1)新建一個【寬度】和【高度】分別為1024像素和750像素，白色背景文檔。按Ctrl+R顯示標尺，拉出兩條水平輔助線，如圖14-13所示。圖14-13新建文檔(2)新建圖層“綠背景”，使用【矩形選框工具】凰。在430像素和243像素內(nèi)建立矩形選區(qū)，并填充綠色，如圖14-14所示。

圖14-14填充顏色（3）雙擊該圖層，打開【圖層樣式】對話框，啟用【漸變疊加】選項。設置#ACDB00-#ACDB00-#87b800顏色漸變，設置參數(shù)，如圖14-15所示。wrxcr砌主r rwrxcr砌主r r圖14-15添加漸變效果（4）打開PSD格式的“花紋”素材，放置首頁文檔中。命名圖像圖層的【混合模式】設置為“綠色”，如圖14-16所示。圖14-16繪制背景花紋（5）新建圖層“光暈”，設置前景色為淡綠色（#BEE22D）。【畫筆工具】?，在畫布上單擊，如圖14-17所示。畫筆的【大小】、【不透明度】和【硬度】參數(shù)，根據(jù)實際情況而隨時更改。

圖14-17添加光暈效果(6)設置前景為白色，使用【圓角矩形工具】在【工具選項欄】上單擊【形狀圖層】按鈕口，并設置W為920像素；H為218像素，【圓角半徑】為10像素。在畫布上單擊，建立圓角矩形，如圖14-18所示。圖14-18建立圓角矩形(7)使用【直接選擇工具】匕和【轉(zhuǎn)換點工具】回，選中錨點，移動調(diào)整，將圓角轉(zhuǎn)換為直角，如圖14-19所示。圖14-19調(diào)整路徑錨點提示只有在矢量蒙版處于工作狀態(tài)下，使用【直接選擇工具】"才能將路徑錨點選中。 (8)設置前景色為15%的灰色，如同上例方法，使用【矩形工具】刁，設置W為220

像素；H為142像素。在畫布上單擊，建立矩形，并創(chuàng)建形狀圖層，如圖14-20所示。圖14-20創(chuàng)建形狀圖層（9）按住Ctrl單擊當前圖層蒙版縮覽圖，載入圖像矩形選區(qū)。執(zhí)行【選擇】I【變換選區(qū)】命令，單擊【工具選項欄】上【保持長寬比】按鈕騫L設置【水平縮放】為110%,選區(qū)擴大。按Enter鍵結(jié)束變換，如圖14-21所示。圖14-21擴大選區(qū)（10）在矩形下方新建圖層“頂白框”，填充白色，取消選區(qū)，如圖14-22所示。圖14-22繪制相框效果（11）按照上述方法，分別在該圖形左邊和右邊繪制兩個小型相框，如圖14-23所示。圖14-23繪制相框效果（12）首頁背景及整個布局基本繪制完成，如圖14-24所示。1.2添加內(nèi)容（1）打開標志文檔，將標志放置首頁左上角。雙擊標志所在圖層，打開【圖層樣式】對話框，啟用【外發(fā)光】選項。設置【外發(fā)光大小】為10像素，其它參數(shù)默認，如圖14-25所示。址。設置文本屬性，如圖14-26所示。

圖14-26輸入網(wǎng)站名稱（3）分別雙擊文本圖層，啟用【描邊】圖層樣式，對文字添加2像素白色描邊。并對添加于標志相同參數(shù)的外發(fā)光效果，如圖14-27所示。圖14-27添加描邊和外發(fā)光效果（4）使用【橫排文字工具】5.，在首頁右上角輸入小導航“登錄--注冊--聯(lián)系我們-設為首頁--加入收藏”文本和導航信息。設置文本屬性，如圖14-28所示。圖14-28輸入導航信息（5）新建圖層“導航線”，使用【矩形選框工具】EL,設置【寬度】為1像素；【高度】為20像素。建立選區(qū)，填充墨綠色（#9DC60C）,取消選區(qū)，如圖14-29所示。并將“網(wǎng)頁首頁”導航文字添加【顏色疊加】圖層樣式，設置為黑色。

圖14-29繪制導航條（6）打開電腦素材，將其放置首頁中。按Ctrl+J快捷鍵，復制電腦。并按Ctrl+T快圖14-30放入電腦素材（7）選中電腦副本圖層，使用【矩形選框工具】①，建立選區(qū)。按Ctrl+Shift+I快捷鍵，反選選區(qū)。單擊【圖層】面板下的【添加圖層蒙版】按鈕且J,對圖層添加蒙版，將選區(qū)以外的副本圖像遮蓋。并設置該圖層【不透明度】為10%，如圖14-31所示。圖14-31繪制電腦倒影（8）在電腦圖層下方新建圖層“投影”，使用【鋼筆工具】國，建立路徑。將路徑轉(zhuǎn)換為選區(qū)，填充黑色，如圖14-32所示。

圖14-32繪制投影(9)取消選區(qū)，設置該圖層【不透明度】為20%,并使用軟【橡皮擦工具】一進行涂抹。【畫筆大小】和【不透明度】根據(jù)實際隨時更改，如圖14-33所示。圖14-33繪制電腦投影(10)打開風景圖片，放置首頁文檔中。按Ctrl+T快捷鍵，打開變換框，等比例縮小。按住Ctrl鍵單擊調(diào)整控制柄，使圖像與電腦屏幕重合，如圖14-34所示。LI圖14-34添加電腦畫面(11)打開“鴿子”素材，放置首頁文檔電腦畫面旁邊。使用【鋼筆工具】㈤，建立路徑。將路徑轉(zhuǎn)換為選區(qū)，按Shift+F6快捷鍵，設置【羽化半徑】為20像素。羽化選區(qū)，如圖14-35所示。

圖14-35建立選區(qū)（12）新建圖層“光”，使用【漸變工具】?.o單擊【工具選項欄】上【線性漸變】按鈕』，設置透明色到白色漸變。在畫布上執(zhí)行漸變，取消選區(qū)，如圖14-36所示。圖14-36繪制光效果（13）打開“音符”、“綠葉”素材，并放置首頁文檔中，如圖14-37所示。圖14-37添加裝飾素材（14）打開“相機”素材，放置較大的相框圖像上。將相機所在的圖層放置該形狀相框圖層上，并將鼠標放在兩圖層之間，按住Alt鍵單擊，如圖14-38所示。

圖14-38放置相機圖片（15）如同上述操作，分別打開“手機”、“筆記本”素材，并放置其它兩個相框圖像中，如圖14-39所示。圖14-39放置手機及筆記本圖像（16）使用【橫排文字工具】L,輸入宣傳語，設置文本屬性，如圖14-40所示。圖14-40輸入宣傳語（17）使用【橫排文字工具】LZ,在畫布上色區(qū)域左邊輸入“新聞中心”信息，設置文本屬性，如圖14-41所示。

圖14-41輸入文本信息（18）圖14-41輸入文本信息（18）如同上述，使用【矩形工具】旦，在信息下放繪制矩形，創(chuàng)建形狀圖層。添加描邊效果，設置參數(shù)，如圖14-42所示。圖14-42繪制搜索欄（19）新建圖層“按鈕”，使用【圓角矩形工具】B,創(chuàng)建圓角矩形形狀圖層。雙擊該圖層，啟用【漸變疊加】圖層樣式，設置棕色（#773200）到白色漸變。使用【橫排文字工具】「，輸入“搜索”文字。設置文本屬性，如圖14-43所示。圖14-43圖14-43繪制搜索按鈕（20）按照上例方法，使用【橫排文字工具】相關(guān)圖像信息，如圖14-44所示。二，輸入“新品推薦”文本信息及放置ASAST24QK1小一ASAST24QK1小一國21m息一截不H的事上4:■，鼻第便艮.出的入面?圖14-44放置文本及圖像信息,在首頁最下方空白區(qū)域輸入版權(quán)信息。如圖14-45（21）使用【橫排文字工具】「,在首頁最下方空白區(qū)域輸入版權(quán)信息。如圖14-45?■*3■. 1- wthuInrarSin.ii7It圖14-45輸入版權(quán)信息2鵬樂購物網(wǎng)站內(nèi)頁設計購物網(wǎng)站以銷售產(chǎn)品為主，如果購買者在你的網(wǎng)站上沒有發(fā)現(xiàn)他想要的產(chǎn)品，很快就會離開。所以一個好的購物網(wǎng)站除了需要銷售好的產(chǎn)品之外，更要有完善的分類體系來展示產(chǎn)品，讓顧客對的產(chǎn)品結(jié)構(gòu)一目了然，能很輕松的找到他所需的物品和描述。對購物網(wǎng)站來說，網(wǎng)站首頁只能顯示部分產(chǎn)品，無法將更多的產(chǎn)品展示出來，所以購物網(wǎng)站還需要有多個內(nèi)頁來充分展示產(chǎn)品信息內(nèi)容。本案例中是按照產(chǎn)品類型及服務分4個欄目，即“筆記本”、“手機”、“相機”和“客服中心”。網(wǎng)站內(nèi)頁根據(jù)欄目來分配管理產(chǎn)品，顧客可以通過分類體系找到自己的產(chǎn)品及簡單描述和價格等信息。在首頁基礎上稍加改變，制作出一整套內(nèi)頁圖像效果，如圖14-46所示。網(wǎng)站內(nèi)頁采用了相同的布局設置，在相同的布局上添加欄目信息。以產(chǎn)品為主的內(nèi)頁，均以圖像及簡單的文字信息展示了該頁內(nèi)容。在制作過程中，注重圖像的尺寸大小及圖像之間的距離，并在文字方面注重標準字的應用。圖14-46鵬樂購物網(wǎng)內(nèi)頁圖14-46鵬樂購物網(wǎng)內(nèi)頁2.1設置內(nèi)頁布局(1)打開網(wǎng)站首頁文檔，執(zhí)行【圖像】|【復制】命令，命名為“內(nèi)頁布局”。將標志、背景、導航、版權(quán)信息及白色圖像以外的信息刪除，如圖14-47所示。圖14-47復制文檔(2)選中白色區(qū)域圖像所在圖層，按Ctrl+J快捷鍵，復制該圖像。單擊副本矢量形狀蒙版縮覽圖，使其處于工作狀態(tài)。按Ctrl+T快捷鍵，水平翻轉(zhuǎn)圖像，在【工具選項欄】上設置【垂直縮放比例】為120%。結(jié)束變換，如圖14-48所示。圖14-48復制圖像(3)在副本圖像蒙版處于工作狀態(tài)下，使用【自定形狀工具】在【工具選項欄】上，形狀取色器中選擇“選項卡按鈕”。在副本圖像頂端繪制圖形，如圖14-49所示。圖14-49添加圖像形狀(4)分別對白背景圖像及副本圖像添加投影。啟用【漸變疊加】圖層樣式，設置【投影的不透明度】為12%；【光源角度】為120度。其它參數(shù)默認，如圖14-50所示。

圖14-50添加投影效果(5)使用【矩形工具】口，設置W為156像素；H為137像素。建立矩形，創(chuàng)建形狀圖層。啟用【描邊】圖層樣式，添加描邊效果，設置參數(shù)，如圖14-51所示。歸胤定大小歸胤定大小*1」而吧川呼i太小?到」 ]m不虛可夏1由：- 白啜9元良如31*4-K|-惠生|卜卯割如] 圖14-51繪制矩形框(6)按Ctrl+J快捷鍵4次，復制4個矩形框。并將其水平排列起來，如圖14-52所示。圖14-52繪制方框提示選中5個方框，單擊【工具選項欄】上【垂直居中對齊】按鈕一」-和【水平居中分布】按鈕；工將框?qū)R分布排列。(7)如同上例操作，在下方繪制6個矩形框，添加相同描邊效果。設置大小，如圖14-53所示。圖14-53繪制矩形框(8)內(nèi)頁布局基本制作完成，如圖14-54所示。執(zhí)行【文件】|【保存】命令，將“內(nèi)頁布局”保存為PSD格式文檔。

圖14-54內(nèi)頁布局2.2網(wǎng)站圖像展示（1）執(zhí)行【圖像】【|復制】命令，復制“內(nèi)頁布局”文檔為“鵬樂購物網(wǎng)內(nèi)頁-筆記本”。在導航中，對“筆記本”文字圖層添加【顏色疊加】圖層樣式，將文字設置為黑色，刪除“網(wǎng)頁首頁”文字圖層樣式，如圖14-55所示。網(wǎng)站首頁筆記本iffl：WHW5力怛？ 的Fln支■■￡本□日更,后并的的血曲圖14-55復制文檔（2）使用【橫排文字工具】「，輸入“筆記本電腦專區(qū)”。設置文本屬性，如圖14-56（3）打開“華碩K40E667IN-SL”電腦圖片，放置文檔中。按照上例方法，并將圖片剪切放置到第一個方框內(nèi)，如圖14-57所示。圖14-57放置圖片(4)使用【橫排文字工具】①，在圖像下方輸入產(chǎn)品名稱及價格，設置文本屬性，如圖14-58所示。國冗**Ifg3元*■；帝現(xiàn)?華碩K4DE66T工W-SL銷售價：￥4899三圖14-58輸入信息文本(5)如同上例操作，繪制搜索按鈕的方法。使用【圓角矩形工具】口，繪制“購買”和“搜藏”按鈕。設置參數(shù)，如圖14-59所示。圖14-59添加按鈕(6)如同上例方法，放置不同種類的電腦圖像，并在圖像下方屬性相對應的文本信息，如圖14-60所示。圖14-60放置圖像及文本信息(7)使用【橫排文字工具】皿，文檔右下角輸入“共8頁【1】2345下一頁”文字，作為頁碼。設置文本屬性，如圖14-61所示。^795 tfcS價：￥399收藏J［購買J［收減J「工晶*FITT%至1，共；O頁［1］2345F一天圖14-61繪制頁碼(8)按照上例方法，分別制作“手機”及“相機”為產(chǎn)品的兩個內(nèi)頁，如圖14-46所示。2.3網(wǎng)站文字信息（1）復制“內(nèi)頁布局”文檔為“鵬樂購物網(wǎng)內(nèi)頁-客服中心”。并將導航中的“客服中心”文字設置為黑色，如圖14-62所示?？头行膎i-力克事.同xd客服中心ni-力克事.同xdH于卸綱內(nèi)期可服中心□很J［附皆開的的，聾第一堂冊一嶷系我們一依為省力-7口3文