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