分享

“点亮武汉”,咋做的

 报春晖131 2020-04-10

图文排版

H5秀

手机图文

四月八日零点

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

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

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

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

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

小编我有很多问号

不知当讲不当讲

怀揣着好奇与探索精神

小编去研究了一下发现

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

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

戳图一起点亮武汉

“点亮武汉”示例1

“点亮武汉”示例2

当当当

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

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

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

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

01

将彩色图片,调为黑白色

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

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

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

02

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

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

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

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

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

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

接着,在当前SVG层的动画设置里,设置如下:

  • 动画触发为点击,为了保证实施“点亮”操作

  • 动画类别为淡入,让彩色图片被点击慢慢显示

  • 动画时长2.5s,这里根据实际情况选择所需的时长就好了。

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

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

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

来看下预览效果:

小结

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

  • 黑白图片放普通布局,彩色图片放SVG层,设定淡入效果,将彩色图点击出现;

  • 彩色图片放普通布局,黑白图片放SVG层,设定淡出效果,将黑白图片点击消失。

更多阅读

小白适用

系统介绍秀米的基础操作

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多