Photoshop第六章-智能手机App界面设计.pptx

1、第六章 智能手机App界面设计第六章 智能手机AppApp界面设计项目情境：风起云涌的高科技时代，智能终端的普及不仅推动了移动互联网的发展，也带来了移动应用的爆炸式增长。智能手机已经成为生活必需品之一，而智能手机的普及推动了手机App应用的发展。第六章 智能手机AppApp界面设计项目概要：智能手机的用户界面及体验受到用户越来越多的关注，如何能够让用户使用的更加流畅，更加舒适，其中，App设计就作为最为迫切的需求，推到了每个设计者面前。通过对本章的学习，可以快速掌握用户界面、按钮、控件的制作方法。第六章 智能手机AppApp界面设计项目学习目标：本章主要是利用Photoshop CS6强大功能

2、来制作手机App应用。从最基础的UI界面开始，通过循序渐进的方式逐一介绍关于App应用的知识。通过对本章的学习，可以了解关于App、UI的概念，掌握如何制作出美观、简洁、方便的用户界面、按钮、控件。01绘制用户界面第六章 智能手机AppApp界面设计任务情境：用户界面是否美观，直接影响着使用者的心情，进而影响其对软件的直接印象。界面中功能菜单的布局是否合理，是否符合大众的使用习惯，都直接影响着使用者对此软件的喜爱与否。首先让使用者喜欢上界面，才会促使使用者去了解软件中强大的功能，因此，界面的布局是非常重要的。通过Photoshop CS6的强大功能来设计一款美观的用户界面是本任务的主要作用。第

3、六章 智能手机AppApp界面设计任务实施：1、执行菜单栏中的【文件】/【新建】命令，在弹出的对话框中设置各参数及选项，如图6-1所示图6-1第六章 智能手机AppApp界面设计2、单击图层面板下方的创建新图层按钮，得到图层1，设置前景色为黑色，按下ALT+DELETE键，为图层填充黑色，如图6-2所示图6-2第六章 智能手机AppApp界面设计3、执行菜单栏中的【文件】/【打开】命令，打开素材1.jpg，使用移动工具，将素材1移动到“用户界面”文件，得到图层2，效果如图6-3所示。图6-3第六章 智能手机AppApp界面设计4、单击图层面板下方添加图层蒙版按钮，为图层2添加图层蒙版，单击工具

4、箱中渐变工具，单击工具选项栏中渐变编辑器按钮，打开渐变编辑器如图6-4所示，设置黑白渐变，为图层2蒙版填充渐变，得到如图6-5所示效果。图6-4第六章 智能手机AppApp界面设计图6-5第六章 智能手机AppApp界面设计5、单击图层调板中创建新组按钮，创建组1，单击工具箱中横排文字工具，输入文字“City，Life，北京，城市生活，排列方式”，如图6-6所示。图6-6第六章 智能手机AppApp界面设计6、单击图层面板下方的创建新图层按钮，在组1中创建新图层，得到图层3，单击工具箱中椭圆选框工具，按下SHIFT键的同时，拖动鼠标，绘制圆形选区，设置前景色为白色，按下ALT+DELETE键，

5、为圆形选区填充白色。按下ALT键的同时，移动鼠标，重复5次，复制出另外5个白色圆形，CTRL+D取消选区，效果如图6-7所示。图6-7第六章 智能手机AppApp界面设计7、单击图层调板中创建新组按钮，创建组2，单击图层面板下方的创建新图层按钮，在组2中创建新图层，得到图层4，单击工具箱中矩形选框工具，按下SHIFT键的同时，拖动鼠标，绘制正方形选区，设置前景色为#ff0000（红色），按下ALT+DELETE键，为正方形选区填充红色，CTRL+D取消选区，得到如图6-8所示效果。在组2中新建图层5，按住CTRL键的同时，单击图层4缩略图，载入图层4选区，执行菜单栏中的【编辑】/【描边】命令，

6、设置参数，如图6-9所示，CTRL+D取消选区，单击工具箱中移动工具，移动白色边框，得到效果如图6-10所示。第六章 智能手机AppApp界面设计图6-8图6-9第六章 智能手机AppApp界面设计8、重复步骤7，设置前景色为#fff600（黄色），分别得到图层6，图层7。9、重复步骤7，设置前景色为#00a7ed（蓝色），分别得到图层8，图层9。10、重复步骤7，设置前景色为#007c4c（绿色），分别得到图层10，图层11。得到效果如图6-11所示。第六章 智能手机AppApp界面设计图6-10图6-11第六章 智能手机AppApp界面设计11、单击工具箱中横排文字工具，输入文字“18：3

7、0”，得到效果如图6-12所示。图6-12第六章 智能手机AppApp界面设计12、在组2中，新建图层12，设置前景色为ff5400，单击工具箱中的圆角矩形工具，工具选项栏设置如图6-13所示，绘制橘色圆角矩形，输入文字“其他城市”，得到效果如图6-14所示。图6-13第六章 智能手机AppApp界面设计图6-14第六章 智能手机AppApp界面设计13、单击图层调板中创建新组按钮，创建组3，设置前景色为000000(黑色)，输入文字“同城交友”，单击“同城交友”文字图层，拖拽至图层调板下方的创建新图层按钮，得到同城交友副本文字图层，改变文字颜色为ff0000（红色），单击工具箱中的移动工具，

8、移动同城交友副本文字图层的位置，得到效果如图6-15所示。图6-15第六章 智能手机AppApp界面设计14、重复步骤13，分别输入文字“美食文化”、“景点”、“地图”、“实时路况”，文字大小有所改变，得到效果如图6-16所示。图6-16第六章 智能手机AppApp界面设计15、在组3中，新建图层13，设置前景色为ffffff（白色），单击工具箱中的直线工具，工具选项栏设置如图6-17所示，绘制如图6-18所示白色直线。双击图层13弹出图层样式对话框，为图层13添加投影效果，参数设置如图6-19所示，投影效果如图6-20所示图6-17第六章 智能手机AppApp界面设计图6-18第六章 智能手

9、机AppApp界面设计图6-19第六章 智能手机AppApp界面设计图6-20第六章 智能手机AppApp界面设计16、输入文字“北京”，新建图层14，设置前景色为白色，单击工具箱中的直线工具，工具选项栏设置如图6-21所示，绘制如图6-22所示白色直线。任务1最终效果如图6-23所示。图6-21图6-22第六章 智能手机AppApp界面设计图6-23第六章 智能手机AppApp界面设计任务拓展请为“天天购”购物网站“触屏版”设计一款个性化用户界面。第六章 智能手机AppApp界面设计任务总结通过对任务1的学习，掌握用户界面的大小及设计方法，掌握PhotoShop CS6中图层及描边命令的使用

10、。02制作经典图标第六章 智能手机AppApp界面设计任务情境：图标是具有指代意义的符号，它具有高度浓度、简便快捷传达信息的特性，其应用范围非常广泛，任何一款App应用都会涉及到图标，本任务就是应用 PhotoShop CS6中一些简单工具制作一款经典图标。第六章 智能手机AppApp界面设计任务实施：1、执行菜单栏中的【文件】/【新建】命令，在弹出的对话框中设置各参数及选项，如图6-24所示图6-24第六章 智能手机AppApp界面设计2、按下CTRL+R键打开标尺，添加横向、竖向两条参考线，单击图层面板下方的创建新图层按钮，得到图层1，设置前景色为#a3a3a3，单击工具箱中的椭圆选框工具

11、，将鼠标光标放在参考线确定的中心位置，按下ALT+SHIFT键，得到圆形选区，如图6-25所示，按下ALT+DELETE键，填充前景色，CTRL+D取消选区，得到效果如图6-26所示。双击图层1，弹出图层样式对话框，为图层1添加投影效果，参数设置如图6-27所示，得到效果如图6-28所示。第六章 智能手机AppApp界面设计图6-25图6-26第六章 智能手机AppApp界面设计图6-27图6-28第六章 智能手机AppApp界面设计3、新建图层2，设置前景色为白色，单击工具箱中的椭圆选框工具，将鼠标光标放在参考线确定的中心位置，按下ALT+SHIFT键，得到圆形选区，按下ALT+DELETE

12、键，填充前景色，CTRL+D取消选区，得到效果如图6-29所示。图6-29第六章 智能手机AppApp界面设计4、新建图层3，单击工具箱中的椭圆选框工具，将鼠标光标放在参考线确定的中心位置，按下ALT+SHIFT键，得到圆形选区，如图6-30所示，单击工具相中的矩形选框工具，按下ALT键的同时拖动鼠标，将圆形选区的下半部减去，得到如图6-31所示选区，继续使用矩形选框工具，按下ALT键的同时拖动鼠标，将圆形选区的右半部减去，得到如图6-32所示选区。图6-30第六章 智能手机AppApp界面设计图6-31图6-32第六章 智能手机AppApp界面设计5、单击工具箱中渐变工具，设置前景色为#00

13、98f3，设置背景色为#005cbd，单击工具选项栏中渐变编辑器按钮，弹出渐变编辑器，选择从前景色到背景色渐变，参数设置如图6-33所示。选中图层3，填充渐变，CTRL+D取消选区，得到效果如图6-34所示。图6-33第六章 智能手机AppApp界面设计图6-34第六章 智能手机AppApp界面设计6、单击图层3，拖动图层3到图层调板下方的创建新图层按钮，得到图层3副本，执行菜单栏中的【编辑】/【变换】/【垂直翻转】命令，使用移动工具，移动至如图6-35所示位置。图6-35第六章 智能手机AppApp界面设计7、单击图层3副本，拖动图层3副本到图层调板下方的创建新图层按钮，得到图层3副本2，执

14、行菜单栏中的【编辑】/【变换】/【水平翻转】命令，使用移动工具，移动至如图6-36所示位置。图6-36第六章 智能手机AppApp界面设计8、单击图层3副本2，拖动图层3副本2到图层调板下方的创建新图层按钮，得到图层3副本3，执行菜单栏中的【编辑】/【变换】/【垂直翻转】命令，使用移动工具，移动至如图6-37所示位置。按下CTRL键的同时单击图层3副本2缩略图，载入图层3副本2选区，设置前景色为3ba600，背景色为135600，单击工具箱中渐变工具，为图层2副本2填充渐变，得到效果如图6-38所示。图6-37第六章 智能手机AppApp界面设计图6-38第六章 智能手机AppApp界面设计9

15、、选中图层3副本3，按下CTRL+E键，重复三次，将四个图层合并为图层3，如图6-39所示。图6-39第六章 智能手机AppApp界面设计10、新建图层4，设置前景色为白色，单击工具箱中的椭圆选框工具，将鼠标光标放在参考线确定的中心位置，按下ALT+SHIFT键，得到圆形选区，按下ALT+DELETE键，填充前景色，CTRL+D取消选区，得到效果如图6-40所示。双击图层4，弹出图层样式对话框，为图层4添加内阴影效果，参数设置如图6-41所示，得到效果如图6-42所示。图6-40第六章 智能手机AppApp界面设计图6-41图6-42第六章 智能手机AppApp界面设计11、分别打开素材2.psd、3.psd、4.psd、5.psd，使用移动工具，将素材移动至如图6-43所示位置。图6-43第六章 智能手机AppApp界面设计12、输入文字“查询”、“在线咨询”、“留言评论”“购物车”，任务2最终效果如图6-44所示。图6-44第六章 智能手机AppApp界面设计任务拓展请为“天天购”购物网站“触屏版”设计一个“自主购物”图标。第六章 智能手机AppApp界面设计任务总结通过对任务2的学习，掌握图标的设计方法，掌握PhotoShop CS6中渐变及图层样式的使用。