公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端设计 >

Photoshop设计动态APP演示动画

本教程使用了PS CC,但是CS5和CS6依然能够支持本教程。

静态设计

步骤1

新建画布

Photoshop设计动态APP演示动画_www.uibq.com

步骤2

视图>新建参考线,垂直,间隔15px,左面4条,右面4条

视图>新建参考线,水平,在40px,128px,220px处设置水平参考线。

完成后效果如下图。

Photoshop设计动态APP演示动画_www.uibq.com

步骤 3

在画布上添加状态栏(也就是第一条水平参考线上方40px处),状态栏各位可以从源文件里面直接复制获取。

不过这里我用了iOS 7 UI Kit的动作包>>>>微盘下载

Photoshop设计动态APP演示动画_www.uibq.com

下一步,创建新图层,然后在40px和128px之间创建选区,填充颜色#2c3137.

Photoshop设计动态APP演示动画_www.uibq.com

步骤4

在标题栏添加应用的标题和Logo

Photoshop设计动态APP演示动画_www.uibq.com

步骤5

画一个放大镜icon,圆形结合圆角矩形即可,颜色和App Logo相同。

再画一个选项icon,圆角矩形即可,颜色和App Logo相同。

Photoshop设计动态APP演示动画_www.uibq.com

教程未完,请看下一页!

步骤6

在128和220px水平参考线之间的区域创建选区,填充颜色和上一选区颜色一样。

然后在两个区域之间添加2px,不透明度80%的亮色的分割线。

Photoshop设计动态APP演示动画_www.uibq.com

步骤7

选择文字工具,添加分类。

为了暗示所选中的分类,所选中的分类要用粗体、亮色。

其他用普通粗细,暗色。

然后“杂志”复制一份,使用粗体+亮色,然后不透明度设置为0%,暂时隐藏

“首页复制一份”,常规体+暗色,不透明度设置为0%,暂时隐藏

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)