PhotoShop網(wǎng)頁網(wǎng)店廣告設(shè)計(jì)

項(xiàng)目十二

綜合項(xiàng)目實(shí)訓(xùn)Photoshop核心技能與高級(jí)案例教程12項(xiàng)目十二網(wǎng)店美工高級(jí)【知識(shí)目標(biāo)】掌握網(wǎng)店美工的理論基礎(chǔ)2.掌握利用PS復(fù)雜處理圖像方法3.了解網(wǎng)頁宣傳欄的各類尺寸和作用【技能目標(biāo)】1.

掌握網(wǎng)店美工的核心操作2.掌握網(wǎng)店美工的技巧應(yīng)用3.了解各種宣傳圖片的不同意義12一、理論解說淘寶店鋪不同位置的圖片尺寸要求也不同，當(dāng)圖片過大，會(huì)自動(dòng)被裁剪掉，而圖片過小，則會(huì)周圍留下空白，或者系統(tǒng)自動(dòng)平鋪，這樣的用戶體驗(yàn)是極其不好的。所以，當(dāng)我們?cè)谘b修店鋪，設(shè)計(jì)過程中，制作不同區(qū)域的圖片要根據(jù)店鋪要求來確定尺寸、大小等信息。這是美工人員必在動(dòng)手設(shè)計(jì)之前必須要考慮到的，不然設(shè)計(jì)好的圖，因尺寸不合適，造成后期調(diào)整，是非常麻煩的。淘寶美工作為目前需求量大增的行業(yè)，其實(shí)是一種技能的細(xì)分，它與平面設(shè)計(jì)有差異也有共性的地方，差異表現(xiàn)在技能的使用中更加高效，有獨(dú)特的設(shè)計(jì)規(guī)范需要遵循，共同的地方就是綜合能力，美術(shù)功底，創(chuàng)作靈感，操作熟練程度都是需要不斷提高才能勝任其工作。淘寶各類型圖片：例圖美工設(shè)計(jì)制作流程1.素材規(guī)劃。店鋪裝修之前，設(shè)計(jì)人員必須考慮整個(gè)店鋪風(fēng)格，從拍攝照片就必須全面的規(guī)劃。每一個(gè)店鋪都是獨(dú)特富有生命活力的，如何完美的展現(xiàn)給顧客，這都是需要考慮到的。2.圖片設(shè)計(jì)制作。拍攝好的商品，模特展示等圖片，需要在Photoshop軟件后期進(jìn)行美化處理，然后配上文案內(nèi)容，進(jìn)行排版設(shè)計(jì)制作。這也是美工設(shè)計(jì)人員工作的重點(diǎn)，同樣，也是本書所著重講解的內(nèi)容。3.切片處理。使用Photosho切片工具，把設(shè)計(jì)好的內(nèi)容進(jìn)行無縫切片和優(yōu)化處理。4.上傳空間。把切片存儲(chǔ)好的圖片上傳到淘寶圖片空間或千牛云盤，然后，在Dreamweaver給圖片添加熱點(diǎn)鏈接等內(nèi)容轉(zhuǎn)化為代碼。5.預(yù)覽效果。把轉(zhuǎn)化好的代碼有效的安裝到店鋪當(dāng)中，及時(shí)預(yù)覽查看效果。值得注意的是，要及時(shí)檢查代碼鏈接的有效性，處理瑕疵，確定無誤后，方可發(fā)布。6.另外，當(dāng)日常工作中遇到其他營(yíng)銷活動(dòng)，需要配合運(yùn)營(yíng)人員設(shè)計(jì)制作促銷廣告圖。案例引入案例一任務(wù)需求：創(chuàng)建一個(gè)商品促銷類的圖像合成效果。利用所給素材進(jìn)項(xiàng)宣傳圖片的合成和美華效果。任務(wù)要點(diǎn)：1、圖像合成的比例和位置關(guān)系。2、背景和顏色的處理。如圖12-1所示。圖12-1最終效果操作步驟步驟一

新建文件選擇“文件”→“新建”命令，或按快捷鍵“Ctrl+N”，然后在如圖12-2所示的對(duì)話框中進(jìn)行參數(shù)設(shè)置。創(chuàng)建一個(gè)新文件，文件取名“影像合成效果.PSD”。步驟二添加漸變背景色選擇需要編輯的素材，從素材的顏色中提取之后做出水平漸變效果。如圖所示。圖12-3圖12-4圖12-2步驟三將鞋子圖片進(jìn)行摳圖，并羽化和收縮1個(gè)像素后，拖拽進(jìn)圖像合成文檔內(nèi)。(圖12-5，圖12-6)圖12-6圖12-5調(diào)整大小和位置。如圖12-7所示。圖12-7步驟四

給鞋子加上陰影，使得圖片有立體感。如圖12-8所示。圖12-9圖12-8圖12-11步驟五加投影的方法，新建圖層，并放置在鞋子圖層的下方，顏色為黑色，然后利用橢圓工具繪制一個(gè)橢圓，并調(diào)整高斯模糊，數(shù)值大小可根據(jù)具體情況調(diào)整，如圖：12-10所示。效果如圖12-11圖12-10步驟六將其它鞋子也用高斯模糊處理加上陰影，讓鞋子有立體感，如圖12-12所示。圖12-12步驟七用畫筆工具先繪制一條和鞋跟粗細(xì)的筆觸，如圖12-13圖12-13步驟八通過濾鏡—模糊—高斯模糊，處理好陰影的自然過渡。如圖12-14圖12-14步驟九如將鞋底的陰影也用高斯模糊做出來，建立新的圖層，并畫一個(gè)橢圓后，填充黑色。最終效果如圖12-15。圖12-15圖12-16步驟十由于背景色單一，可以加一個(gè)鞋子的輪廓線條豐富底板，根據(jù)版面調(diào)整大小如圖：12-13所示。步驟十一添加左側(cè)畫面素材,快捷鍵Ctrl+T調(diào)整圖像大小，擺放合理。如圖12-17圖12-17步驟十二從其它素材中框選需要的畫面，并移動(dòng)到主頁圖中，如圖12-18所示。圖12-18步驟十三對(duì)文字做傾斜處理。并添加黃色矩形框變形，文字做圖層效果處理。如圖12-19所示。圖12-19步驟十四選取一個(gè)比較相近的顏色，增加一個(gè)廣告語，讓文案更加生動(dòng)。如圖12-20所示。圖12-20步驟十五把文字和素材都用圖層樣式浮雕效果加以處理。如圖12-21圖12-21步驟十六最終效果圖12-22圖12-22綜合案例2任務(wù)需求：運(yùn)用所學(xué)知識(shí)，利用給定素材，將產(chǎn)品精修一遍。任務(wù)要點(diǎn)：1、鋼筆工具的熟練使用；2、濾鏡中有關(guān)高斯模糊的效果使用。3、利用其它交互式軟件制作立體感的弧形參考線效果圖如下圖所示：步驟一導(dǎo)入素材，新建一個(gè)“圖層”，選擇“鋼筆”工具沿這瓶身描一個(gè)出來，確定選區(qū)，將選區(qū)內(nèi)的填充為圖片瓶身顏色。文件取名“化妝品外包裝.PSD”。如圖12-23所示。

圖12-23圖12-24步驟二用吸管吸取圖片的顏色。如圖12-24。步驟三新建圖層，定義為瓶身，填充前景色，瓶蓋和尾部用同樣方法如圖12-25所示。圖12-25步驟四建立瓶身光澤區(qū)新路徑，用鋼筆工具勾出高光區(qū)的形狀，并新建圖層，修改名稱為高光區(qū)，填充顏色如圖12-26圖12-26步驟五同樣的步驟，把瓶身左邊的高光區(qū)也做出來，如圖12-27。步驟六整體顏色填充效果如圖12-28。圖12-27圖12-28步驟七建立多個(gè)高光區(qū)圖層副本，用濾鏡-高斯模糊處理這三個(gè)高光區(qū)如圖12-29、圖12-30、圖12-31。圖12-29圖12-30圖12-31步驟八將左高光區(qū)也復(fù)制三個(gè)圖層，如圖12-32。圖12-32步驟九用濾鏡-高斯模糊處理這三個(gè)高光區(qū)如圖12-33、圖12-34、圖12-35。用三個(gè)圖層做高斯模糊的效果，能夠更好的表現(xiàn)出光纖的自然過渡。步驟十將左邊高光區(qū)圖層向下合并為一個(gè)圖層，如圖12-36。圖12-33圖12-34圖12-35圖12-36步驟十一將右邊光澤區(qū)也向下合并為一個(gè)圖層，如圖12-37。圖12-37步驟十二利用快速選擇工具Ctrl+鼠標(biāo)左鍵，點(diǎn)選瓶身這個(gè)圖層，得到瓶身的選區(qū)，如圖12-38。圖12-38圖12-39步驟十三分別給左高光區(qū)和右高光區(qū)添加圖層蒙版，如圖12-39。步驟十四

制作瓶蓋部分的光澤效果，先利用多邊形套索工具畫一豎條，如圖12-40。圖12-40步驟十五

用滴管工具選取原瓶蓋光澤區(qū)的顏色，并填充在新建的瓶蓋光澤區(qū)。如圖12-41圖12-41步驟十六與瓶身光澤處理方式一樣，也用濾鏡---模糊—高斯模糊，調(diào)整模糊程度，如圖12-42圖12-42步驟十七為了得到更好的光感，建議繪制的矩形在沒有高斯模糊前，先復(fù)制一層，并變窄一些。如圖12-43所示。圖12-43步驟十八

用濾鏡-模糊-高斯模糊調(diào)整色塊的模糊程度，如圖12-44所示。圖12-44步驟十九

按住Ctrl+鼠標(biāo)左鍵，點(diǎn)選瓶蓋圖層，得到瓶蓋選區(qū)，給瓶蓋光澤區(qū)1增加圖層蒙版，瓶蓋光澤區(qū)拷貝圖層，也一樣增加圖層蒙版，效果如圖12-45所示。圖12-45步驟二十

同樣給瓶蓋右邊位置也畫出選區(qū)，并建立新圖層，取名為瓶蓋右光澤區(qū)，填充顏色，如圖12-46所示。圖12-46步驟二十一

復(fù)制這個(gè)光澤區(qū)圖層，并Ctrl+T，縮小一些，如圖12-47所示。圖12-47步驟二十二

用高斯模糊處理第一個(gè)光澤區(qū)，如圖12-48所示。圖12-48步驟二十三

同樣處理光澤區(qū)拷貝圖層，效果如圖12-49圖12-49步驟二十四

利用快捷鍵Ctrl+鼠標(biāo)左鍵，點(diǎn)選瓶蓋圖層，得到選區(qū)，分別給瓶蓋光澤區(qū)和光澤區(qū)拷貝圖層添加圖層蒙版，效果如圖12-50圖12-50步驟二十五

如果感覺瓶蓋的光澤區(qū)高光不明顯，可以復(fù)制高斯模糊的圖層，讓亮度增強(qiáng)，如圖12-51。圖12-51步驟二十六

開始處理尾部的效果，由于尾部的效果不存在光澤區(qū)，而有了凹凸的感覺，所以，我們需要另外制作一個(gè)圖案來填充，新建一個(gè)文檔，并保持72dpi分辨率。如圖12-52。圖12-52步驟二十七

新建圖層，畫一個(gè)長(zhǎng)豎條排列圖案，并填充顏色，如圖12-53圖12-54圖12-53步驟二十八

復(fù)制并旋轉(zhuǎn)45度，分別添加圖層樣式斜面與浮雕效果如圖12-54。步驟二十九

拖拽選取的圖案到化妝品文檔中，別放置在尾部圖層的上面，點(diǎn)選尾部選區(qū)，如圖12-55圖12-55步驟三十

給尾部圖案層添加圖層蒙版，效果如圖12-56圖12-56步驟三十一

由于顏色的差異，所以需要調(diào)整尾部凹凸感的顏色。如圖12-57圖12-57步驟三十二

仔細(xì)觀察瓶身，感覺光澤感覺有缺失，需要增加高光區(qū)域，豐富化妝品瓶的質(zhì)感，此處需要細(xì)節(jié)上處理。如圖12-58圖12-58步驟三十三

利用鋼筆工具繪制一個(gè)形狀，并新建圖層，進(jìn)行顏色填充，高斯模糊處理，要找到合適的調(diào)整值。如圖12-59。圖12-59步驟三十四

總體上基本完成，但是瓶身的立體感稍微欠缺，給瓶身增加一個(gè)對(duì)比度調(diào)整圖層如圖12-60、圖12-61。圖12-60圖12-61步驟三十五

這樣經(jīng)過調(diào)整后的化妝品質(zhì)感還差點(diǎn)東西，更有質(zhì)感的話，可以添加一些雜色，讓塑料有磨砂的質(zhì)感。如圖12-62。圖12-62步驟三十六

增加適當(dāng)?shù)匿J化，讓塑料的質(zhì)感更明顯一些，如圖12-63。圖12-63步驟三十七整體效果明顯有了更好的磨砂質(zhì)感，如圖12-64。圖12-64步驟三十八

完成這些后，我們就要對(duì)其增加文字，文字的添加很重要，不僅要有質(zhì)感，還要有立體感覺，和瓶身也能融合一體。貼圖最主要的就是透視關(guān)系，透視貼圖不真實(shí)的原因，就是太平直沒有立體的原因。如果我們對(duì)透視關(guān)系把握不好，可以利用其它軟件，比如coreldraw矢量軟件的調(diào)和工具，建立一個(gè)圓弧狀的參考線，幫助我們貼文字。如圖12-65圖12-65步驟三十九

將這個(gè)參考線拖拽到文檔的最前面，效果如圖12-66。圖12-66步驟四十

建立文字圖層，在原商品圖片的基礎(chǔ)上排版，并調(diào)整文字，填充合適的顏色，效果如圖12-67圖12-67步驟四十一

將所有文字圖層都合并為一個(gè)圖層，效果如圖12-68。圖12-68步驟四十二

將文字圖層拖拽進(jìn)文檔內(nèi)，放在最上面。如圖12-69。圖12-69步驟四十三

可以看出，下面的文字和色塊太直，明顯和瓶身的弧度不符，這也是看著假的原因，我們把這個(gè)圖層轉(zhuǎn)換為智能對(duì)象，-對(duì)它進(jìn)行變形處理，效果如圖12-70，細(xì)節(jié)如圖12-71。圖12-70圖12-71步驟四十四

增加一個(gè)漸變圖層，如圖12-72。圖12-72圖12-73步驟四十五

建立圖層蒙版，如圖12-73。步驟四十三

將圖層樣式改為顏色減淡，也可以自己調(diào)試，只到自己覺得文字效果逼真效果為止，如圖12-74。圖12-74步驟四十六關(guān)閉參考線，給這個(gè)化妝品瓶身增加一個(gè)背景，最終效果，再做宣傳圖時(shí)，就可以直接用它了。如圖12-75。圖12-75綜合案例-產(chǎn)品精修3案例需求：在網(wǎng)絡(luò)店鋪運(yùn)營(yíng)中，主圖設(shè)計(jì)是重中之重，讓主圖更具有吸引力。任務(wù)要點(diǎn)：1、主圖的最終目的是為銷售服務(wù)的。2、在動(dòng)手設(shè)計(jì)之前，一定要分析目標(biāo)，溝通策劃、然后再設(shè)計(jì)表達(dá)。步驟一選擇“文件”→“新建”命令，或按快捷鍵“Ctrl+N”，創(chuàng)建一個(gè)800x800px的新文件，文件取名“潔面乳.PSD”。參數(shù)如圖12-76所示。圖12-76步驟二找到合適的背景素材，放置進(jìn)文檔后，改變大小，使其符合主圖尺寸，如圖12-77圖12-77步驟三將我們之前設(shè)計(jì)的潔面乳效果圖調(diào)取出來后，放在合適的位置，并調(diào)整大小，做適當(dāng)?shù)男D(zhuǎn)，讓畫面顯得有活力不死板。如圖12-78圖12-78圖12-79步驟四作為產(chǎn)品宣傳的主圖設(shè)計(jì)，我們需要在構(gòu)圖上多考慮，為了符合產(chǎn)品的性能，清爽，干凈，我們需要將背景調(diào)整，和潔面乳融為一體，將冰塊背景水平翻轉(zhuǎn)一下，如圖12-79。步驟五

由于產(chǎn)品的不透明。我們需要將冰塊做出透明的效果，體現(xiàn)出潔面乳潔凈清爽的質(zhì)感，對(duì)冰塊做一個(gè)摳圖出去，透明物體的摳圖方式，我們多半用通道摳圖，先復(fù)制冰塊圖層放置在最上面。如圖12-80。圖12-80步驟六

對(duì)拷貝的圖層做去色處理，這樣我們用通道摳圖效果就更好一些，增加冰塊顏色的對(duì)比度，便于我們扣取透明素材。如圖12-81。圖12-81步驟七

調(diào)整好黑白對(duì)比度之后，我們需要用快捷鍵Ctrl+I反轉(zhuǎn)黑白顯示，如圖12-82。圖12-82步驟八此時(shí)，我們看到這個(gè)白色部分就是冰塊，但是周圍有過渡灰色，我們需要用快捷鍵Ctrl+L打開色階面板進(jìn)行對(duì)比度的調(diào)整，如圖12-83。圖12-83步驟九

按住Ctrl+鼠標(biāo)左鍵點(diǎn)按紅色通道拷貝層，得到白色部分的選區(qū)，回到圖層中，關(guān)閉黑白冰塊層，點(diǎn)選圖層一，如圖12-84。圖12-84步驟十用快捷鍵CTRL+J生成新的冰塊圖層2，放置在潔面乳圖層之上，關(guān)閉冰塊去色圖層。如圖12-85。圖12-85步驟十一

為了讓冰感細(xì)節(jié)更有質(zhì)感，可以適當(dāng)增加一個(gè)新的冰塊圖層，如圖12-86。圖12-86。步驟十二

我們看到此時(shí)的效果明顯要更有沖擊力，接下來就需要構(gòu)思文字，好的設(shè)計(jì)，文字的效果也是非常重要的。左邊刻意留出的空白區(qū)域，就是為了制作文字的。根據(jù)產(chǎn)品特性，我們模仿同類產(chǎn)品的廣告宣傳，如圖12-87。圖12-87步驟十三從整體上看，我們覺得畫面略顯單調(diào)，我們可以再增加一些其它元素，讓畫面更加生動(dòng)和豐富，但一定要注意不能雜亂。先添加一個(gè)新圖層，如圖12-88。圖12-88步驟十四調(diào)整徑向漸變效果，點(diǎn)選反向，效果如圖12-89。圖12-89步驟十五自此，我們完成了整個(gè)產(chǎn)品主圖的修改和設(shè)計(jì)，保存最終效果圖。最好將所有可見圖層復(fù)制一個(gè)后蓋印，生成一個(gè)效果圖圖層，便于以后的編輯和調(diào)用，如圖12-90。圖12-90綜合案例-淘寶鉆石展位設(shè)計(jì)4任務(wù)需求：淘寶鉆石展位設(shè)計(jì)，突出海量上新/切合買家的需求/店鋪同期配合上新并優(yōu)惠折扣任務(wù)要點(diǎn)：在設(shè)計(jì)過程中，要注意目標(biāo)明確，主題突出，形式美觀。這是對(duì)鉆石展位的最基本要求，也是最核心的理念。步驟一

選擇“文件”→“新建”命令，或按Ctrl+N創(chuàng)建一個(gè)1920*700分辨率為72dpi的畫布。白色背景色,如圖12-91。圖12-91步驟二

將網(wǎng)絡(luò)收集的資料進(jìn)行比較，找到合適本產(chǎn)品潔面乳的構(gòu)圖和色調(diào)模式，對(duì)比如圖12-92。步驟三根據(jù)產(chǎn)品的主色調(diào)，構(gòu)思設(shè)計(jì)的特色，第二款更簡(jiǎn)潔明了，深沉，陽剛，適合男性化妝品的整體風(fēng)格。接下來，我們就模仿這個(gè)廣告效果。新建圖層，用漸變填充該圖層，如圖12-93。圖12-92圖12-93步驟四由于我們使用線性漸變，顏色過渡的比較生硬，而廣告圖有不規(guī)則的邊界，我們用畫筆工具涂抹淺藍(lán)色的形狀，圖層模式改為濾色。效果如圖12-94，圖12-95。圖12-94圖12-95步驟五

打開水紋素材，截取一段，放置進(jìn)文檔中，并加以透視變形處理，如圖12-96。圖12-96步驟六

水紋效果需要我們處理一下，打開濾鏡—模糊—?jiǎng)討B(tài)模糊調(diào)整水紋效果如圖12-97。圖12-97步驟七給水紋圖層添加圖層蒙版，用黑色畫筆把不需要的部分遮擋起來，如圖12-98。圖12-98步驟八做好這個(gè)背景后，我們需要一個(gè)冰塊的特寫圖片，找到類似的素材進(jìn)行處理。如圖12-99。圖12-99。步驟九我們用通道進(jìn)行摳圖處理，選取紅色通道，復(fù)制并按Ctrl+I反轉(zhuǎn)顏色，按Ctrl+L鍵打開色階對(duì)話框，調(diào)整數(shù)值如圖12-100。圖12-100步驟十用黑色畫筆將周圍不需要的涂抹為黑色，如圖12-101。圖12-101步驟十一點(diǎn)選紅色通道得到選區(qū)，鼠標(biāo)單擊RGB圖層，將移動(dòng)工具選區(qū)圖片移動(dòng)到文檔中去，如圖12-102。圖12-102步驟十二由于冰塊的效果不好，亮度需要調(diào)整，可以通過復(fù)制新的冰塊圖層，改變圖層樣式，效果如圖12-103。圖12-103步驟十三將我們之前設(shè)計(jì)的潔面乳效果圖添加進(jìn)來，改變位置和大小。如圖12-104。圖12-104步驟十四

潔面乳的效果應(yīng)該在冰塊里，我們可以將一個(gè)冰塊的圖層放置在潔面乳上面，如圖12-105。圖12-105步驟十五

潔面乳在冰塊里面的效果還需要做一些細(xì)微的調(diào)整，我們將冰塊層填充數(shù)值降低，并用橡皮擦工具將冰塊擦除掉一部分，使得潔面乳看似放在冰塊中的感覺，如圖12-106。圖12-106步驟十六

從這步開始，我們將添加文字圖層，注意字體的大小和間距要合理，比例要適當(dāng)，放置位置可以有一些變化，以免過于雷同的設(shè)計(jì)顯得死板。如圖12-107。圖12-107步驟十七從整體效果看，我們發(fā)現(xiàn)潔面乳的效果還有待增強(qiáng)，我們可以給它加一個(gè)白色勾勒剪影，用鋼筆工具繪制線條。新建圖層，并用白色填充顏色，用高斯模糊處理。如圖12-108。圖12-108

步驟十八

完善好整個(gè)圖片的構(gòu)圖，色調(diào)后，保存為PSD格式的文件，并復(fù)制所有圖層一次，合并它們，形成一個(gè)圖層。保存一張JPGE的格式，完成本任務(wù)。效果如圖12-109。圖12-109綜合案例-網(wǎng)店首頁視覺設(shè)計(jì)5任務(wù)需求：打造店鋪形象展示窗口的淘寶首頁；任務(wù)要點(diǎn)：設(shè)計(jì)流程是：確定店鋪定位

搭建首頁框架

確定相關(guān)元素。首頁根據(jù)節(jié)點(diǎn)、主題來制定首頁的色調(diào)，整體色調(diào)進(jìn)行相近色拓展，而不是任意去使用色彩。步驟一

確定首頁風(fēng)格，找到商品類似的設(shè)計(jì)，啟發(fā)靈感。如圖12-110。圖12-110步驟二

淘寶首頁的尺寸是有一定要求的，天貓首頁有效區(qū)域是990像素，淘寶店鋪有效區(qū)域是950像素的寬度。從圖12-111我們能看出，最好不要超過1400像素。圖12-111圖12-112步驟三

首頁中包括很多內(nèi)容，首先就是店招與導(dǎo)航條，其次是調(diào)性海報(bào)、輪播圖，再則可以有推薦分類和優(yōu)惠，展示近期活動(dòng)的海報(bào)，產(chǎn)品的細(xì)分類別等。如圖12-112。步驟四

有了好的構(gòu)思靈感后，我們分模塊化設(shè)計(jì)，先設(shè)計(jì)店招，新建文檔，尺寸為長(zhǎng)度990，高度150，稱存為首頁視覺效果1，如圖12-113。圖12-113步驟五我們調(diào)取已經(jīng)設(shè)計(jì)的海報(bào)，或者產(chǎn)品的效果圖，可以用海報(bào)做導(dǎo)航條的背景，這也是一個(gè)間接直接高效率定調(diào)的設(shè)計(jì)思路，給導(dǎo)航條添加背景色，保持產(chǎn)品色調(diào)一致性。如圖12-114。圖12-114步驟六新建圖層，用參考線確定導(dǎo)航條的高度，矩形工具畫出需要填充的區(qū)域，選擇黑色填充。效果如圖12-115。圖12-115步驟七剩下的任務(wù)就是添加文字了，注意不要有任何效果，不要有其它字體，宋體，大黑，楷書，字號(hào)也不要超過12PX.如圖12-116。步驟八保存這個(gè)文檔，名稱為導(dǎo)航條。再新建一個(gè)文檔，尺寸為1920寬，高為5500，背景色為深藍(lán)色。如圖12-117。圖12-116圖12-117步驟九

添加廣告，添加左側(cè)欄，如圖12-119圖12-118圖12-119圖12-120步驟十將素材放置進(jìn)來后對(duì)齊處理，最終效果如圖12-120。綜合案例-網(wǎng)店詳情頁設(shè)計(jì)6任務(wù)需求：了解詳情頁包含有營(yíng)銷內(nèi)容,產(chǎn)品功能展示，實(shí)物拍攝,好的文案,海報(bào)以及參數(shù)等說明任務(wù)要點(diǎn)：1、抓住消費(fèi)者的購買的需求，合理表達(dá)產(chǎn)品意思2、站在消費(fèi)者角度上去思考，準(zhǔn)確宣傳產(chǎn)品特色步驟一新建一個(gè)文檔，尺寸為寬度750，高度為4500。（理論上，高度是不限制的，但因?yàn)榫W(wǎng)絡(luò)原因，我們一般不建議太大的圖片，那樣加載太慢，影響瀏覽。）如圖12-121。圖12-121步驟二

我們需要新建一個(gè)圖層，尺寸自定義在寬度750以內(nèi)，高度為40，我們制作一個(gè)關(guān)聯(lián)推廣標(biāo)題條，如圖12-122。圖12-122步驟三

選取產(chǎn)品主色調(diào)，吸管吸取后填充新圖層，如圖12-123。圖12-123步驟四

編輯文字，調(diào)整字體大小，字體設(shè)為英文字體樣式“ChaparralPro”如果是中文

字體的話效果就沒這么好，再把樣式設(shè)為平滑，如圖12-124。圖12-124步驟五

新建圖層:選擇“圖形”工具橢圓形工具繪制圓形，按住Shift和Alt繪制圓形，編輯文字，效果如圖12-125。圖12-125步驟六

將這些圖層放置在一個(gè)文件組中，然后復(fù)制兩次，分別修改文字，如圖12-126，圖12-127。圖12-126，圖12-127步驟七我們新建圖層，固定尺寸為長(zhǎng)750，高750，填充顏色，效果如圖12-128。圖12-128步驟八

再次新建圖層“純色背景”尺寸為240X350，填充純色，如圖12-129。圖12-129步驟九

將所需素材拖進(jìn)圖層，改變大小后，放置在長(zhǎng)方形區(qū)域內(nèi)，新建圖層，填充白色后，調(diào)整透明度為50%，效果如圖12-130。圖12-130步驟十

利用對(duì)齊工具，把新的組做上下，左右，對(duì)齊處理，效果如圖12-131。圖12-131步驟十一

新建圖層，建立新選區(qū)，大小自定義，比如720X720，并添加圖層樣式—投影。將所需素材放置在圖層中，調(diào)整合適大小和位置。效果如圖