《網店美工 第2版》 課件 項目五 店招及導航欄設計與制作

項目五

店招及導航欄設計與制作

項目簡介店招就是店鋪的招牌，也是網店品牌定位最直觀的體現，是店鋪給人的第一印象，鮮明而有特色的店招不僅能吸引用戶的眼球，帶來訂單，同時起到品牌宣傳的作用。網店店招在從內容上可包含：店鋪名、店鋪logo、收藏按鈕、關注按鈕、促銷產品、優(yōu)惠券、活動信息/時間/倒計時、搜索框、店鋪公告、店鋪導航條、旺旺、電話熱線、店鋪資質、店鋪榮譽等等一系列信息。可根據網店的具體情況進行內容設計安排，做到核心信息告知，引起并放大買家的購物欲望。項目目標能讀懂客戶需求信息。學會常見網店店招模板設計技巧及方法。能根據客戶需求信息進行店招及導航欄設計。能使用“文字”“形狀”“通道”和“蒙版”等工具制作店招及導航欄。任務一

服裝類網店店招及導航欄設計與制作

【任務描述】“儷人裝”服裝網店即將迎來夏季促銷活動，現要求為其網店設計符合活動主題的店招。要求：1、突出店鋪品牌特色及活動信息；2、配色符合知性女裝特點。3、布局簡潔大方，要與整個頁面風格、色彩統(tǒng)一。同時，設計師與客戶溝通后得到具體需求信息如下：信息客戶反饋消費人群25-35歲女青年服裝風格柔和、優(yōu)雅、浪漫關鍵信息新品、特價、59元起廣告版面突出產品和關鍵信息店招尺寸寬為950像素，高為120像素導航欄尺寸寬為950像素，高為30像素文案簡短，能放大購物欲望設計思路分析1.網店店招以網店品牌為主，結合店鋪的經營類目，店鋪活動信息，總體特色等幾個方面進行設計。2．整體構圖以文字搭配圖像，背景選取柔和優(yōu)雅的鮮花圖案為裝飾，并根據配色要符合知性女裝特點的要求，字體選擇白色、紫色為主色，體現知性的穩(wěn)重感，同時用紅色突出活動信息放大買家購買欲望。3.清晰明了的導航欄，把流量合理的分配給主推的頁面或商品頁面，引導用戶找到合適的產品。4.新品、特價力度是消費的關注點，因此在店招中加入這些文案。最終效果圖操作實施1.網店店招的設計（1）啟動PhotoshopCC2018，新建一個950像素×150像素的空白文檔，名稱為“服裝網店及店招”，背景填充白色，調出標尺并新建及鎖定參考線在水平120像素的位置，打開“網店服裝logo.jpg”及“裝飾1”素材圖像文件，將其移動到圖像上，效果如圖。店招背景制作（2）新建圖層，使用工具箱中的“矩形選框”工具，繪制矩形選區(qū)，并填充深紫色，選擇文字工具，輸入文字，效果如圖。制作店鋪活動（4）使用工具箱中的“矩形選框”工具，繪制如圖所示圖形選區(qū)，填充灰色，效果如圖。添加關注效果圖2．網店導航的設計（1）新建圖層，根據參考線，繪制一個矩形選區(qū)，并填#d4bcd6色，并用橢圓工具按住shift鍵，繪制正圓，輸入文字，效果如圖導航欄（2）新建圖層繪制矩形選區(qū)，并填充顏色#96539a，選擇“文本工具”，輸入文字，及繪制正圓，效果如圖。店招及導航效果圖【舉一反三】“彼岸花”是一家知名服裝店，主營各種時尚女裝，款式新穎時尚、價格也實惠?，F在公司想為自己的網店制作一張精美大方的店招，讓進店的用戶能第一時間留下好的印象和即時了解店里的相關優(yōu)惠促銷活動訊息?？蛻艟唧w要求如表：你能否運用前面所學知識幫小雪這個完成這個任務呢？信息客戶反饋消費人群25-35歲女青年服裝風格時尚干練關鍵信息買2得3，秋冬新風尚活動時間8.27-28；系列新品8.27嘗鮮價79元起廣告版面突出店標和關鍵信息店招尺寸寬為950像素，高為120像素導航欄尺寸寬為950像素，高為30像素內容要求包含店鋪標志、店鋪活動、收藏模塊、分銷招募、會員中心、導航欄等設計任務二

食品類網店店招及導航欄設計與制作

【任務描述】

食尚物語是一家裝營進口零食的商城，因商城發(fā)展，即將開設網店，為了能夠樹立品牌形象，現要求為其設計店招。要求：1、配色符合零食店特點；2、突出網店優(yōu)勢，再結合店鋪的主題風格，進行相應的設計，設計師與客戶溝通后得到具體需求信息如下：信息客戶反饋消費人群15-35歲青少年食品定位進口產品/快捷配送/貼心服務關鍵信息要求樹立品牌形象/體現食品安全廣告版面突出品牌和關鍵信息店招尺寸寬為950像素，高為120像素導航欄尺寸寬為950像素，高為30像素文案簡短，能體現網店特點設計思路分析。設計師針對客戶反饋信息表進行設計思路分析：網店店招整體選用暖色色調，吸引買家的眼球，提高情感、情緒的刺激，提升購買欲。對網店店名進行字體效果處理，吸引眼球，加深買家對網店的印象，樹立品牌形象。使用圖形與文字結合強化網店服務優(yōu)勢：物流、質量、服務，更易讓買家記住，提升好感，起到品牌宣傳的作用。清晰明了的導航欄，把流量合理的分配給主推的頁面或商品頁面，引導用戶找到合適的產品。最終效果圖操作實施1.網店店招的制作（1）啟動PhotoshopCC2018，新建一個950像素×150像素的空白文檔，名稱為“食品類網店及店招”，背景填充白色，調出標尺并新建及鎖定參考線在水平120像素的位置，使用工具箱中的“矩形選框”工具，繪制一個矩形選區(qū)，并填充#f6c6b7色，效果如圖。新建文件及參考線（2）新建圖層，使用工具箱中的“矩形選框”工具，繪制一個矩形選區(qū)，并填充#e84e46色，使用工具箱中的“橡皮擦”工具，設置畫筆如圖5-12所示，按住shift鍵從左向右拖動，效果如圖。使用橡皮擦后的效果（3）新建圖層，選擇工具，按住shift鍵繪制正圓，并使用自選圖形工具繪制心形，效果如圖。圖形繪制效果（4）選擇“文字工具”，設置字體格式為漢儀琥珀簡，輸入文字“食尚物語進口零食商城”，柵格化文字，按住快捷鍵Ctrl+T調整合適大小，選擇菜單命令【濾鏡】|【雜色】|【添加雜色】，效果如圖：文字濾鏡效果（5）新建圖層，使用自選圖形自選工具，分別繪制以下圖形，選擇“文本工具”，輸入文字，打開“零食車”素材圖像文件，將其移動到圖像上，對圖像進行調整，效果如圖：圖5-18添加素材效果2．網店導航的制作（1）新建圖層，根據參考線，繪制一個矩形選區(qū)，并填充#e84e46色，并使用文字工具輸入文字，效果如圖：導航欄文字效果（2）新建圖層，使用矩形工具繪制矩形，設置【圖層樣式】|【斜面與浮雕】，效果圖如圖：最終效果圖【舉一反三】

小雪新開了一家網店口口香，主營各種類型的零食?，F在小雪想為自己的網店制作一張精美大方的店招，讓進店的用戶能第一時間留下好的印象和即時了解店里的相關優(yōu)惠促銷活動訊息。具體要求如表：你能否幫小雪這個完成這個任務呢？信息客戶反饋消費人群15-35歲青少年關鍵信息熱賣商品促銷價28；滿100減20廣告版面突出店標和關鍵信息店招尺寸寬為950像素，高為120像素導航欄尺寸寬為950像素，高為30像素內容要求包含店鋪標志、產品信息、促銷信息、店鋪活動、收藏模塊、導航欄等設計【項目總結】

對于網店而言，好店招及導航代表著店鋪形象，傳達店鋪核心信息，同時還起到宣傳的作用。在制作的過程中，應注意以下原則：1.注意店招及導航的尺寸，淘寶網店標尺寸通常為950*150px（包含導航欄），950*120px（不含導航欄）在實際中可根據網店需要進行選擇。2.店招的設計一定要店名醒目，設計吸引人，經營的產品一目了然，和店鋪整體風格一致。3.導航清晰明了，體現合理的流量分