Photoshop-UI交互设计第2章--图标课件.ppt

1、 第2章 图标设计第2章 图标设计 图标是具有指代性的计算机图形，具有高度浓缩并快速传达信息和便于记忆的特点。图标的应用范围非常广泛，从各种软硬件到现实生活到处都可以看到各种图标的影子，可以说我们的生活离不开图标。什么是图标什么是图标 图标的概念分广义和狭义两种。从广义上来说，图标是指具有指代意义的图形符号，具有快速传达信息和便于记忆的特性。它的应用范围很广，软硬件网页社交场所公共场合无所不在，例如各种交通标志和各种软件图标等。第2章 图标设计图标设计的作用图标设计的作用 一个图标是一个小的图片或对象，代表一个文件、程序或命令。图标可以帮助用户快速执行各种命令或打开应用程序。此外，图标也用于在

2、浏览器中快速展现内容。图标设计的意义图标设计的意义 作为UI界面设计的关键部分，图标在UI交互设计中无处不在。一套成功的图标设计不仅需要质感精美，引人眼球，更重要的是具有良好的可用性。一般来讲，具有强烈质感的图标可以为网页增添亮点，给浏览者留下深刻的印象。第2章 图标设计 相较于文字来说，图标有着很明显的优势。比文字更直观，也更漂亮。在制作图标时，我们也应该相应的强化图标的优势，降低劣势。未来软件界面的设计方向是简洁、实用、高效。可识别性原则可识别性原则：可识别性原则是图标设计的首要原则。可识别性就是指设计的图标应该能够准确表达相应的操作，让浏览者一看到就能明白它是用来做什么的。与环境协调的原

3、则与环境协调的原则：图标制作出来以后最终被应用到图形界面中才能体现出价值，独立存在的图标是没有意义的。差异性原则差异性原则：差异性是指图标之间有明显的差别，能够让人一眼区分出来不同的图标，这样才能被浏览者所关注和记忆，并对界面内容留有印象。这是图标设计的重要原则之一，同时也是最容易被设计者忽略的一条原则。视觉效果的原则视觉效果的原则：视觉效果是指图标设计应该刻画质感和细节，使其更加美观，满足使用者的视觉要求。创造性原则创造性原则：一般在制作图标时都会创建较大尺寸的文档，或者使用矢量形状创建图标，制作完成后也会将其保存为不同的尺寸，以满足不同界面的使用。第2章 图标设计 “图层”在Photosh

4、op CC中是一个至关重要的概念，所有的操作和编辑都与之有密切的关系。那什么是“图层”呢？简言之，“图层”就如同一些堆叠在一起的透明纸张，每一张都存储着不同的图像。这些图像以一定的顺序排列在一张，从而构成一副完整的图像。第2章 图标设计新建图层新建图层 Photoshop CC中提供了很多种创建新图层的方法，最常用的两种分别为是直接在“图层”面板中创建和通过菜单命令创建。1. 在“图层”面板中创建新图层2. 使用“新建”命令新建图层选择图层选择图层 在Photoshop CC中对文件进行操作时，必须首先选中相应的图层，才能保证当前操作的正确应用。选择图层的操作通常也在“图层”面板中进行。1.

5、可以选择单个图层：2. 可以选择多个连续的图层3. 可以择多个不连续的图层 第2章 图标设计复制、移动图层复制、移动图层 复制的方法有很多种，同一文档之间的复制、不同文档的复制、通过命令复制和复制局部图形。1. 在同一文档之间复制图层 若要在同一文档中复制图层，只需将相应的一个或多个图层直接拖曳至“图层”面板下方的“创建新图层”图标上即可。2. 在不同文档之间复制图层 若要在不同文档之间复制图层，选中需要复制的图层，执行“图层复制图层”命令，或单击“图层”面板右上角的扩展图标，在弹出扩展菜单中选择“复制图层”命令，弹出“复制图层”对话框，定需要复制到的文档，然后单击“确定”图标即可。3. 使用

6、“通过拷贝的图层”命令复制图层 除了将图层拖曳到“创建新图层”图标复制图层外，用户也可以执行“图层新建通过拷贝的图层”命令，或按快捷键【Ctrl+J】快速复制，如果没有创建选区，执行该命令可以快速复制当前图层。第2章 图标设计4. 复制局部图形 复制局部图像与复制整个图层的方式类似。使用“框选工具”或者“魔棒工具”将要复制的图形创建选区，执行“图层新建图层通过拷贝的图层”命令，或直接按快捷键【Ctrl+J】，即可将选区内的图像复制到新的图层中。5. 鼠标直接拖动若要调整图层顺序，先选中相应的图层，然后将其拖曳到新的位置即可。6. “排列”命令用户也可以对当前的图层执行“图层排列”命令，根据需求

7、在子菜单中分别选择置为顶层、前移一层、后移一层、置为底层或反向选项调整图层顺序。重命名图层、删除图层重命名图层、删除图层1. 重命名图层：若要对图层名称进行重命名，双击相应图层的名称部分，激活编辑模式，直接输入新的名称，然后按【Enter】键确认命名。2. 删除图层：先在“图层”面板中选中相应的图层，单击面板下方的“删除图层”图标，或者直接用鼠标拖曳图层至该图标上删除。3. 添加图层样式：若要为图层应用“图层样式”，先选中相应的图层，单击面板下方的“添加图层样式”图标，在弹出的菜单中选择需要的选项，然后在弹出的“图层样式”对话框中设置参数值即可。第2章 图标设计 在Photoshop CC中，

8、“画笔工具”的应用比较广泛，使用它可以绘制出比较柔和的线条，其效果如同用毛笔画出的线条。该工具可以设置画笔的笔尖形状、笔刷尺寸、不透明度、流量和喷枪等属性。如果结合“画笔”面板中的各项功能，还能绘制出更多变的笔触效果。 使用“画笔工具”时，在英文状态下，按【】键可减小画笔的直径，按【】键可增加画笔的直径，对于实边圆、柔边圆和书法画笔，按【Shift+】键可减小画笔的硬度，按【Shift+】键则增加画笔的硬度。 按键盘上的数字键可以跳调整工具的不透明度。按【1】时，不透明度为10%，按【5】时，不透明度为50%，按【75】时不透明度为75%，按【0】时不透明度为100%。第2章 图标设计预设画笔

9、工具预设画笔工具 单击工具箱中的“画笔工具”按钮，在选项栏中单击“画笔”选项右侧的按钮，可以打开“画笔预设选取器”。可以看到很多不同形状的画笔，单击任意画笔即可使用该画笔形状。Photoshop CC提供了多种类型的画笔，为了方便选取画笔，用户可以通过单击“画笔预设选取器”面板中右上方的菜单按钮，在弹出的下拉菜单中改变“画笔预设选取器”的显示方式，在该菜单中还提供了其它相应的选项供用户选择。自定义画笔自定义画笔当用户自定义特殊画笔时，只能定义画笔的形状，而不能定义画笔的颜色。因为使用画笔绘画时，颜色都是由前景色的颜色决定的。第2章 图标设计 Photoshop CC中的“钢笔工具”，可用于绘制

10、具有最高精度的路径，“钢笔工具”属于矢量绘图工具，其优点是可以勾画出平滑的曲线，在缩放或者变形之后仍能保持平滑效果。当无法使用普通的形状工具创建出复杂的图形时，就需要用“钢笔工具”进行创建。第2章 图标设计创建路径创建路径使用“钢笔工具”可以创建闭合或者不闭合的路径，单条或多条路径。1. 使用“钢笔工具”在画布中任意位置单击插入第一个锚点。2. 继续在其它位置单击插入第二个锚点，并拖曳控制手柄控制路径形状。3. 使用相同方法插入更多的锚点，并拖曳控制手柄调整路径形状。4. 若要闭合路径，单击第一个锚点，并拖曳控制手柄调整路径形状。5. 松开鼠标，完成该闭合路径的创建。第2章 图标设计编辑路径编

11、辑路径添加锚点工具：使用“添加锚点工具”在路径上单击，可在单击点添加一个锚点。删除锚点工具：使用“删除锚点工具”单击路径上的某一个锚点，可以将其删除。转换点工具：使用“转换点工具”单击路径的平滑点，可以将其转换为角点；使用“转换点工具”单击路径的角点，并拖动控制手柄调整路径形状，可以将其转换为平滑点。路径选择工具：使用“路径选择工具”单击路径的任意部分，即可将整条路径全部选中。例如要复制路径，或者单击调整复合路径中的单个路径，就需要首先使用“路径选择工具”选中相应的路径。直接选择工具：用户可以使用“直接选择工具”单击选择路径上的单击锚点，或者拖选多个锚点，并且可以调整每个锚点的控制手柄。 原始

12、路径形状 平滑点转角点 角点转平滑点第2章 图标设计路径的变换操作路径的变换操作 使用“路径选择工具”选择路径，执行“编辑变换路径”命令，在该命令的子菜单中，包括各种变换路径命令，执行路径变换命令时，当前路径上会显示出定界框、中心点和控制点。第2章 图标设计 Photoshop CC的“工具箱”中包含5个形状工具，它们分别是矩形工具、圆角矩形工具、椭圆工具、多边形工具、直线工具和自定形状工具。这些工具可以帮助用户快速创建出许多规则的、较为常用的形状，被大量应用于UI设计与制作。矩形工具、圆角矩形和椭圆工具矩形工具、圆角矩形和椭圆工具 顾名思义，矩形工具、圆角矩形工具和椭圆工具就是用来创建矩形、圆角矩形和椭圆的，用户只需要在“工具箱”中单击选择相应的工具，然后在画布中拖动即可创建出矩形、圆角矩形或椭圆。多边形工具和直线工具多边形工具和直线工具“多边形工具”用于在文档中创建多边形和星形，“直线工具”用于在文档中创建直线。自定义形状自定义形状 “自定形状工具”允许用户创建一些出比较常用的形状，例如各种箭头、花纹、动物和标志等，这些形状通常无法直接使用规则的形状工具创建出来。完成本章节中的实战练习完成本章节中的实战练习第2章 图标设计