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

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

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

社交

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

50 個(gè)矢量藝術(shù)教程

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

這些充滿活力與能量的GIF的靈感來源是里約奧運(yùn)會。Fiasco使用了活力的色彩加上快速的瞬間結(jié)構(gòu)速度，并用在不同尺寸下都能清晰辨認(rèn)的字體做實(shí)驗(yàn)。

對設(shè)計(jì)師來說，為社交平臺制作有效的GIF有一些股則。“主要的技術(shù)挑戰(zhàn)是把它們的文件大小限制在每個(gè)社交平臺的可接受范圍內(nèi)。” Partizan的全球生產(chǎn)總監(jiān)的James Curran說。“對微博客來說尤其如此，因?yàn)樗南拗剖?MB，所以我有時(shí)候需要發(fā)揮縮短循環(huán)的創(chuàng)意來把文件減小。”

這里是設(shè)計(jì)GIF時(shí)需要額外注意的規(guī)則：首先，堅(jiān)持有限的配色。避免漸變色也是必要的，因?yàn)槟菢幼龅脑捯词窃愀獾年幱耙词蔷薮蟮奈募笮　Ｒ膊灰胪该飨袼兀驗(yàn)橥该饕膊豢煽浚涀∫苊膺@些不安全因素。

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

展示

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

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

Russell Etheridge是Animade的創(chuàng)意團(tuán)隊(duì)的一員，喜歡用方形設(shè)計(jì)。“我們許多GIF都是用方形設(shè)計(jì)的，如果需要的話會裁剪。同樣，你一般會在手機(jī)上瀏覽社交網(wǎng)站，所以最好有一個(gè)近似方形的設(shè)計(jì)，因?yàn)榧?xì)窄的圖像會看起來小一些。”他把他的Olympops Etheridge動畫都是用4:3的比例，這也可以裁剪成方形或者標(biāo)準(zhǔn)的16:9視頻。

循環(huán)

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

Curran同意這個(gè)觀點(diǎn)，并建議把GIF當(dāng)做不間斷的，而不是有著明確開始和結(jié)束點(diǎn)的東西。“試著在一個(gè)循環(huán)范圍內(nèi)講一個(gè)故事。”他建議說“我認(rèn)為這會讓人們花費(fèi)更長時(shí)間觀看GIF。”

如果動畫在長度上是短的，在停止動畫之前把循環(huán)限制在三次以內(nèi)，Lewis建議。但是設(shè)計(jì)在社交媒體平臺上展示的GIF如在推特上展示，你不必太擔(dān)心這個(gè)問題，因?yàn)閮?nèi)置的功能在他們出現(xiàn)在畫面中時(shí)只播放GIF。

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

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

工具準(zhǔn)備

對大多數(shù)設(shè)計(jì)師來說，在制作自己的GIF時(shí)大師般的PS是關(guān)鍵。Curran建議使用YouTube作為線上教程來學(xué)習(xí)軟件基本技能“你一旦理解了技巧，你就知道了如何適應(yīng)想要創(chuàng)造的風(fēng)格原則。”

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

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

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

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

保持簡單

有著多種選擇的時(shí)候，很容易讓人感覺疲勞。“因?yàn)橛性S多可變因素需要考慮，也有許多測試和技術(shù)知識需要掌握。設(shè)計(jì)一個(gè)循環(huán)GIF可能需要花費(fèi)平常插畫的兩倍時(shí)間。”墨爾本插畫師Ellen Porteus說。

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

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

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

Quantcast的品牌重塑的時(shí)候請了Ellen Porteus 。這個(gè)循環(huán)GIF放在公司的新Logo的數(shù)字中。

視頻GIF

設(shè)計(jì)GIF不需要專業(yè)領(lǐng)域的插畫師 - 你可以把任何視頻內(nèi)容導(dǎo)入PS中轉(zhuǎn)化成GIF。對那些不會使用PS的人來說，Grant建議使用Giphy，它提供免費(fèi)，簡單的方式來制作GIF.

“我不怎么用PS來處理GIF，因?yàn)橐曨l分層更加直觀。”Etheridge說“如果我是動畫平面設(shè)計(jì)師的話，我會在After Effects處理動畫，然后導(dǎo)出到PS，在轉(zhuǎn)化之前變成渲染的視頻文件。”但是他指出如果你從真人視頻腳本中制作GIF，達(dá)到連續(xù)的循環(huán)會更加困難，因?yàn)樾枰鶆虻念伾?/p>

完全接近

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

Animade的聯(lián)合創(chuàng)始人James Chambers 同意可得性應(yīng)該在最開始的時(shí)候就建立起來“類似于在圖片上提供標(biāo)簽的原則 - 動畫GIF或者其它形式 - 應(yīng)該是基線。”

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

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

知識和直覺

為什么GIF變得這么流行？對許多設(shè)計(jì)師來說，他們提供了創(chuàng)意表達(dá)的途徑。“我認(rèn)為部分原因是GIF的核心用戶是年輕人，客戶對更加非主流的內(nèi)容更感興趣。”Curran說，“無論是什么原因，品牌應(yīng)該讓設(shè)計(jì)師在處理GIF時(shí)比處理傳統(tǒng)內(nèi)容時(shí)有更大的創(chuàng)作自由。因?yàn)镚IF通常是有著小預(yù)算的小項(xiàng)目，對品牌來說使用這種形式來嘗試新事物的風(fēng)險(xiǎn)更小。”

Porteus同意他的觀點(diǎn)“整個(gè)都是關(guān)于最大化利用數(shù)字媒體的靈活。傳統(tǒng)的插畫很好，但是GIF非常具有吸引力，有趣，聰明。對我來說，GIF最具吸引力的是它形成了無縫循環(huán)，并帶有移動和有趣的性質(zhì)。”

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

本文網(wǎng)址：http://m.jsxhyl.com.cn/news_info.asp?id=2510，尚略廣告，上海品牌設(shè)計(jì)公司翻譯發(fā)布，轉(zhuǎn)載請注明出處。

尚略上海品牌策劃設(shè)計(jì)公司快速導(dǎo)航：