最终效果图

动画效果 教程素材：http://pan.baidu.com/share/link?shareid=93807&uk=755000821

1、iPad 2 的 psd文件 iPad 2 template.rar

2、手型图片 hand-point.rar

3、字体 Walkway Typeface 字体--Walkway--font.rar

4、用到的图标 图标icon_used.rar

第一步：新建文件

画布大小 1400 X 1200px,RGB,72dpi，并命名为 ipad应用程序.psd

第二步：创建ipad屏幕的操作区域

创建一个长方形，大小为1024*768,作为ipad2的操作区域(即ipad2的屏幕大小)

1、选择矩形工具(U) ,随意的画个矩形，按 ctrl + t ,在属性工具栏上上输入具体的数值(提示：右键点击属性栏上的宽度输入框，选择“像素”)

2、按ctrl+A ，并选择 移动工具(V) ,点击“垂直居中对齐”和“垂直居中对齐”

3、建立参考线，对齐矩形的边线。

第三步：添加ipad2 背景图

1、 拖动素材ipad2.psd(从本文中下载)到ipad应用程序.psd中,自动生成一个智能对象，按 ctrl+T 调整ipad2大小，使ipad2的屏幕边线对齐参考线，命名改层为“ipad”如下图

2、 双击图层“ipad”，打开智能对象，隐藏相应的图层，在图层“Base”上建立蒙版，用选区工具(M),画出ipad2屏幕区域，并填充黑色，并“保存”,回到ipad应用程序.psd。

第四步：背景

1、给ipad的屏幕区域添加一个背景，选择矩形工具(U)，在图层“ipad”的下方创建矩形，并命名为“背景”，按ctrl+G ,编组名为"App"

2、给整个文档添加一个渐变(设置前景色#121212，背景色 #434343)

 

第五步：应用程序的头部样式

用矩形工具(U)画出一个矩形，高度80px，按ctrl+G，设置编组名为“头部”，并设置矩形图层样式，

第六步：头部细节

1、用椭圆形工具(颜色#1C79B4)，在头部上绘制一个椭圆，接着应用高斯模糊，半径为15px，按住ctrl 鼠标点击图层“形状1”，再ctrl+shift+I,反选选区，按“Del”键，删除超出的部分

2、增加圆形蓝色半透明气泡，用圆形工具，在头部上添加多个大小不一的半透明圆形，按ctrl+G把气泡层放入一个编组，命名为“气泡”

3、在”气泡“编组上加蒙版，使头部外的气泡不显示，用矩形选区工具(M)绘制一个矩形，按shift+ctrl+I，反选选区，接着填充黑色

第七步：添加程序名

1、这里我们采用原文中的英文字体，并给字体层添加，投影，渐变样式

2、按ctrl+G把图层编组，命名为”logo“，这时它应该在”头部“编组中。

第八步：制作分割线

1、用椭圆形工具(U)绘制一个黑色细状的椭圆，应用高斯模糊 半径为5px，

2、用矩形选区工具(M)选取半边的椭圆，按Del键，删除

3、用矩形工具(U)，在半椭圆的左边画一个1像素的线条，颜色(#2982BE)，接着添加蒙版，用渐变工具(G)在蒙版上拉一个渐变 (黑-白-黑)

 

第九步：添加搜索框

1、在”头部“编组中新建一个编组，命名为”搜索“

2、用圆角矩形工具(U)，绘制一个白色圆角矩形(圆角半径为50px)，添加内阴影，渐变描边

3、添加灰色放大镜(颜色#ABABAB)，文字，字体选”Helvetica“，颜色 #ABABAB，字体大小16px

第十步：添加搜索按钮

1、用圆角矩形工具(U)，绘制搜索按钮(圆角半径为5px)

2、添加文字

3、设置按钮的图层样式,渐变叠加，斜面和浮雕，描边

第十一步：ipad应用程序工具栏

1、用矩形工具(U)，在ipad屏幕的底部绘制一个黑色长方形，命名为“工具条背景”，高度 50px，然后添加渐变样式

2、按ctrl+G编组，命名为“底部工具条”

第十二步：ipad 顶部状态栏

1、把编组“头部”，向下移动24px

2、在ipad的顶部状态栏 默认有 信号，时间，电池3个图标，打开纯色图标ipad_used.psd(本文素材中下载)，把编组“顶部状态栏”，拖到ipad应用程序.psd中并且在图层“ipad”的上方

 

第十三步：纤维背景

1、新建一个编组，名为“App背景”，在编组“底部工具条”下方

2、在编组“App背景”中，用矩形工具(U)绘制一个矩形名为“形状6”，灰色背景((#797979)，大小是ipad的屏幕大小，

3、在图层“形状6”上方新建一图层名为“纤维”，按“D”键使前景色为白色背景色为黑色，应用滤镜 - 渲染 - 云彩，接着滤镜 - 渲染 - 纤维，接着滤镜 - 模糊 - 动感模糊，把不透明度改为“25%”

4、按住Alt键 在图层“形状6”和图层“纤维”之间，点击一下

第十四步：背景光晕

用椭圆工具(U)在图层“形状6”上绘制一个白色圆形名为“光晕”，不透明度为25%，接着滤镜 - 模糊 - 高斯模糊 半径50px

第十五步：新闻订阅栏

1、用矩形工具(U)在编组”底部工具条“下方绘制一个白色的矩形，名为“订阅栏标题”，高度200px，按ctrl+G编组，名为“订阅栏”，

2、在图层“订阅栏标题”下方用矩形工具(U)黑色矩形 名为"阴影"，接着滤镜 - 智能滤镜，接着滤镜 - 模糊 - 高斯模糊 半径4px

3、按ctrl+T,右键，选择”变形“，控制节点，弯曲背景，改不透明度为50

 

第十六步：订阅栏标题

1、用圆角矩形工具(U)，在”阴影“层上方，绘制半径为5px ，白色圆角矩形，名为“订阅栏标题”

2、用路径选择工具(A)，选择右上角两个节点，向左移15px

3、添加投影

第十七步：订阅栏背景

双击图层“订阅栏标题”，设置渐变 (#BEBEBE – #FFFFFF)，描边 白色 1px

第十八步：选项卡

1、复制图层“订阅栏标题”，图层颜色为#014373，描边 1px #016CB4，并右移 55px

2、再复制一次图层“订阅栏标题”，调整图层顺序，设置图层颜色为 #011A2E，描边 1px #0B4B79，并右移 55px

第十九步：新闻标题

添加订阅新闻标题，字体颜色 #034170

第二十步：加入图标

在订阅栏标题上加入"刷新"，“定制”图标(从本文素材中下载)，并给图标添加 渐变，投影样式

第二十一步：加入关闭图标

在订阅栏的右上角选项卡加入关闭图标,操作同上一步

第二十二步：为实现动画效果，添加蒙版

1、选择图标和文字层，按ctrl+G编组，名为“订阅栏标题”，选择其余的图层，按ctrl+G编组，名为“订阅栏背景”

2、在编组“订阅栏背景”上方，用矩形工具(U)，绘制一个矩形，名为“蒙版”，大小为订阅栏的大小，设置图层的混合模式为“正片叠底”

 

第二十三步：添加新闻图片

在图层“蒙版”上方，添加新闻图片和分割线

第二十四步：添加新闻内容

在图片下方添加标题和简介，选择把这个块新闻的图片和文字图层，按ctrl+G编组，名为“文章01”

第二十五步：添加更多新闻内容块

第二十六步：把所有文章块转成一个智能对象

1、把所有的文章块放入一个编组，名为“文章”

2、把该编组转成智能对象

3、在图层“文章”和图层“蒙版”之间，按Alt键左键点击，就创建了一个剪切蒙版，这样所有的文章只用在蒙版区域才能看的到

第二十七步：添加更多订阅栏

1、复制编组“订阅栏”，名为“订阅栏2”，在复制一次，命名为“订阅栏3”，共5组

2、把所有订阅栏都放入“新闻中心”编组

第二十八步：底部工具按钮

1、在编组“底部工具条”(第十一步创建的)中，添加几个图标，首页、刷新、设置、订阅，在每个图标下方添加文字 颜色为 #818181

2、设置图标样式

 

第二十九步：按钮选中状态

1、用矩形工具(U)绘制一个矩形，白色，填充为 14%

2、修改首页图标的样式，和字体颜色

第三十步：添加订阅按钮

1、在编组“新闻中心”内，用圆角矩形工具(U)，绘制一个圆角矩形 半径 5px，并应用“刷新”图标的图层样式，最后加上文字

第三十一步：新闻详情

1、在编组“新闻中心”上新建一个编组名为“新闻详情页”，用矩形工具(U)绘制一个黑色矩形，不透明度 75%

2、添加新闻页的图片和文字

第三十二步：关闭按钮

1、把所有新闻图片和内容 编组 名为“新闻”，把黑色背景命名为“新闻页背景”

2、用椭圆工具(U)，在新闻页的左上角绘制一个圆，背景色 #B9B9B9，描边 2px 白色，在圆上输入字符“X”，

第三十三步：新闻区域蒙版

1、把编组“新闻”转换为智能对象

2、用矩形工具(U)，在智能对象下方，绘制一个黑色矩形，作为蒙版,命名为“蒙版”

3、在智能对象和蒙版两个图层之间，按住Alt键 同时鼠标左键点击，新闻详情页的可视区域就是蒙版的大小了，

到这里ipad应用程序的静态部分已经完成了，接下来我们添加动画效果!第三十四步：打开动画面板

首先介绍一下制作动画效果的简单步骤：A、在动画面板选择对象层 B、拖动时间轴上的手柄到到相应的时间点 C、添加关键帧 D、移动对象到你想要的位置。

技巧:如果要修改位置，首先要选择关键帧

 

“菜单 》 窗口 》 动画 ，打开动画面板

第三十五步：隐藏“新闻详情页”

在动画面板上，选择“新闻详情页”，并展开，点击“不透明度”前的秒表图标，这样就创建了一个关键帧，此时就可以设置图层不透明属性为0

第三十六步：滑动订阅栏

1、在动画面板上 展开编组“订阅栏”中的图层“文章”，把时间轴上的手柄拖到1秒，点击“文章”位置属性前的秒表，创建一个关键帧

2、把时间轴手柄拖到 3秒，在创建一个关键帧，同时向左移动订阅栏

3、在4秒处创建一个关键帧，不做任何操作

4、在6秒处创建一个关键帧，向右移动订阅栏到初始位置

拖动时间轴上左右两边手柄，可以设定动画运行的时间

第三十七步：把“新闻中心”转换成智能对象

1、把编组“新闻中心”转成智能对象

2、复制图层“渐变填充1”，命名为“屏幕蒙版”，并把它拖动到智能对象”新闻中心“上方，接着在蒙版上填充1024x617px黑色区域，作为新闻中心的滑动区域

第三十八步：滑动“新闻中心”

1、选择”新闻中心“，在时间轴上 7秒处 创建一个关键帧

2、在11秒处 创建一个关键帧，拖动”新闻中心“向上，直到出现”添加订阅“的按钮

3、在14秒处 创建一个关键帧，不做任何操作

4、在15秒处 创建一个关键帧，拖动”新闻中心“向下，直到出现第二个订阅栏

5、在17秒处 创建一个关键帧，不做任何操作

6、在19秒处 创建一个关键帧，拖动”新闻中心“向下，直到初始位置

 

第三十九步：设置”新闻详情页“的显示和隐藏

1、选择”新闻详情页“(默认不透明度为0)，在时间轴上 20秒处 创建一个关键帧，不做任何操作

2、在22秒处 创建一个关键帧，把”新闻详情页“的不透明度改100%

3、在28秒处 创建一个关键帧，不做任何操作

4、在29秒处 创建一个关键帧，把”新闻详情页“的不透明度改0

第四十步：滑动新闻详情页

1、选择编组”新闻详情页“中的”新闻“，在时间轴上 24秒处 创建一个关键帧

2、在25秒处 创建一个关键帧，把”新闻“向下拖动到底部

3、在26秒处 创建一个关键帧，不做任何操作

4、在27秒处 创建一个关键帧，把”新闻“向上拖动到顶部初始位置

第四十一步：增加手型

1、拖动手型图片到ps中，放在最顶层，并且去掉白色背景

第四十二步：手型随订阅栏滑动

 

第四十三步：手型随新闻中心滑动

第四十四步：手型随新闻详情页滑动

第四十五步：手型点击效果

本课程在这里就结束了

全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。