__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:45

Photoshop制作流畅的动态APP演示动画


设置图层样式内发光。(图层样式若不满意可不设置)

http://pic.16xx8.com/allimg/140809/01441aI9-16.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:46

Photoshop制作流畅的动态APP演示动画


步骤12
添加图像，然后创建剪贴蒙版.

http://pic.16xx8.com/allimg/140809/0144193540-17.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:47

Photoshop制作流畅的动态APP演示动画


然后添加文本图层，利用尺寸，颜色，粗细，来营造清晰的阅读层级。
最后添加几个按钮图标。

http://pic.16xx8.com/allimg/140809/0144195354-18.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:48

Photoshop制作流畅的动态APP演示动画


步骤13
其他几个矩形同理

http://pic.16xx8.com/allimg/140809/0144192152-19.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:49

Photoshop制作流畅的动态APP演示动画


步骤14
先把主要区域的矩形图层全部隐藏，然后构建一个较大的矩形区域，这将应用到选择具体卡片后的细节界面。
做完后，此图层组不透明度设置为0%

http://pic.16xx8.com/allimg/140809/0144194215-20.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:50

Photoshop制作流畅的动态APP演示动画

      
触控点步骤1
创建新图层，命名为“Tap”，画一个白色形状，不透明度70%

http://pic.16xx8.com/allimg/140809/0144191621-21.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:51

Photoshop制作流畅的动态APP演示动画


步骤2
复制这个圆形，扩大，去掉填充，描边设置为3pt白色
继续复制，扩大，描边2pt
完事后居中对齐

http://pic.16xx8.com/allimg/140809/0144193M7-22.png

隐藏tap图层组，因为刚加载完界面是不会显示触控点的，但是当选择元素产生转场时会出现。

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:52

Photoshop制作流畅的动态APP演示动画


滚动效果步骤1
现在，终于开始做UI动态演示效果了，打开时间轴面板，创建帧动画
按下图那个红色划线按钮，创建新帧

http://pic.16xx8.com/allimg/140809/0144192208-23.png


http://pic.16xx8.com/allimg/140809/0144192F1-24.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:53

Photoshop制作流畅的动态APP演示动画


步骤2
显示Tap图层组，隐藏两个描边圆，用来代表滚动手势。当开始滚动时，两个描边圈也出现，涟漪效果能够突出滚动手势。

http://pic.16xx8.com/allimg/140809/0144195N5-25.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:54

Photoshop制作流畅的动态APP演示动画


步骤3
第一帧1s，第二帧开始帧延迟设置为0.2s

http://pic.16xx8.com/allimg/140809/01441a944-26.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:55

Photoshop制作流畅的动态APP演示动画


步骤4
添加帧

http://pic.16xx8.com/allimg/140809/01441953a-27.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:56

Photoshop制作流畅的动态APP演示动画

      
步骤5
显示Tap图层组所有突出。使用移动工具，来上移Tap图层组和主要内容图层组

http://pic.16xx8.com/allimg/140809/0144191455-28.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:57

Photoshop制作流畅的动态APP演示动画


步骤6
为了让滚动效果更流畅，选中当前帧和前一帧，点击时间轴面板中得选项，选择过渡
设置如下

http://pic.16xx8.com/allimg/140809/0144194494-29.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:58

Photoshop制作流畅的动态APP演示动画


现在，便有稍微流畅的效果了。

http://pic.16xx8.com/allimg/140809/014419A51-30.gif

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:19:59

Photoshop制作流畅的动态APP演示动画


步骤7
如果感觉动效有点慢，想让它快点，那么可以将帧延迟设置为0.1s

http://pic.16xx8.com/allimg/140809/0144193D9-31.png
页: 1 [2] 3 4
查看完整版本: Photoshop制作流畅的动态APP演示动画