浙江铃声推荐联盟

让平面设计师轻松做特效 经典特效之重影放大

醉悠枫2019-03-21 15:36:52

醉爱秀工具最大特点就是

让平面设计师轻松做特效

让静态图片活起来

将构想变现实




多重动画结合,利用层级调整,实现单个宝贝提亮放大效果

案例醉语言链接地址:

http://www.ecplay.com/index.php?c=slist&m=shareview&shareid=1353

该案例所需组件及设计原理

任意图层:简单加图、css动画

HTMLcss动画,自定义层级(定义内容的显示层级)

设计原理:先用任意图层加要直接显示的内容,然后每一个宝贝上面加一个HTML,做渐现放大效果,从而实现一个一个的提亮放大效果。

具体步骤:

1.先新建任意图层,加大背景图,注意习惯性的任意图层加图片时,左侧距离和顶部距离要清零,除非特别需要。


2.开始加宝贝的图片上去了,还是选用“任意图层”,每个任意图层中挨个加进去宝贝,之后鼠标拖动调整到各自适合的位置,根据自己的审美去调整就可以了;再然后注意调整是哪个宝贝展示在最上层,单击宝贝图层之后,鼠标单击右键-选择“置顶”,就可以调整图层浮动在上面的上下顺序了。


如图所示的排列方式,在这里需要说明一下,因为刚开始鼠标浮上之前,是灰色的;在案例里面是在宝贝图片上面加一个半透明的灰色图层,这样就会增加图层的数量;如果是亲自己做的话,可以直接在ps里面做一个这样暗色的图片加进去就可以了,图层数量会减少一半,这样可以有效的加快你打开时的加载速度。

 
3.排好之后,开始在上面加“HTML”组件,做渐现放大效果,在此我们只演示一个哦


 
点“HTML”组件,大小拖拉到底图的等同大小,然后点下面的“编辑”按键,进去之后,用“任意图层”组件加好该宝贝的图片,然后关闭回到主界面。


回到主界面之后,点击“HTML”组件下面的css做渐现和放大效果,点击“点此看详细内容


这样,一个的效果就做好了,剩下的也是一样的做法。

4.都加好之后,就可以调整各个组件的图层层级了。先看那个在上面,哪个在下面,从最下面的到最上面的挨个置顶,有遮挡的,在HTML里面用自定义层级来调整,数字越大,层级越高。

也可以在图层面板中,直接用鼠标拖动图层,来改变图层顺序。


具体的设置,都可以自己多次尝试,以熟悉操作,方便实现自己的需要哦。


备注一句

点击“原文”就会跳转到实际示例页面,可以看得更清楚



最后,祝每个设计师都能做出好作品