区块链技术与电子商务应用 课件 【ch04】Photoshop图标设计实战

Photoshop图标设计实战第四章新工科建设·应用型本科规划教材UI设计实战Photoshop概述0101Photoshop概述Photoshop随着移动端产品的普及和对移动端产品设计的重视Photoshop是Adobe公司出品的一款优秀的图形处理软件，也是目前使用率较高的平面设计软件,其功能非常强大,应用于平面设计、图片处理、网页设计、文字设计、三维设计及UI设计。Adobe公司在对Photoshop升级过程中，不断对移动产品设计工具、U设计工具等方面进行优化和调整，使其越来越贴合UI设计师的需求和使用。例如，从PhotoshopCC版本开始，加强了对矢量图形工具的灵活操作;从PhotoshopCC2015版本开始，常用的5种图层样式可以累加10次使用，类似这样的功能贴合U设计师的需求，同时也越来越让设计师离不开Photoshop，也正因为这些改变，Photoshop仍然还是广大设计师首选的设计利器。Photoshop基本操作0202Photoshop基本操作工作区概览PhotoshopCC2018的工作界面包括菜单栏、标题栏、工具选项栏、选项卡、文档窗口、工具箱、状态栏和面板等组件，如图4.1所示。☆菜单栏:包含可以执行的各种命令。单击菜单名称即可打开相应的菜单。☆标题栏:显示文档名称、文件格式、窗口缩放比例和颜色模式等信息;如果文档中包含多个图层，则标题栏还会显示当前工作图层的名称。☆工具选项栏:用来设置工具的各项选择，它会随着所选工具的不同而改变选项内容。☆选项卡:打开多个图像时，只在窗口中显示一个图像，其他的则最小化到选项卡中。单击选项卡中各个文件名便可显示相应的图像。☆文档窗口:显示和编辑图像的区域。☆工具箱:包含用于执行各种操作的工具，如创建选区、移动图像、绘画和绘图等。☆状态栏:可以显示文档大小、文档尺寸、当前工具和窗口缩放比例等信息。☆面板:有的用来设置编辑各种选项，有的用来设置颜色属性。☆熟练掌握Photoshop的操作界面结构、工具箱内的工具、面板组成是深入学习Photoshop的重要基础。02Photoshop基本操作02Photoshop基本操作了解Photoshop中的工具Photoshop的工具箱中包含了用于创建和编辑图像、图稿、页面元素的工具及按钮，如图4.2所示。这些工具按照用途可以分为7组，如图4.3所示。02Photoshop基本操作新建Photoshop文档在PhotoshopCC2018版本中有两种新建文档的方法。(1）打开软件后，自动出现“开始”工作区，在该区域内显示最近使用或打开过的文件或素材，以及创建新文档的按钮，如图4.4所示。可以通过“编辑”>“首选项”>“常规”进行打开或关闭设置，如图4.5所示。02Photoshop基本操作新建Photoshop文档(2)选择“文件”>“新建”命令(或按组合键“Ctrl+N”)，弹出新版“新建文档”界面，如图4.6所示。新日版“新建文档”界面可以通过“编辑”>“首选项”>“常规”进行设置，如图4.7所示。下面以新版”新建文档”界面讲解参数。选择创建“文档类型”“照片”“打印”“图稿和插图”“Web”“移动设备”“胶片和视频”，选择不同的类型，相关参数会发生相应变化。名称:默认名称为“未标题-1”，单击该处，可修改为所需的名称。宽度/高度:设置文档大小，注意单位的选择。常用单位有像素、毫米、厘米英寸、点。分辨率:默认为72像素/英寸。当产出物为精美印刷品时，分辨率可能需要调整为150像素/英寸，或者300像素/英寸。颜色模式:默认为RGB颜色。如果设计的是印刷出版产品，则颜色模式设置为CMYK颜色，如果设计的是电子产品、移动端产品，则保持默认值。02Photoshop基本操作保存Photoshop文档“存储”命令文件进行处理后，需要及时保存，以免出现意外造成文件丢失。在PhotoshopCC2018中可以使用不同的命令保存文件，包括“存储”“存储为”“导出”等命令。选择“文件”>“存储”命令，即可将文件以原有格式进行存储,且保存在原位置处。02Photoshop基本操作“存储为”命令“导出”命令选择“文件”>“存储为”命令，可以将当前文件保存为其他名称和格式，或者将它存储到其他位置。选择“文件”>“导出”命令，可以快速导出“PNG文件”"存储为Web所有格式”“路径到Ⅲustrator”等。02Photoshop基本操作02Photoshop基本操作保存文件类型Photoshop可兼容的文件格式与可生成的格式类型都比较多，PhotoshopCC2018版本中可保存的常用文件类型如表4.1所示。Photoshop矢量工具0303Photoshop矢量工具Photoshop强大的设计功能与广泛的应用范围是众所周知的，随着版本的不断提升，功能也越来越优化。由于篇幅的原因，下面将重点介绍PhotoshopCC2018中针对UI的设计，所需的矢量图形工具介绍和相关操作技巧。钢笔工具在Photoshop的所有工具中，钢笔工具的重要性可谓是重中之重。理论上说任何需要的图形都可以由钢笔绘制出来。在PhotoshopCC2018中，钢笔组是由【钢笔工具】、【自由钢笔工具】、【弯度钢笔工具】、【添加锚点工具】、【删除锚点工具】和【转换点工具】组成的，如图4.8所示。03Photoshop矢量工具03Photoshop矢量工具绘制直线使用【钢笔工具】绘制的最简单的路径是直线，通过单击【钢笔工具】在画布中创建两个锚点，即可生成直线，继续单击可创建由角点连接的直线段组成的路径，如图4.9所示。绘制曲线在曲线改变方向的位置添加一个锚点，然后拖动构成曲线形状的方向线。方向线的长度和斜度决定了曲线的形状，如图4.10所示03Photoshop矢量工具绘制形状使用【钢笔工具】后,确保在“工具选项栏”中,设置绘制类型为“形状”,如图4.11所示。将绘制出矢量图形，且在图层面板中以矢量图层的样式表示，如图4.12所示。03Photoshop矢量工具03Photoshop矢量工具路径选择工具/直接选择工具形状图形工具【路径选择工具】/【直接选择工具】是选择矢量图形时的工具。【路径选择工具】可以整体选择图形，并且可以移动。【直接选择工具】可以选择单个或多个构成图形的锚点或路径，方便对图形的操作和控制，但要与【移动工具】有所区别。PhotoshopCC2018中的形状图形工具包含【矩形工具】、【圆角矩形工具】、【椭圆工具】、【多边形工具】、【直线工具】和【自定形状工具】。03Photoshop矢量工具形状图形工具【矩形工具】:属于实时形状。选择【矩形工具】，鼠标单击画布，并拖曳一定范围，即可绘制出矩形，同时按住“Shift”键可以绘制出正方形，绘制完成会弹出“实时形状属性”面板，如图4.13所示。在“实时形状属性”面板中可以设置矩形相关参数，并且可随时作用在矩形上。【圆角矩形工具】:属于实时形状。选择【圆角矩形工具】，鼠标单击画布，并拖拽一定范围,即可绘制出圆角矩形，同时按住“Shift”键可以绘制出正方形，绘制完成会弹出“实时形状属性”面板，如图4.13所示。在“实时形状属性”面板中可以设置圆角矩形相关参数，并且可随时作用在圆角矩形上。【椭圆工具】:属于实时形状。选择【椭圆工具】，鼠标单击画布，并拖曳一定范围，即可绘制出椭圆，同时按住“Shift”键，可以绘制出圆形，绘制完成会弹出“实时形状属性”面板，如图4.13所示。在“实时形状属性”面板中可以设置椭圆的相关参数，并且可随时作用在椭圆上。03Photoshop矢量工具需要注意的是，矩形、圆角矩形、椭圆三个图形如果在设计过程中对它们进行破坏性操作（如旋转、移动锚点等操作)时，将会转换为“常规路径”，其提示对话框如图4.14所示。即不再具有“实时形状属性”面板。03Photoshop矢量工具【多边形工具】属于常规路径形状。绘制多边形时，需要先在“工具选项栏”中设置相关参数，如图4.15所示,再绘制图形。03Photoshop矢量工具03Photoshop矢量工具【直线工具】【自定形状工具】属于常规路径形状。绘制直线时，可以按住“Shift”键，绘制出45°及其倍数的直线。属于常规路径形状。通过Photoshop自带的形状进行绘制，图形不够用可以将图形文件（.csh），通过“编辑”>“预设”>“预设管理器”进行载入。设置颜色方法在PhotoshopCC中，给矢量图形设置颜色的方法有以下几种，熟练并灵活掌握设置颜色的方法，在设计过程中会起到事半功倍的效果。通过“工具选项栏”设置颜色，当颜色确定后，图形颜色即修改完成,如图4.16所示。03Photoshop矢量工具03Photoshop矢量工具通过“实时形状属性”面板修改颜色。双击图层缩略图后,在弹出的“拾色器”面板中修改颜色在绘制矩形、圆角矩形、椭圆时,会弹出“实时形状属性”面板，在该面板上可以对上述三种形状修改颜色。当颜色确定后,图形颜色即修改完成。在选择颜色的过程中，图形中的颜色会随着选择的颜色变化而变化,确定后颜色修改完成。这种方法更加适合在设计过程中的配色时使用。03Photoshop矢量工具布尔运算从PhotoshopCC开始，布尔运算操作在矢量图形设计过程中越来越重要。随着Photoshop版本的升级，该功能操作也越来越灵活，这是设计师必须掌握的技法也是实现制作精致效果的基础。为了方便初学者对布尔运算的掌握，下面将分为两种情况介绍:相同图层的布尔运算、不同图层的布尔运算。当然这是作者为了方便初学者掌握布尔运算，人为进行划分的，但在实际设计过程中，并没有要求这两种方法的使用场景。布尔运算位置在PhotoshopCC2018中，布尔运算包括【合并形状】、【减去顶层形状】、【与形状区域相交】、【排除重叠形状】和【合并形状组件】。其位置在两处可以找到:“选择工具属性”面板和“实时形状属性”面板，常在第一处位置进行布尔运算操作。布尔运算位置如图4.17所示。03Photoshop矢量工具03Photoshop矢量工具【合并形状】【减去顶层形状】绘制一个形状，然后按住“Shift”键的同时，再绘制一个形状,使新绘制的形状与原形状在一个图层中，两个形状合并在一起，即完成【合并形状】运算。效果如图4.18所示。绘制一个形状，然后按住“Alt”键的同时，再绘制一个形状，使新绘制的形状与原形状在一个图层中，并且后绘制的图形减去原图形，即完成【减去顶层形状】运算。效果如图4.19所示。03Photoshop矢量工具03Photoshop矢量工具【与形状区域相交】【排除重叠形状】先通过按住“Shit”键或“Alt”键将两个形状绘制到一个图层中，重新通过选择【与形状区域相交】运算，产生交集效果，如图4.20所示。先通过按住“Shit”键或“At”键将两个形状绘制到一个图层中，重新通过选择【排除重叠形状】运算，产生补集效果，如图4.21所示。03Photoshop矢量工具【合并形状组件】在进行布尔运算时，图形默认状态之间的关系并没有真正地将路径合并到一起，即图形之间还是相互独立的。这样的优势是，方便设计师能够及时更改图形之间的位置、关系等。如果能将图形组成最终效果，还是应该使用【合并形状组件】将多个图形最终组成一个整体，效果如图4.22所示。03Photoshop矢量工具03Photoshop矢量工具不同图层的布尔运算注意事项不同图层的布尔运算在实际工作中也是常用的一种形式。其操作方法是先将不同图层合并到一个图层中(“Ctrl+E”组合键)，剩下的操作与在相同图层的布尔运算相同。在实施不同图层【减去顶层形状】运算时，一定要注意图层的上下位置关系，合并图层后原上层的图形将被原下层的图形减去。不同图层的布尔运算，图层之间必须相邻，不能有间隔;实施【减去顶层形状】运算时，只能显示闭合路径;形状和路径不能同时进行布尔运算。布尔运算在设计中的灵活应用是设计师必须掌握的方法。03Photoshop矢量工具对齐、排列关系相同图层的图形对齐:在设计过程中，图形之间是否遵循对齐规范，是制作精美效果的基础和保证。在PhotoshopcC2018中，对齐的方法可以分为两种情况。使用【路径选择工具】，选中其中的所有图形，在“工具选项栏”中选择对齐方式,如图4.23所示。有“对齐到选区”“对齐到画布”两种方式，如图4.24所示。“对齐到选区”是指所选图形之间相互对齐;“对齐到画布”是指所选图形都与画布对齐。03Photoshop矢量工具不同图层的图形对齐令排列关系选中要对齐的图形所在图层，使用【移动工具】，在“工具选项栏”中选择对齐方式，如图4.25所示。如果需要所选图形与背景层对齐，则在选择图层时加选背景层即可，如图4.26所示。在相同图层中的图形都存在不同的排列关系，可在“工具选项栏”中进行调整，如图4.27所示。排列关系的对否将决定布尔运算能否正确执行,尤其是【减去顶层形状】运算;不同图层的排列关系，参照“图层”面板中上下图层之间的位置关系及调整方法，如图4.28所示。03Photoshop矢量工具03Photoshop矢量工具图层样式04添加图层样式选择图层，单击“图层”面板中“图层样式(f伙)”按钮，然后在弹出的选项中选择对应图层样式，如图4.29所示。双击需要添加图层样式的图层中部，也可以打开“图层样式”面板，如图4.30所示。04图层样式“图层样式”面板“图层样式”面板的左侧有10种图层样式效果，如图4.31所示。如果效果名称前面的复选框被勾选，则表示在图层中添加了该效果。从PhotoshopCC2015开始，“描边”“内阴影”“颜色叠加”“渐变叠加”“投影”5种常用的图层样式具有了累加效果功能，每种效果累加可以达到10次，操作方式、排列方式与图层原理相似。04图层样式“图层样式”面板“斜面和浮雕”可以对图层添加高光与阴影的各种组合，使图层内容呈现立体浮雕效果，其面板如图4.32所示。在“样式”中可以选择效果。“外斜面”可以在图层外侧边缘创建斜面;“内斜面”可以在图层内容的内侧边缘创建斜面;“浮雕效果”可以模拟浮雕状的效果;“枕状浮雕”可以模拟图层内部的边缘压入下层图层中产生的效果;“描边浮雕”可以将浮雕应用于图层描边效果的边界。其效果如图4.33所示。04图层样式“图层样式”面板斜面和浮雕的样式除有多种样式变化外，也可以通过光的效果进行效果设置。可以调整光的高度和角度，还可以调整高光模式和阴影模式。这都是其他图层样式不具备的。修改阴影效果如图4.34所示。04图层样式“图层样式”面板“描边”可以使用颜色、渐变或图案勾画出图形的轮廓，还可以增强立体效果，其面板如图4.35所示。效果如图4.36所示。04图层样式“图层样式”面板“内阴影”可以在仅靠图层内容的边缘向内添加阴影，产生凹陷或凸起效果，其面板如图4.37所示。效果如图4.38所示。04图层样式“图层样式”面板“内发光”可以沿着图层内容的边缘向内创建发光效果，其面板如图4.39所示。效果如图4.40所示。04图层样式04图层样式“光泽”“颜色叠加”“光泽”可以生成光滑的内部阴影，通常用于创建金属表面的光泽外观，其面板如图4.41所示。效果如图4.42所示。“颜色叠加”可以在图层上指定叠加的颜色，通过混合方式和不透明度控制叠加效果，原图形颜色属性不变，其面板如图4.43所示。效果如图4.44所示。04图层样式“图层样式”面板“渐变叠加”可以在图层上指定叠加的渐变色，通过混合方式和不透明度控制叠加效果，原图形颜色属性不变，其面板如图4.45所示。效果如图4.46所示。04图层样式“图层样式”面板“图案叠加”可以在图层上指定叠加的图案，通过混合方式和不透明度控制叠加效果，原图形颜色属性不变，其面板如图4.47所示。效果如图4.48所示。04图层样式“图层样式”面板“外发光”可以沿图层内容的边缘向外创建发光效果，其面板如图4.49所示。效果如图4.50所示。04图层样式“图层样式”面板“投影”可以为图层内容添加投影，使其产生立体感，其面板如图4.51所示。效果如图4.52所示。04图层样式Photoshop图标设计实践0505Photoshop图标设计实践图标的扁平化设计扁平风格优点如下扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变及能做出D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，强调了抽象、极简和符号化。(1）识别率高,减少认知障碍。(2)降低移动设备的硬件需求，降低功耗、延长待机时间和提高运算速度。(3)针对碎片化的屏幕尺寸，扁平化设计更简约，条理清晰，更好的适应性。05Photoshop图标设计实践扁平风格缺点如下常见扁平风格图标类型如下(1）降低用户体验,在非移动设备上令人反感。(2）缺乏直观性,需要—定的学习成本。(3）传达的感情不丰富，甚至过于冰冷。1．纯平面—般表现为纯色或剪影效果。简洁、清新、舒服、视觉识别度好、色彩明朗、设计感强烈，效果如图4.53所示。05Photoshop图标设计实践轻折叠一般表现为纯色、折叠、轻投影效果。比纯平面丰富，有轻微的视觉空间感，色彩明朗，轻投影营造出轻盈的感觉，视觉统一性好，效果如图4.54所示。05Photoshop图标设计实践轻质感一般表现为轻渐变、简单层次、轻投影效果。内容相对丰富，有一定的立体感,轻盈、清新,效果如图4.55所示。05Photoshop图标设计实践折纸效果一般表现为折叠、投影构成效果。善于展示扁平化的立体视觉效果,效果如图4.56所示。05Photoshop图标设计实践厚度效果一般有厚度并关注细节的设计效果，通过轻投影效果展示厚度，关注细节刻画。但要注意图标设计的统—性,效果如图4.57所示。05Photoshop图标设计实践长投影添加长投影的渐变效果。增加立体感和表现层次，柔和统一，但设计长投影时要准确,效果如图4.58所示。05Photoshop图标设计实践05Photoshop图标设计实践线形图标“Callin”图标设计方法使用【钢笔工具】和【图形工具】绘制“Callin”图标，最终效果如图4.59所示。05Photoshop图标设计实践线形图标(1）创建画布。宽、高均为1000px，分辨率为72ppi，颜色模式为RGB颜色。(2）使用【椭圆工具】绘制圆。绘制的同时按住“Shift”键和“Alt”键，绘制一个大小为180px的圆，去掉填充颜色，只保留描边颜色（颜色值为#78B4E3，描边宽度为20px）。然后复制该图层（“Ctrl+J”组合键〉再生成一个圆环，并且分开摆放，作为两端话筒。(3）使用【椭圆工具】绘制椭圆。宽为320px，高为550px，并且旋转45°，调整位置。(4）选择椭圆，再复制一个(“Ctrl+J”组合键)，并且调整形状。05Photoshop图标设计实践线形图标(5）使用【钢笔工具】中的【添加锚点工具】，分别给两个椭圆添加锚点，并且使用【直接选择工具】选择要删除的锚点后，单击“Delete”键删除。(6)参照第(5）步，对两个圆添加、删除对应位置锚点。(7）绘制尖头。使用【圆角矩形工具】绘制宽为180px、高为26px、圆角为13px的圆角矩形，再绘制两个宽为90px、高为26px、圆角为13px的圆角矩形。调整形状为尖头。(8）完成效果制作，并命名为“Callin”。保存文件类型为PSD和PNG。05Photoshop图标设计实践剪影图标"Telephone”图标设计方法扁平风格中的剪影效果是常见的效果之一。本案例利用“布尔运算”与【形状工具】进行设计与制作。最终效果如图4.72所示。05Photoshop图标设计实践剪影图标(1）创建画布。宽、高均为800px，分辨率为72ppi，颜色模式为RGB颜色。(2)使用【圆角矩形工具】，绘制宽和高均为512px、圆角为120px的圆角矩形，颜色值为#1DA831。(3）使用【椭圆工具】，绘制宽为460px、高为330px的椭圆。(4）进行同层图层布尔运算。按住“Alt”键，分别绘制两个矩形，做【减去顶层形状】运算。选中所有图形，进行【水平居中对齐】操作。(5）水平方向从标尺拖曳“参考线”，位于图形中间位置。使用【添加锚点工具】分别对两个矩形的下边添加锚点，并且使用【直接选择工具】，向下移动，生成下弧线效果。05Photoshop图标设计实践剪影图标(6)修改圆角。按住“At”键绘制矩形,减掉原来尖角效果。按住“Shift”键绘制宽、高均为50px的正圆，补充圆角效果。(7）参照第（6）步操作，完成其他尖角的圆角效果处理。(8）修改内角圆角效果。按住“Shift”键，绘制正圆，然后按住“Alt”键，再绘制一个圆形【减去顶层形状】。(9）选中所有图形，进行【合并形状组件】操作，将所有图形合并成一个图形，并且旋转45°，完成设置。命名为“Telephone”，保存文件类型为PSD和PNG。05Photoshop图标设计实践扁平彩色图标“小米互娱”图标设计方法小米互娱图标通过“布尔运算”实现“形”的设计，通过弱渐变颜色实现视觉展示,层次丰富。最终效果如图4.92所示。05Photoshop图标设计实践扁平彩色图标(1）创建画布。宽、高均为800px，分辨率为72ppi,颜色模式为RGB颜色。(2）创建圆角矩形宽、高均为512px，圆角为8Opx,如图4.93所示。(3）使用【多边形工具】，设置边为5，绘制宽为340px、高为324px的五角星,如图4.94所示。(4）使用【钢笔工具】沿着五角星边线绘制多边形,如图4.95所示。(5）复制圆角矩形，并调整与绘制出的多边形图层相邻，合并形状（“Ctrl+E”组合键），执行【与形状区域相交】运算，生成新图形，如图4.96所示。05Photoshop图标设计实践扁平彩色图标(6）参照第(4）步和第（5)步操作方法，完成其他形状制作，如图4.97所示。(7)设置弱渐变效果。参考值为:（#DF4F72、#F45441、角度为60°)、(#F48EO5、#F7AAO2、角度为0°)、(#90CB6F、#86D263、角度为O°)、(#O3ACCD、#O7AED1、角度为90°)、(#9665CE、#BA73C9、角度为90°)，如图4.98所示。(8）添加文字“小米互娱”，保存文件，保存文件类型为PSD和PNG。05Photoshop图标设计实践拟物图标的设计方法“彩色旋钮”图标设计方法制作精美图标时，少不了“图层样式”的灵活使用。此案例可以综合掌握“图层样式”在图标设计过程中的使用技巧。最终效果如图4.114所示。05Photoshop图标设计实践(1）创建画布。宽、高均为800px，分辨率为72ppi，颜色模式为RGB颜色，设置背景颜色值为#B8231D。(2)使用【圆角矩形工具】，绘制宽、高均为580px和圆角为120px的圆角矩形。填充线性渐变颜色值为#F6CDC9、#FEF4F3。命名该圆为“圆角矩形”

。(3）使用【椭圆工具】绘制宽、高均为388px的圆形。设置线性渐变，颜色值为#F9EBEB、#DFAFAB，命名该圆为“圆1”。(4）使用【椭圆工具】绘制宽、高均为338px的圆形。设置角度渐变，颜色值从左至右依次为#3631B2、#8B307F、#DC502D、#DF882D、#CFD42E、#2EFA2C、#3631B2，命名该圆为“圆2”。拟物图标的设计方法05Phot