項目9 婚紗移動端店鋪首頁的設(shè)計

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