GIF能夠瞬間抓住情緒或者傳達信息。尚略上海設計公司來分享一些如何制作你自己的GIF小技巧。
我們生活在越來越多的溝通發(fā)生在線上的世界，GIF也越來越流行。它們占據(jù)了從流行文化到廣告活動。對下一代設計師和開發(fā)者來說，知道如何處理動圖并對設計GIF的基礎有良好的理解是必要的。
一個好的GIF應該是頑皮的，充滿活力的，或者它也很慢很流暢，只要它表達出動圖背后的感覺。關鍵是理解組成一個奪目的GIF的要素，創(chuàng)造出適合信息情緒的語言。但是，這個過程中有一些規(guī)則和工具是需要學習的。這里，知名設計公司和設計工作室的創(chuàng)意人士以及一些著名的自由業(yè)者分享了掌握GIF藝術的技巧。
社交
隨著社交媒體對GIF越來越廣泛的使用（最近調(diào)查顯示，青少年如今每周的在線時間超過27小時），難怪在廣告業(yè)GIF的使用也急速增加。
50 個矢量藝術教程
“如果使用正確的話，GIF在社交語境下的力量是非常強大的”Tom Grant - 來自Bristol的Fiasco Design的設計師說道。他把GIF看作是尋求關注的終極裝置，用“矚目的，迷人的和信息量大的方式”給平面的，靜止的信息帶來生命。
這些充滿活力與能量的GIF的靈感來源是里約奧運會。Fiasco使用了活力的色彩加上快速的瞬間結構速度，并用在不同尺寸下都能清晰辨認的字體做實驗。
對設計師來說，為社交平臺制作有效的GIF有一些股則?！爸饕募夹g挑戰(zhàn)是把它們的文件大小限制在每個社交平臺的可接受范圍內(nèi)?！?Partizan的全球生產(chǎn)總監(jiān)的James Curran說?！皩ξ⒉┛蛠碚f尤其如此，因為它的限制是2MB，所以我有時候需要發(fā)揮縮短循環(huán)的創(chuàng)意來把文件減小。”
這里是設計GIF時需要額外注意的規(guī)則：首先，堅持有限的配色。避免漸變色也是必要的，因為那樣做的話要么是糟糕的陰影要么是巨大的文件大小。也不要半透明像素，因為透明也不可靠，記住要避免這些不安全因素。
James Curran – aka SlimJim工作室 - 設計了這些好玩的GIF讓他紅透半邊天。
展示
盡管不同類型的網(wǎng)站用不同的方式使用GIF，大多數(shù)設計師同意最好在一個頁面中展示大量的GIF。Curran 推薦使用翻轉來避免下拉，保持動畫用本身的速度來播放。
也要考慮到GIF是在哪種類型的設備上被看到。Curran 的技巧是設計時考慮到小屏幕：“保持簡約和大膽，這樣在任何設備上都可以完美展示了?！?/p>
Russell Etheridge是Animade的創(chuàng)意團隊的一員，喜歡用方形設計。“我們許多GIF都是用方形設計的，如果需要的話會裁剪。同樣，你一般會在手機上瀏覽社交網(wǎng)站，所以最好有一個近似方形的設計，因為細窄的圖像會看起來小一些?！彼阉腛lympops Etheridge動畫都是用4:3的比例，這也可以裁剪成方形或者標準的16:9視頻。
循環(huán)
巴黎設計師Valentin Adam，就職于Playground Paris。他說與其思考特定的GIF，循環(huán)的概念越來越受歡迎。“做一個兩秒的動畫來在循環(huán)中表現(xiàn)無限很有趣，而且在不同的循環(huán)中看起來是不一樣的?！?/p>
Curran同意這個觀點，并建議把GIF當做不間斷的，而不是有著明確開始和結束點的東西?！霸囍谝粋€循環(huán)范圍內(nèi)講一個故事?！彼ㄗh說“我認為這會讓人們花費更長時間觀看GIF。”
如果動畫在長度上是短的，在停止動畫之前把循環(huán)限制在三次以內(nèi)，Lewis建議。但是設計在社交媒體平臺上展示的GIF如在推特上展示，你不必太擔心這個問題，因為內(nèi)置的功能在他們出現(xiàn)在畫面中時只播放GIF。
最后，把循環(huán)處理地漂亮而連續(xù)是必要的 - 這沒有特別的陷阱要避免。Etheridge 指出“動畫的最后一個框架和開始的框架一模一樣導致小問題，那就是兩次看到同樣的框架。確保最后去掉了它?！?/p>
Valentin Adam通過設計了一個每月一天一個GIF來建立了他“愚蠢而又瘋狂的”作品集。
工具準備
對大多數(shù)設計師來說，在制作自己的GIF時大師般的PS是關鍵。Curran建議使用YouTube作為線上教程來學習軟件基本技能“你一旦理解了技巧，你就知道了如何適應想要創(chuàng)造的風格原則?！?/p>
Grant建議試試CodePen“它提供大量靈感來源，也可以學習并創(chuàng)意性地使用代碼，無論你是新手還是老手。
對更多復雜GIF來說，許多設計師會選擇After Effects這個工具?！八梢愿玫每刂苿幼骱蜁r間，另外還有額外的工具來設計強大的動畫。”來自Fiasco Design的設計師和前端開發(fā)者Nick Lewis說。
如果你想要提高After Effects 技能，試試今年早些時候Curran發(fā)布的GIF制作課程。
通過GIF直接輸出你的設計是可能的，但是Lewis建議首先輸出一個視頻：“似乎用那種方式很容易壓縮并減少文件大小?！?/p>
保持簡單
有著多種選擇的時候，很容易讓人感覺疲勞?！耙驗橛性S多可變因素需要考慮，也有許多測試和技術知識需要掌握。設計一個循環(huán)GIF可能需要花費平常插畫的兩倍時間。”墨爾本插畫師Ellen Porteus說。
她對初學者的建議是讓事情變得簡單“用幾個元素開始，知道事情是如何進行，慢慢建立更多的復雜動畫。我開始于設計很多跳動的球?！?/p>
Adam在擴展他的GIF目錄的時候掌握了保持事情簡單的藝術?！拔夷X海中有許多愚蠢的瘋狂的東西來做出大量的復雜的動畫，為了實現(xiàn)它們我必須每天發(fā)布一個GIF - 部分原因是為了避免過度思考?！彼忉屨f。
通過使用一系列手段他成功地把自己平均制作時間降低到了一個小時左右。在這里看看他一個月的挑戰(zhàn)：www.instagram.com/playgroundparis.
Quantcast的品牌重塑的時候請了Ellen
Porteus 。這個循環(huán)GIF放在公司的新Logo的數(shù)字中。
視頻GIF
設計GIF不需要專業(yè)領域的插畫師 - 你可以把任何視頻內(nèi)容導入PS中轉化成GIF。對那些不會使用PS的人來說，Grant建議使用Giphy，它提供免費，簡單的方式來制作GIF.
“我不怎么用PS來處理GIF，因為視頻分層更加直觀?！盓theridge說“如果我是動畫平面設計師的話，我會在After Effects處理動畫，然后導出到PS，在轉化之前變成渲染的視頻文件?！钡撬赋鋈绻銖恼嫒艘曨l腳本中制作GIF，達到連續(xù)的循環(huán)會更加困難，因為需要均勻的顏色。
完全接近
為了確保內(nèi)容能夠被更大范圍內(nèi)的用戶接觸到，開發(fā)者需要注意可得性和網(wǎng)站標準?！熬W(wǎng)站動畫應該持續(xù)地提高體驗?！盙rant說。他建議使用描述性的動畫和文字中的動畫GIF這樣屏幕閱讀者能夠更加容易理解，避免太多花哨的東西，這樣對光敏性癲癇也能接受。
Animade的聯(lián)合創(chuàng)始人James Chambers 同意可得性應該在最開始的時候就建立起來“類似于在圖片上提供標簽的原則 - 動畫GIF或者其它形式 - 應該是基線?！?/p>
他也指出對矢量動畫來說，使用內(nèi)聯(lián)可伸縮向量圖形能夠大幅度地提高可得性?？缮炜s向量圖形是XML-基礎的，支持交互和動畫的二維的矢量圖形。站在可得性的立場上，內(nèi)聯(lián)可伸縮向量圖形與空白的標簽比起來可以包含更多信息，因此能被瀏覽者更好地解讀。
對有大量動畫的網(wǎng)站來說，Chambers 建議結合內(nèi)聯(lián)可伸縮向量圖形和ARIA標簽。創(chuàng)造性地和平常的HTML的屏幕閱讀器結合起來，增加ARIA能夠提供屏幕閱讀者更多內(nèi)容與更好的內(nèi)容交互體驗。而且ARIA對元素在瀏覽器上的展示和表現(xiàn)沒有影響 - 這意味著它不止能當做額外的描述層。這是網(wǎng)頁開發(fā)者的福音。
知識和直覺
為什么GIF變得這么流行？對許多設計師來說，他們提供了創(chuàng)意表達的途徑?！拔艺J為部分原因是GIF的核心用戶是年輕人，客戶對更加非主流的內(nèi)容更感興趣?！盋urran說，“無論是什么原因，品牌應該讓設計師在處理GIF時比處理傳統(tǒng)內(nèi)容時有更大的創(chuàng)作自由。因為GIF通常是有著小預算的小項目，對品牌來說使用這種形式來嘗試新事物的風險更小?！?/p>
Porteus同意他的觀點“整個都是關于最大化利用數(shù)字媒體的靈活。傳統(tǒng)的插畫很好，但是GIF非常具有吸引力，有趣，聰明。對我來說，GIF最具吸引力的是它形成了無縫循環(huán)，并帶有移動和有趣的性質?！?/p>
至于哪些是組成GIF的要素，這跟直覺也有關系?！斑@是關于對基本動畫原則的理解，節(jié)奏感，想出點子的能力”Curran總結說“在做了十年動畫后我自己也在學習這些東西?！?/span>
本文網(wǎng)址：http://www.zpcysw.cn/news_info.asp?id=2510，尚略廣告，上海品牌設計公司翻譯發(fā)布，轉載請注明出處。
尚略上海品牌策劃設計公司快速導航：