這是一個什么都在變快的時代。在互聯(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è)計(jì)一個稱職的 Gif圖是有技巧的,接下來,分享的10個技巧,能讓你的 Gif圖設(shè)計(jì)得更優(yōu)秀。
1、不要提供多余無效的內(nèi)容
雖然設(shè)計(jì)師會在自己所熱愛的項(xiàng)目中投入更多,但是在做 Gif動態(tài)圖的時候,在傳達(dá)信息的同時,要盡量簡化其中的內(nèi)容,一般而言,更少的信息能夠讓你在制作動畫的時候獲得更多的自由和可能性!
一定要克制住加入大量內(nèi)容的沖動。用戶在觀看你的 Gif圖的時候,很容易被過多的內(nèi)容所淹沒,尤其是當(dāng)你想要借助 Gif圖來傳達(dá)特定的情緒和感受的時候,多余的色彩和內(nèi)容很容易弱化它們。
不要過度設(shè)計(jì)。圍繞著核心的元素和調(diào)色板來設(shè)計(jì),讓它們足夠獨(dú)特和誘人。
2、在Gif圖中建立一致的視覺
Gif圖是世界上最短的電影。你可以借助它來進(jìn)行品牌化的傳達(dá)。
你可以在設(shè)計(jì)的時候使用品牌的配色來對它進(jìn)行設(shè)計(jì),將品牌的形象、LOGO和其他元素在 Gif圖中呈現(xiàn),讓品牌、企業(yè)和產(chǎn)品以更加富有活力的方式呈現(xiàn)出來。
而用戶則能夠借助這些元素,來和品牌本身產(chǎn)生關(guān)聯(lián)。在特定的情形和需求之下,Gif圖能夠幫助用戶了解產(chǎn)品的功能和其他的信息,而品牌化的配色則能夠強(qiáng)化這種關(guān)聯(lián)。
比如 GE 就在 Gif圖當(dāng)中提供了非常值得期待的氛圍,在官方的 Tumblr 當(dāng)中分享這些有趣的 Gif 圖,展示 GE 在科學(xué)和機(jī)械設(shè)計(jì)上的造詣。借助 #badassmachines 這樣的標(biāo)簽,讓他們在社交媒體上進(jìn)行更有效的傳播。
3、刪除Gif圖中所有的額外幀
當(dāng)你在設(shè)計(jì) Gif圖的時候,無論你使用哪種類型的動畫,Gif圖中,總會有某些時刻是狀態(tài)停止的,創(chuàng)建好 Gif圖之后,應(yīng)該通過調(diào)整,刪除掉額外的、停止不同的幀。
刪除額外的幀,僅保留其中一幀,并根據(jù)動畫的狀態(tài)和節(jié)奏來調(diào)整該幀的時長,可以縮減 Gif圖的大小和播放時候的壓力。
這樣的調(diào)整不僅能夠讓 Gif圖整體質(zhì)量保持不變,而且同時可以減少不必要的空間占用。
4、在上傳Gif圖的時候,保持良好的可訪問性
作為設(shè)計(jì)師,你應(yīng)該熟悉用戶群體,并且將 Gif圖中可能會分散精力的視覺內(nèi)容給去掉。
最典型的,如果你所面對的用戶群體當(dāng)中有視力障礙并且使用屏幕閱讀功能或者癲癇患者,那么盡量兼顧到他們的需求,文字內(nèi)容盡量放在 Gif 之外,單獨(dú)顯示,并且避免頻繁的閃爍效果。
不斷移動的 Gif圖會很大程度上轉(zhuǎn)移用戶的注意力,在一屏當(dāng)中使用多個 Gif圖的時候,尤其要注意這一點(diǎn)。如果有大量文本內(nèi)容的時候,Gif圖中的色彩和特效盡量控制數(shù)量,因?yàn)樗鼈兛赡軙^多抓取用戶注意力。
避免 Gif圖自動播放,這樣讓用戶感到可控,并且可以節(jié)省流量。
5、借助故事板來梳理Gif圖的內(nèi)容
很多時候,Gif圖本身的簡單形態(tài)使得它看起來不復(fù)雜,但是這其實(shí)使得很多設(shè)計(jì)師因此而出錯。通常,Gif圖本身迷人之處就是在于它的故事性,即使再短,它當(dāng)中也包含著敘事,故事性,甚至復(fù)雜的轉(zhuǎn)折和多變的轉(zhuǎn)場。
基本的故事變化和元素,這些是 Gif圖制作的基礎(chǔ)。在設(shè)計(jì)動畫的時候,我們很容易忘記這些東西,借助故事板,可以幫你更好地梳理故事的走向,鏡頭的變化,情節(jié)的走向,值得注意的關(guān)鍵情節(jié)和轉(zhuǎn)折。
尤其是當(dāng)你不是一個人來制作 Gif圖的時候,整個團(tuán)隊(duì)可以借助故事板,將進(jìn)度統(tǒng)一起來,極大的改善溝通和統(tǒng)一的問題,加快創(chuàng)作過程。
6、如果你使用PS來制作Gif圖,請務(wù)必保持整潔簡練
在設(shè)計(jì) Gif圖的時候,很多設(shè)計(jì)師會選擇使用 PS 來制作。一方面是足夠習(xí)慣,足夠順手,但是另外一方面,PS 本身的圖層管理和制作機(jī)制還是很容易導(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ì)元素入手,比如幾何形狀之類的東西。這樣可以更容易進(jìn)行首尾位置的匹配。
在 Gif圖當(dāng)中創(chuàng)建循環(huán)很大程度是希望留住用戶,因?yàn)槿魏尾粎f(xié)調(diào)和錯位都會讓人注意到,不夠完美不夠平滑,就會讓用戶感到跳出感,從而移開注意力。而這種要求,也意味著設(shè)計(jì)師要注意每一幀的設(shè)計(jì)。
當(dāng)然,努力的最終結(jié)果是值得的!
8、運(yùn)動狀態(tài)要保持模糊效果
Gif圖當(dāng)中的模糊效果,其實(shí)和老式相機(jī)中的運(yùn)動抓拍效果是一致的,很多處于中間態(tài)的運(yùn)動,其實(shí)是不那么清晰的。而這一點(diǎn)和我們的視覺是保持一致的。如今相機(jī)的成像質(zhì)量越來越高,但是我們的眼睛并沒有隨之快速的進(jìn)化。
在 Gif圖當(dāng)中,幀數(shù)通常不會太高,如果圖片的細(xì)節(jié)始終保持清晰則容易呈現(xiàn)出跳幀,運(yùn)動狀態(tài)的物體適當(dāng)保持模糊效果,則更接近我們?nèi)粘S^察的細(xì)節(jié),從而讓 Gif圖帶來接近視頻拍攝的效果,用戶也會因此感到真實(shí)和精彩。
9、Gif圖要盡可能小
如你所知,社交媒體、博客、網(wǎng)站、電子郵件,甚至APP 都是 Gif 使用大戶,Gif圖片已經(jīng)深入到我們生活的方方面面。但是不同地方的圖片規(guī)格不同,使用場景也不一樣,因此,Gif 需要足夠小才能兼容不同的需求。下面是一些幫你縮小 Gif圖尺寸的方法:
盡量讓 Gif圖的幀數(shù)保持在150幀以內(nèi),否則在很多地方都會被限制,因?yàn)樘罅恕?br />導(dǎo)出 Gif圖的時候,請將有損壓縮設(shè)置在5~10之間,這樣將更大程度的壓縮最終的圖片尺寸。你可以多加嘗試,盡量尋找質(zhì)量和尺寸上的平衡點(diǎn)。
使用盡量少的顏色。這不僅僅是出于設(shè)計(jì)的考慮,更少的色彩能夠很大程度上降低文件的大小,意味著 Gif圖可以更小,或者持續(xù)時間更長,加載更快。
盡量避免漸變。透明度是開啟還是關(guān)閉會直接影響到 Gif圖的大小,如果想要確保文件不那么大,盡量避免吧。
10、針對移動端設(shè)備進(jìn)行設(shè)計(jì)
這個注意事項(xiàng)其實(shí)你也應(yīng)該早有預(yù)料?,F(xiàn)如今的用戶絕大多數(shù)的時間都消耗在移動端的小屏幕上了。
在設(shè)計(jì)的時候,注意使用更小的視覺元素,避免智能手機(jī)用戶信息過載。另一方面,如果某些元素需要更加吸引用戶的注意力,可以使用更加大膽的顏色,或者借助動畫效果,都是可以的。
同時,考慮到社交媒體上圖片素材的展現(xiàn)形式,可以盡量把 Gif圖設(shè)計(jì)成為方形的,這樣可以更好的兼容不同的屏幕和不同的平臺,同時也方便裁切。
結(jié)語
Gif圖在設(shè)計(jì)和創(chuàng)作上都非常有趣,但是它也有很多需要注意的問題和相應(yīng)的技巧,幸運(yùn)的是,它們并沒有超出設(shè)計(jì)師的技能范疇。借助這些原則,相信你能設(shè)計(jì)出更加優(yōu)秀的 Gif圖。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)頁題目:10個技巧,能讓你的Gif圖設(shè)計(jì)得更優(yōu)秀。
標(biāo)題路徑:http://muchs.cn/news28/321378.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、用戶體驗(yàn)、Google、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)