Photoshop網(wǎng)頁(yè)設(shè)計(jì)購(gòu)物類網(wǎng)站設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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