|
米醋说：很久没有发视频教程了，没错！老王的教程来了！ 很多时候我们用PS制作完界面后却需要导入到AE或者其他的动画软件里去制作，这样的操作显得非常繁琐，其实PS也可以做出很多不错的动画效果。比如一些加载动画、页面切换动画都可以用PS去做。 所以今天老王和大家来分享一下用PS快速制作界面动画。实战案例：智能WIFI界面。我们先来看一下智能WIFI页面的最终效果。 视频教程（32:17） ▼ 详细图文教程如下 1 绘制界面雏形 打开Photoshop CC2017，然后新建一个文件，尺寸选择iphone6（750X1334像素）大小。 选择椭圆工具，然后设置描边的宽度与颜色，并绘制出一个合适的圆形。 将该椭圆形按Ctrl+J复制出多个圆形，然后按等比例进行放大，注意圆形之间的距离。 选择直接选择工具，然后在选项栏中选择所有图层，并按Alt键框选出相应的锚点，接着按Delete键进行删除。 按Shift键选择除背景图层的所有图层，然后按Ctrl+T将图形进行适当的旋转。 选择直接选择工具，然后框选出上方的WIFI线条，接着在选项栏中将端点设置为圆滑端点。 选择图形中的圆形，然后使用钢笔工具添加2个锚点，接着选择直接选择工具，并按住Alt键框选出相应的区域，删除锚点。
在选项栏中继续将线条的端点设置为圆滑端点，并按Ctrl+T组合键适当的调整图形的大小。
选择圆角矩形工具，然后在选项栏中进行相应的设置，绘制出一个全角矩形，并适当的调整图形的颜色。
选择椭圆工具，然后使用白色绘制出一个圆形，并调整好位置。
添加文字，适当的调整文字的字体、颜色、大小、以及字距、行距等。
2 页面切换动画制作 选中除背景外的所有图层，然后按Ctrl+G组合键形成一个图层组，并将该图层组命名为关闭的状态，接着按Ctrl+J组合键拷贝出一个图层组，并将该图层组命名为开启的状态。
打开关闭状态图层组，然后在最下方新建一个颜色填充调整图层，然后将调整图层的颜色变为蓝色。
将WIFI图形的颜色调整为白色，为了图形效果更加明显，所以使用直接工具将图形全部框选上，在选项栏中设置描边颜色为白色，宽度为30像素。
适当的调整文字的颜色，使页面效果达到最佳。
选择下方按钮的白色圆形，将该图层拖拽到图层的最上方，以便于按钮状态的调整。
点击创建视频时间轴按钮，然后将开启状态的图层组暂时隐藏，时间指示器拖拽到05f,接着单击添加矢量蒙版位置，并在此将时间指示器拖拽到10f。
选择开启状态图层组，然后单击鼠标右键，将编组转换为智能对象，在该图层的下方使用智能对象绘制出一个圆形，接着按Ctrl+Alt+G组合键，将开启状态的图层设置为该椭圆图层的剪切蒙版。
调整该椭圆的大小，然后将该图层转换为智能对象，在时间轴开始的位置，将该圆形调整到最小，接着将时间指示器拖拽到1:00f。
3 WIFI闪烁动画制作 双击开启状态智能对象，此时会弹出一个新的文件，你会发现之前制作的图层都会在这个图层组中。
将WLFI图层转换为智能对象，然后在该图层的上方绘制出一个白色圆形。
点击图层面板中的锁定透明像素，然后将该图形的颜色进行调整，接着将上方的椭圆图层设置为WIFI图层的剪切蒙版。
将该椭圆形状转换为智能对象，然后打开时间轴，点击左方的变换属性，并调整圆形的大小，并将时间轴向后拖拽至一定距离。
按Ctrl+T将圆形进行放大，然后使用鼠标将时间轴向后调整一段距离。
反复调整圆形的大小以及时间轴位置，以保证达到WIFI的动画效果，最后按Ctrl+S保存该文件。
此时放我们回到之前制作的文件中时，刚才制作的开启状态动画效果也会同步到文件中。
为了保证页面能够进行循环播放效果，选择图层最上方的圆形图层，接着选择矢量蒙版位置旁的菱形按钮，在相应的位置添加一个关键帧。
将圆形位置进行相应的调整，然后将时间轴上添加一个关键帧，接着将时间轴向后拖拽一段距离，最后调整圆形的大小。
将动画效果调整到03:00f，然后按Ctrl+Shift+Alt+S组合键预览一下动画效果。
为了保证最佳效果，在动画选项中，将循环效果设置为永远，并点击预览查看效果。
4 制作动画展示效果 将手机素材拖拽到PS中，然后切换至动画窗口，按Shift键选择所有图层，单击鼠标右键，选择转为智能对象，并拖拽至当前的素材文件中。
点击创建时间轴，适当的调整手机图层的播放区域，并将播放时间移动至03:00f。
选择WIFI页面的智能图层，然后按Ctrl+T组合键，按住Ctrl调整图形的4个边角，使其更加贴合手机屏幕。
预览动画效果以及保存文件 按Ctrl+Shift+Alt+S组合键打开预览对话框，查看最终的动画效果。
预览后我们发现背景区域过大，所以进行相应的裁切，将图像大小进行适当的调整，设置宽度为848像素、高度为494像素，并点击确定按钮。
按Ctrl+Alt+S组合键进行预览导出，然后点击储存，将文件存储到相应的位置，就可以啦！！
来看看WIFI智能界面的最终效果，小伙伴们有木有学会，是不是很简单啊~~
好啦~ 今天的分享就到这里 希望大家都能有所收获！！ |
|
|
