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

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

      本教程使用了PS CC，但是CS5和CS6依然能够支持本教程。
静态设计步骤1
新建画布

http://pic.16xx8.com/allimg/140809/0144191J0-0.png
提示：教程详细步骤在二楼，不用回复也能看到！想下载该教程的可以回复获取下载网址:点击进入下载页教程编号:134163 作者：MartinRGB 出处：uicn

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

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


步骤2
视图>新建参考线，垂直，间隔15px，左面4条，右面4条
视图>新建参考线，水平，在40px，128px，220px处设置水平参考线。
完成后效果如下图。

http://pic.16xx8.com/allimg/140809/0144191553-1.png

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

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


步骤 3
在画布上添加状态栏（也就是第一条水平参考线上方40px处），状态栏各位可以从源文件里面直接复制获取。
不过这里我用了iOS 7 UI Kit的动作包>>>>微盘下载

http://pic.16xx8.com/allimg/140809/0144191392-2.png

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

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


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

http://pic.16xx8.com/allimg/140809/0144193150-3.png

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

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


步骤4
在标题栏添加应用的标题和Logo

http://pic.16xx8.com/allimg/140809/01441945c-4.png

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

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


步骤5
画一个放大镜icon，圆形结合圆角矩形即可，颜色和App Logo相同。
再画一个选项icon，圆角矩形即可，颜色和App Logo相同。

http://pic.16xx8.com/allimg/140809/0144191005-5.png

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

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

      
步骤6
在128和220px水平参考线之间的区域创建选区，填充颜色和上一选区颜色一样。
然后在两个区域之间添加2px，不透明度80%的亮色的分割线。

http://pic.16xx8.com/allimg/140809/01441912X-6.png

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

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


步骤7
选择文字工具，添加分类。
为了暗示所选中的分类，所选中的分类要用粗体、亮色。
其他用普通粗细，暗色。
然后“杂志”复制一份，使用粗体+亮色，然后不透明度设置为0%，暂时隐藏
“首页复制一份”，常规体+暗色，不透明度设置为0%，暂时隐藏

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


http://pic.16xx8.com/allimg/140809/0144192R8-8.png

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

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


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

http://pic.16xx8.com/allimg/140809/0144191404-9.png

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

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


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

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

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

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


步骤10
在主题区域中，划出如下图选区，填充颜色#3f464e

http://pic.16xx8.com/allimg/140809/014419E28-11.png

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

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


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

http://pic.16xx8.com/allimg/140809/0144193N2-12.png

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

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



http://pic.16xx8.com/allimg/140809/014419EW-13.png

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

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



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

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

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

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

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