這是一個什么都在變快的時代。在互聯(lián)網(wǎng)上，一切都開始動起來，短視頻開始流行，而 gif圖早就已經(jīng)像病毒一樣占據(jù)了網(wǎng)絡(luò)的每個角落。用戶用 gif圖來傳達(dá)信息，來表達(dá)情緒，甚至記錄生活。怎么能不愛 gif圖呢？

但是就和所有的好東西一樣，優(yōu)質(zhì)的 gif圖從來都不是輕易得來。無論是制造動態(tài)的 ui界面，還是有趣的表情，又或者是好玩兒的動態(tài)小插畫，想要確保它足夠吸引用戶，讓人感覺對味，還足夠小，這并不是一件簡單的事情。不過，不用擔(dān)心，設(shè)計一個稱職的 gif圖是有技巧的，接下來，分享的 10 個技巧，能讓你的 gif圖設(shè)計得更優(yōu)秀。

1、刪除gif圖中所有的額外幀

當(dāng)你在設(shè)計 gif圖的時候，無論你使用哪種類型的動畫，gif圖中，總會有某些時刻是狀態(tài)停止的，創(chuàng)建好 gif圖之后，應(yīng)該通過調(diào)整，刪除掉額外的、停止不同的幀。

刪除額外的幀，僅保留其中一幀，并根據(jù)動畫的狀態(tài)和節(jié)奏來調(diào)整該幀的時長，可以縮減 gif圖的大小和播放時候的壓力。這樣的調(diào)整不僅能夠讓 gif圖整體質(zhì)量保持不變，而且同時可以減少不必要的空間占用。

2、不要提供多余無效的內(nèi)容

雖然設(shè)計師會在自己所熱愛的項目中投入更多，但是在做 gif動態(tài)圖的時候，在傳達(dá)信息的同時，要盡量簡化其中的內(nèi)容，一般而言，更少的信息能夠讓你在制作動畫的時候獲得更多的自由和可能性！一定要克制住加入大量內(nèi)容的沖動。

用戶在觀看你的 gif圖的時候，很容易被過多的內(nèi)容所淹沒，尤其是當(dāng)你想要借助 gif圖來傳達(dá)特定的情緒和感受的時候，多余的色彩和內(nèi)容很容易弱化它們。不要過度設(shè)計。圍繞著核心的元素和調(diào)色板來設(shè)計，讓它們足夠獨特和誘人。

3、在gif圖中建立一致的視覺

gif圖是世界上最短的電影。你可以借助它來進(jìn)行品牌化的傳達(dá)。你可以在設(shè)計的時候使用品牌的配色來對它進(jìn)行設(shè)計，將品牌的形象、logo和其他元素在 gif圖中呈現(xiàn)，讓品牌、企業(yè)和產(chǎn)品以更加富有活力的方式呈現(xiàn)出來。而用戶則能夠借助這些元素，來和品牌本身產(chǎn)生關(guān)聯(lián)。

在特定的情形和需求之下，gif圖能夠幫助用戶了解產(chǎn)品的功能和其他的信息，而品牌化的配色則能夠強化這種關(guān)聯(lián)。比如 ge 就在 gif圖當(dāng)中提供了非常值得期待的氛圍，在官方的 tumblr 當(dāng)中分享這些有趣的 gif 圖，展示 ge 在科學(xué)和機械設(shè)計上的造詣。借助 #badassmachines 這樣的標(biāo)簽，讓他們在社交媒體上進(jìn)行更有效的傳播。

4、在上傳gif圖的時候，保持良好的可訪問性

作為設(shè)計師，你應(yīng)該熟悉用戶群體，并且將 gif圖中可能會分散精力的視覺內(nèi)容給去掉。

最典型的，如果你所面對的用戶群體當(dāng)中有視力障礙并且使用屏幕閱讀功能或者癲癇患者，那么盡量兼顧到他們的需求，文字內(nèi)容盡量放在 gif 之外，單獨顯示，并且避免頻繁的閃爍效果。不斷移動的 gif圖會很大程度上轉(zhuǎn)移用戶的注意力，在一屏當(dāng)中使用多個 gif圖的時候，尤其要注意這一點。如果有大量文本內(nèi)容的時候，gif圖中的色彩和特效盡量控制數(shù)量，因為它們可能會過多抓取用戶注意力。

避免 gif圖自動播放，這樣讓用戶感到可控，并且可以節(jié)省流量。

5、借助故事板來梳理gif圖的內(nèi)容

很多時候，gif圖本身的簡單形態(tài)使得它看起來不復(fù)雜，但是這其實使得很多設(shè)計師因此而出錯。通常，gif圖本身迷人之處就是在于它的故事性，即使再短，它當(dāng)中也包含著敘事，故事性，甚至復(fù)雜的轉(zhuǎn)折和多變的轉(zhuǎn)場。

基本的故事變化和元素，這些是 gif圖制作的基礎(chǔ)。在設(shè)計動畫的時候，我們很容易忘記這些東西，借助故事板，可以幫你更好地梳理故事的走向，鏡頭的變化，情節(jié)的走向，值得注意的關(guān)鍵情節(jié)和轉(zhuǎn)折。

尤其是當(dāng)你不是一個人來制作 gif圖的時候，整個團隊可以借助故事板，將進(jìn)度統(tǒng)一起來，極大的改善溝通和統(tǒng)一的問題，加快創(chuàng)作過程。

6、如果你使用ps來制作gif圖，請務(wù)必保持整潔簡練

在設(shè)計 gif圖的時候，很多設(shè)計師會選擇使用 ps 來制作。一方面是足夠習(xí)慣，足夠順手，但是另外一方面，ps 本身的圖層管理和制作機制還是很容易導(dǎo)致混亂的。

ps 中元素和圖層管理需要兼顧的太多，以至于在制作 gif圖的時候，稍微增刪或者移動一些內(nèi)容，就很容易輸出一個不理想、不可控的 gif圖。同時，如果沒有正確地標(biāo)注圖層，之后又進(jìn)行了相對復(fù)雜的操作之后，很容易導(dǎo)致多米諾骨牌一樣的錯誤。

更令人頭疼的是，修改一個地方之后，后續(xù)很多圖層都需要進(jìn)行調(diào)整和修改，最終會帶來大量的重復(fù)性的工作。

所以，在 ps 中制作 gif圖，要盡量保持整潔，條理清晰。

7、增加創(chuàng)意元素，并保持循環(huán)

gif圖在絕大多數(shù)情況下會自動循環(huán)播放，而用戶很多時候也樂于長時間的循環(huán)觀看，但是想要讓它平滑自然地循環(huán)并非易事。

如果你想讓 gif圖中保持循環(huán)，那么我建議你盡量從一個簡單的設(shè)計元素入手，比如幾何形狀之類的東西。這樣可以更容易進(jìn)行首尾位置的匹配。

在 gif圖當(dāng)中創(chuàng)建循環(huán)很大程度是希望留住用戶，因為任何不協(xié)調(diào)和錯位都會讓人注意到，不夠好不夠平滑，就會讓用戶感到跳出感，從而移開注意力。而這種要求，也意味著設(shè)計師要注意每一幀的設(shè)計。

當(dāng)然，努力的最終結(jié)果是值得的！

8、運動狀態(tài)要保持模糊效果

gif圖當(dāng)中的模糊效果，其實和老式相機中的運動抓拍效果是一致的，很多處于中間態(tài)的運動，其實是不那么清晰的。

而這一點和我們的視覺是保持一致的。如今相機的成像質(zhì)量越來越高，但是我們的眼睛并沒有隨之快速的進(jìn)化。

在 gif圖當(dāng)中，幀數(shù)通常不會太高，如果圖片的細(xì)節(jié)始終保持清晰則容易呈現(xiàn)出跳幀，運動狀態(tài)的物體適當(dāng)保持模糊效果，則更接近我們?nèi)粘Ｓ^察的細(xì)節(jié)，從而讓 gif圖帶來接近視頻拍攝的效果，用戶也會因此感到真實和精彩。

9、gif圖要盡可能小

如你所知，社交媒體、博客、網(wǎng)站、電子郵件，甚至app 都是 gif 使用大戶，gif圖片已經(jīng)深入到我們生活的方方面面。

但是不同地方的圖片規(guī)格不同，使用場景也不一樣，因此，gif 需要足夠小才能兼容不同的需求。

下面是一些幫你縮小 gif圖尺寸的方法：盡量讓 gif圖的幀數(shù)保持在 150 幀以內(nèi)，否則在很多地方都會被限制，因為太大了。導(dǎo)出 gif圖的時候，請將有損壓縮設(shè)置在5~ 10 之間，這樣將更大程度的壓縮最終的圖片尺寸。

你可以多加嘗試，盡量尋找質(zhì)量和尺寸上的平衡點。

使用盡量少的顏色。這不僅僅是出于設(shè)計的考慮，更少的色彩能夠很大程度上降低文件的大小，意味著 gif圖可以更小，或者持續(xù)時間更長，加載更快。盡量避免漸變。透明度是開啟還是關(guān)閉會直接影響到 gif圖的大小，如果想要確保文件不那么大，盡量避免吧。

10、針對移動端設(shè)備進(jìn)行設(shè)計

這個注意事項其實你也應(yīng)該早有預(yù)料。現(xiàn)如今的用戶絕大多數(shù)的時間都消耗在移動端的小屏幕上了。

在設(shè)計的時候，注意使用更小的視覺元素，避免智能手機用戶信息過載。另一方面，如果某些元素需要更加吸引用戶的注意力，可以使用更加大膽的顏色，或者借助動畫效果，都是可以的。

同時，考慮到社交媒體上圖片素材的展現(xiàn)形式，可以盡量把 gif圖設(shè)計成為方形的，這樣可以更好的兼容不同的屏幕和不同的平臺，同時也方便裁切。結(jié)語gif圖在設(shè)計和創(chuàng)作上都非常有趣，但是它也有很多需要注意的問題和相應(yīng)的技巧，幸運的是，它們并沒有超出設(shè)計師的技能范疇。

借助這些原則，相信你能設(shè)計出更加優(yōu)秀的 gif圖。

分享名稱：10個注意事項，讓你制作完美gif
網(wǎng)頁URL：http://jinyejixie.com/news/106836.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站改版、響應(yīng)式網(wǎng)站、微信小程序、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)