移动平台UI交互设计与开发 第3章photoshop——手机主题界面设计概要课件.ppt
,第3章photoshop手机主题界面设计,移动平台UI交互设计与开发,知识技能目标： 了解手机主题设计的意义 熟悉常用的手机主题制作软件 掌握使用photoshop工具设计手机主题的流程 完成水晶花手机主题界面 完成冬雪的冬天手机主题界面 完成美好生日梦手机主题界面 完成清新雏菊手机主题界面,目录：3.1 手机主题的基础知识3.2 手机主题界面赏析3.3 水晶花主题界面设计3.4 冬雪的冬天主题界面设计3.5 美好生日梦主题界面设计3.6 清新雏菊主题界面设计3.7 知识与技能梳理,3.1 手机主题的基础知识,3.1.1手机主题的含义,手机主题核心是界面，目的是使用户手机界面、铃声更加个性化，满足不同用户群的需求。 打个比方，手机主题就如同Windows的主题功能，用户可以通过下载手机主题一次性定义图标、背景、铃声等，一般不会改变手机内应用程序和系统文件。,3.1.1手机主题的含义,随着手机UI技术的进一步发展与普及，手机界面更注重用户群的审美观念，对美工设计的要求越来越高。一般不同品牌的手机的主题不可通用，各大手机厂商纷纷推出自己的手机主题，来满足用户的审美需求。如图所示：,3.1.2手机主题的制作软件,vs40 Theme Studio:一个Nokia S40系列手机的主题编辑工具，简单易用，实时模拟，支持直接发送SDK和手机上。该软件支持的手机包括Nokia 2610，Nokia 6070，Nokia 6103，Nokia 6125，Nokia 6131和 Nokia 6136 。 ThemesCreatorH:可制作待机图画个性化制作，更多丰富素材在软件中都有详细的提示，用户可根据需要选择。最新官方新版支持K850， Z250， Z320，W960等机型。,3.1.2手机主题的制作软件,oppo的3D炫动主题2.34:一款全三维3D动态主题软件，采用诺基亚未来发布的symbian3和symbian4系统引擎开发，支持设置主题的动画时间、透明度、位置缩放等，并具有DIY主题功能，打造属于自己的3D超酷主题。 UX引擎:一款可以改变目前简单、呆板的手机UI界面而自主研制开发的多媒体中间产品，使用与之配套的能与普通电脑上使用的手机UI制作工具，能够突破传统手机UI界面的限制，通过配置文件的设定、控件属性的设置和JS代码的支持，可以使原本静态、无生气的手机界面变得绚丽多彩。,3.2 手机主题界面赏析,3.2.1可爱型主题界面赏析,祝我生日快乐这款手机主题的风格使用卡通类型，可爱的卡通风格造型和明快的色彩容易被更多的用户所接受，例如“Hello kitty”，受到很多用户喜爱。因此无论在色彩上还是主题人物的选择上，都要针对于这一特定的用户群。色调上，可以选择粉红色系，比较符合这一主题，主题人物上，选择一些受人欢迎的卡通人物，为整体界面设计添色不少。,3.2.2清新风格主题界面赏析,蓝色爱影主题界面设计风格为文艺清新。从用户群来看，这款主题界面主要针对于1525岁读者这一年龄段。 主题以浅蓝色为基色，整个图标设计，简单明了，浅灰色图标不仅与整体风格融合，而且使整个主题界面色彩布局更加匀称，美观，合理。中间的图标设计，对周围的图标有吸附作用，使画面更有整体感。,3.3 水晶花主题界面,3.3水晶花主题界面设计,项目创设 喜欢鲜花的人，都有过“花无百日红”的遗憾，而如今水晶花的出现似乎让鲜花永葆青春的愿望不再是梦想了，它别具一格的美感，也很讨女孩子的喜欢，让很多人都爱不释手。设计思路 在设计制作过程中，先置入一张突出主题的底图吸引用户的注意。由于手机中的信息以文字为主，所以运用了photoshop中的“投影”效果来美化文字。然后利用矩形工具和渐变效果制作被选状态的文字特效。整个作品的色调选择根据“底图”的颜色来确定。,3.4 冬雪的冬天主题界面,3.4冬雪的冬天主题界面设计,项目创设 冬天是个美丽的季节，尤其是在大雪纷飞过后。冬天的大雪给我们带来了许多珍贵的回忆片段，对于冬雪，每个人应该都会有独特的感觉以及无限的遐想。设计思路 使用矩形选框工具，内衬圆形的图案绘制，制作出手机主题的背景效果。导入“雪花”的图标样式，加上灰色的菜单艺术字体，设计出手机主题的主界面。,3.5 美好生日梦主题界面,3.5美好生日梦主题界面设计,项目创设 每个人的成长路上都飘荡着大大小小的梦，每一处的梦都会发出不同颜色的光，这些梦总会在失意时击中我们，让我们重新找到前进的方向，即使只是简单的生日梦，也同样值得我们珍藏。设计思路 采用photoshop中的素材导入、图层的操作、图层样式的设置、文字工具和打组效果设计一款卡通类型的手机主题界面，吸引年轻的用户群。,3.6 清新雏菊主题界面,3.6清新雏菊制作,项目创设 随着智能手机的开发和普及，人们对手机界面的要求不仅仅局限于应用功能，更多的会注重界面的美观性，优秀的界面会使用户在进行交互时心情愉悦，而设计师进行界面设计时，常通过某一具体事物来产生设计灵感，雏菊因其清新淡雅受很多人的喜爱。设计思路 采用图层操作、文字工具、参考线的设置和打组效果的创建等知识点，培养读者对手机界面整体布局的设控能力。,3.7 知识与技能梳理,关于手机主题界面的制作，首先要确定用户的使用人群，确定主题风格，确保界面风格保持一致，然后制作好整体规划，添加新创意，接着运用交互动画，增强与用户之间的沟通。 重要工具：选框工具、移动工具、文字工具、渐变工具、“属性”面板，定义图案等。 核心技术：通过已有素材，综合运用选择、移动、自由变换和属性设置、图层面板操作、渐变工具的设置、定义图案及图案的填充等制作手机主题界面。,1、在使用“画笔工具”时，按键可减少画笔的直径，按键可增加画笔的直径，按Shift+组合键可减少画笔的硬度，按Shift+组合键可增加画笔的硬度； 2、在使用“椭圆选框工具”创建选取的时候，按住Shift键拖拽鼠标，可以创建正圆形，按Shift+M组合键可以在“椭圆选框工具”和“矩形选框工具”之间进行快速切换； 3、在定义图案的时候，必须使用没有羽化的矩形进行定义，如果对矩形选区进行羽化，那么“定义图案”命令是不可用的； 4、界面制作过程中，涉及的图层较多的时候，为了操作方便，可以进行分组管理。 实际应用：卡通、浪漫、商务、中性等类型的智能手机主题界面的制作。,实训2,一、实训目的 1、巩固读者对于手机主题界面设计的学习，熟练掌握本阶段所学Photoshop工具； 2、通过实训，让读者运用Photoshop软件自己制作手机主题，更加透彻地掌握手机主题制作的方法和设计的感觉； 3、在实训过程中，读者可加入自己的想法和创意，只有具备创新精神和独特审美能力，才能设计出令人耳目一新的手机主题界面。,实训2,二、实训内容 1、粉红泡泡 参考3.3、3.4节所学内容制作“粉红泡泡”手机主题。 要点提示：使用钢笔工具绘制四叶草。使用渐变工具绘制相机的倒影效果。图层样式在各图层的应用。使用渐变工具绘制高光效果。 2、中国风 参考3.5、3.6节所学内容制作“中国风”手机主题。 要点提示：使用图层创建工具与基本操作，导入素材，使用“文字”工具，对文字进行简单编辑和处理。 【素材所在位置】 光盘/第三章素材/实训二/粉红泡泡 光盘/第三章素材/实训二/中国风,实训2,三、最终效果,粉红泡泡,中国风,期待你的创意设计,
