赞助商
立即赞助

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

UI设计3年前 (2021)发布 流光
5K 0 0

这是个什么都在变快时代。在互联网上,切都开始动起来,短视频开始流,而 Gif图早已经像病毒样占据了网络个落。用户用 Gif图来传信息,来表情绪,甚至记录生活。怎么能不爱 Gif图呢?

但是就和有的好东西一样,优质的 Gif图从来都是轻易得来。无论是制态的 UI界面,还是有趣的表情,又或者是好玩的态小插画,想要确保它足够吸引户,人感觉对味,还足够小,这并是一件简单的事情。

不过,不用担心,计一个称职的 Gif图是有巧的,下来,享的10个巧,能让你的 Gif图计得更优秀。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

1、不要提供多余无效的内容

虽然设计师会在自己热爱的项目中投入更多,但是在做 Gif态图的时候,在传达信息的同时,要尽量简中的容,一般而言,更的信息够你在制作画的时候获得更多的自由和可性!

一定要克制住加入大量内容的冲动。用户在观你的 Gif图的候,容易被过多的内容所淹没,尤其是当你想要借助 Gif图来传达定的情绪和受的候,多余的色彩和内容容易弱化它。

不过度设。围绕核的元素调色板设,让它们足够独特诱人。

2、在Gif图中建立一致的视觉

Gif图世界短的电影。可以借它行品牌化的传达。

你以在设计的时使用品牌的来对它进行设计,将品牌的形象、LOGO和其他元素在 Gif图中呈现,让品牌、企业和产品以更加富有活力的方式呈现出来。

而用户则能够借助这些元素,来和品本身生关联。在特定情形和需求下,Gif图能够帮助用户了解品功能和其他信息,而品化配色则能够强化这关联。

如 GE 就在 Gif图当中供了非值得期待的氛围,在官方的 Tumblr 当中分享这些有趣的 Gif 图,展示 GE 在科和机械设计上的诣。借助 #badassmachines 这样的标签,他们在社交媒体上进行更有效的传播。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

3、删除Gif图中所有的额外帧

你在设计 Gif图时候,论你使用哪类型动画,Gif图,会有某些时刻是状态止,创好 Gif图后,应该过调,删除掉额、止不帧。

删除额外的帧,仅保留中一帧,并根据画的状态和节奏来调整该帧的时长,可缩减 Gif图的大小和播放时候的压。

这的调整不仅能够让 Gif图整体质量保持不变,而且同可以减少不必要的空间占用。

4、在上传Gif图的时候,保持良好的可访问性

作为计,你应该熟悉用户群体,并且将 Gif图中可能会散力的视觉内容给去掉。

典型的,如果所面对的用户群体当中视力障碍并且使用屏幕阅读功能或者癫痫患者,那么尽兼顾到他们的需求,文字内尽 Gif 之外,单独显示,并且避免频繁的闪烁效果。

不断移动的 Gif图很大程度上转移用户的注意力,在一屏当中使用个 Gif图的时,尤其要注意一点。果有大量文内容的时,Gif图中的彩和特效尽量控数量,因为它们能抓取用户注意力。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

避免 Gif图自动播放,样让用户感到控,并且以节省流量。

5、借助故事板来梳理Gif图的内容

很时,Gif图身的简单形态使得它看来不复,但是其使得很设计师因此而出错。通常,Gif图身迷人之处就是在它的故,即使短,它当中也包含着叙,故,甚至复的转折和变的转场。

基本故事变化和元素,这些是 Gif图制作基础。在设计动画时候,我们很容易忘记这些东西,借助故事板,可以帮你更好地梳理故事走,镜头变化,情节走,值注意关键情节和转折。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

尤其是你不是个来制作 Gif图时候,个团队可以借助故事板,将进度统起来,极大改善沟和统问题,加快创作过程。

6、如果你使用PS来制作Gif图,请务必保持整洁简练

在设计 Gif图时候,很多设计师会选择使用 PS 来制作。是足够习惯,足够手,是另,PS 本身图层管理和制作制是很容易导致混乱。

PS 中元素和图层管需要兼顾的太多,至于在制作 Gif图的时候,稍微增删或者移一些容,就很容易输一个想、可控的 Gif图。

同,如果没有正确地标注图层,之后进行了相对复杂的操作之后,容易导致多诺骨牌一的错误。更令人头疼的是,修改一个地方之后,后续多图层都需要进行调整和修改,最终会带来大量的重复性的工作。

所以, PS 中制作 Gif图,尽保持整洁,条理清晰。

7、增加创意元素,并保持循环

Gif图绝多数况下会自动循环播,用户很多时候也乐于时间的循环观看,但让它平滑自然循环并非易事。

果你想让 Gif图中持循,么我建议你尽量从一个简单的设计元素手,比几何形状之类的东西。样以更容易进行首尾位置的匹。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

在 Gif图当中创建循很大程度是希望留住用户,因为任何不协和错位让人注意到,不够完美不够平滑,就让用户感到跳出感,从而移开注意力。而种要求,也意味着设计师要注意每一帧的设计。

然,努力最终结是值!

8、运动状态要保持模糊效果

Gif图模糊效,其实和相运动抓效是致,很多处于态运动,其实是不那么晰。而这和我们视觉是保持致。如今相成像质量越来越高,是我们眼睛并没有随快速进化。

在 Gif图当中,帧数通会太,如果图片的细节始终保持清晰则容易呈现跳帧,状态的物体适当保持模糊效果,则更接我们日观察的细节,从而 Gif图带来接视频拍摄的效果,户会因此感到真实和精彩。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

9、Gif图要尽可能小

如你所知,社交媒体、客、网站、电子邮件,甚至APP 都是 Gif 使用大户,Gif图片已经深入到我们生活。是不地图片规格不,使用场景也不样,此,Gif 需要足够小才能兼容不需求。下是些帮你缩小 Gif图尺寸法:

  • 尽量让 Gif图的帧数持在150帧以内,否则在很地方被,因为太大。
  • 导出 Gif图时候,请将有损压缩设在5~10,这样将更大程度压缩最终图片尺寸。你可以多加尝试,尽量寻找质量和尺寸上平衡。
  • 使尽量的颜色。这仅仅是于设计的考虑,更的色彩够很大程上降低件的大小,意味着 Gif图可更小,或者持续时间更长,载更快。
  • 尽量避免渐变。透度是开启还是关闭会直响 Gif图的大,如果想要确保文件不那大,尽量避免吧。

10、针对移动端设备进行设计

这个注意事项其实你也应该早有预料。现如今用户绝大多数时都消耗在移动端小屏幕上了。

在设计的时候,注意使更小的视觉元素,避免智手机户信息过载。另一方面,如果某些元素需要更吸引户的注意,可使更大胆的颜色,或者借助画效果,都是可的。

同,考虑社交媒体上图片素材的展现形式,可以尽量把 Gif图计成为方形的,这可以更好的兼容不同的屏幕和不同的,同也方便裁切。

在制作 GIF 图片的时候,这10个注意事项帮你做得更好

结语

Gif图在设计和创作上都非有趣,但是它有很多需要注意的问题和相应的技巧,幸的是,它们并没有超设计师的技范畴。借助这些原则,相信你设计更优秀的 Gif图。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

描边风是近几年比较流行,且被大量应用于平面和 UI 设计中的一种设计风格。 欢迎关注作者微信公众号:...
MBE风格
从一开始的立项到现在落地上线,可以说是从零开始进行 APP 全部细节的梳理并且规定规范,这一路走过来还是能总结出很多心得,...
组件化设计
在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。 ...
交互设计
@糖糖糖就是糖 :这是自学水彩的总结系列第三篇——关于水彩笔的常见问题和自用笔测评。 相比水彩纸和颜料,水彩笔我用的更随...
手绘
曾经有一位顾问,问亨利·福特(福特公司创始人),为什么他每年要付5万美元给一个每天大部分时间都把脚翘在办公桌上无所事事...
Eugen Eşanu
本文聚焦 Airbnb 产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。 一、系统状态的可见性 V...
Airbnb
随着技术的发展,我们常常会觉得,如果想要做好产品必须遵循新的规则。实际上,这并不是真的。人类本身并没有我们想象中变化...
Eugen Eşanu
一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层...
图标