如需轉載請點此查看轉載須知。

之前我們給大家推送過一期《一大波品牌電商Gif海報素材來襲！設計師們請收下》。所以本期就給大家講一下，如何來製作Gif海報。

01 | SALE!

粉色和綠色的相互切換，給人以視覺衝擊

海報製作分析

首先我們分析一下這個海報，它主要有兩個配色，粉色和淺綠色。在背景變化的時候，海報上的字和線框的顏色也隨之發生了變化。

另外，英文字體結合了背景的實體葉子，也讓海報整體生機許多。圖中的芭蕉葉是作爲裝飾性的最常用到的葉子，英文搜索是 banana leaf。

下面我們就來看看製作過程吧。

畫布大小 / 900*900px

分辨率 / 72px

粉色值 / #edc1b6

首先創建一個畫布，並創建一個背景圖層，選取色值 #edc1b6，然後使用油漆桶填充。

接着，我們將芭蕉葉素材拖入到畫板上。可以先將芭蕉葉圖層轉化爲“智能對象”（右擊圖層選擇設置），這樣我們無論怎樣縮放它，都不會影響它原本的畫質。

然後將葉子進行水平旋轉（選擇芭蕉葉圖層，然後CMD+T，再右擊調出設置），拖到右下角，這樣就有了對稱的兩個芭蕉葉。

字體 / Arial Black

大小 / 94px

顏色 / #d7a28a

再新建一個圖層，創建一個白色矩形的底，輸入宣傳字體後，字體顏色選擇比背景較深一點的顏色，並繪製一個矩形線框，配色與字體同樣。

現在，我們就準備好了一個基本的靜態海報了。

背景值 / #d4ecdc

字體色值 / #60a977

接着，隱藏掉粉色相關的圖層，再用同樣的方法再繪製淺綠色的底和字體。

下面我們需要製作Gif動畫了。選中頂部菜單 - 窗口 - 時間軸，調出時間軸設置，並點擊創建逐幀動畫。

點開時間軸裏第一幀下面的三角箭頭，來設置時間。這裏我們選擇 0.5。這代表這張圖片將顯示的時間爲 0.5s。

選擇垃圾桶前面的圖標，我們將得到了複製的第一楨，然後再在第二幀上進行修改。

注意是在第二幀被選中的情況下，我們在右側的圖層裏，隱藏粉色相關的圖層，顯示淺綠色相關的圖層。這樣兩幀海報就準備好了。

記得檢查一下，下面的播放模式我們要選擇“永遠”，這樣兩楨海報纔可以循環播放。

這樣，一個簡單又好看的海報就做完了！

02 | WHAT'S NEW

利用圖層的交疊，做出霓虹燈變幻的效果

海報製作分析

這款海報裏的元素都非常簡單，但是效果也很好，利用字體圖層的交疊，做出了一種霓虹燈變幻的感覺，Easy & Strong。

字體一 / Reklame Medium

字體二 / Formata Outline

首先我們先輸入好字體，what's 是用了一款接近於手寫的字體，NEW 則是用了一種鏤空的框線字體。

在框線字體裏，用圓形工具繪製出延着框線的小點點作爲裝飾。

接着，我們複製一下這個框線的NEW字體，並把它轉爲圖片圖層，這樣我們就可以用魔法棒選中中間鏤空的地方了。

然後，我們再新建一個空白的圖層，命名爲Shadow，然後選取圖中的顏色 #51fad3，填充。

刪除剛纔的字體框線圖層，這下就只留下了Shadow的圖層。

這時我們再調出時間軸的設置，第一幀裏，我們先把Shadow色彩圖層隱藏。

然後到第二楨，再讓它顯示出來。但是我們移動一下Shadow圖層，讓它與字體圖層錯位開來。

不要忘記檢查每楨是不是設置的0.5s，以及是否爲循環播放。

好了，第二個海報就這樣做好了！

03 | NEW COLLECTION

利用陰影，增加海報的立體感

海報製作分析

這款海報的設計其實也非常簡單，主要是利用了陰影造成了視覺差，讓海報變得更具立體感。

我們就來看看它的製作過程吧。

畫布大小 / 900*900px

背景色 / #fde2ff

線框色 / #4157ff

我們先創建一個畫布，選擇 #fde2ff 進行填充。用矩形工具繪製如圖形狀，線框顏色設爲 #4157ff，裏面的填充色選爲白色。

字體 / ITC Avant Garde Gothic

字體顏色 / #4157ff

輸入宣傳字體，並選擇和線框一樣的藍色。

在線框的空白處加入一些小元素，如圖所示。

我們複製一下框線的圖層，將原本填充的白色也選爲藍色。

還是打開時間軸工具，第一楨我們隱藏陰影的圖層，第二楨我們顯示它，並且將整個圖層的位置稍微向上右移一些。

最後，動感立體的效果就出來了！

西瓜設計研究所

互聯網創業 | UI設計 | 開發資源 | 教程

未經允許請勿轉載，煩請私信作者獲取授權

© uirush.net