GIF能夠瞬間抓住情緒或者傳達信息。尚略上海設計公司來分享一些如何制作你自己的GIF小技巧。

我們生活在越來越多的溝通發生在線上的世界，GIF也越來越流行。它們占據了從流行文化到廣告活動。對下一代設計師和開發者來說，知道如何處理動圖并對設計GIF的基礎有良好的理解是必要的。

一個好的GIF應該是頑皮的，充滿活力的，或者它也很慢很流暢，只要它表達出動圖背后的感覺。關鍵是理解組成一個奪目的GIF的要素，創造出適合信息情緒的語言。但是，這個過程中有一些規則和工具是需要學習的。這里，知名設計公司和設計工作室的創意人士以及一些著名的自由業者分享了掌握GIF藝術的技巧。

社交

隨著社交媒體對GIF越來越廣泛的使用（最近調查顯示，青少年如今每周的在線時間超過27小時），難怪在廣告業GIF的使用也急速增加。

50 個矢量藝術教程

“如果使用正確的話，GIF在社交語境下的力量是非常強大的”Tom Grant - 來自Bristol的Fiasco Design的設計師說道。他把GIF看作是尋求關注的終極裝置，用“矚目的，迷人的和信息量大的方式”給平面的，靜止的信息帶來生命。

這些充滿活力與能量的GIF的靈感來源是里約奧運會。Fiasco使用了活力的色彩加上快速的瞬間結構速度，并用在不同尺寸下都能清晰辨認的字體做實驗。

對設計師來說，為社交平臺制作有效的GIF有一些股則。“主要的技術挑戰是把它們的文件大小限制在每個社交平臺的可接受范圍內。” Partizan的全球生產總監的James Curran說。“對微博客來說尤其如此，因為它的限制是2MB，所以我有時候需要發揮縮短循環的創意來把文件減小。”

這里是設計GIF時需要額外注意的規則：首先，堅持有限的配色。避免漸變色也是必要的，因為那樣做的話要么是糟糕的陰影要么是巨大的文件大小。也不要半透明像素，因為透明也不可靠，記住要避免這些不安全因素。

James Curran – aka SlimJim工作室 - 設計了這些好玩的GIF讓他紅透半邊天。

展示

盡管不同類型的網站用不同的方式使用GIF，大多數設計師同意最好在一個頁面中展示大量的GIF。Curran 推薦使用翻轉來避免下拉，保持動畫用本身的速度來播放。

也要考慮到GIF是在哪種類型的設備上被看到。Curran 的技巧是設計時考慮到小屏幕：“保持簡約和大膽，這樣在任何設備上都可以完美展示了。”

Russell Etheridge是Animade的創意團隊的一員，喜歡用方形設計。“我們許多GIF都是用方形設計的，如果需要的話會裁剪。同樣，你一般會在手機上瀏覽社交網站，所以最好有一個近似方形的設計，因為細窄的圖像會看起來小一些。”他把他的Olympops Etheridge動畫都是用4:3的比例，這也可以裁剪成方形或者標準的16:9視頻。

循環

巴黎設計師Valentin Adam，就職于Playground Paris。他說與其思考特定的GIF，循環的概念越來越受歡迎。“做一個兩秒的動畫來在循環中表現無限很有趣，而且在不同的循環中看起來是不一樣的。”

Curran同意這個觀點，并建議把GIF當做不間斷的，而不是有著明確開始和結束點的東西。“試著在一個循環范圍內講一個故事。”他建議說“我認為這會讓人們花費更長時間觀看GIF。”

如果動畫在長度上是短的，在停止動畫之前把循環限制在三次以內，Lewis建議。但是設計在社交媒體平臺上展示的GIF如在推特上展示，你不必太擔心這個問題，因為內置的功能在他們出現在畫面中時只播放GIF。

最后，把循環處理地漂亮而連續是必要的 - 這沒有特別的陷阱要避免。Etheridge 指出“動畫的最后一個框架和開始的框架一模一樣導致小問題，那就是兩次看到同樣的框架。確保最后去掉了它。”

Valentin Adam通過設計了一個每月一天一個GIF來建立了他“愚蠢而又瘋狂的”作品集。

工具準備

對大多數設計師來說，在制作自己的GIF時大師般的PS是關鍵。Curran建議使用YouTube作為線上教程來學習軟件基本技能“你一旦理解了技巧，你就知道了如何適應想要創造的風格原則。”

Grant建議試試CodePen“它提供大量靈感來源，也可以學習并創意性地使用代碼，無論你是新手還是老手。

對更多復雜GIF來說，許多設計師會選擇After Effects這個工具。“它可以更好得控制動作和時間，另外還有額外的工具來設計強大的動畫。”來自Fiasco Design的設計師和前端開發者Nick Lewis說。

如果你想要提高After Effects 技能，試試今年早些時候Curran發布的GIF制作課程。

通過GIF直接輸出你的設計是可能的，但是Lewis建議首先輸出一個視頻：“似乎用那種方式很容易壓縮并減少文件大小。”

保持簡單

有著多種選擇的時候，很容易讓人感覺疲勞。“因為有許多可變因素需要考慮，也有許多測試和技術知識需要掌握。設計一個循環GIF可能需要花費平常插畫的兩倍時間。”墨爾本插畫師Ellen Porteus說。

她對初學者的建議是讓事情變得簡單“用幾個元素開始，知道事情是如何進行，慢慢建立更多的復雜動畫。我開始于設計很多跳動的球。”

Adam在擴展他的GIF目錄的時候掌握了保持事情簡單的藝術。“我腦海中有許多愚蠢的瘋狂的東西來做出大量的復雜的動畫，為了實現它們我必須每天發布一個GIF - 部分原因是為了避免過度思考。”他解釋說。

通過使用一系列手段他成功地把自己平均制作時間降低到了一個小時左右。在這里看看他一個月的挑戰：www.instagram.com/playgroundparis.

Quantcast的品牌重塑的時候請了Ellen Porteus 。這個循環GIF放在公司的新Logo的數字中。

視頻GIF

設計GIF不需要專業領域的插畫師 - 你可以把任何視頻內容導入PS中轉化成GIF。對那些不會使用PS的人來說，Grant建議使用Giphy，它提供免費，簡單的方式來制作GIF.

“我不怎么用PS來處理GIF，因為視頻分層更加直觀。”Etheridge說“如果我是動畫平面設計師的話，我會在After Effects處理動畫，然后導出到PS，在轉化之前變成渲染的視頻文件。”但是他指出如果你從真人視頻腳本中制作GIF，達到連續的循環會更加困難，因為需要均勻的顏色。

完全接近

為了確保內容能夠被更大范圍內的用戶接觸到，開發者需要注意可得性和網站標準。“網站動畫應該持續地提高體驗。”Grant說。他建議使用描述性的動畫和文字中的動畫GIF這樣屏幕閱讀者能夠更加容易理解，避免太多花哨的東西，這樣對光敏性癲癇也能接受。

Animade的聯合創始人James Chambers 同意可得性應該在最開始的時候就建立起來“類似于在圖片上提供標簽的原則 - 動畫GIF或者其它形式 - 應該是基線。”

他也指出對矢量動畫來說，使用內聯可伸縮向量圖形能夠大幅度地提高可得性。可伸縮向量圖形是XML-基礎的，支持交互和動畫的二維的矢量圖形。站在可得性的立場上，內聯可伸縮向量圖形與空白的標簽比起來可以包含更多信息，因此能被瀏覽者更好地解讀。

對有大量動畫的網站來說，Chambers 建議結合內聯可伸縮向量圖形和ARIA標簽。創造性地和平常的HTML的屏幕閱讀器結合起來，增加ARIA能夠提供屏幕閱讀者更多內容與更好的內容交互體驗。而且ARIA對元素在瀏覽器上的展示和表現沒有影響 - 這意味著它不止能當做額外的描述層。這是網頁開發者的福音。

知識和直覺

為什么GIF變得這么流行？對許多設計師來說，他們提供了創意表達的途徑。“我認為部分原因是GIF的核心用戶是年輕人，客戶對更加非主流的內容更感興趣。”Curran說，“無論是什么原因，品牌應該讓設計師在處理GIF時比處理傳統內容時有更大的創作自由。因為GIF通常是有著小預算的小項目，對品牌來說使用這種形式來嘗試新事物的風險更小。”

Porteus同意他的觀點“整個都是關于最大化利用數字媒體的靈活。傳統的插畫很好，但是GIF非常具有吸引力，有趣，聰明。對我來說，GIF最具吸引力的是它形成了無縫循環，并帶有移動和有趣的性質。”

至于哪些是組成GIF的要素，這跟直覺也有關系。“這是關于對基本動畫原則的理解，節奏感，想出點子的能力”Curran總結說“在做了十年動畫后我自己也在學習這些東西。”

本文網址：http://www.jsxhyl.com.cn/news_info.asp?id=2510，尚略廣告，上海品牌設計公司翻譯發布，轉載請注明出處。

尚略上海品牌策劃設計公司快速導航：