UI界面设计(txt+pdf+epub+mobi电子书下载)


发布时间:2020-09-06 08:07:20

点击下载

作者:张小玲,张莉

出版社:电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

UI界面设计

UI界面设计试读:

前言

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计,主要包括三个部分:交互设计、用户研究、界面设计。UI界面设计就像工业产品中的工业造型设计一样,是产品的重要买点之一。一个友好、美观的界面会给人带来舒适的视觉享受,拉近人与产品的距离,为产品创造卖点。UI界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式,并且配合软件实现出来,为最终用户而设计,是纯粹的、科学性的艺术设计。随着科技的不断发展,互联网迅猛发展和普及,各类电子设备功能越来越强大,基于计算机、手机、平板电脑等电子终端系统的相关软件应运而生,这些产品设计的人性化已不仅仅局限于硬件的外观,软件系统已成为用户直接操作和应用的主体,它会因美观实用、操作便捷而为用户所青睐。作为人机对话的主要途径,UI界面设计的重要性不言而喻。

2013年全国UI设计人才需求缺口有35万,未来10年预计该需求将达到100万。面对这么大的一个人才市场,2012年,重庆正大软件职业技术学院成功申请重庆市高等教育教学改革研究项目《构建“技艺融合”课程体系,实现网页设计师专业方向创新人才培养》,希望通过该项目构建系统、完善的UI界面设计人才培养体系,为社会输送新鲜血液,促进网络市场的发展。

为进一步总结和推广“技艺融合”课题研究成果,课题组特编写本教材。书中充分体现理论够用、加强实践的高职教学理念,针对UI图像界面设计,从用户研究、交互设计入手,到灌输视觉设计理念,再结合实例对设计全过程进行剖析、归纳和演绎,将“理论知识”、“软件技术”与“艺术设计”各项元素充分融合。通过课题组的精心准备,本教材具有以下特点。

1.案例经典,呈现形式符合认知规律。在理论知识介绍之后,本教材设计了案例学习和典型实战,由简单到复杂、逐步递进地讲述了UI界面设计经典案例,在案例教学中深入对理论知识的学习理解,透视UI界面设计整个流程及技巧。

2.技艺融合,突出职业性,强化综合适应能力的培养。本书将Photoshop CC软件设计制作技术与艺术设计能力和产品策划、用户体验融合在一起,采用任务驱动的教学模式,按照项目任务工作流程构建教学体系,利于读者构建自身技艺融合的经验体系。在任务完成后,设计了知识拓展与能力拓展模块,保证知识的拓展性和丰富性,同时培养学生知识的综合运用能力和行业意识。

3.产教结合,结合企业实际项目编写,突出实用性、实践性。教材编写过程中,结合重庆正大恒领网络科技有限公司、重庆猪八戒网络有限公司的实际项目完成,保证项目的实用实践性强。

在本书的编写过程中,主编张小玲负责全书架构设计、部分章节的编写及全书统稿,主编张莉负责全书统筹安排及审稿,李欣欣、陶薇薇、杨桂宇任副主编,阚洪、严伟、石磊参与了部分章节的编写。本书的编写得到了重庆正大软件职业技术学院互联网工程系全体老师的大力支持和帮助,也得到了许多学生的支持,在此感谢他们对本书形成过程中提供的各种贡献。

由于编者水平有限,书中难免会有疏漏和不足之处,敬请大家批评执政,以期共同进步。编 者

第一部分 知识准备

第1章 UI界面设计相关知识

1.1 UI界面设计

1.1.1 UI设计的概念

UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。UI设计可以理解为协调用户与界面之间关系的设计,包括交互设计、用户研究、界面设计三部分。

一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑或手机等设备的距离,为商家创造卖点。界面设计不是单纯的美术绘画,它需要定位使用者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。

界面设计是人与机器之间传递和交换信息的媒介,是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。它包括硬件界面和软件界面,具体包括软件启动封面设计、软件框架设计、按钮设计、面板设计、菜单设计、便签设计、图标设计、滚动条及状态栏设计、安装过程设计、包装及商品化设计等。

用户界面是一个人机交互系统,它包括硬件(物理层面)和软件(逻辑层面)两方面。一般来说,人机交互工程的目标是打造一个让用户操作简单、便捷的界面,也就是说,UI 指的不是简单的用户和界面,还包括用户和界面的交互。那么作为 UI 设计师,要做的就不只是设计出美观的界面,还要设计出让用户用起来舒服、操作简单的界面。无论是PC端还是移动端设备无不充斥着各种用户界面。

人机交互图形化用户界面设计即GUI(Graphical User Interface),准确来说 GUI 就是屏幕产品的视觉体验和互动操作部分。GUI 是一种结合计算机科学、美学、心理学、行为学及各商业领域需求分析的人机系统工程,强调人-机-环境三者作为一个系统进行总体设计。GUI应用领域主要有:手机通信移动产品、电脑操作平台、软件产品、PDA产品、数码产品、车载系统产品、智能家电产品、游戏产品及产品的在线推广。1.1.2 UI设计的流程

UI设计包括交互设计、用户研究、界面设计三个部分。基于这三部分的UI设计流程从产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)的要求不断提升产品可用性。UI设计基本流程如图1-1所示。图1-1 UI设计基本流程

1.基础调研(1)竞争产品分析。在设计一个产品之前我们应该明确什么人用(用户的年龄、性别、爱好、收入、教育程度等)、什么地方用(PC机/智能手机/平板电脑)。上面的任何一个元素的改变,其结果都会发生相应的改变。寻找市场上的竞争产品,挑选3~5款进行解剖分析。整理竞争产品的功能规格,并分析规格代表的需求,需求背后的用户和用户目标;分析竞争产品的功能结构和交互设计,从产品设计的角度解释其优点、缺点及其原因,成为我们产品设计的第一手参考资料。同类产品比我们提前问世,我们要比它做得更好才有存在的价值。那么单纯地从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。只能说哪个更合适,更合适于最终用户的就是最好的。彻底理解如何调研市场、竞争对手、差异性以及机会,这对设计师来说非常重要。(2)领域调研。结合上述分析基础和资料,纵观领域竞争格局、市场状况,利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。(3)产出物。相应的对比分析文档和领域调研报告。

2.产品分析

通过分析上面的调研,进入产品分析阶段。分析自身最突出的功能是什么,和同类产品比较的优势是什么,确定哪些业务,确定的业务功能又将如何展现等。这个阶段要做的事情如下。(1)产品定位。从软件提供者的角度分析产品推出的意义和重点关注的方面,实际考量、丰满决策层的思想,明确列出产品定位,通过讨论修缮取得决策层的认可。(2)用户分析。结合竞争产品的分析资料,采用定性分析的方法,获得对产品目标用户在概念层面的认识。(3)产品概述。以软件提供的身份,以最简短的文字,向用户介绍产品,突出产品对用户的价值。避免功能点的简单罗列,而应该在归纳总结的基础上突出重点。(4)功能需求规格整理。在归纳关键功能的基础上,结合竞争产品规格整理的领域认识,从逻辑上梳理需求规格列表,重在逻辑关系清楚、组织和层级关系清晰,划定项目(设计和研发)范围。(5)产出物。形成用户分析文档和产品概述、功能规格列表。

3.交互设计(功能结构和交互流程设计)(1)产品概念模型分析。从产品功能逻辑入手,结合对常见软件的经验积累和竞争产品的认识,加上对用户的理解,为产品设计一个尽量接近用户对产品运行方式理解的概念模型,成为产品设计的基础框架。(2)功能结构图。在产品概念模型的基础上丰富交互组件,并理顺交互组件之间的结构关系。(3)使用场景分析。模拟典型用户执行关键功能达到其目标的使用场景。(4)交互流程分析。模拟在上述概念模型和功能结构决定的产品框架之中,支持使用场景的关键操作过程,如点击链接的步骤和导向性指示。(5)产出物。形成产品设计文档的交互设计部分。

4.原型设计(信息架构和界面原型设计)(1)信息架构和界面原型设计。设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系,以支持用户对控件或控件组所代表的功能的理解,对用户操作的明确引导;所有界面设计成为一套完整的可模拟的产品原型。(2)设计要点说明。对界面设计的重点添加说明,帮助涉众对设计的理解。(3)产出物。产品设计文档的原型设计部分。

5.详细设计

完善设计细节、交互文本和信息设计。(1)设计和逻辑说明。对界面控件/控件组/窗口的属性和行为进行标准化定义,梳理完整的交互逻辑,用状态迁移图或伪代码形式表示。(2)产出物。产品设计文档的详细设计部分。

6.设计维护(研发跟踪和设计维护)

改正以后的方案,就可以将它推向市场了,但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想,为以后的升级版本积累经验资料。(1)语言文档整理。设计通过评审之后,把产品中所有的交互文本整理成Excel文档,预备研发工作。(2)研发跟踪维护。进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等。(3)产出物。形成产品语言文档,设计调整维护。1.1.3 UI界面设计的规范

1.认识UI界面设计的规范

一个产品应提供一项核心功能或服务,在进行UI设计、交互设计、内容排版时也应围绕这个目标来进行。在团队合作中UI界面设计的规范尤为重要,为了使最终设计出来的UI界面风格一致化,开发者之间相互协作更轻松,通常要先制定界面设计规范。

UI界面设计的规范贯穿以用户为中心的设计指导方向,根据产品的特点而制定,以达到提升用户体验,控制产品设计质量,提高设计效率的目的。UI界面设计规范适合界面设计师,用户体验设计师,前端开发技术工程师,发布支持人员,运营编辑人员的参照。

UI界面设计规范可以统一识别,规范能使同一类型设计部件具有统一性,防止混乱,甚至出现严重错误,避免用户在浏览时理解困难;相同属性单元、模块可执行此标准重复使用,减少无关信息,就是减少对主体信息传达的干扰,利于阅读与信息传递;视觉设计师交接时,可以减少沟通成本,在项目中途增加人手时,查看标准能使工作上手时间更快,减少出错。

2.UI界面设计视觉规范的构成

制定视觉规范前,先要了解其构成要素有哪些,再着手建立。这里从以下几个方面来梳理一下。(1)界面设计总体规范。

✧ 界面的整体尺寸。比如网站、APP开发设计的分辨率,一般会从的典型界面入手,从而确定整套界面尺寸规范。

✧ 典型内容区的尺寸。比如网页的导航、版权、内容模块等的尺寸;APP中的图标、控件等的尺寸大小等。目前市面上常用系统的规范基本上是固定的,图1-2所示是IOS与Android系统的APP常用规范。(2)文本规范。确定典型页面不同区域的字体,字体颜色,字号大小。(3)间距边距规范。确定内容元素之间的间距以及内容元素四周的边距。图1-2 APP常用规范(4)按钮规范。确定典型功能按钮的尺寸、样式和按钮内图标、文字的大小和位置,如图1-3所示。图1-3 不同大小按钮高度、左右边距、字体字号要求(5)图片规范。确定典型模块的图片尺寸、样式。(6)其他规范。根据产品具体需求涉及的功能,确定其他可能会出现的视觉元素规范,比如弹窗样式尺寸、侧边栏的样式与尺寸等。1.1.4 UI界面设计常用工具

1.Photoshop

界面设计是一个新兴的领域,已经受到越来越多的软件企业及开发者的重视,虽然暂时还未成为一种全新的职业,但相信不久一定会出现专业的界面设计师职业。UI设计要更有效率,捷径就是从最常使用的Photoshop软件出发。Photoshop软件更新很快,目前Photoshop CC版本比较盛行,用好Photoshop CC,会在设计效率方面带来很大提升。

Photoshop并非一个单纯的图像编辑软件,它的应用领域涉及图像、图形、文字、视频、出版等各个方面,非常广泛。它常见的应用主要有:平面设计、修复照片、广告摄影、影像创意、艺术文字、网页制作、建筑效果图后期修饰、绘画、绘制或处理三维帖图、婚纱照片设计、视觉创意、图标制作、界面设计等。目前在影视后期制作及二维动画制作方面也有所应用。

2.Illustrator

Illustrator是美国Adobe公司推出的专业矢量绘图工具,是出版、多媒体和在线图像的工业标准矢量插画软件。它集图形设计、文字编辑及高品质输出于一身,广泛应用于平面广告设计、网页图形制作、插画制作及艺术效果处理等诸多领域。强大的功用和简洁的界面设计风格,为线稿提供高精度和控制,适合任何小型设计和大型复杂项目,目前已经占据了全球矢量编辑软件中的大部分份额,据不完全统计,全球有97%的设计师在使用Illustrator进行艺术设计,尤其基于Adobe公司专利的PostScript技术的运用,Illustrator已经完全占领专业的印刷出版领域。

3.Fireworks

Adobe Fireworks是专业的网页图片设计、制作与编辑软件。它不仅可以轻松制作出各种动感的gif、动态按钮、动态翻转等网络图片,更重要的是Fireworks可以轻松地实现大图切割,让网页加载图片时,显示速度更快!让你在弹指间便能制作出精美的矢量和点阵图、模型、3D 图形和交互式内容,无须编码,直接应用于网页和移动应用程序!Fireworks可以加速Web设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。在Fireworks中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和Flash的其他资源,然后直接置入Dreamweaver中轻松地进行开发与部署。

4.CorelDraw

CorelDraw是加拿大Corel公司的平面设计软件,该软件是Corel公司出品的矢量图形制作工具软件,这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功能。它包含两个绘图应用程序:一个用于矢量图及页面设计,一个用于图像编辑。这套绘图软件组合带给用户强大的交互式工具,使用户可以创作出多种富有动感的特殊效果及点阵图像,即时效果在简单的操作中就可得到实现——而不会丢失当前的工作。通过CorelDraw全方位的设计及网页功能可以融合到用户现有的设计方案中,灵活性十足。该软件提供的智慧型绘图工具以及新的动态向导可以充分降低用户的操作难度,允许用户更加容易、精确地创建物体的尺寸和位置,减少点击步骤,节省设计时间。

1.2 UI界面设计与用户体验

1.2.1 UI界面设计与用户体验

所谓“用户体验”,是一个整体的感知过程,研发序列中的每一个环节都可能对其产生影响,所以它不应该仅由设计部门来考虑,更不应该仅局限在界面层面上。UI界面设计属于用户体验的一部分。UED是User Experience Design的缩写,即用户体验设计。UED团队包括:交互设计师(Interaction Designer)、视觉设计师(Vision Designer)、用户体验设计师(User Experience Designer)、用户界面设计师(User Interface Designer)和前端开发工程师(Web Developer)等。

用户界面是信息交流的平台,产品UI界面设计的信息应能够准确地被用户认知、理解,在用户和设计师之间形成心理上有关审美意识和产品功能等信息交流。因而作为时代经济、科技和人文精神的载体——产品应更加关注用户体验,使得设计的产品能够简单、易用,让人产生愉快的、有趣的体验。一切不考虑用户体验的产品,都是失败的。

基于用户体验的产品界面设计是以用户研究为中心,从产品使用者的角度出发,设计的对象不仅仅是产品本身,而是整个用户体验的过程,贯穿产品的整个生命周期。设计师需要更多地关注用户,研究用户,理解和尊重不同的文化,通过设计过程来影响产品的体验质量。1.2.2 影响用户体验的因素

随着互联网产品的不断发展,越来越多的人意识到了用户体验的重要性,越来越多的公司成立了用户体验设计相关部门,并且职位划分已相当细致。产品策略、用户界面、技术和运营都会对用户体验产生影响,如图1-4所示。图1-4 影响用户体验的因素

1.产品策略

策略是产品的灵魂。产品策略除了决定产品的具体功能和业务外,还对体验有重大的影响。不好的策略可能会伤害用户体验。

评价指标:(1)功能设置和用户使用产品的目标是否一致?(2)功能是否简单明了、重点突出?(3)功能的引导性是否明确?

2.用户界面

影响用户体验的第二个重要因素,就是用户界面,用户界面对应的是产品的品牌形象和视觉设计。在技术雷同的时代,唯有UI设计可以拉开产品的层次。在这个层面上,流程、控件、交互、排版、视觉等诸多因素都有可能影响到最终的体验。

用户界面的评价指标如下。(1)界面设计是否明确表达了主题?产品是关于美食的还是医疗的,能不能让人一目了然?(2)产品的品牌形象、视觉识别系统是否能合理的展现?(3)界面设计是否新颖,有视觉冲击力?(4)界面质感和材质运用是否合理?(5)界面色彩搭配是否和谐得当?(6)界面是否有视觉亮点、兴趣点?(7)界面设计是否规范?(8)界面逻辑层次关系是否清晰?(9)界面是否有明确的视觉引导性?

3.技术

技术是实现产品的工具,也是产品正常运行的基础。如果技术方面出了问题,同样会对最终的体验产生不良影响,导致产品的操作和交互出现问题。这个因素中具体的表现也很多,如前端页面对各种浏览器的兼容性,代码运行效率,服务稳定性等。(1)产品整体的导航链接是否便捷、正确,跳转是否顺畅?(2)操作按钮是否明晰?(3)导航层级关系是否逻辑清晰?(4)完成界面操作的效率是否高效?

4.运营

正所谓“策划为魂,营销为王”,一个好的产品,在拥有了好的策略、好的界面和先进的技术支撑以后,还需要配合好的运营手段,才能够真正使其拥有好的体验。比如“一个电子商务类产品的运营就要考虑它的价格设置是否符合用户的需求”、“产品的付款流程是否清晰”等因素。

1.3 知识拓展

1.3.1 Photoshop CC入门

Photoshop CC工作界面布局简单,按从上到下、从左到右的顺序观察,依次是菜单栏、选项栏、工具箱、文档窗口、面板及状态栏。(1)新建文件。

方法一:启动Photoshop CC软件后,执行菜单命令:【文件】|【新建】。

方法二:启动Photoshop CC软件后,按快捷键【Ctrl+N】。(2)打开文件。

方法一:启动Photoshop CC软件后,执行菜单命令:【文件】|【打开】。

方法二:启动Photoshop CC软件后,按快捷键【Ctrl+O】。

方法三:右击图像文件选择打开方式:Photoshop CC。(3)保存文件。

方法一:执行菜单命令:【文件】|【存储】。

方法二:按快捷键【Ctrl+S】、【Ctrl+Shift+S】。1.3.2 Photoshop CC精彩新功能

Photoshop 是最优秀的界面设计工具之一,图1-5所示为“Photoshop CC工作界面”。Photoshop CC版本改进的部分很多,在各项功能上都作了很多更新:支持智能采样,最优图像分辨率增强;全新的智能锐化滤镜,实现更快地锐化图像,同时最大限度地减少边缘光晕效果,并提供精确的降噪控制;还原因相机抖动而导致的模糊图像;集成Camera Raw 8服务;添加ico格式支持文件;添加Nik software全系列特效滤镜文件;卸载不会删除Adobe公共文件夹,确保卸载不影响其他Adobe软件等。这里抽取部分常用的、偏向视觉设计方面的新功能,比如样式直接转成CSS、可编辑的圆角矩形、无损图片拉伸等做简单的介绍。图1-5 Photoshop CC工作界面

1.复制CSS——样式转代码神器

可以直接复制CSS代码到其他程序中使用。复制 CSS可从形状或文本图层生成级联样式表(CSS)属性。CSS 被复制到剪贴板并且可以粘贴到样式表中,在“图层”面板中,执行以下操作之一,再将代码粘贴至样式表文档即可:(1)右击形状/文本图层或图层组,并从上下文菜单中选择“复制 CSS”。(2)选择形状/文本图层或图层组,并从“图层”面板菜单中选择“复制 CSS”。

2.可编辑的圆角矩形

Photoshop CC可以生成4个不一样圆角的矩形,圆角设置更加精准。在PhotoshopCC中绘制矩形,弹出属性面板,通过调整属性面板里的圆角数值,选择不同的圆角大小,如果是正方形的话,直接就能调整为圆形,如图1-6所示。图1-6 可编辑的圆角矩形

3.多重形状和路径选择

使用Photoshop CC提供的多重形状和路径选择,可以同时选取多个路径、形状和矢量蒙版,不需按多次鼠标即可完成更多任务。即使在拥有许多路径的多图层复杂图像文件中,也可以使用新的滤镜模式,直接在画布上锁定路径(跨越所有图层),如图1-7所示。图1-7 多重形状和路径选择

4.简易绘制虚线

Photoshop CC不需要手工计算像素来进行绘制虚线,虚线绘制变成基础控件,如图1-8所示。图1-8 虚线

5.更精细的描边

描边能精确到0.x,能做更加精致的效果,如图1-9所示。图1-9 精细的描边

6.无损图片拉伸

通常的工具对数码图片进行放大时,总会降低图片的品质,而这个“保留细节”就是为解决这个问题而出现的。当然这个是相对的,只是通过算法填充放大的部分,尽可能地提高图片的品质。程序最大的特色是可以对图片进行放大而没有锯齿,尽量避免失真,如图1-10所示。图1-10 保留细节1.3.3 图像常用基本操作

1.图像模式

在实际工作中通常会根据实际情况选择不同的图像模式,图像模式调整或转换的办法是执行菜单命令:【图像】|【模式】|【……】,如图1-11所示。下面简单介绍一下常见的几种模式。

位图:位图模式是1位深度的图像。它只是黑和白两种颜色。它可以由扫描或置入黑色的矢量线条图像生成,也能由灰度模式或双色调模式转换而成。其他图像模式不能直接转换为位图模式。相比其他模式,位图更小。在使用素材的时候会遇到这种格式的文件,有时为了控制存储文件大小也可以转化为此模式。

灰度:灰度模式是8位深度的图像模式。也就是2^8,2^8=256,在全黑和全白之间插有254个灰度等级的颜色来描绘灰度模式的图像。通俗地说灰度模式的图像就是无彩色的、黑白灰的。所有模式的图像都能换成灰度模式,甚至位图也可转换为灰度模式。Photoshop几乎所有的功能都支持灰度模式。图1-11 图像模式

索引:索引颜色模式是8位颜色深度模式,它最多只能拥有256种颜色。它的信息量小,又可制动画,所以它的图像和动画被广泛地用于网页制作上。它可制成透明图像,在网页中使用。Photoshop完全不支持索引颜色模式。使用素材文件格式为.gif的图像就处于索引模式,不能直接为Photoshop所用,都必须执行菜单命令【图像】|【模式】|【RBG颜色】进行转化。

RGB:RGB模式是数码图像中最重要的一个模式,Photoshop的全部功能都支持它,因为Photoshop就是以它为基础来开发的,是在Photoshop中使用最多的一种图像模式。通常制作网页界面、移动设备界面时都选择RGB模式。显示屏上显示的颜色是RGB模式,电视屏幕也是RGB模式,所不同的是它不是用数码而是用电平来描述的。扫描仪和数码相机都是捕捉RGB图像信息的。RGB模式是相加的模式,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们之间的相互叠加来得到各式各样的颜色的。当R、G、B的值都达到最大值时,三色合成便成为白色。RGB模式是24位颜色深度。它共有三个通道,每个通道都有8位深度。三个通道合成在一起可生成1677万种颜色,也称为“真彩色”。

CMYK:CMYK模式是用来打印或印刷的模式,它是相减的模式,当C、M、Y三值达到最大值时,在理论上应为黑色,但实际上因为颜料的关系,呈显的不是黑色,而是深褐色。为弥补这个问题,所以加进了黑色K。由于加了黑色,CMYK共有四个通道,正因为如此,对于同一个图像文件来说,CMYK模式比RGB模式的信息量要大四分之一。但RGB模式的色域范围比CMYK模式大,印刷颜料在印刷过程中不能重现RGB色彩。Photoshop的大部分功能不支持CMYK模式。

Lab:Lab模式是24位颜色深度的图像模式,有三个通道。L通道是亮度通道(Lightness),a和b两个为色彩通道。它的特点在于:它的色域范围最广,就色域范围而言它和RGB与CMYK模式的关系如下:Lab>RGB>CMYK;此模式下的图像是独立于设备的,它的颜色不会因不同的印刷设备、显示器和操作平台而改变。由于它有以上的特点,当Photoshop把RGB模式和CMYK模式互相转换时,它成为中间模式,颜色信息就不会因以上两模式的色域范围不同而丢失。Photoshop的大部分功能不支持Lab模式。

2.图像大小

对于图片处理来说,改变图片文件大小、尺寸、方法是最基础的操作,在Photoshop CC中,可以使用相关的操作简单达成。

改变图片文件大小具体操作如下。(1)使用裁剪工具(快捷键为:【C】),使用时按住【Shift】键锁定长宽比进行裁剪。(2)在不影响图片内容显示的情况下,通常可以执行菜单命令【图像】|【图像大小】,在弹出对话框中修改宽度与高度(如图1-12所示),注意勾选锁定长宽比,不然会变形。或者执行菜单命令【图像】|【画布大小】也可以。图1-12 图像大小(3)针对单个图层里面的图像,通常可以执行【编辑】|【自由变换】命令(快捷键:【Ctrl+T】),进行自由变换操作。此时按下【Shift】键用鼠标向内拖放图片任意角缩小图片可以保证缩放比例与原图相同。

Phostoshop中的“自由变换”是功能强大的制作手段之一。使用【Ctrl+T】组合键就可以对图形进行变换。这时,图片会有八个控制块和边框线,用鼠标拖拉它们就可以对图片进行变换。

当鼠标变成的时候,就可以对图片进行旋转,而图片旋转的中心就是图片中所在的位置。是可以用鼠标进行移动的,这样可以任意更换旋转中心。

当鼠标变成的时候,就可以对图片进行拖拉变换,可以变大、变宽、变窄等。

特别注意的是:

按住【Shift】键,同时把鼠标移动在四角的方块上进行拖拉变换,这时对图片做的是成正比例的变大变小。

按住【Ctrl】键,同时把鼠标移动在四角的方块上进行拖拉变换,这时只是对图片的一只角进行变换。

按住【Alt】键,同时把鼠标移动到方块上进行拖拉变换,这时对图片的变化是以为中心进行变换。

如果变换的途中,想退出变换可以直接单击【Esc】键,图片恢复到原来的样子不做任何变动。如果变换好了,按【Enter】键就可以确定变换,图片就发生了改变。(4)在不能改变图像尺寸的情况下,通常可以采取更改图像模式的方法重新存储。最好用的方法是执行【文件】|【存储为Web所用格式】命令,在弹出对框中改变图像大小的像素值,如图1-13所示。图1-13“存储为Web所用格式”对话框1.3.4 选区的基本操作

1.建立选区

方法一:利用选区类工具创建。选区类工具有选框类、套索类和快速选择类三种,如图1-14所示。图1-14 选区类工具

工具箱中左边竖条工具栏第一个就是选区工具,长按2秒钟,里面有矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具。套索类分为套索工具、多边形套索工具、磁性套索工具。快速选择类分为快速选择工具、魔棒工具。正如它们名字描述的那样,每个工具都有独特的优势,需要多多练习与尝试。

如图1-15所示的简单图像合成,可以主要用选择工具完成。提示关键步骤:首先移动汽车图像到树林图像中,然后使用魔棒选择汽车周围的白色背景并按【Delete】键清除,最后使用磁性套索工具选择得到画面中间的大树选区,并在汽车图层中按【Delete】键清除。如果需要把图1-16中的大楼选中,考虑大楼边沿呈直线型较多,可以选择使用多边形套索工具轻松选取。考虑选择天空中的蓝色部分,观察图中蓝色层次很接近,和其他颜色区别又比较大,可以使用魔棒工具。图1-15 合成图1-16 适合多边形套索选取

方法二:色彩范围。执行【选择】|【色彩范围】命令。使用色彩范围选取颜色,一次性选取所有相同的颜色更快速。通常在抠图时会用到。在图1-17中需要把图中所有红色部分选择出来就可以使用这样的方法。图1-17 色彩范围

2.选区的操作

移动:移动选择区域,必须确保在选择工具状态下。

绘制模式:绘制选区时,在状态栏里有四种模式可选,依次是:新选区、添加到选区、从到选区减去、与选区交叉。

反选:执行【选择】|【反向】命令,快捷键:【Ctrl+Shift+I】。

取消选区:执行【选择】|【取消选择】命令,快捷键:【Ctrl+D】。

隐藏/显示选区:执行【视图】|【显示】|【选区边缘】命令,快捷键:【Ctrl+H】。

填充:建立选区后,执行【编辑】|【填充】命令,如图1-18所示。在对话框中可以选择颜色、图案等对选区进行填充。

描边:建立选区后,执行【编辑】|【描边】命令,如图1-19所示。在对话框中可以选择颜色、位置、混合模式等。图1-18“填充”对话框图1-19“描边”对话框

3.选区的修改

建立选区后可以对选区进行多种修改,通过这些基本的修改,可做出不同的画面效果。Photoshop菜单【选择】|【修改】命令可以很好地配合选区轻松改变。选区的修改包括边界、平滑、扩展、收缩、羽化。

边界:指以原选区为基础形成环状选区,宽度数值在1~100px,数值越大滑度越大,如图1-20所示。

平滑:指圆滑选区各顶点,圆滑半径数值在1~100px,数值越大圆滑度越大,如图1-21所示。图1-20“边界”命令前后对比图1-21“平滑”命令前后对比

扩展:指选区向外扩大,数值在1~100px,数值越大扩展程度越大,如图1-22所示。

收缩:指选区向内缩小,收缩值在1~100px,数值越大扩展程度越大,如图1-23所示。图1-22“扩展”命令前后对比图1-23“收缩”命令前后对比

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载