简单的静态页面设计 (静态屏幕动态化)

记得那是一个阳光明媚的下午,接到设计大神的一张网页图

静态屏幕动态化,静态画面怎么做动态化

要求将头部主视觉的静态图做成动态的,没错,就是下面这块地方。

静态屏幕动态化,静态画面怎么做动态化

接到需求后,我立马换上工作服就开工了。

打开大神的PSD,看图右下角,一如既往的素材管理得当,分层清晰,没有那种渣渣页面设计师随心所欲的图层摆放,赞一个。

静态屏幕动态化,静态画面怎么做动态化

打开PSD后,观察分析下这个图,看看有哪些内容,可以分为哪几层来制作效果。

1:可以看到,最上面的logo啊,按钮啊,视频框啊,这些UI内容图层,这些可以划为一层,一般情况下,这层的内容不用去制作效果,除非有特殊要求。

静态屏幕动态化,静态画面怎么做动态化

2:接下来是slogan,主、副标题等图层,这层有时候要做效果,有时候不用,看你自己或者你工头的心情吧。

静态屏幕动态化,静态画面怎么做动态化

3:文字下面的,就是前景人物的图层了,这层是主要视觉内容,坑定是要做效果的了。

静态屏幕动态化,静态画面怎么做动态化

4:再下面,就是背景人物了,这层没有那么主要只是和背景一起起到烘托环境氛围的效果,所以,这层可以和背景一起划为一层,也可以自己单独一层。

静态屏幕动态化,静态画面怎么做动态化

呐,就像下面这样,分好大体的图层,然后我们继续往下........

静态屏幕动态化,静态画面怎么做动态化

分好大体图层后,我们就开始分背景人物的图层了,因为这图背景黑乎乎的,而且前面效果会比较多,所以,背景图上可以不用做效果也没事,继续看下图,

背景人物不用做的很细,所以,结构我们就简单的来分下就好,中间一个身体,左右两边的两只手,调整这三层,做出缓慢呼吸状的动态,调完动态后,加上头部和右手部的光效,这层就ok了。

静态屏幕动态化,静态画面怎么做动态化

在拆分的时候,记得补全公共区域的内容,怎么补全呢?就是你自己老老实实的画上去啊!!!还能有什么办法,这算是个体力活儿,也算是个技术活儿。

因为你要根据总体和各部位的结构,拆分,然后补全。当然,你可以不干这些活儿,那就等着穿帮吧!

静态屏幕动态化,静态画面怎么做动态化

完成背景人物层后,我们继续,从内往外看,就是前景人物了。同样,你要用你那B超一样的眼光,去分析下他的结构,然后拆分,补全,调动画。

静态屏幕动态化,静态画面怎么做动态化

呐,下面是我做的B超图,大体的骨骼身体部件,和一些衣服的飘带什么的。

静态屏幕动态化,静态画面怎么做动态化

开始拆分了,比如这个左手臂,切出来这一块,

静态屏幕动态化,静态画面怎么做动态化

自己老实点画回去那个窟窿。

静态屏幕动态化,静态画面怎么做动态化

静态屏幕动态化,静态画面怎么做动态化

看下图右下角,我们把需要动的部件,都拆分好单独的一个图层,不用做动态的地方,就没必要去拆分了,即使拆分了,没有补全也没事,因为不会动,就不会穿帮。

这里注意下图层顺序的排列。

静态屏幕动态化,静态画面怎么做动态化

下图是我的拆分

静态屏幕动态化,静态画面怎么做动态化

静态屏幕动态化,静态画面怎么做动态化

全都拆分好了,就保存一下这个PSD,准备导入到AE里调动画,加特效吧。

静态屏幕动态化,静态画面怎么做动态化

打开AE,如下图,双击后打开导入对话框,选择刚才那个你“分尸”半天的PSD,导入吧。

静态屏幕动态化,静态画面怎么做动态化

导入后,AE会自动帮你分好层,看到没,这个图层顺序就是你PS里面的顺序了。

静态屏幕动态化,静态画面怎么做动态化

导入后,就设置下你需要的时长啊,尺寸啊,频率啊什么的。

一般像这种网页上的动态图,需要制作成循环*放播**,所以,时长上面,建议偶数比较好,2,4,6.......。合成的时间越长,你可以跳出越丰富的动画,但时间长了,

到时候导出的相应文件体积就也越大,所以,在保证你需要效果的前提下,时间越短越好。

静态屏幕动态化,静态画面怎么做动态化

下面是我调整好动态,加上简单特效后的效果了

静态屏幕动态化,静态画面怎么做动态化

来个特写~~~,这个最费力的就是头发部分了,需要做出好点的效果,就要分的细致些。

静态屏幕动态化,静态画面怎么做动态化

收工