基础图形的绘制

本小节主要讲述移动UI中基础图形的绘制。这里包括制作正方形、长方形、圆角矩形、组合图形、虚线以及其他形状等。

基础图形的绘制如图3.1所示。

图3.1

图形的应用范围很广，如图标、自定义控件的制作，界面边框的制作，都需要绘制基础图形作为打底。下面来学习运用这些基础图形制作移动UI中的小元素。

利用正方形绘制的播放界面如图3.2所示。

图3.2

利用圆角矩形绘制的图标如图3.3所示。

图3.3

利用各种图形组合制作出的精彩图标如图3.4所示。

图3.4

3.1.1  圆形、椭圆

在Photoshop中绘制圆形、椭圆。选择工具箱里的椭圆工具，按住Shift键后在画面上拖动，得到合适的尺寸后，右键点在选框的虚线上。选择描边选项，这时，设置好数值就可以了，或者用一个没有柔化的硬边画笔（大一些）在画面上点一下，再用一个较小的圆形橡皮在之前画过的圆上点一下。

利用圆形、椭圆制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项。设置完成后单击“确定”按钮，新建空白图像文件（图3.5）。

图3.5

②设置前景色为粉色，按快捷键Alt+Delete，填充背景色为粉色。单击椭圆工具，设置前景色为黑色，在画面正中绘制椭圆得到“椭圆1”图层（图3.6）。

图3.6

③选择“椭圆1”，单击“添加图层样式”按钮，选择“渐变叠加”选项并设置参数，制作椭圆图案样式（图3.7）。

图3.7

④继续使用椭圆工具，在其属性栏中设置其属性为“形状”，“填色”为无，“描边”为“50.36点”，在画面中的椭圆上绘制“椭圆2”并设置其“渐变叠加”的图案样式。继续使用相同方法绘制“椭圆3”（图3.8）。

图3.8

[技巧点拨]

椭圆工具的使用技巧：使用椭圆工具绘制图形可以在其属性栏中设置其属性，从而可以直接绘制出所需要的选区或路径，为制作具有圆形或椭圆的APP图标有很大的作用。

⑤继续使用椭圆工具，在其属性栏中设置其属性为“形状”，“填色”为黑色，描边为“无”，在画面中间绘制椭圆得到“椭圆4”， 并设置其“描边”的图案样式（图3.9）。

图3.9

⑥选择“椭圆4”，连续按快捷键Ctrl+J复制得到多个“椭圆4副本”。使用快捷键Ctrl+T变换图像大小，制作出相机向外扩散的效果（图3.10）。

图3.10

⑦选择“椭圆4副本12”，按住Alt键并单击鼠标左键，创建其图层剪贴蒙版，创建到“椭圆4副本11”图层中去。继续制作相机镜头的样式（图3.11）。

图3.11

⑧新建“图层1”，使用多边形套索工具绘制需要的图形，并填充为黑色。单击“添加图层样式”按钮，选择“描边”“颜色叠加”选项并设置参数，制作图案样式（图3.12）。

图3.12

⑨继续在“图层1”上单击“添加图层样式”按钮。选择“投影”选项并设置参数，制作图案样式（图3.13）。

图3.13

⑩选择“图层1”，连续按快捷键Ctrl+J复制得到多个“图层1副本”，使用快捷键Ctrl+T变换图像大小，制作出相机内部镜头的效果（图3.14）。

图3.14

图3.15

选择“椭圆4副本14”，继续在图层上单击“添加图层样式”按钮，选择“渐变叠加”选项并设置参数，制作图案样式（图3.16）。

图3.16

选择“椭圆4副本15”，使用快捷键Ctrl+T变换图像大小，并将其放到相机中间，制作相机镜头中细小的点（图3.17）。

图3.17

新建“图层2”，使用渐变工具，设置渐变颜色并在图层上拖出渐变，使用椭圆选框工具在画面中间绘制正圆，并添加图层蒙版。新建“图层3”，创建其图层剪贴蒙版并使用柔角画笔工具设置不同的颜色涂抹，设置其“不透明度”（图3.18）。

图3.18

继续使用椭圆工具，设置好颜色后绘制“椭圆5”，将其栅格化后复制两层并适当添加蒙版涂抹，更改其需要的混合模式和“不透明度”（图3.19）。

图3.19

回到“椭圆4”，连续按快捷键Ctrl+J复制得到多个“椭圆4副本”，将其移至图层上方，将其栅格化后添加图层蒙版。设置其不同的混合模式和“不透明度”制作其光效（图3.20）。

图3.20

3.1.2  正方形、长方形

在Photoshop中绘制正方形、长方形。选择工具箱里的矩形工具，按住Shift键后在画面上拖动，可以绘制出正方形的图案；直接在画面中拖动，则绘制出任意的长方形图案。

利用正方形、长方形制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项。设置完成后单击“确定”按钮，新建空白图像文件（图3.21）。

图3.21

②单击矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为黄灰色，按住Shift键在画面上绘制正方形形状，适当调整形状的位置至画面中央（图3.22）。

图3.22

③单击矩形工具，在属性栏上设置“填充”为较淡的黄灰色，在画面上绘制矩形形状，适当调整形状的位置（图3.23）。

图3.23

④单击矩形工具，在属性栏上设置“填充”为淡粉色，在画面上绘制矩形形状，适当调整形状的位置（图3.24）。

图3.24

⑤单击矩形工具，在属性栏上设置“填充”为红色，在正方形上方绘制相同长度的矩形形状，适当调整形状的位置（图3.25）。

图3.25

⑥单击椭圆工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为红色，按住Shift键在画面上绘制正圆。复制“形状5”，生成“形状5副本”，拖至右侧适当位置（图3.26）。

图3.26

⑦单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为黑色，然后在画面上绘制色块。设置其“不透明度”为10%，使图像变得透明（图3.27）。

图3.27

⑧单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为淡蓝色，在画面上绘制圆角矩形形状，适当调整形状的位置至两个圆点之间（图3.28）。

图3.28

⑨单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为浅灰色，然后在画面上绘制色块（图3.29）。

图3.29

⑩单击矩形工具，在属性栏上设置“填充”为黄灰色，在画面上绘制矩形形状，适当调整形状的位置，如图3.30所示。

图3.30

使用以上相同方法，绘制更多的矩形形状，注意形状的位置排列与大小（图3.31）。

图3.31

单击矩形工具，在属性栏上设置“填充”为红色，在画面上绘制矩形形状，适当调整形状的位置。至此，本实例制作完成。

[技巧点拨]

矩形工具的使用技巧：使用矩形工具绘制图形，可以在其属性栏中设置属性，从而可以直接绘制出用户所需要的选区或路径，对制作正方形或长方形的APP图标有很大的作用。

3.1.3  圆角矩形

在Photoshop中绘制圆角矩形。选择工具箱里的圆角矩形工具，在属性栏上设置好各项参数，按住Shift键后在画面上拖动，快速绘制出适当大小的圆角矩形。

利用圆角矩形制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，新建空白图像文件。单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为蓝色，按住Shift键在画面上绘制圆角矩形形状（图3.32）。

图3.32

②单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为淡蓝色，按住Shift键在画面上绘制圆角矩形形状，适当调整形状的位置至画面中央（图3.33）。

图3.33

③使用相同方法，在圆角矩形中间位置绘制更小的圆角矩形，制作环形叠加的效果（图3.34）。

图3.34

④单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为黑色，然后在画面上勾勒出黑色的直条图案（图3.35）。

图3.35

⑤设置“形状5”的“不透明度”为38%，图像效果发生改变（图3.36）。

图3.36

⑥单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为玫红色，然后在画面上勾勒出平行四边形图案（图3.37）。

图3.37

⑦按住Ctrl键单击“形状6”，将形状载入选区。新建“图层1”，单击画笔工具，设置前景色为粉色，然后在选区内绘制线条（图3.38）。

图3.38

⑧使用以上相同方法，结合画笔工具，在选区内继续绘制相同的线条，注意平行排列，完成后按快捷键Ctrl+D取消选区（图3.39）。

图3.39

⑨单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为紫色，再次在画面上勾勒出平行四边形图案（图3.40）。

图3.40

⑩按住Ctrl键单击“形状7”，将形状载入选区。新建“图层2”，单击画笔工具，设置前景色为淡紫色，然后在选区内绘制线条，完成后按快捷键Ctrl+D取消选区（图3.41）。单击钢笔工具，在属性栏中选择“形状”选项，分别设置“填充”为浅灰色和深灰色，在画面上勾勒出长条图案（图3.42）。单击矩形工具，在其属性栏上选择“形状”选项，并设置前景色为亮灰色，按住Shift键在画面上绘制矩形色块。至此，本实例制作完成（图3.43）。

图3.41

图3.42

图3.43

[技巧点拨]

圆角矩形工具的使用技巧：使用圆角矩形工具绘制图形可以在其属性栏中设置属性，可以绘制出圆角矩形图案；同时，属性栏上“半径”的参数值越大，图案越接近于圆形。

3.1.4  组合图形

在Photoshop中绘制组合图形。

选择工具箱里的椭圆选框工具，按住Shift键后在画面上拖动，可以绘制出正圆形的选区。结合多边形套索工具，按Shift键可以增加选区范围，按Alt键可以从选区中减去。

利用组合图形制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.44）。

图3.44

②单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为橘红色。按住Shift键在画面上绘制圆角矩形形状，适当调整形状的位置至画面中央（图3.45）。

图3.45

③单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为黑色，然后在画面上绘制色块。设置其“不透明度”为“25%”，图像变得透明（图3.46）。

图3.46

④单击椭圆选框工具，按住Shift键后在画面拖动，绘制出正圆形的选区。结合多边形套索工具，按住Shift键在左右两侧增加选区（图3.47）。

图3.47

⑤新建“图层1”，设置前景色为黄色，按快捷键Alt+Delete填充选区。新建“图层2”，设置前景色为“暗黄色”，单击画笔工具，在选区内绘制阴影，完成后取消选区（图3.48）。

图3.48

⑥单击矩形工具，在属性栏上设置“填充”为暗黄色，在画面上绘制矩形。单击“添加图层蒙版”按钮，结合画笔工具，在添加的蒙版中适当涂抹黑色，隐藏部分图像（图3.49）。

图3.49

⑦单击椭圆工具，在属性栏中选择“形状”选项，设置“填充”为淡黄色，按住Shift键在画面上绘制正圆形（图3.50）。

图3.50

⑧单击椭圆工具，设置“填充”为淡蓝色，按住Shift键在画面上绘制正圆形，适当调整其位置。再次绘制正圆形，“填充”为较深的蓝色（图3.51）。

图3.51

⑨按住Alt键在蓝色圆形上绘制圆形，将从原来的圆形形状上减去图案。使用相同方法，绘制圆形右下角的高光弧度（图3.52）。

图3.52

⑩单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为蓝灰色，然后在画面上绘制色块。设置其“不透明度”为“25%”，使图像变得透明（图3.53）。

图3.53

k使用以上相同方法，结合圆角矩形工具和椭圆工具，绘制时钟指针形状，注意形状的位置调整（图3.54）。

图3.54

l单击矩形工具，在属性栏上分别设置“填充”为黄色、暗黄色及橘色，在画面上分别绘制时钟上方的按钮底色、阴影和齿轮间隔。至此，本实例制作完成（图3.55）。

图3.55

[技巧点拨]

组合图形的运用可以通过新建区、添加到新选区、从选区减去、与选区交叉等方式来绘制出Photoshop工具中原本没有的图形。同时，各形状工具也可以通过Shift键和Alt键对图形进行增加和减去。

3.1.5  虚线框

在Photoshop中绘制虚线框，可以通过选择各种形状工具，在属性栏上设置描边的颜色和虚线值大小，根据画面的不同需要，绘制出规范的虚线框效果。

利用虚线框制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.56）。

图3.56

②单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为橘红色，按住Shift键在画面上绘制圆角矩形形状，适当调整形状的位置至画面中央（图3.57）。

图3.57

③单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为黑色，然后在画面上绘制色块。设置其“不透明度”为“21%”，使图像变得透明（图3.58）。

图3.58

④单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为无，“描边”为白色，然后在画面上沿着色块内边缘绘制虚线框（图3.59）。

图3.59

⑤双击“形状3”，勾选“投影”选项并设置各项参数，完成后单击“确定”按钮（图3.60）。

图3.60

⑥单击矩形工具，在属性栏上设置“填充”为粉红色，在画面上绘制矩形（图3.61）。

图3.61

⑦单击矩形工具，设置“填充”为较深的红色，在红色色块中间绘制矩形形状（图3.62）。

图3.62

⑧单击矩形工具，设置“填充”为深红色，在红色色块右侧间绘制矩形形状（图3.63）。

图3.63

⑨单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为淡黄色，然后在画面中绘制形状（图3.64）。

图3.64

⑩按下Ctrl键将该图层载入选区，新建“图层1”，单击画笔工具，在选区内绘制较淡的阴影（图3.65）。

图3.65

k使用以上相同方法，新建“图层2”，单击画笔工具，在选区内绘制较深的阴影，完成后取消选区（图3.66）。

图3.66

l单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为红色，然后在画面中绘制笔尖。至此，本实例制作完成（图3.67）。

图3.67

[技巧点拨]

虚线框的绘制免去了手绘虚线的麻烦，同时更加规范。设置时注意调整描边的参数大小，使虚线的大小更符合画面的需要。

3.1.6  自定义形状

在Photoshop中绘制自定义形状。选择工具箱里的自定形状工具，在属性栏上的下拉按钮上单击，可以弹出自定形状对话框。选择适当的形状，按住Shift键后在画面上拖动，可以绘制出一定比例的图像。

利用自定形状制作APP手机图标的流程如下。

①执行“文件”→“新建”命令，在弹出的“新建”对话框中设置各项参数及选项，设置完成后单击“确定”按钮，新建空白图像文件（图3.68）。

图3.68

②单击圆角矩形工具，在其属性栏上选择“形状”选项，在属性栏上设置“填充”为深蓝色，按住Shift键在画面上绘制圆角矩形形状，适当调整形状的位置至画面中央（图3.69）。

图3.69

③单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为浅蓝色，然后在画面上绘制色块。单击自定形状工具，在其属性栏中选择需要的形状（图3.70）。

图3.70

④新建“图层1”，设置前景色为蓝色，然后在画面上绘制图像。完成后按Ctrl键单击“形状1”前的缩略图，将图像载入选区，单击“添加图层蒙版”按钮，为选区添加蒙版（图3.71）。

图3.71

⑤单击矩形工具，在属性栏上分别设置“填充”为不同的颜色，在画面上绘制矩形（图3.72）。

图3.72

⑥单击矩形工具，在属性栏上设置“填充”为绿色，在画面上绘制矩形。单击直线工具，按住Alt键在矩形对角上绘制两条直线，使图像效果发生改变（图3.73）。

图3.73

⑦单击椭圆工具，在属性栏中选择“形状”选项，分别设置“填充”为不同的颜色，按住Shift键在画面上绘制正圆形（图3.74）。

图3.74

⑧单击椭圆工具，设置“填充”为灰色，按住Shift键在画面上绘制正圆形，再按住Alt键在画面正中绘制圆形，减去部分图像。单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为灰色，然后在画面上绘制等比例色块（图3.75）。

图3.75

⑨使用相同方法，单击椭圆工具，按住Shift键在灰色图形上绘制圆形，按住Alt键将从原来的圆形形状上减去图案（图3.76）。

图3.76

⑩单击自定形状工具，在其属性栏中选择需要的形状，按住Shift键在画面上绘制图案（图3.77）。

图3.77

k使用以上相同方法，单击矩形工具，按住Alt键从圆环形状上减去图案。单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为黄色，然后在图案各凸起处上绘制色块（图3.78）。

图3.78

l单击钢笔工具，在属性栏中选择“形状”选项，设置“填充”为深蓝色，然后在图案下方绘制阴影，并将图层拖至“椭圆4”的下层。至此，本实例制作完成（图3.79）。

图3.79

[技巧点拨]

自定形状的运用可以添加不同的图案效果，在选择时，可以通过单击对话框右侧的下拉按钮，并在弹出的快捷菜单中选择“追加全部”选项，可以添加更多的自定形状图案。