PS打造动态APP演示效果教程(1)

来源:网络   作者:热心网友   发布时间:2016-06-21    浏览次数:1053

现在动态演示已成趋势,相比静态,更直观,更能展示产品效果。 今天@MartinRGB教同学们如何利用Photoshop制作如此酷炫的动态演示。软件界面是中文版的呦,再也不担心看不懂了。

教程信息

本教程使用了PS CC,但是CS5和CS6依然能够支持本教程。
然后您还需要下载手机Mock UP效果模板和一些图库照片。

静态设计

具体的制作步骤如下:

步骤1

新建画布

步骤2

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

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

完成后效果如下图。

步骤 3

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

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

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

步骤4

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




步骤5

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

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

步骤6

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

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

步骤7

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

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

其他用普通粗细,暗色。

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

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

步骤8

在菜单项的左右添加箭头,使用圆角矩形即可。

步骤9

背景填充为标题栏和菜单栏的颜色,确保背景图层处于GUI元素下方。




步骤10

在主题区域中,划出如下图选区,填充颜色#3f464e

添加图层样式,描边,内阴影,外发光。具体参数如下。

步骤11

在形状上方画一个白色圆角矩形,我们会在这个区域放置图像。

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




步骤12

添加图像,然后创建剪贴蒙版.

然后添加文本图层,利用尺寸,颜色,粗细,来营造清晰的阅读层级。

最后添加几个按钮图标。

步骤13

其他几个矩形同理

步骤14

先把主要区域的矩形图层全部隐藏,然后构建一个较大的矩形区域,这将应用到选择具体卡片后的细节界面。

做完后,此图层组不透明度设置为0%

触控点

步骤1

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


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/4278.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通