![中文版Photoshop平面广告设计与制作全视频实战228例](https://wfqqreader-1252317822.image.myqcloud.com/cover/443/31794443/b_31794443.jpg)
第6章 矢量绘图
本章概述
矢量图是由线条和轮廓组成,不会因为放大或缩小使像素受损,从而影响清晰度。钢笔工具与形状工具都是典型的矢量绘图工具。在平面设计制作过程中,尽量使用矢量绘图工具进行绘制,这样可以保证在适应不同尺寸的打印要求时,对图像缩放不会使画面元素变得模糊。除此之外,矢量绘图因其明快的色彩、动感的线条也常用于插画或者时装画的绘制。
本章重点
⃟熟练掌握钢笔工具的使用方法
⃟熟练使用形状工具的使用方法
/佳/作/欣/赏/
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P124_1.jpg?sign=1739196696-Nfvctt74O79xEn9Iwh5MDb4nyvEcAIYM-0-522c8f087bde33064f39811d9de859fa)
实例064 使用钢笔工具制作APP标志
文件路径 第6章\使用钢笔工具制作APP标志
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●路径的运算
●文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_1.jpg?sign=1739196696-ruTEKWKIvvqjuuwVt70OSZAL6ENhWDWn-0-eab3da4b458b5314a87af957636f4d0b)
扫码深度学习
操作思路
钢笔工具可以绘制“路径”对象和“形状”对象。本案例使用钢笔工具在画面中绘制形状,最后在形状上方输入文字,完成标志的制作。
案例效果
案例效果如图6-1所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_2.jpg?sign=1739196696-oonFN55FyPXkx4ElaeLjMdr97Mkl4a8u-0-15a12045d116b1ea3d6a2234c5a68df7)
图6-1
操作步骤
01 执行菜单“文件>新建”命令,在“新建文档”对话框中设置“宽度”为1200像素、“高度”为702像素、“分辨率”为72像素/英寸,“颜色模式”为“RGB颜色”、“背景内容”为“白色”,单击“创建”按钮完成设置,如图6-2所示。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为蓝色(R:183、G:239、B:255),单击“确定”按钮完成设置,如图6-3所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_3.jpg?sign=1739196696-GkQtErhsDiXRqitRD8ML4IpyWE22igJb-0-fbc0c56bb30f7910918c5a2ead3e7c36)
图6-2
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_5.jpg?sign=1739196696-9qCUCXvIA0w6haZQ3kd17S2UpAojfN9v-0-3c0cd5b465ff687b83b779f474a34b82)
图6-3
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-4所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_6.jpg?sign=1739196696-PrYUTeUuUEta8jJGvAZqYjclkeFATE7L-0-21c4baabeca9927e00feccec001a1f11)
图6-4
03 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为粉色,使用钢笔工具在画面中多次单击绘制折线形状,如图6-5所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_7.jpg?sign=1739196696-YG8HqB8Cdf6Rp9Cz9YqyHiunB7IgnHe8-0-ac95c758fb79b338b6a4fef309802951)
图6-5
04 在工具选项栏中单击“路径操作”按钮,在下拉菜单中选择“减去顶层形状”,单击“矩形工具”按钮,如图6-6所示。然后在折线中绘制一个矩形,使这部分被删除,此时画面效果如图6-7所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_8.jpg?sign=1739196696-kXpWzrpgWObXrEPqlZUjD1IViPjg8CNf-0-2bb94cb1e457c3238d042bed181d148a)
图6-6
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_1.jpg?sign=1739196696-Avd8sb7XwOUuHisriGoVGt8HyXSHFgi6-0-f6f500c7dc7d505544d2587fb5620420)
图6-7
05 选择工具箱中的横排文字工具,然后在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,此时画面效果如图6-8所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_2.jpg?sign=1739196696-UkJdQC6YWGAVeYuGGUybn9qbDxJdrf5f-0-ff48619c9c29d84e9c853d93b6ed33f5)
图6-8
提示 终止路径绘制的操作
如果要终止路径绘制的操作,可以在钢笔工具的状态下按Esc键完成路径的绘制。或者选择工具箱中的其他任意一个工具,也可以终止路径绘制的操作。
要点速查:路径的运算
选区可以进行运算,路径同样也可以进行运算。首先绘制一个形状,如图6-9所示。默认状态下,工具选项栏中的“路径操作”按钮为(新建图层)。单击该按钮,在下拉菜单中选择一种运算方式,如图6-10所示。图6-11所示为不同运算方式产生的运算效果。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_4.jpg?sign=1739196696-63DElHKny67igYV2jeApEqkJK5aG0WmO-0-1141638f9f543873501ca79b4094032c)
图6-9
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_5.jpg?sign=1739196696-vXuobIXL3vIXPgJldrVJlVa0RfcGXr4v-0-2adf18db492e2f51c8ab4ba08d1bc4dc)
图6-10
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_6.jpg?sign=1739196696-99BFFeVLxfZvlChtjYrRdEpnblfqEAnP-0-91eae9b51411c956115f91136d77f609)
图6-11
实例065 使用钢笔工具抠图制作购物APP启动页面
文件路径 第6章\使用钢笔工具抠图制作购物APP启动页面
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●将路径转换为选区
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_7.jpg?sign=1739196696-5xcWXkhXEeeUqNVKawGk6WvD3O6WIILP-0-ef05642c0e9abc901c987b008e03a889)
扫码深度学习
操作思路
本案例使用钢笔工具在人物周围绘制路径,并将路径转换为选区;使用图层蒙版将选区外的部分隐藏,此时画面出现新的背景。
案例效果
案例效果如图6-12所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_8.jpg?sign=1739196696-7IOZ4sVOl7zwyvHKF4gNPf4BdUUXRETo-0-f53f9426adf87cc9ec55a69507f768e8)
图6-12
操作步骤
01 执行菜单“文件>打开”命令,或按Ctrl+O快捷键,在弹出的“打开”对话框中选择素材“2.jpg”,单击“打开”按钮,如图6-13和图6-14所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_9.jpg?sign=1739196696-7bZgxMEhx16lQNep0bMCtVH9kjzylwjE-0-a893d0bb20140b2bd75bdf638b4038d3)
图6-13
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_10.jpg?sign=1739196696-tWwFMAtVPO8pJHBruHYweh3AS1Tnng8F-0-68834c4ca749544249ce448b4e7b37fe)
图6-14
02 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-15所示。将人物素材调整到合适大小,然后按Enter键完成置入。选择素材图层,执行菜单“图层>栅格化>智能对象”命令,将该图层栅格化为普通图层,效果如图6-16所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_1.jpg?sign=1739196696-kC0MwfN2zyyV7RxLZ5lBz5pjVosRD7eV-0-8ace95981f1a90aa09ecf92f16483727)
图6-15
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_2.jpg?sign=1739196696-k5Hboe4lCH1kUTs27D2aI1hMObgDqYrF-0-d2a94e3b4a8ebae19200b005d8eff235)
图6-16
03 选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“路径”,在画面中人物边缘按鼠标左键单击拖曳绘制路径,如图6-17所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_3.jpg?sign=1739196696-0vg1saQAfLhwOmpJiBXQ97v2ZY93fJ8d-0-c16096ac80193142882fba371b9eabb3)
图6-17
04 选择工具箱中的直接选择工具,然后框选人物头上的锚点,将锚点拖曳到人物边缘上,如图6-18所示。选择工具箱中的(转换点工具),然后将光标移动到锚点上,按住并拖曳使路径完全符合人物轮廓,如图6-19所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_5.jpg?sign=1739196696-kWaQkRDDdevAfTQ0QLxoNcsYw6fI0QKi-0-91c677ce9fe03b9ca6c0fa159418c869)
图6-18
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_6.jpg?sign=1739196696-EaWJBS5FK9oQOzr6ZuoOuJDfIx61330A-0-f8ffacef9c1350fcac09a1a9a964c56e)
图6-19
05 使用同样的方法,调整其他锚点,如图6-20所示。调整完成后使用Ctrl+Enter快捷键将路径转换为选区,如图6-21所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_7.jpg?sign=1739196696-NcTUWqZxu6tevWsKldt79YpfCbJAl9dY-0-9ed334e98a3e73ff989ddafd10b96d97)
图6-20
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_9.jpg?sign=1739196696-OUC0JWy4ZUR4ZZQWAJ0VHGmLqUPhsUGo-0-b44347c6d1ae72f0c9cb09136810aeba)
图6-21
提示 基于选区添加图层蒙版
如果当前图像中存在选区。选中某图层,单击“图层”面板底部的“添加图层蒙版”按钮,可以基于当前选区为任何图层添加图层蒙版,选区以外的图像将被蒙版隐藏。
06 选中人物图层,在“图层”面板中单击“创建图层蒙版”按钮,如图6-22所示。使选区以外的部分隐藏,画面效果如图6-23所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_10.jpg?sign=1739196696-ndrVp9IrucrGQxgPoxWk8q7mgvPE2ssB-0-54f2d07e19f51044959bc81e8a4fd628)
图6-22
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_11.jpg?sign=1739196696-mH6DSX1UeHL4TswirFLmKRYaitSNnO35-0-7b8a9182954a6f6b0cc27c8fade88ed4)
图6-23
提示 蒙版的使用技巧
要使用图层蒙版,首先要选对图层,其次要选择蒙版。默认情况下,添加图层蒙版后就是选中的状态。如果要重新选择图层蒙版,单击图层蒙版缩览图即可。
实例066 使用形状工具与形状运算制作引导页
文件路径 第6章\使用形状工具与形状运算制作引导页
难易指数 ★★★☆☆
技术掌握
●形状工具
●形状运算
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_1.jpg?sign=1739196696-2YdzkAII2jZm0ORF63ZnEMQHMKnVuWMR-0-8f6a2352fc57c2fc820d1ad57f53dbd6)
扫码深度学习
操作思路
本案例主要使用工具箱中的各种形状工具在画面中绘制图案,在绘制过程中要合理使用形状运算,利用形状运算的特征制作外形奇特的图形。
案例效果
案例效果如图6-24所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_2.jpg?sign=1739196696-W08OYmWgK6WVQ7ILeYt85LveObHGCPpX-0-7eb0672b0f5ef5c1d61cc5bc3f4a7d22)
图6-24
操作步骤
01 执行菜单“文件>新建”命令,创建新文档。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为蓝色,单击“确认”按钮完成设置,如图6-25所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_3.jpg?sign=1739196696-dqM8OEEdVtsX3TUrp09F50JvZmdQbmER-0-4529332a6a3ffb2feba09d8453338718)
图6-25
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-26所示。右击工具箱中的形状工具组,在工具组列表中选择椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为红色,按住Shift键并按住鼠标左键在画面左侧位置拖曳绘制圆形,如图6-27所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_4.jpg?sign=1739196696-eSvLcQW5tbmzukbRg8zum3t6HyeQwXId-0-8aac3455afe6767a9415be64adb7d909)
图6-26
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_5.jpg?sign=1739196696-6X3sNIjrs0pPOE0mXzlVaQUgPX7dAWvH-0-b2f8a7c679ff836eac2ffcbb941e4ad0)
图6-27
03 在“图层”面板中选中形状图层并将其拖曳到“创建新图层”按钮上,进行复制,如图6-28所示。选择复制的图层,在工具选项栏中设置“填充”为绿色,然后将复制的圆移动到红圆右侧,此时画面效果如图6-29所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_7.jpg?sign=1739196696-y4pi6ZhTYAThm7XedkuHMMmZ3Txdhv4P-0-6711e36375efb5bdaad7c66a2477bf43)
图6-28
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_8.jpg?sign=1739196696-8RnMI1VfJoHRCdb25w5WfPu0Q8EAV7v2-0-8b1dec055a97ad8e640b30976112140a)
图6-29
04 使用同样的方法,制作蓝色正圆,如图6-30所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_9.jpg?sign=1739196696-GUnwx0of2YyEajbhiJivgToTrSkpfNpP-0-ef284e5be478c748c075fe1845cc817b)
图6-30
05 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为白色,在画面中绘制形状,如图6-31所示。继续使用钢笔工具,将工具选项栏中的形状“填充”改为蓝色,然后在右侧白色图形下方绘制三角形,如图6-32所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_11.jpg?sign=1739196696-DpLgrFG5DC2i6QQEjGbGGYQ2RWItIdyT-0-a0a7c3f51e650387437b8b8f99a3a5f5)
图6-31
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_12.jpg?sign=1739196696-XwkUhpkg5FTwOPy1ls0FWsSfZvs2IluN-0-cad1e20b215ef8857869df4cf77aa3c5)
图6-32
06 在选择钢笔工具的状态下,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色。在画面的左下角绘制一个三角形,如图6-33所示。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,设置“填充”颜色为白色,按住鼠标左键并拖曳绘制圆形,然后在其选项栏中单击“路径操作”按钮,在下拉菜单中选择“合并形状”,再绘制其他椭圆,同样的方法依次绘制两个椭圆,如图6-34所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_1.jpg?sign=1739196696-YoCRGPENopbvBoL4WfvZ25hyLJ3sdL55-0-6060e829f66e6c81155b95816c44a60b)
图6-33
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_2.jpg?sign=1739196696-vIOmrqgByUnYCqpD4u4f6xO8lUxAitx4-0-da265cb08be3b1c6867d2b0cfd738cb2)
图6-34
07 继续在当前图层操作,在工具选项栏中单击“路径操作”按钮,设置为“减去顶层形状”,然后选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,设置“填充”颜色为白色,在白色图形的下方按住鼠标左键并拖曳绘制矩形,如图6-35所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_3.jpg?sign=1739196696-z1xhIGJ8h3TYYykuPduOAK8qUCE8Y61J-0-1d1eed65c6d9a1c266942879173e0d60)
图6-35
08 再次使用椭圆工具在云朵图形下方绘制深蓝色正圆,并将其复制,如图6-36所示。在“图层”面板中按住Ctrl键选中多个深蓝色正圆图层,在工具选项栏中单击“垂直居中对齐”按钮,在弹出的下拉菜单中选择“水平居中分布”,此时画面效果如图6-37所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_4.jpg?sign=1739196696-orsaok79IW1tvQKyf1XlHxgWbb5Imi03-0-ee293026a5ac08be2dde90a2f2ce61d6)
图6-36
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_5.jpg?sign=1739196696-SXeiJsrznVjcFkvt9HzKDRXr35358vdr-0-34ab716e694f4bda52f5f03b5ecbf4ce)
图6-37
09 在“图层”面板中选择一个椭圆图层,然后设置工具选项栏中的“填充”为白色,此时该圆变成白色正圆,如图6-38所示。在工具箱中选择横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,如图6-39所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_6.jpg?sign=1739196696-1cmbYJOMIuDuQnZJ1WShnwG3Zuxm4Bfw-0-c34b11b496d39c32645e5215e1bb4afd)
图6-38
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_7.jpg?sign=1739196696-kIO0z1qy0s2uONET4uHCqubMHxqDiVAV-0-167a8f29a48abad3724448c36530bc26)
图6-39
10 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.png”,然后单击“置入”按钮,如图6-40所示。将素材调整到适合位置,按Enter键完成置入,最终效果如图6-41所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_8.jpg?sign=1739196696-CIXrulusmWHYTHovmauaExv6RxC32iza-0-d4468d5bedc05613e90d02fdc1342d97)
图6-40
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_9.jpg?sign=1739196696-6pS0F2tUXndY8Vlwxtnopb9g3plVILwC-0-65c2422bf428d62fb070ea1e98797bdf)
图6-41
实例067 使用椭圆工具制作画面创意效果
文件路径 第6章\使用椭圆工具制作画面创意效果
难易指数 ★☆☆☆☆
技术掌握
●椭圆工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_1.jpg?sign=1739196696-CIuBQmvir6ycf5H2rFDlw8Opuuvxa4zp-0-a9cfbfae8adbdc7b494eac362839e1a7)
扫码深度学习
操作思路
本案例主要使用椭圆工具在画面中按住Shift键的同时按住鼠标左键拖曳绘制矢量圆形,然后在上方输入合适的文字,完成最终的操作。
案例效果
案例效果如图6-42所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_2.jpg?sign=1739196696-GjQc5yRm777gudtcvEVgztOp2XrHkrSn-0-c0ac6b1155fd4f7086ed1519e8729ee0)
图6-42
操作步骤
01 执行菜单“文件>打开”命令,打开素材“1.jpg”,如图6-43所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_3.jpg?sign=1739196696-cs7ppi6sWzdgpauH4Gx9AU23Tm8FP1Ny-0-034ff99c70ca6c12b3c5bda0831910ac)
图6-43
02 选择工具箱中的(椭圆工具),将工具选项栏中的绘制模式设置为“形状”、“填充”为白色、“描边”为无,在画面中按住Shift键绘制一个白色正圆,如图6-44所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_5.jpg?sign=1739196696-euTmEFOlTtuN4fU7GikodJEV1uMbxYMM-0-55f6cdfadf3b72db42cc9f1510cbd4f7)
图6-44
03 接下来在画面中绘制文字部分。选择工具箱中的(横排文字工具),在工具选项栏中设置合适的“字体”“字号”和“颜色”。然后在画面中单击,输入文字。输入完成后单击工具选项栏中的“提交当前所有操作”按钮
,即可完成操作。将文字放置在正圆内部,如图6-45所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_8.jpg?sign=1739196696-FGOgWMhl0XJMXN35KOHCuccpLxsXH7jz-0-84fc36696293c6599ba54db140f04e18)
图6-45
04 变换“字体”“字号”和“颜色”,继续在圆形下方输入剩余文字,最终效果如图6-46所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_9.jpg?sign=1739196696-thmbBFeM563MWTUMQRGiy0oOPxwW3qQE-0-995755e769679b1ac5713b5a63f5566b)
图6-46
实例068 极简风格图标设计
文件路径 第6章\极简风格图标设计
难易指数 ★★★☆☆
技术掌握
●圆角矩形工具
●钢笔工具
●自定形状工具
●图层样式
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_10.jpg?sign=1739196696-qZvAgU1Rm009OjOu0RbumXUmiCFSxp7Y-0-aaf735b79ce152c57f0a4647c4ad254a)
扫码深度学习
操作思路
本案例首先使用圆角矩形工具制作图标背景部分,其次运用钢笔工具绘制矢量的蓝色形状,最后使用自定形状工具添加其他元素。
案例效果
案例效果如图6-47所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_11.jpg?sign=1739196696-ELKtIBkrjLAEXuk6eB2uFjERpPGFhv4E-0-fcf944bd71b236645e12fe88b071b1bc)
图6-47
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1600像素、“高度”为1400像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-48所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_1.jpg?sign=1739196696-O4TTaDQetchjb4OCrnMVvX8x6vKiQcL8-0-ec604c2daf07221bc9407106a87aadb2)
图6-48
02 绘制按钮底色。选择工具箱中的(圆角矩形工具),在工具选项栏中设置绘制模式为“形状”、“填充”为蓝灰色、“描边”为无、“半径”为80像素,在画面中按住鼠标左键绘制正圆角矩形,如图6-49所示。然后执行菜单“图层>图层样式>投影”命令,在弹出的“图层样式”对话框中设置投影的“混合模式”为“正片叠底”、颜色为黑色、“不透明度”为60%、“角度”为120度、“距离”为5像素、“扩展”为0%、“大小”为8像素,设置完成后,单击“确定”按钮,如图6-50所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_2.jpg?sign=1739196696-pakNKNsySCCIKclt2WKPi0u1LRVN7JO1-0-a50423cb33d15a15c5d2aaec48b2e638)
图6-49
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_3.jpg?sign=1739196696-HrBA3GumcxU57on3WKkeg6aMpbAF5RSe-0-3b7dcfe98b44ec4a8cd54330a08874dd)
图6-50
03 此时效果如图6-51所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_5.jpg?sign=1739196696-ZYOmEm4A1M5YDf4rJ391WuRwYMUSFpke-0-f125bb9a052cc171f6df7ca161a9dce1)
图6-51
04 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为蓝色、“描边”为无,设置完成后,在圆角矩形框上方绘制一个多边形,如图6-52所示。使用同样的方法,在多边形右上角绘制一个三角形,将“填充”改为深蓝色,如图6-53所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_6.jpg?sign=1739196696-i9nXnzzisseOyPfdhu0UklyEWbknserO-0-ef0fd037ddf4d94eb6e3b361b7b60469)
图6-52
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_7.jpg?sign=1739196696-HMJr91tm1Z0zRLNFCWvSfm1GIiYlxqM7-0-9d6f2ba166d2322cea0c1f1083b4cd74)
图6-53
05 选择工具箱中的(自定义形状工具),在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个音符形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-54所示。最后将得到的形状图层移动至三角形图层下方,效果如图6-55所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_1.jpg?sign=1739196696-b21lYtjFurTHukV2aDNwQMXf9dqb7Fnd-0-4c8756a3e9e7d73630af41f9ee06b066)
图6-54
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_2.jpg?sign=1739196696-zjvp9esgf650miun2lZJyXMi72HADHJt-0-0bc30adb45b6f72264ae2cf55488a34b)
图6-55
06 单击“图层”面板底部的“创建新组”按钮,创建一个图层组。将多边形图层、音符图层和三角形图层拖曳至该组内。选择图层组,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为40%、“杂色”为0、颜色为白色、“方法”为“柔和”、“源”为“边缘”、“阻塞”为0%、“大小”为40像素、“范围”为50%、“抖动”为0%,设置完成后,通过勾选“预览”复选框进行查看,如图6-56所示。此时画面效果如图6-57所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_4.jpg?sign=1739196696-VJY84FQlQcrD0LHoiJPWksAQLt1Beo6C-0-2b4a17e988e5440a547b39ebdf8f4ceb)
图6-56
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_5.jpg?sign=1739196696-0jRVLpBqu9F54eJxF57WcHuGp561SOrH-0-0e43f1b6bf8003a2ebefb6fb9e165cd7)
图6-57
07 在“图层样式”对话框中,勾选“投影”复选框,然后设置投影的“混合模式”为“正片叠底”、颜色为黑色、“不透明度”为60%、“角度”为120度、“距离”为5像素、“扩展”为0%、“大小”为8像素,设置完成后,单击“确定”按钮,如图6-58所示。最终画面效果如图6-59所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_6.jpg?sign=1739196696-5oyc7MtulWgAp5NxBklPYDyF5hj2RiIs-0-ea9fcb3ed6b323cf4cdad1de82dc229d)
图6-58
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_7.jpg?sign=1739196696-LvWB1SPKcWRPGMXmIIVYaNpsdfwGFNYe-0-7b31dc56efd493c3ada93ef1029cab21)
图6-59
要点速查:建立选区的方式
绘制路径的目的往往是抠图或填充颜色。当路径绘制完成后,使用Ctrl+Enter快捷键即可得到选区。也可以在路径上右击,在弹出的快捷菜单中执行“建立选区”命令,如图6-60所示。然后在弹出的“建立选区”对话框中可以进行选区“羽化”的设置,如果想要得到的是精确的选区,那么“羽化半径”设置为0像素即可。想要得到边缘模糊的选区,则可以设置一定的羽化数值,如图6-61所示。设置完成后,单击“确定”按钮,可以得到选区如图6-62所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_1.jpg?sign=1739196696-j5uFU16oW5vn15I9jAIm2z6Q1aaqgxeq-0-ca9420119002d9cfd95fb10183063819)
图6-60
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_2.jpg?sign=1739196696-3fnvI8rg14fZJE2s6tWFCLyXAMedYLwM-0-0ceda2d52717b342593f97c3b3c0a615)
图6-61
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_3.jpg?sign=1739196696-FAhfLM2GKjXwmX4EXF72MCZzgKwM6b8k-0-2d577faefd5beb4346e32adcb63ebda5)
图6-62
提示 将路径转换为选区
使用Ctrl+Enter快捷键可直接将路径转换为选区。
实例069 使用形状工具制作质感按钮
文件路径 第6章\使用形状工具制作质感按钮
难易指数 ★★★☆☆
技术掌握
●形状工具
●渐变工具
●椭圆工具
●钢笔工具
●图层样式
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_4.jpg?sign=1739196696-IizjPpBc0Svetu2OEOwiLkbBR2TRkv8k-0-648e936519c694db7745bbd1d42083a6)
扫码深度学习
操作思路
本案例在操作中多次运用到形状工具,使用该工具绘图时要注意形状的运算和工具选项栏中的绘制模式。
案例效果
案例效果如图6-63所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_5.jpg?sign=1739196696-6BzLHiIHZ2iHwlbB25X85v7O0p6t9BK9-0-25655156492e44a540e7a9c37ed0e38d)
图6-63
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为2604像素、“高度”为2413像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-64所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_6.jpg?sign=1739196696-GRDOJJ8Cr5sThi4VOBZLyKmQGJqGZICI-0-b8ae9481672df640cba28f7dfc49c90e)
图6-64
02 选择工具箱中的渐变工具,单击工具选项栏中的渐变色条,在弹出的“渐变编辑器”对话框中编辑一个蓝色系的渐变颜色,设置完成后单击“确定”按钮,如图6-65所示。然后在工具选项栏中设置渐变类型为“线性渐变”,最后使用渐变工具在画面中按住鼠标左键由下至上拖曳进行填充,效果如图6-66所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_1.jpg?sign=1739196696-apPLFSqaB8YMyco0QV8Mz4nCnGxif4N5-0-5b03d36cba512a7ba9ef74c040d82a13)
图6-65
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_2.jpg?sign=1739196696-CWxlQ8rUycHTg0rjsWAoQ9lEstPTcmjd-0-b272e18ee6e7c760c7701ac3dcd9db68)
图6-66
03 选择工具箱中的(椭圆工具),在选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在画面底部按住鼠标左键绘制椭圆,如图6-67所示。在“图层”面板上将该图层的“不透明度”设置为20%,如图6-68所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_4.jpg?sign=1739196696-Cgg1s90riqEcZP0zAB7WxdezPw5qKcCS-0-3ae4b23257b9f6f62e87bda1b57f9071)
图6-67
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_5.jpg?sign=1739196696-cwwrCUOirVZM5etgy1sYF0DqmwdwH7XG-0-b80d52c749c491674e3a944f3c3e9430)
图6-68
04 选择工具箱中的(自定义形状工具),在选项栏中设置绘制模式为“形状”、“填充”为绿色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个会话形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-69所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_7.jpg?sign=1739196696-kRxnUm6BSA69r2ONZj1pmf7965CV8Cmy-0-bfdb7706d7b273fac3c01a75a50cfecf)
图6-69
05 选择工具箱中的(椭圆工具),在工具选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,然后在对话形状上面按住鼠标左键并按住Shift键绘制正圆,如图6-70所示。在“图层”面板上设置该图层的“不透明度”为35%,效果如图6-71所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_9.jpg?sign=1739196696-UgkGsuMP4xWHxvS9bf7Lhc49GNHUjYU9-0-7444624654320ac9db96e3134d23a711)
图6-70
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_10.jpg?sign=1739196696-JDHdmlqyBnAJLnzfKpEKyTFtdmKwkemH-0-14c74fdbb2f80ed1be1496dd3c8cc813)
图6-71
06 选择正圆图层,单击“图层”面板底部的“添加蒙版”按钮,为该图层添加图层蒙版。选择工具箱中的(画笔工具),在选项栏中单击打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,如图6-72所示。将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-73所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_12.jpg?sign=1739196696-3usP94UuGbQRMxOAIXJPvdaaLdCusx8A-0-abd5d1ad03bc7eec1079a4d186bbfb66)
图6-72
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_13.jpg?sign=1739196696-uVFSQApBqTgDCM9aipM27Rb6s2sJ8g8L-0-a07267300fcc7c3b7ac7256b05c8d30b)
图6-73
07 在“图层”面板中选择正圆图层,使用Ctrl+J快捷键将形状进行复制,单击复制图层的图层蒙版缩览图,选择工具箱中的画笔工具,将前景色设置为白色,然后按住鼠标左键在画面下方涂抹,在“图层”面板上设置“不透明度”为90%,效果如图6-74所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_14.jpg?sign=1739196696-j3kHpHQ1vIb2P1ED6FrbTw8mb51G2Vgz-0-5ccf40379863c13a536fbadcb43607bc)
图6-74
08 选择工具箱中的(钢笔工具),在选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,设置完成后,在会话形状右侧绘制一个月牙形状,如图6-75所示。为该图层添加图层蒙版。然后选择工具箱中的画笔工具,在工具选项栏中打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-76所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_1.jpg?sign=1739196696-9MRzCFUpu8fox2KcuAWU2f5wdZVMltUh-0-bc707c45e70e62685066d1f5e1894e61)
图6-75
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_2.jpg?sign=1739196696-us3t9lzq8GadHFKBSMqhsEUMDYVVjEAw-0-a8dea881f955d699c8f41e7c09b8be11)
图6-76
09 绘制声音形状。选择工具箱中的自定义形状工具,在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个“声音”形状,然后在正圆上边按住鼠标左键拖曳进行绘制,如图6-77所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_3.jpg?sign=1739196696-AXhwujmSSaaHcjhSUfQSzkveL8IBBom1-0-e4b0c914b3b91d98b36852e7ff92f8a3)
图6-77
10 选择声音形状图层,执行菜单“图层>图层样式>斜面和浮雕”命令,在弹出的“图层样式”对话框中设置斜面和浮雕的“样式”为“内斜面”、“方法”为“平滑”、“深度”为100%、“方向”为“上”、“大小”为10像素、“软化”为0像素、“角度”为-48度、“高度”为21度、“高光模式”为“滤色”、颜色为白色、“不透明度”为75%、“阴影模式”为“正片叠底”、颜色为黑色、“不透明度”为30%,设置完成后,单击“确定”按钮,如图6-78所示。最终效果如图6-79所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_4.jpg?sign=1739196696-94WuLRTFwmB9IedaMMia4VcW7wphA3M9-0-cae32be4139b9a2e3378f5e2642bf7e7)
图6-78
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_5.jpg?sign=1739196696-qQNg3Sc8kkfQI02B8r6fp5dCMSSb7lwe-0-d2cedb6092b9b1f891d43a8baf8514f4)
图6-79
实例070 使用矢量工具制作活动标志
文件路径 第6章\使用矢量工具制作活动标志
难易指数 ★★★☆☆
技术掌握
●转换点工具
●自定义形状工具
●钢笔工具
●矩形工具
●横排文字工具
●自由变换
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_6.jpg?sign=1739196696-5sBRIffInAzRuNpNJqVJnQ9YbBeW7gxy-0-ff1012ce8af8d80ce2df0f36e8648959)
扫码深度学习
操作思路
转换点工具可以调节路径的弯曲度。本案例利用这一特征将直角五角星转换为圆角的五角星,然后使用钢笔工具绘制五角星的内部图案,最后在其上方输入文字。
案例效果
案例效果如图6-80所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_7.jpg?sign=1739196696-3i1itPBYtEPuoOh0M0lcJ07ckyjfw4UC-0-11a184dd0fdb3370383d998c5ec80f74)
图6-80
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1500像素、“高度”为1500像素、“分辨率”为72像素/英寸、“颜色模式”为“RGB颜色”、“背景内容”为“白色”,如图6-81所示。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为深蓝色,单击“确定”按钮完成设置,如图6-82所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_1.jpg?sign=1739196696-2vyraRKaUq3mrgPlcPRgVFCBhy14HDa0-0-9dc4ef05ed99f08550ffe3d87adc7b12)
图6-81
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_2.jpg?sign=1739196696-UJhjqdxnZSYYsuN4t3YGwxooPj9Hp5BR-0-7283a8b104cc37aa29095a7e672954b4)
图6-82
02 使用前景色(填充快捷键为Alt+Delete)填充画布为深蓝色,如图6-83所示。使用鼠标右击工具箱中的“形状工具组”,在工具组列表中选择自定义形状工具,在工具选项栏中设置“形状”为五角星,然后在画面中按住鼠标左键进行拖曳,完成五角星绘制,如图6-84所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_3.jpg?sign=1739196696-WG3fNAYj7okdE1QKrj01VBCS2czIVuTz-0-571e4de522d36c9779fa7fe835560627)
图6-83
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_5.jpg?sign=1739196696-oflheRjCnuJceBoOZJrjzYufNCvIWwjZ-0-6e9947a537ec60c2eea52390cf9f6f14)
图6-84
03 在工具箱中右击“钢笔工具组”,在工具组列表中选择(转换点工具),按住五角星的一角进行拖曳,改变五角星一角的形状,如图6-85所示。使用同样的方法,制作其他角,如图6-86所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_6.jpg?sign=1739196696-nc8jtAY4tF3WynFZt1gr4bMiplqDU9d6-0-64a0b8382c92058e6b6aa37cc8b2bcda)
图6-85
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_7.jpg?sign=1739196696-EHEG3nfdq1t3wOAaVNEzR5QSnQsDhmHL-0-4c09aeee0e86cb56e736aad58fa80eca)
图6-86
04 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-87所示。将素材进行旋转调整到合适位置,按Enter键完成置入,并执行菜单“图层>栅格化>智能对象”命令,此时画面效果如图6-88所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_8.jpg?sign=1739196696-CHJckGarRMJkWtOI0txazXUXNlO80pw4-0-e1e14eca921a1a04acbbf21439138386)
图6-87
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_9.jpg?sign=1739196696-9z7HNzc1xPlGji8KcvJLCvoibIc4jUHC-0-ba93e0f828bbda67ef0c046511ee682b)
图6-88
05 在“图层”面板中选择素材“1.jpg”所在图层,右击该图层,在弹出的快捷菜单中执行“创建剪贴蒙版”命令,如图6-89所示。此时画面效果如图6-90所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_1.jpg?sign=1739196696-MOQywQcnyNPZLnMsynKYkBaCcBphMrSl-0-8b20c4ffa568d7b861d5aec0bbb04b88)
图6-89
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_2.jpg?sign=1739196696-2F7oZR5exTuN1TSpwK3ezFyssUGW8qSU-0-fbf5f3fe56878a0d0f64ceb4b91e390a)
图6-90
06 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在星形中下部按住鼠标左键拖曳绘制矩形,如图6-91所示。使用Ctrl+T快捷键调出界定框,然后将矩形旋转一定角度,使用Enter键完成变换,效果如图6-92所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_3.jpg?sign=1739196696-1jNu6ek7kqTTXN0g5u8AkvuienwPtOni-0-26ca74150d64f7562cdc45ffdf150ea4)
图6-91
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_4.jpg?sign=1739196696-B9FDtBq7dm4t6PG0acZokk2JRV7XhwB9-0-e8344ffc735f4e10bb1a51cffa5a7ea7)
图6-92
07 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为黄色,使用钢笔工具在画面右上角绘制三角形,如图6-93所示。然后在“图层”面板中选中该图层,设置“不透明度”为30%,如图6-94所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_6.jpg?sign=1739196696-X24D9dfEz21krdY2y9f2B1yT72eq5WD2-0-695e870fdfbd4173c16df3c95cc83e4f)
图6-93
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_7.jpg?sign=1739196696-WDI2XCyvXksy6KNPSRH1g7774lzigKdj-0-36b1547f19cb5cc77a8df8dd86945b86)
图6-94
08 在“图层”面板中选中三角形图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-95所示。使用Ctrl+T快捷键调出界定框,然后将其进行适当的旋转、缩放,并将其拖曳到适当位置,如图6-96所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_9.jpg?sign=1739196696-yeom8FEq8PUDvTRetI9lc8BKCMqjf6qj-0-4c302c66e0f6aef2ef0f1f54d9fbf5ff)
图6-95
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_10.jpg?sign=1739196696-VfiqDA9RpPDXB74LSdc4OnXOlBNdSDnP-0-bb227c4a9293ddd39e8a8642793cb0fc)
图6-96
09 使用同样的方法,再制作另外一个三角形,如图6-97所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_11.jpg?sign=1739196696-Phyjmafq9DpOLm4rkZpEY0ssVYrqBumg-0-2e86da1289252326264d8804e9304155)
图6-97
10 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为橘红色,使用钢笔工具在画面中绘制形状,如图6-98所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_13.jpg?sign=1739196696-ZDu8VL0dua2jOKyX1EL2NDHKdz8Rcf3u-0-40e9d37508d20b734a5d4019b629abbd)
图6-98
11 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色设置为白色,在画面中输入文字,如图6-99所示。同样的方法输入右侧的文字,如图6-100所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_1.jpg?sign=1739196696-gfvJmwlPqlfUIjHuqBn0uygQgXytcxU0-0-f093ade72cae05369949241a970d1c0a)
图6-99
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_2.jpg?sign=1739196696-iebmMliwCaVIJuQmKVDZnmfhbl3K8iez-0-c97e998b0761acd8b7433844c8951ee0)
图6-100
12 按住Ctrl键单击加选3个文字图层,使用Ctrl+T快捷键调出界定框,然后进行适当的旋转,如图6-101所示。继续使用横排文字工具在画面中输入相应的文字,效果如图6-102所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_3.jpg?sign=1739196696-Z2YAbFoFrOjPe8WyeS61Fve45hYhaAW0-0-38d2071a257b132ffea196c0d0a4449c)
图6-101
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_4.jpg?sign=1739196696-q2BOMJvl36T2ebcaBVddWcmMoO9InoJh-0-191f76b9c5d066bd9885666d79017128)
图6-102
13 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置填充颜色为灰色,然后按住鼠标左键拖曳绘制圆形,如图6-103所示。使用Ctrl+T快捷键对矩形进行自由变换,将矩形旋转一定角度,按Enter键完成变换,如图6-104所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_5.jpg?sign=1739196696-Shxbhtde01AZwbjbBJSZLBP6JogRwq0u-0-53aff56d3c19622560b7aba3b05029f2)
图6-103
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_6.jpg?sign=1739196696-IXOCqMqRFMNSl0VapBuhJtugXewWF9dQ-0-ecb67837af0411296c84f875c196a47d)
图6-104
14 再次绘制一个稍小一些的五角星,然后将其移动到合适位置并适当旋转,如图6-105所示。使用同样的方法,复制一个五角星,并移动到合适位置,如图6-106所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_7.jpg?sign=1739196696-09ZR5A1cZlrvD1CzJNhZv5IjD4fZxS4t-0-b2b90512053116157518c7a2ac218c69)
图6-105
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_8.jpg?sign=1739196696-TUPy9cFRMqTSTcabIGhg9WO3LubIM13f-0-21df66c3ff3c06aab8a77d7a0d26026c)
图6-106
实例071 天气时钟小组件界面设计
文件路径 第6章\天气时钟小组件界面设计
难易指数 ★★★★☆
技术掌握
●形状工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_9.jpg?sign=1739196696-R8XbQB7Z5WA2y9LIU8jmEVSNUHr6UoSL-0-d9b4d0c9f47eaee5282651b753a0f361)
扫码深度学习
操作思路
本案例主要使用形状工具绘制矢量小组件图形,在绘制时要注意调整图层的混合模式,最后在画面中合适的位置输入文字,从而制作出天气时钟小组件界面。
案例效果
案例效果如图6-107所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_1.jpg?sign=1739196696-KkByhaB1E3mxpGVjcRiwpEX0OzTYM9Fb-0-87bedf3a6c2c1b2e2ef5dcc4427ae709)
图6-107
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1200像素、“高度”为702像素、“分辨率”为72像素/英寸,“颜色模式”为“RGB颜色”、“背景内容”为“白色”,如图6-108所示。选择工具箱中的(渐变工具),单击工具选项栏中的渐变色条,在弹出的“渐变编辑器”对话框中编辑一个灰色系的渐变,设置完成后,单击“确定”按钮,如图6-109所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_3.jpg?sign=1739196696-vQ7rJJEhoj7VohfeA6bg7sUEob2PyuHC-0-1101c0c9aafacb6f4e7e7e11b25e3b26)
图6-108
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_4.jpg?sign=1739196696-T0TruQxSIpaJYMDgbZMSCha9niNzlyco-0-ec4ebd2aa93991a547b0db814e116b6a)
图6-109
02 在画面中按住鼠标左键由左至右拖曳填充渐变,如图6-110所示。新建一个图层,右击工具箱中的“矩形工具组”,在工具列表中选择圆角矩形工具,然后在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色,“半径”为40像素,在画面的中间位置绘制一个圆角矩形,如图6-111所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_5.jpg?sign=1739196696-09h6KeALUdDtMAxLukGgZxpMQ0HpRkxS-0-6e5113ffd9f06d2a340524bb40e21e82)
图6-110
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_6.jpg?sign=1739196696-NHqNDjJPbPYwGWD3Ynr6n82ew6DoXcKL-0-43af8470844c2a6ccd5287981cf9fc8d)
图6-111
03 在“图层”面板中选择蓝色圆角矩形图层,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为60%、发光颜色为蓝色、“大小”为18像素、“范围”为50%,如图6-112所示。继续勾选“投影”复选框,设置“混合模式”为“正片叠底”、阴影颜色为深灰色、“不透明度”为15%、“角度”为120度、“距离”为6像素,“大小”为1像素,单击“确定”按钮,完成设置,如图6-113所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_7.jpg?sign=1739196696-YB2xoEcoO9FVsCvBcH1n9xyJkL1jzTfd-0-5f3e1af51d9c26c3e881957605e5551a)
图6-112
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_1.jpg?sign=1739196696-8YvjHawiySIuLTgGDOw1tahpNnCUfW8g-0-1bf3515f7dd8d7a46c147ba0e539693f)
图6-113
04 此时效果如图6-114所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_2.jpg?sign=1739196696-aHgwSsvjwIQGvXYbsLv1UfVzry4ZxfGN-0-db08fa72d4f73bc1c395e1d207cd15c8)
图6-114
05 新建一个图层,选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为灰色,在相应位置按住鼠标左键拖曳绘制矩形作为分割线,如图6-115所示。在“图层”面板中选中灰色矩形图层,然后设置其混合模式为“柔光”,如图6-116所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_3.jpg?sign=1739196696-gy3ltgzSovNPkiEUaAZaTCpUG27Z12dY-0-761d77154f8a3d34a5b64480f78825cd)
图6-115
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_4.jpg?sign=1739196696-p9OxVvIVJCcgR9d3JDpDklV8u7Gm5dp3-0-1dd5e2586a0b61bec2b0544d8f5572d0)
图6-116
06 在选中“矩形1”图层的状态下,执行菜单“图层>图层样式>投影”命令,在弹出的“图层样式”对话框中设置投影的“混合模式”为“正片叠底”、阴影颜色为灰蓝色、“不透明度”为15%、“角度”为120度、“距离”为3像素、“大小”为1像素,设置完成后,单击“确定”按钮,如图6-117所示。效果如图6-118所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_5.jpg?sign=1739196696-IkD1ieIbLZohifF0d4JfZkuN8CLyuzo5-0-6d0f32a1d55b1ee560d84d3bd38f84ea)
图6-117
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_6.jpg?sign=1739196696-pB0vdlh4tACqXkO5BjFsY9GQ5lsiujgp-0-cbe6036ad577fb8b74fe5c1a3c91db21)
图6-118
07 此时要绘制位于画面左下角的卡通太阳。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择“填充颜色”为淡黄色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制正圆形,如图6-119所示。绘制太阳的“红脸蛋”。继续使用椭圆工具,然后在工具选项栏中设置“填充颜色”为粉色系渐变,在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,效果如图6-120所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_7.jpg?sign=1739196696-61ABLK4dFkSc6i0fDYOZ0No8cifv4QZw-0-d62c2407e8ea8aaa02039faff253efc1)
图6-119
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_8.jpg?sign=1739196696-OBdGj4TUdiiLbUxbyEQfwY2XUpo1xEpG-0-e108d766710efd483aea05269aabdcf4)
图6-120
08 在“图层”面板中选中圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并移动到右侧脸颊处,如图6-121所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_10.jpg?sign=1739196696-iO4PQ9kHub5w6HENsw5FCeFHnmGLQbWR-0-eb7649759fcab14407f42cbc4ecd5bef)
图6-121
09 最后要绘制太阳的“眼睛”。在选择椭圆工具的状态下,将“填充颜色”设置为黑色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,如图6-122所示。在“图层”面板中选中该圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并将其移动至黑圆右侧,效果如图6-123所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_12.jpg?sign=1739196696-Z5MuLRu3ovZe8hsRFlZl9kB3Hc4SGIOE-0-a62137c7e3b45d218af4220b3d816932)
图6-122
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_1.jpg?sign=1739196696-ozkdfvA0WGjI5MqpIGcfILIDzRCaqU4G-0-30f5bafcbc0a51189299606160aaa66b)
图6-123
10 新建一个图层,选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,在下拉面板中单击“渐变”按钮,然后编辑一个浅蓝色系的渐变颜色,在画面的右上角绘制一个云朵,如图6-124所示。选中“云”图层,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为75%、发光颜色为黄色、“大小”为18像素、“范围”为50%,单击“确定”按钮,完成设置,如图6-125所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_3.jpg?sign=1739196696-obo6FQKJOBMwWAtLQkLHUJfs0p21wrB6-0-912bad6d111f6826d24764a88282b143)
图6-124
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_4.jpg?sign=1739196696-bpv8nkz4Cb13a0a3rvgsSNQHdIRXPJuR-0-332531ed83b2e5eed7764e1f1135208e)
图6-125
11 此时云朵效果如图6-126所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_5.jpg?sign=1739196696-7uNGez5YE9bS3iqsgKGvoou7DwFz96VF-0-e9225bbd775ec1ac0b83173f902da42b)
图6-126
12 在“图层”面板中选中云朵图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-127所示。使用Ctrl+T快捷键调出界定框,进行适当的缩放,并拖曳到合适位置,如图6-128所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_7.jpg?sign=1739196696-F0cbmkJ5JzlD14JY6rXbBtLD6qqzqiLZ-0-fc4b5dd08778c37c413a949bf9c66cdf)
图6-127
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_8.jpg?sign=1739196696-aHUV6QG7CcXE1EWxBh4kQRZcSlFQzuK8-0-7b8c89637be745c14bdac5ee7bc04a2e)
图6-128
13 使用同样的方法,依次复制其他云朵,此时画面效果如图6-129所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_9.jpg?sign=1739196696-a3ax1xejZuUWU2ZsJSbkwIc6imOVm3Wq-0-673e98175b2e1f040733a7b5960b9904)
图6-129
14 选择工具箱中的自定义形状工具,然后在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“形状”为音符,在画面中按住鼠标左键进行拖曳,完成音符绘制,如图6-130所示。选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为浅蓝色,在画面的右上角绘制一个雨滴,如图6-131所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_10.jpg?sign=1739196696-I9sbo73RZk6YwiCvwMmAQq1QsL1G3gsz-0-c2331080f8aabfca96e4d292ea33fd67)
图6-130
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_1.jpg?sign=1739196696-uOeOo12giBuIp7sxVkpFJNZMICokZoqx-0-747f1f46e6b07d77e96cab0412e262d0)
图6-131
15 在“图层”面板中选中雨滴图层,然后将其拖曳到“创建新图层”按钮上进行复制,使用Ctrl+T快捷键调出界定框,将复制的雨滴进行适当的缩放,并拖曳到适当位置,如图6-132所示。使用同样的方法,依次制作其他雨滴,此时画面效果如图6-133所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_2.jpg?sign=1739196696-Duz14toCZlk5XC0aGGypLIjleKZiWyUU-0-47006f26cc9e96ce97db84feb66bce5e)
图6-132
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_3.jpg?sign=1739196696-eycSNkg98GiwpbksoOJl9w6c3yFB0MwW-0-e4e81c9af1c35d65988c8a214bd4862e)
图6-133
16 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色为白色,在画面中单击并输入文字,如图6-134所示。继续使用横排文字工具在画面其他位置输入不同的文字,此时画面效果如图6-135所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_4.jpg?sign=1739196696-JbsIN2AraT6Lb1Abu2p16kPMIDnnNBAD-0-71a03e27e47f41cc07271a79bf9799a2)
图6-134
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_5.jpg?sign=1739196696-Ok9spFd8ICIr5Crqv60547NLYkiP0dE4-0-4f93dbc753d8bd081783a04b3e497b8b)
图6-135
17 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择卡通素材“1.png”,单击“置入”按钮,如图6-136所示。将素材放置在适当的位置,按Enter键完成置入,最终画面效果如图6-137所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_6.jpg?sign=1739196696-eE41OyxLPW1YqK86YOOzOpBGUOIhWkR4-0-1b79eb8169d243b19e10575cf71e12ac)
图6-136
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_7.jpg?sign=1739196696-YYzQHWb12yX0g8vdmQXcYc7ndPoBfHET-0-ea61bc34ab5ef6ae30d54e7e186a9564)
图6-137