收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 41098|回复: 19

[效果制作] 如何做出清晰高质量图片的GIF小动画?

[复制链接]
发表于 2013-8-13 17:20:49 | 显示全部楼层 |阅读模式
本帖最后由 ywmadonis 于 2013-8-13 17:22 编辑

如何做出清晰高质量图片的GIF小动画?我用PS做的PNG格式的图片放到FW里,但不论怎么弄出来的效果都不清晰,不知道网上专业的朋友是如何实现的。懂的朋友指点一下。

FW我没有系统学过,可能这也有很大原因。


专业网友
weather.gif





我做的效果
下雨.gif
发表于 2013-8-14 09:47:16 | 显示全部楼层
楼主看来是没搞懂版主说的什么意思

我来添一足,

GIF只支持单通道透明,也就是说要么全透明要么不透明,
而PNG是支持32位透明,支持各种颜色从0-100的各种半透明

GIF是无法做出完美 的无锯齿动画的!

解决方案是

1、设计时把底色设为纯色或变化不大的渐变色
出图时采用底色和半透明部分混合的方式  FW输出的面板上里选择底色作为混合色

但这个图放在其它颜色上就会露马脚

2、把动画各帧画到同一张PNG上,用CSS给页面相应位置的DIV作为背景,然后通过JS控制背景图片上移相同的高度来完成动画的实现

3、做成FLASH。。。
回复 支持 2 反对 0

使用道具 举报

 楼主| 发表于 2013-8-14 09:17:49 | 显示全部楼层
WaveF 发表于 2013-8-14 01:33
没有系统学过 Fireworks 确实是很大原因,首先你要了解 Fireworks 输出GIF要怎么设置,你上传的图明显是用 ...

噢,非常感谢。

我去看看如何设置这个“索引色Alpha”。
找时间得学一下FW,但用处好像不是太多。
回复 支持 1 反对 1

使用道具 举报

 楼主| 发表于 2013-8-14 09:16:51 | 显示全部楼层
豆豆猫 发表于 2013-8-13 23:56
直接在fw里面用矢量图形制作动画

那就是说所有用到的元件要在FW里手绘了,对吧?
回复 支持 2 反对 0

使用道具 举报

发表于 2013-8-14 01:33:35 | 显示全部楼层
本帖最后由 WaveF 于 2013-8-14 01:34 编辑

没有系统学过 Fireworks 确实是很大原因,首先你要了解 Fireworks 输出GIF要怎么设置,你上传的图明显是用了索引色Alpha,由于GIF不支持Alpha通道(简单理解为半透明),索引色透明其实就是把某些颜色硬生生的从GIF图片上剔除出去,改为绝对透明色,从而造成了你发上来那种图的情况。

而那张所谓的专业网友动画图,只不过是正确设置了输出参数罢了,而且那张图并没有开启透明色。

我抽些许时间用Fireworks也做了一张(时间仓促,已经很晚了,就凑合着看吧):
we.gif



 
回复 支持 1 反对 1

使用道具 举报

发表于 2013-8-13 23:56:05 | 显示全部楼层
直接在fw里面用矢量图形制作动画
回复 支持 2 反对 0

使用道具 举报

 楼主| 发表于 2013-8-14 10:36:22 | 显示全部楼层
本帖最后由 ywmadonis 于 2013-8-14 10:39 编辑
c2j3y4 发表于 2013-8-14 09:47
楼主看来是没搞懂版主说的什么意思

我来添一足,


嗯,解释的很明白了,不多余。就是单色效果可以呗

非常感谢。
回复 支持 反对

使用道具 举报

发表于 2013-8-14 11:42:26 | 显示全部楼层
ywmadonis 发表于 2013-8-14 09:17
噢,非常感谢。

我去看看如何设置这个“索引色Alpha”。

如果你钟情于PS,你可以继续用你的PS,不需要说什么“用处好像不是太多”,你可以继续使用“用处很多、可以做视频、可以做3D、编辑模式却一直以印刷类设计为主十几年没变化过的PS”来做Web Design。

其实虽然我说没系统学过Fireworks是很大成因,但其实这是一句客套话。你主要不理解的是图像格式,做GIF动画你最起码要对这种格式有个基本的了解,而不是点击“save for web”,然后点保存就完事了,参数什么的从来不去调也不去学习,这样的话说实话PS也不太适合你,你应该用Ulead GIF Animator。

c2j3y4说的是css sprites的动画方式,在个人网站上可以使用,但在分享网站上一般不会允许你上传css和js等代码,所以有时还是需要用到GIF的,而且分享此类GIF一般不会设计到背景色问题,所以算是弥补了c2j3y4提到的GIF的不足。

Fireworks 是一个强大的软件,如果不是被Adobe刻意弱化其地位,现在足矣取代Photoshop。你要发问,首先要怀着谦卑的心态来看待她,而不是一种高高在上的态度来“不耻下问”。忠言逆耳,希望你能从中受益。
回复 支持 反对

使用道具 举报

发表于 2013-8-14 17:58:43 | 显示全部楼层
有种图像格式叫做APNG,A就是动画的意思。
示例:
http://people.mozilla.com/~dolske/apng/demo.html
http://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png
回复 支持 反对

使用道具 举报

发表于 2013-8-14 19:02:21 | 显示全部楼层
baihe107 发表于 2013-8-14 17:58
有种图像格式叫做APNG,A就是动画的意思。
示例:

很早以前我就知道有APNG了,但是你不知道的是APNG并不被PNG制定组织所支持。事实上,APNG是一个被否决的方案,并且PNG组织曾宣布不会再考虑APNG,目前支持APNG的浏览器是Mozilla的Firefox,即便是Google Chrome也并不支持它,除非安装第三方扩展。

最近APNG重新进入人们的视野是因为对PNG动画的迫切需求,毕竟GIF已经是不太适合潮流的格式。如果要找一个替代品,那么你们应该尝试去了解一下MNG,这是一种被PNG组织所承认并支持的PNG动画格式。

从个人而言,我是比较偏向于APNG的,不过由于目前浏览器对于APNG和MNG的支持度仍然低得离谱,所以我们还是实际点用回GIF作为过渡吧。
回复 支持 反对

使用道具 举报

发表于 2013-8-15 06:03:43 | 显示全部楼层
这个学习了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-8-15 10:28:07 | 显示全部楼层
本帖最后由 ywmadonis 于 2013-8-15 10:41 编辑
WaveF 发表于 2013-8-14 19:02
很早以前我就知道有APNG了,但是你不知道的是APNG并不被PNG制定组织所支持。事实上,APNG是一个被否决的 ...


嗯,感谢版主答疑。
接着这个问题再追问一下。我在网上找了别人做的成品效果,有PNG分层图(黑背景),PNG拼图(透明)也就是说,如果做成透明的,就只能以不“完美”的形式展现了吗?貌似我还没有真正搞明白

PNG分层黑背景
常_晴_源.png


PNG透明
常_晴.png


动画
常_晴_源.gif
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-8-15 11:27:16 | 显示全部楼层
baihe107 发表于 2013-8-14 17:58
有种图像格式叫做APNG,A就是动画的意思。
示例:

非常感谢,学习了。

下面有了新追问,能帮忙解答下不
回复 支持 反对

使用道具 举报

发表于 2013-8-16 09:19:59 | 显示全部楼层
先说LZ做的图片和专业网友的对比,同为gif图片,专业网友的那张颜色数量为227(在我机器上的FW里看得),而LZ做的图片颜色数量仅为25。

gif动画最多颜色数为256,超过256的颜色就会被丢弃或者修改,LZ做的最底下那张动画图肉眼看起来明显的失真,就是这个原因。

专业网友的那张颜色数小于256,加上是单一的背景色,不像下面那几张小太阳的图片,数量颜色很丰富,已经超出了256。这是其”清晰“的原因。再说说”高质量“,在FW下,这张图一共有30个状态(帧),适合人眼的分辨的帧数,故而看起来很流畅,感觉就像平常看到的视频差不多。

LZ最上面那张自己做的图导出的方式不对,而且只有1帧。最底下那张小太阳,上面也提到了原因。如果想要色彩丰富,而且效果流畅美观的动画,鉴于目前图像技术发展的程度,建议还是采用flash动画或者视频之类的吧。

一些关于GIF动画的理解:
http://www.cgsale.com/sutoo/media_dome/07_media_demo/07_animation/a02_gif/index.htm
回复 支持 反对

使用道具 举报

发表于 2013-8-16 09:23:34 | 显示全部楼层
APNG格式的图片对于目前常用的浏览器来说,兼容性还不是很好,Firefox和Opera支持的比较好,其他的像版主所说,需要插件或者不被支持。总之,根据自己的实际需要,选择不同的图片格式或者解决方案。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-8-23 18:20:39 | 显示全部楼层
baihe107 发表于 2013-8-16 09:19
先说LZ做的图片和专业网友的对比,同为gif图片,专业网友的那张颜色数量为227(在我机器上的FW里看得),而LZ ...

非常感谢指导……
回复 支持 反对

使用道具 举报

发表于 2013-8-26 12:50:16 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2013-9-8 23:17:47 | 显示全部楼层
WaveF 发表于 2013-8-14 11:42
如果你钟情于PS,你可以继续用你的PS,不需要说什么“用处好像不是太多”,你可以继续使用“用处很多、可 ...

ADOBE是混蛋。
回复 支持 反对

使用道具 举报

发表于 2015-6-17 16:56:33 | 显示全部楼层
ps可以做gif格式的动画,但是要做动画的话好像Flash更专业一些!
回复 支持 反对

使用道具 举报

发表于 2016-6-2 15:27:39 | 显示全部楼层
这个我喜欢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2017-7-21 19:05 , Processed in 0.217902 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表