“点亮武汉”，咋做的

图文排版

H5秀

手机图文

四月八日零点

被摁下暂停键的武汉重新开启了

关于武汉的话题也多了出来

这不，一大早就有小伙伴问

人民日报的“点亮武汉”效果咋做的

秀米能实现吗，小编快去试试呀

小编我有很多问号

不知当讲不当讲

怀揣着好奇与探索精神

小编去研究了一下发现

这个效果是可以用秀米SVG布局做到滴

一时手痒痒先做了两个出来

戳图一起点亮武汉

“点亮武汉”示例1

“点亮武汉”示例2

当当当

下面就是我们的揭秘蹭热度时刻

在秀米里实现“点亮图片”很简单，主要就是运用SVG布局，通过点击操作，加上合适的动效设置，从黑白图片到彩色图片的视觉转化，也就是“点亮”操作。主要分为两个步骤：

1、准备一张彩色图片，并调为黑白照片，保证两者统一宽高；

2、运用秀米SVG布局，设置合适的动效与时长，做出“点亮”效果。

将彩色图片，调为黑白色

将准备好的彩色图片，在PS中打开，在编辑菜单中，图像→调整→黑白，将彩色图片调成黑白模式：

这样就可以得到两张统一宽高的图片，保存好后上传到秀米图库。

PS：将彩色图片调成黑白模式的方法有很多，大家根据自己的模式来就好。

用SVG布局做出“点亮”效果

用秀米SVG布局做出点亮效果，也就是在SVG层与普通布局中都放上图片，然后在SVG层设置好动效，做出“点亮”效果，而根据动效的不同设置，可有两种版本：

SVG层放彩色图片，设置淡入效果

这一种主要是运用SVG布局，把彩色图片放在SVG层里，设置“淡入”效果，通过点击操作，将彩色图片点击出现。

在左边模板区，布局→基础布局，找到SVG布局，将它添加到编辑区域中，然后将黑白图片放到普通布局里，调整段前/后距为0：

点击SVG布局最外层的粗灰色框框，打开SVG布局的动画设置，在SVG层中添加进彩色图片：

接着，在当前SVG层的动画设置里，设置如下：

最后来看下具体动画操作与预览效果：

SVG层放黑白图片，设置淡出效果

这一种操作，其实就是将两张图片位置调换一下，再把放在SVG层的黑白图片通过淡出效果，点击“消失”，这样彩色图片就被“点亮”出现了：

来看下预览效果：

小结

“点亮”图片，就是将两张统一宽高的图片，一张黑色一张彩色，添加到SVG层与普通布局里，再设定好动效以及合适的时间，通过点击操作做出“点亮”效果。

更多阅读

小白适用

系统介绍秀米的基础操作

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。