查看: 59|回复: 0

静态页面动态化制作

[复制链接]

24

主题

24

帖子

140

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
140
发表于 2019-6-30 19:01:33 | 显示全部楼层 |阅读模式
<p><strong>记得那是一个阳光明媚的下午,接到设计大神的一张网页图</strong></p>
<p>,</p>
<p><br>
</p>
<p>要求将头部主视觉的静态图做成动态的,没错,就是下面这块地方。</p>
<p></p>
<p><br>
</p>
<p>接到需求后,我立马换上工作服就开工了。<br>
</p>
<p>打开大神的PSD,看图右下角,一如既往的素材管理得当,分层清晰,没有那种渣渣页面设计师随心所欲的图层摆放,赞一个。</p>
<p><br>
</p>
<p><strong>打开PSD后,观察分析下这个图,看看有哪些内容,可以分为哪几层来制作效果。</strong><br>
</p>
<p><strong><br>
</strong></p>
<p><strong>1:可以看到,最上面的logo啊,按钮啊,视频框啊,这些UI内容图层,这些可以划为一层,一般情况下,这层的内容不用去制作效果,除非有特殊要求。</strong></p>
<p><strong></strong></p>
<p><strong>2:接下来是slogan,主、副标题等图层,这层有时候要做效果,有时候不用,看你自己或者你工头的心情吧。</strong></p>
<p></p>
<p>3:文字下面的,就是前景人物的图层了,这层是主要视觉内容,坑定是要做效果的了。</p>
<p></p>
<p>4:再下面,就是背景人物了,这层没有那么主要只是和背景一起起到烘托环境氛围的效果,所以,这层可以和背景一起划为一层,也可以自己单独一层。</p>
<p></p>
<p>呐,就像下面这样,分好大体的图层,然后我们继续往下........</p>
<p></p>
<p>分好大体图层后,我们就开始分背景人物的图层了,因为这图背景黑乎乎的,而且前面效果会比较多,所以,背景图上可以不用做效果也没事,继续看下图,</p>
<p>背景人物不用做的很细,所以,结构我们就简单的来分下就好,中间一个身体,左右两边的两只手,调整这三层,做出缓慢呼吸状的动态,调完动态后,加上头部和右手部的光效,这层就ok了。</p>
<p></p>
<p>在拆分的时候,记得补全公共区域的内容,怎么补全呢?就是你自己老老实实的画上去啊!!!还能有什么办法,这算是个体力活儿,也算是个技术活儿。</p>
<p>因为你要根据总体和各部位的结构,拆分,然后补全。当然,你可以不干这些活儿,那就等着穿帮吧!</p>
<p></p>
<p><br>
</p>
<p>完成背景人物层后,我们继续,从内往外看,就是前景人物了。同样,你要用你那B超一样的眼光,去分析下他的结构,然后拆分,补全,调动画。</p>
<p></p>
<p>呐,下面是我做的B超图,大体的骨骼身体部件,和一些衣服的飘带什么的。</p>
<p></p>
<p>开始拆分了,比如这个左手臂,切出来这一块,</p>
<p></p>
<p>自己老实点画回去那个窟窿。</p>
<p></p>
<p></p>
<p>看下图右下角,我们把需要动的部件,都拆分好单独的一个图层,不用做动态的地方,就没必要去拆分了,即使拆分了,没有补全也没事,因为不会动,就不会穿帮。</p>
<p><strong>这里注意下图层顺序的排列。</strong></p>
<p></p>
<p>下图是我的拆分</p>
<p></p>
<p></p>
<p>全都拆分好了,就保存一下这个PSD,准备导入到AE里调动画,加特效吧。</p>
<p></p>
<p><br>
</p>
<p>打开AE,如下图,双击后打开导入对话框,选择刚才那个你&ldquo;分尸&rdquo;半天的PSD,导入吧。</p>
<p></p>
<p>导入后,AE会自动帮你分好层,看到没,这个图层顺序就是你PS里面的顺序了。</p>
<p></p>
<p>导入后,就设置下你需要的时长啊,尺寸啊,频率啊什么的。</p>
<p>一般像这种网页上的动态图,需要制作成循环播放,所以,时长上面,建议偶数比较好,2,4,6.......。合成的时间越长,你可以跳出越丰富的动画,但时间长了,</p>
<p>到时候导出的相应文件体积就也越大,所以,在保证你需要效果的前提下,时间越短越好。<br>
</p>
<p></p>
<p><br>
</p>
<p>下面是我调整好动态,加上简单特效后的效果了</p>
<p></p>
<p>来个特写~~~,这个最费力的就是头发部分了,需要做出好点的效果,就要分的细致些。</p>
<p></p>
<p>收工</p>
<p><br>
</p>
<p>这是该页面地址了   http://www.m3guo.com/activity/201705/skin/</p>


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表