优艾设计网

Photoshop设计动态APP演示动画

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:MartinRGB
本教程使用了PS CC,但是CS5和CS6依然能够支持本教程。 静态设计 步骤1 新建画布

触控点

步骤1

创建新图层,命名为“Tap”,画一个白色形状,不透明度70%

Photoshop设计动态APP演示动画

步骤2

复制这个圆形,扩大,去掉填充,描边设置为3pt白色

继续复制,扩大,描边2pt

完事后居中对齐

Photoshop设计动态APP演示动画

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

滚动效果

步骤1

现在,终于开始做UI动态演示效果了,打开时间轴面板,创建帧动画

按下图那个红色划线按钮,创建新帧

Photoshop设计动态APP演示动画

Photoshop设计动态APP演示动画

步骤2

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

Photoshop设计动态APP演示动画

步骤3

第一帧1s,第二帧开始帧延迟设置为0.2s

Photoshop设计动态APP演示动画

步骤4

添加帧

Photoshop设计动态APP演示动画

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消