分析了iPhone、紀梵希這些大店後，發現了全屏海報設計的8個要點！

全屏海報又被稱為「首焦輪播圖」，其寬度一般為1920像素。全屏海報位於店鋪首頁的黃金位置，佔有較大的面積，因而當顧客進入店鋪首頁後第一眼就能看見。

好的全屏海報，不僅可以加大店鋪活動和產品的宣傳力度，還可以提升店鋪的形象。

全屏海報上面一般會放促銷廣告圖和新品宣傳圖等內容，可用於品牌展示、展示和活動展示，還可通過輪播的方式進行展示。

此外，淘寶店鋪中的海報主要用於活動促銷宣傳、產品推廣宣傳、店鋪活動公告和店鋪美化。

作用1：活動促銷宣傳。

當顧客進入淘寶店鋪首頁時，第一眼看到的就是全屏海報所處的位置。店鋪活動促銷宣傳包括優惠券領取、滿就送、聚划算、周年慶活動和節慶假日活動等。可以說，每月的每周甚至是每天，運營人員都在策劃店鋪活動。下圖所示為Gap店鋪11月15日至11月23日的優惠活動頁面。

Gap店鋪活動促銷宣傳

作用2：產品推廣宣傳。

如果是服裝類店鋪，每個季度都會上新產品；如果是電子產品類店鋪，更新商品的速度就比較慢了，但是也會推廣某一款熱銷的產品或型號，如Apple Store店鋪首頁推廣的是iPhone X，如圖所示。

作用3：店鋪活動公告。

每年的「雙十一」活動會導致訂單暴漲，如果店鋪人手不夠，就無法正常發貨，從而使商品積壓，這時需要在店鋪內進行公告。在春節前後，物流會停止收件，也需要在店鋪進行公告。

將公告信息放在首頁海報上面是一個不錯的選擇。圖1所示為優衣庫的門店自提公告，圖2所示為歐萊雅的訂單發貨公告，圖3所示為韓都衣舍的周一上新公告。

圖1：自提公告（優衣庫）

圖2：發貨公告（歐萊雅）

圖3：上新公告（韓都衣舍）

作用4：店鋪美化。

一張漂亮的海報能讓店鋪顯得更加專業，從而提升顧客的購買慾望。如圖所示為裂帛店鋪的一系列海報，不難發現該海報的設計風格充滿了濃郁的民族風，效果非常不錯。

裂帛產品系列海報

全屏海報一般位於店鋪招牌的下方，如圖所示。

全屏海報可以由一張圖組成「全屏寬圖」，也可以添加多張圖形成「全屏輪播」海報圖，如圖所示。注意，輪播海報圖最多可以添加5張。

智能旺鋪全屏模塊

全屏海報的設計，不同於其他形式的海報，主要是以圍繞主題內容、風格樣式、構圖方法、配色技巧、背景內容、商品信息、文案內容和裝飾點綴這8大方面展開。

主題內容

每一張海報都有一個主題，其內容一般放在整個海報頁面的第一視覺中心，而且主題文字的提煉要簡潔、高效，能讓人一眼就知道所表達的信息。圖1所示為New Balance冬季新品上市海報，圖2所示為雀巢的優惠券領取海報。

圖1：New Balance海報

圖2：雀巢海報

風格樣式

風格是指具有不同於其他人的獨特表現，如穿衣打扮、行事作風等行為和觀念。在海報設計中，所謂的風格就是頁面傳遞給人們的某種感覺，如古典、可愛、小清新和簡約等。

當我們搜索某一個商品時，系統會推薦這個商品的風格類型，這時就可以根據自己需要的風格尋找相應的商品。同時，海報的風格要和店鋪出售的商品風格吻合，也可以根據季節、活動、節日等因素來確定風格。圖1所示為韓都衣舍漫畫風的海報設計，圖2所示為潮牛人中國風的海報設計。

圖1：韓都衣舍海報

圖2：潮牛人海報

構圖方法

一個攝影作品是否成功，取決於其構圖。只有成功的構圖才能使作品內容主次分明、賞心悅目，海報設計同樣也要遵循構圖原理。

一言以蔽之，海報設計的構圖就是要處理好背景、商品和文字之間的位置關係，使其整體和諧，突出主題。構圖方法多種多樣，比較常見的有以下幾種。

1.左右式構圖

左右式構圖是比較經典的構圖方法，一般分為左圖右文或左文右圖兩種形式。這類構圖方法比較實用，不易出錯，給人以平衡、沉穩的感覺，如圖1和圖2所示。

圖1：左右式構圖海報1

圖2：左右式構圖海報2

2.垂直水平式構圖

垂直水平式構圖是對每一個商品進行橫向排列，充分展示其效果，每個商品所佔畫面的比重相同，且秩序感強，如圖所示。

垂直水平式構圖海報

3.上下式構圖

上下式構圖也是比較常見的構圖方法，排版時要注意主次。可以將文字放在畫面上方，將商品圖放在畫面下方，如圖所示。

上下式構圖海報

4.左右三分式構圖

左右三分式構圖是將商品圖放在海報兩側，中間為文字，層次感非常強，如圖1和圖2所示。

圖1：左右三分式構圖海報1

圖2：左右三分式構圖海報2

5.斜切式構圖

斜切式構圖會讓畫面顯得時尚、動感，也會增加畫面的視覺衝擊力，如圖所示。斜切式構圖中，文案一般會向右上方傾斜，呈現上升效果，且傾斜的角度最好不要大於30°，否則會影響閱讀。

斜切式構圖海報

6.平衡式構圖

平衡式構圖會給人以滿足感，畫面結構完整、安排巧妙、對應平衡，如圖所示

平衡式構圖海報

7.居中式構圖

居中式構圖，毋庸置疑就是指商品或主題內容呈現在畫面中間，如圖所示。

居中式構圖海報

配色技巧

配色是剛開始做美工時經常會遇到的一個難題。配色的技巧有很多，常見的有對比色、臨近色和冷暖色等多種配色方式。

最好的配色方式是提取大自然中的色彩，如圖1所示。色彩搭配看似複雜，其實並不神秘，部分色彩搭配分類如圖2所示。

圖1：大自然色彩

色彩搭配分類

背景內容

海報的背景一般分為純色背景、漸變色背景、紋理背景、實拍背景和後期合成背景等。

圖1所示為LA MER海藍之謎的海報，背景中的顏色大部分是純色，產品位置的背景色是漸變色。圖2所示為NIVEA的海報，左半邊為實拍背景，右半邊是後期合成背景。

圖1：LA MER海藍之謎海報

圖2：NIVEA海報

純色背景指的是以某種顏色或某個色係為背景，其主要特點是簡約明快，能更好地突出主題，讓消費者的目光集中在模特或產品上面，如圖所示。

七格格海報

材質紋理背景指的是將自然界真實存在的物質作為背景，如肌理、絲綢、金屬、木材和岩石材質等，其主要特點是真實，有代入感，能對主圖起到烘托作用，如圖所示。

潮牛人海報

商品信息

商品是海報的主要構成部分，但在設計海報的過程中會遇到很多商品問題，如商品擺放的角度、清晰度、畫面佔比、產品融合和商品摳圖等。在設計海報之前，客戶會提供給一些不同角度的攝影圖，這時就要進行全面考慮後續的設計。

一張海報中一般會包括商品、模特和其他裝飾元素等。圖1所示為瑪瑪綈的海報，除了模特身上的外套，還展示了其他3種不同款式和顏色的外套。圖2所示為倩碧的海報。

圖1：瑪瑪綈海報

圖2：倩碧海報

文案內容

文案指的是海報中出現的文字內容，目的是向消費者傳遞商品或促銷引導信息。在一張海報中，往往會包括主文案和輔助文案。

因此，文案的設計也很重要。文案包括主標題、副標題、促銷價格信息和其他介紹內容等。圖1所示為The North Face的海報，上面有主標題「山野之間，感恩遇見」和副標題「全場3折起」，還有促銷信息「滿990減80滿1690減150」和活動時間等說明性文字。圖2所示為Jack Wolfskin的海報，上面只有一個大標題。

圖1：The North Face海報

圖2：Jack Wolfskin海報

關於字體，一般有襯線體、非襯線體、書法體和圓體等。例如，宋體字屬於襯線體，它的特點是清秀、優美和穩健等，多用於女性產品和文化藝術等領域；黑體字屬於非襯線體，它的特點是方正、粗獷、樸素和簡潔，形狀醒目。

在海報設計中，為了營造促銷的氛圍，往往會選擇黑體字作為主標題，如圖1所示。書法體的特點是挺拔、厚重、文化韻味濃厚，表現力強，如圖2所示。

圖1：駱駝戶外海報

圖2：探路者海報

裝飾點綴

為了營造畫面氛圍，經常會用一些點綴元素進行裝飾。這些點綴元素包括不規則的形狀、光效和卡通圖案等。如圖中有白色的圓形、黃色的透明圓形和斜線，這些元素對畫面都起到了裝飾作用。

初語海報

一張海報從開始設計到定稿，一般要經歷以下7個步驟。

步驟1：確定海報活動主題。

步驟2：提煉主題賣點信息。

步驟3：確定設計方案。

步驟4：畫出草圖。

步驟5：在Photoshop軟體中設計初稿。

步驟6：與運營人員交流找出問題。

步驟7：改稿並進行最終確定。

接下來，數藝君將以一個實際案例，為大家講解全屏海報的設計過程，一起來看看吧。

女裝海報的設計

本案例要講解女裝全屏促銷海報的設計，需要對產品背景、文字排版、圖案裝飾等進行製作。海報最終效果如圖所示。

女裝海報效果

案例素材：

https://pan.baidu.com/s/1RSfm0kFci-8TEmwmpGqOjQ

提取碼：4uc3

視頻教程：

01新建文件並命名為「女裝類海報設計製作」，然後設置「寬度」為1920像素、「高度」為600像素、「解析度」為72像素/英寸，如圖所示。

02將「案例素材」文件夾中的「女裝.jpg」素材導入，並調整其大小，然後單擊選項欄上的「提交變換」按鈕，完成素材的導入，如圖所示。

導入「女裝」素材

03使用工具箱中的「快速選擇工具」 選擇模特的輪廓，如果在選擇的過程中多選或少選了，可以配合選項欄上的「加選」 和「減選」 命令進行調整，然後複製一份選擇好的模特輪廓，如圖1和圖2所示。

圖1：選擇模特

圖2：複製一個圖層

04使用工具箱中的「橫排文字工具」 創建「初夏」二字，將顏色設置為白色，然後將創建的文字層移動到複製的模特圖層後面，這樣文字就位於模特的後方，如圖1和圖2所示。

創建文字

將文字移動到模特圖層後面

05選擇工具箱中的「矩形工具」，然後在選項欄上設置類型為「形狀」、描邊為白色、大小為8像素，並創建一個矩形，接著給創建的矩形添加一個圖層蒙版，按住Ctrl鍵並單擊滑鼠左鍵，將複製的模特圖層載入選區，再選擇「畫筆工具」。

將前景色設置為黑色，把模特頭部的位置顯示出來，最後將畫筆的形狀改成橢圓形，將左右兩邊的位置也製作出來，如圖1~圖4所示。

圖1：創建矩形

圖2：顯示頭部效果

圖3：將畫筆的形狀改成橢圓形

圖4：最終效果

06使用「畫筆工具」 創建一個黑色的畫筆效果，然後使用組合快捷鍵Ctrl T結合「自由變換」命令將其調整到與矩形差不多的大小，再使用「矩形選框工具」把上部分的內容選出來，最後使用Delete鍵把多選的內容刪掉，如圖1~圖3所示。至此，矩形的陰影就製作好了。

圖1：創建並調整畫筆

圖2：用矩形選框選擇內容

圖3：創建的陰影效果

07使用「橫排文字工具」 創建「學生裝」3個字，然後創建英文NEWSAOPS，並調整文字的間距和位置，然後給文字添加圖層蒙版，載入模特選區，為文字製作遮擋效果，這樣文字和模特疊加的位置就被隱藏掉了，如圖1~圖3所示。

圖1：創建文字

圖2：創建英文

圖3;處理後的效果

08新建一個空白圖層，然後使用「單行選框工具」 在兩行文字中間創建一個選區，並設置前景色為白色，接著使用「油漆桶工具」 為選框填充顏色，再選擇「矩形選框工具」 ，把兩邊多餘的線和模特身上疊加的線都刪除掉，最後把這條線的兩端製作成若隱若現的效果，如圖1~圖5所示。

圖1：創建單行選框

圖2：為選框填充顏色

圖3:用矩形選框工具刪除多餘內容

圖4：刪除疊加位置的線條

圖5：處理線條後的效果

09使用「橫排文字工具」 把剩下的文案內容「店鋪全場五折起」「活動時間8月20日—8月30日」創建出來，然後把名字「周小鴨」創建出來，製作成直排文字的效果，如圖所示。

文字的排版效果

10選擇工具箱中的「直線工具」 ，在白色矩形上創建一條傾斜的線，用同樣的方法，把其他位置的線也創建出來，如圖1和圖2所示。

圖1：創建傾斜的線

圖2：創建其他線

11選擇工具箱中的「直線工具」 ，然後設置填充為白色、大小為1點，並創建一條長斜線，接著複製出多條斜線，將這些斜線的圖層合併成一個圖層。

再使用工具箱中的「橢圓選框工具」 在斜線中間創建一個圓，最後將這個圓以外的斜線刪除，就可以創建出一個新的創意圖形了，如圖1~圖4所示。

圖1：創建一條斜線

圖2：創建多條斜線

圖3：創建圓形

圖1：創建創意圖形

12將創建的圓形圖案改成其他顏色，然後複製出多個圖形，並放到不同的位置，這樣就形成了裝飾點綴效果，再創建一些矩形、圓形等形狀，如圖5~圖7所示。

圖1：填充紅色

圖2：創建多個圖形

圖3:最終效果

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！