1、,第二章：PHOTOSHOP功能在UI设计中的使用,http:/,2.1 绘图工具的介绍,在绘制移动UI界面中的单个元素时，最先需要使用的工具就是Photoshop中的绘图工具，这些绘图工具可以将元素的外观进行展示，以路径的方式控制其边缘和形状。,http:/,2.1.1 规则形状的绘制,Photoshop中包含了多种绘制路径和形状的工具，当需要绘制一些标准的、规则的形状时，可以使用“矩形工具”、“圆角矩形工具”、“多边形工具”、“椭圆形工具”和“直线工具”来完成操作。这些工具都是具有三种不同的绘图模式，为了便于UI界面元素的编辑和应用，通常会使用“形状”模式进行制作，接下来就对这些形状的绘制
2、工具进行简单介绍。矩形工具：可以使用该工具绘制出长方形或者正方形效果。在使用“矩形工具”绘制的过程中，只需要单击并拖拽鼠标，就可以绘制任意大小的矩形。如果要绘制正方形，可以按住Shift键的同时进行操作，如下图所示。,规则形状的绘制,http:/,圆角矩形工具：该工具可以绘制出带有一定弧度的圆角方形，利用其选项栏中的“半径”选项来控制圆角的弧度。在进行UI设计的过程中，常常会使用“圆角矩形工具”来绘制一个按钮、图标和滑块轨迹等，如下图所示为该工具绘制的效果。,规则形状的绘制,http:/,边形工具：该工具可以绘制出多边的图形，还可以对图形的边数和凹陷程度进行设置。在“多边形工具”的绘制中，可以
3、利用“边”选项对多边形的边数进行控制，在画面中对多边形的边数进行控制，在画面中创建不同的多边形或星形效果，如下图所示为该工具绘制的多边形和星形效果及相关设置。,规则形状的绘制,http:/,椭圆形工具：该工具可以绘制出外形为椭圆或者正圆形的形状。在绘制UI界面元素过程中，该工具常常被用作绘制按钮和修饰形状的工具，如下图所示为该工具的绘制效果。,规则形状的绘制,http:/,直线工具：该工具用于创建直线、虚线或者带有箭头样式的线段。如下图所示为该工具绘制的线段和虚线效果。,规则形状的绘制,http:/,2.1.2 自定义形状的绘制,“自定形状工具”可以绘制出丰富的图形形状，在Photoshop中
4、提供了较多的预设形状供用户使用，同时还可以创建具有个性的图形形状，具有很高的自由度。选择工具箱中的“自定形状工具” ，可以看到如下图所示的工具选项栏。,自定义形状的绘制,http:/,“自定形状工具”最大的特点就是该工具的选项栏中有一个“形状”选择器。它主要在于选择需要绘制的图形形状。如果要选择“形状”选择器扩展菜单的“全部”命令，可以将Photoshop中所有的预设形状载入到“形状”选区器中，如上图所示为“形状”选择器展开的效果。我们可以看到其中包含的预设形状多种多样，有的可以直接应用到UI界面设计中，而有的可以作为蓝本进行修改来获得新的形状，能够大大提高编辑的效率。单击“形状”选项后面的三
5、角按钮，可以打开“形状”选取器：单击右上角的设置按钮，在菜单中选择“载入形状”命令，可以打开如下图所示的“载入”对话框，在其中可以选择所需的形状载入到当前“形状”选取器中。,自定义形状的绘制,http:/,当前“形状”选取器中添加形状后，由于形状的数量较多，选择需要的形状会花费过多的时间：此时可以再扩展菜单中选择“复位形状”命令，将“形状”选取器中的形状显示为默认的预设形状，在根据需要载入合适的形状即可。在进行UI界面制作的过程中，经常会使用“自定形状工具”中的预设形状来使用或者加工，让形状的编辑更加的快捷。,自定义形状的绘制,http:/,2.1.3 绘制任意需要的形状,想要绘制出任意所需的
6、形状，那就只有使用万能的“钢笔工具”来完成了。“钢笔工具”可以绘制出任意形状的路径，也可以对原有的路径进行更改。在绘制任意形状时，我们可以使用“钢笔工具”创建称作路径的线条。路径由一个或多个直线或者曲线线段组成，每个线段的起点和终点由锚点标记。路径可以使闭合的，也可以是开放的，并具有不同的端点。通过拖动路径的锚点、方向点或路径段本身，就可以改变路径的形状。,绘制任意需要的形状,http:/,如下图所示可以看到，路径中包含了曲线路径段、选中的锚点、未选中的锚点、方向线、方向点等，通过这些元素进行组合，就形成了完整的路径效果。,绘制任意需要的形状,http:/,在使用“钢笔工具”的过程中，使用该工作在图像窗口中单击，即可添加一个锚点，如下左图所示。当在另一个位置单击并拖拽鼠标时，会出现一个曲线段，同时在新添加的锚点的两侧显示出该锚点的方向线，如下图所示。按住Alt键的同时单击并拖拽方向线，可以对该曲线段的弧度进行调整，如下右图所示。,绘制任意需要的形状,http:/,重复添加锚点和调节方向线的操作，完成所需路径的绘制后，将“钢笔工具”停留在第一个锚点上时，鼠标指针显示为钢笔形状加圆圈，如下左图所示。单击鼠标左键即可闭合路径：如果单击后继续拖拽鼠标，可以对闭合点位置的锚点的方向线进行调节，如下右图所示。,绘制任意需要的形状,http:/,谢谢观看,
