当前位置: 时代头条 > 正文

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

上期分享了利用美图秀秀工具中的"九宫切图"和“闪图”两大功能,做出了简单的九宫格GIF动图。

这个方法简单粗暴,但是也存在问题:

若是你需要展示的9张内容页图片尺寸和封面大小不一致,且图片尺寸较大,美图秀秀就无法使用了。

那还有其他工具可以实现咩?回答之前,先看看以下几个例子:

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

没错,就是使用了专业Photoshop软件切的九宫图,制作的GIF动图!

别废话,直接上硬货!

【准备工作】

1、电脑上有安装PS软件(最好版本在CS5以上)

2、九宫格预览封面完整大图*1张 (高清)

3、准备好9张要展示的内容图(保证每张尺寸统一即可,可以和9个宫格预览图尺寸不一致。)

【开始】

1、首先要用PS切九宫格。

打开PS,在顶部导航栏找到——【视图】——【显示】,勾选【标尺】、【智能参考线】、【切片】。接着导入预览封面大图,拉出参考线,将图片分成九个宫格。

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

在PS左部工具栏,找到[切片]工具,勾选[切片工具]。然后鼠标指示变成了一把小刀的样子,对9个宫格分别选中。

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

直到每个宫格左上角出现01-09的编号即可。↓

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

最后,点击PS顶部的【文件】-【储存为Web所用格式】(或者直接按快捷键 Alt+Shift+Ctrl+S)保存,在本地即可看到9张宫格图,按照顺序上传微博即可。↓

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

2、接着用PS制作GIF动画

在PS顶部导航栏找到【窗口】——勾选【时间抽】,PS界面底部出现时间轴界面。导入每个宫图对应的内容页图,建两个不同的图层。以其中一个为例子,如图所示:

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

设置第一帧图片的延迟时间设置为“0秒”,第二帧的时间设置为“20秒",设置循环次数为”1“。↓

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

储存为Web所用格式,选择类型为"GIF"格式即可。↓

#进阶篇#微博上的九宫格GIF动图是怎么做出来的?(下篇)

【说明】

PS制作这种GIF图,其实总共2帧图片。

第一帧和第二帧之间间隔时间其实越短越好(但是一般在微博上,设置在10秒-20秒为宜) ,并且播放次数不是永久循环的。

所以你看缩略图时候是A图(第一帧), 打开时候立马变成了B图(第二帧)。

【下期预告】

微信公众号内容如何做到漂亮的排版?

7月16日见!

最新文章

取消
扫码支持 支付码