項(xiàng)目9 婚紗移動(dòng)端店鋪首頁的設(shè)計(jì)

項(xiàng)目九婚紗移動(dòng)端店鋪首頁的設(shè)計(jì)網(wǎng)店美工項(xiàng)目實(shí)戰(zhàn)教程CONTENTS目錄婚紗移動(dòng)端店鋪首頁的設(shè)計(jì)9.1拓展酷豆母嬰用品店鋪首頁的設(shè)計(jì)9.2課后思考9.39.1.1設(shè)計(jì)理念9.19.1.2工具方法9.1.3實(shí)現(xiàn)過程婚紗移動(dòng)端店鋪首頁的設(shè)計(jì)本項(xiàng)目為婚紗店輔的裝修，需要調(diào)出溫馨浪漫、唯美的視覺效果，否則會(huì)影響顧客的瀏覽欲望，項(xiàng)目以玫瑰粉與紫紅色為主色調(diào)，體現(xiàn)出女人味及高貴典雅的特性，凸顯婚紗的品質(zhì)與情調(diào)。如右圖所示，為婚紗移動(dòng)端店鋪首頁效果圖從上至下的三個(gè)部分，分別是店招與海報(bào)、焦點(diǎn)圖、新品上架與銷售排行。9.1婚紗移動(dòng)端店鋪首頁的設(shè)計(jì)9.1.1設(shè)計(jì)理念店招與商品海報(bào)將出現(xiàn)在手機(jī)端的第一屏上，它們的作用尤為重要，店招LOGO以百合花為原型，兩層共六片花瓣，中間結(jié)合字母B為百字的首字母，百合花素有“云裳仙子”之稱，外表高雅純潔，又有百年好合的寓意，非常應(yīng)景。店輔名稱中英文結(jié)合，配以簡單的橫條與花朵裝飾、體現(xiàn)店輔高端大氣。商品海報(bào)是產(chǎn)品信息的大圖展示區(qū)，通過模特展示婚紗效果，輔以描述性文字，并在文字正文配上半透明的矩形框，體現(xiàn)唯美意境。設(shè)計(jì)兩張焦點(diǎn)圖，分別以左圖右文，右圖左文的形式形成對(duì)比，同時(shí)根據(jù)焦點(diǎn)圖展示的婚紗類型搭配不同的字體，文字設(shè)計(jì)標(biāo)題、副標(biāo)題、說明文字、活動(dòng)信息，使用不同的字體、字號(hào)，顏色，修飾形狀進(jìn)行排版，展示婚紗的風(fēng)格。定制專區(qū)羅列了當(dāng)季銷量最多的產(chǎn)品與新品樣式，顧客可以根據(jù)需要直接聯(lián)系客服定制，使用剪貼蒙版來限制圖片的大小，使該區(qū)域圖片的大小一致，風(fēng)格統(tǒng)一。9.1.2工具方法使用AI來繪制LOGO形狀，簡單方便，與PS銜接性好。通過圖層蒙版來控制素材圖片的顯示效果，使用橢圓工具繪制形狀并用高斯模糊產(chǎn)生商品陰影。利用“漸變疊加”、“投影”等圖層樣式對(duì)繪制的形狀進(jìn)行修飾，使其更視覺多樣化。9.1.3實(shí)現(xiàn)過程新建文件，繪制參考線，確定布局，在AI中繪制店招并拖入PS，并在PS中繪制收藏區(qū)，置入素材百合花。完成導(dǎo)航部分的制作9.1.3實(shí)現(xiàn)過程加入海報(bào)圖片素材，制作陰影，使用形狀制作右側(cè)修飾。9.1.3實(shí)現(xiàn)過程在AI中制作優(yōu)惠券。并拖入PS海報(bào)區(qū)域，完成海報(bào)部分的制作。9.1.3實(shí)現(xiàn)過程制作模塊分隔條，在下方拖入模特圖片，并在左邊繪制梯形，添加文字案例，完成焦點(diǎn)圖制作。9.1.3實(shí)現(xiàn)過程復(fù)制分隔條與焦點(diǎn)圖圖層，拖到下方，調(diào)整文字與位置，制作光線效果，完成焦點(diǎn)圖2部分的制作。9.1.3實(shí)現(xiàn)過程復(fù)制分隔條，調(diào)整文字，使用剪貼蒙版制作模特圖片的展示，添加半透明形狀，并加入文字，完成新品展示部分制作。9.1.3實(shí)現(xiàn)過程復(fù)制分隔條，調(diào)整文字；制作圓角矩形工作，拖入模特圖片，用剪貼蒙版限制展示部分，添加文字案例，制作銷量排行。9.1.3實(shí)現(xiàn)過程使用圓角矩形與文字制作“查看全部寶貝”按鈕，完成整個(gè)案例的制作。9.2拓展酷豆母嬰用品店鋪首頁的設(shè)計(jì)9.2.1設(shè)計(jì)理念9.2.2實(shí)現(xiàn)過程9.2.1設(shè)計(jì)理念本案例中在色彩搭配上使用了藍(lán)色與綠色兩種主色調(diào)，綠色突出健康，生機(jī)，藍(lán)色又體現(xiàn)科技時(shí)尚感，烘托出店名酷豆中的酷字，欄目用色兩種主打色交替出現(xiàn)，色彩合用和諧又不顯得單調(diào)。店輔LOGO簡潔明了，圖形部分用小孩形狀線框圖標(biāo)設(shè)計(jì)，配合文字變形，豆字中的偏旁配上調(diào)皮吐出的舌頭，緊貼主題。移動(dòng)端首頁效果如右圖所示。9.2.2實(shí)現(xiàn)過程在AI中制作店鋪LOGO部分。拖入PS，完成店招制作9.2.2實(shí)現(xiàn)過程在店招下方置入背景素材，并添加色相飽和度圖層，使用剪貼蒙版來控制其顯示色調(diào)。加入兒童節(jié)圖片與文字素材，圖層建組，取名“海報(bào)”。9.2.2實(shí)現(xiàn)過程在海報(bào)下方繪制圓角，置入背景素材，并添加色相飽和度圖層，使用剪貼蒙版來控制其顯示色調(diào)。繪制收藏有禮、客服等區(qū)域,圖層建組，取名“收藏客服區(qū)”9.2.2實(shí)現(xiàn)過程在AI中繪制形狀。將其粘貼到PS中，置入背景素材。繪制四個(gè)正圓，置入素材，使用剪貼蒙版創(chuàng)作新品導(dǎo)航，編輯效果如圖所示，將圖層編組命名為“新品導(dǎo)航”。9.2.2實(shí)現(xiàn)過程使用橢圓工具繪制云的形狀，置入背景素材，用剪貼蒙版創(chuàng)建底圖，合用飽和度圖層調(diào)整色調(diào)，座板與產(chǎn)品素材，繪制圓角矩形，添加文字信息。新建圖層組“新品”。9.2.2實(shí)現(xiàn)過程使用鋼筆工具繪制底圖形狀，置入背景素材，用剪貼蒙版創(chuàng)建底圖，合用飽和度圖層調(diào)整色調(diào)，拖入杯子素材，再繪制正圓，拖入兒童圖片，與正圓報(bào)建剪貼蒙版，繪制其他形狀與文字素材。創(chuàng)建圖層組，取名為“大牌1”。9.2.2實(shí)現(xiàn)過程使用同樣的文法，制作大牌2。9.2.2實(shí)現(xiàn)過程繪制形狀，拖入素材，創(chuàng)建剪貼蒙版，制作產(chǎn)品陳列圖，創(chuàng)建圖層組，取名“產(chǎn)品組”。9.2.2實(shí)現(xiàn)過程繪制形狀，制作按鈕，插入LOGO，制作底部，創(chuàng)建圖層組，取名“底部”。9.3課后思考9.3.1思政思考9.3.2技能思考9.3.1思政思考移動(dòng)端店輔首頁內(nèi)容較多，制作起來比較繁瑣，每個(gè)模塊都需要精雕細(xì)刻，同時(shí)制作的時(shí)候又要用大局觀，整個(gè)頁面在用色布局的時(shí)候都要做到合理、合規(guī)、視覺統(tǒng)一，所以在平時(shí)大家就要通過大量的案例觀看來積累提升自己的審美能力，并且要掌握基本的配色方法與頁面對(duì)齊布局的技巧。職業(yè)素養(yǎng)概括的說包含以下四個(gè)方面：（一）職業(yè)道德（二）職業(yè)思想（意識(shí)）（三）職業(yè)行為習(xí)慣（四）職業(yè)技能，前三項(xiàng)是職業(yè)素養(yǎng)中最根基的部分。而職業(yè)技能是支撐職業(yè)人生的表象內(nèi)容。道德我們前面已經(jīng)強(qiáng)調(diào)了很多，在這個(gè)案例中，希望大家能注重職業(yè)意識(shí)與職業(yè)行為習(xí)慣的培養(yǎng)，只有不停的訓(xùn)練，不斷的積累，才能很好的的提升自己的職業(yè)技能。淘寶平臺(tái)