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

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

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

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

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

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

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

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

步骤13
其他几个矩形同理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

步骤4
添加帧

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

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

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

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

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

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

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

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

账号		自动登录	找回密码
密码			注册

[广告包装设计] Photoshop制作流畅的动态APP演示动画