791650988
ps设计平板电脑应用程序动画模拟(4)
第二十八步：底部工具按钮 1、在编组底部工具条(第十一步创建的)中，添加几个图标，首页、刷新、设置、订阅，在每个图标下方添加文字 颜色为 #818181 2、设置图标样式 第二十九步：按钮选中状态 1、用矩形工具(U)绘
第十四步：背景光晕
用椭圆工具(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、把所有订阅栏都放入“新闻中心”编组
第五步：应用程序的头部样式
用矩形工具(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”和图层“纤维”之间，点击一下
最终效果图
动画效果 教程素材：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)
第二十八步：底部工具按钮
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中，放在最顶层，并且去掉白色背景
第四十二步：手型随订阅栏滑动
第四十三步：手型随新闻中心滑动
第四十四步：手型随新闻详情页滑动
第四十五步：手型点击效果
本课程在这里就结束了
最终效果图
动画效果 教程素材：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中，放在最顶层，并且去掉白色背景
第四十二步：手型随订阅栏滑动
第四十三步：手型随新闻中心滑动
第四十四步：手型随新闻详情页滑动
第四十五步：手型点击效果
本课程在这里就结束了
