- 中文版Photoshop平面广告设计与制作全视频实战228例
- 周彬
- 10143字
- 2020-08-28 21:25:42
第6章 矢量绘图
本章概述
矢量图是由线条和轮廓组成,不会因为放大或缩小使像素受损,从而影响清晰度。钢笔工具与形状工具都是典型的矢量绘图工具。在平面设计制作过程中,尽量使用矢量绘图工具进行绘制,这样可以保证在适应不同尺寸的打印要求时,对图像缩放不会使画面元素变得模糊。除此之外,矢量绘图因其明快的色彩、动感的线条也常用于插画或者时装画的绘制。
本章重点
⃟熟练掌握钢笔工具的使用方法
⃟熟练使用形状工具的使用方法
/佳/作/欣/赏/
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P124_1.jpg?sign=1739580116-yECjkOXGIDvd30kxelD8DgyM3TwEwiSc-0-4f6a91165e43b6b217873ab67e0f3b86)
实例064 使用钢笔工具制作APP标志
文件路径 第6章\使用钢笔工具制作APP标志
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●路径的运算
●文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_1.jpg?sign=1739580116-FeuFD9YPR92cWBfeRAE2uUy723HgJrNI-0-26e92a8786a1679308aa7fddbe140c38)
扫码深度学习
操作思路
钢笔工具可以绘制“路径”对象和“形状”对象。本案例使用钢笔工具在画面中绘制形状,最后在形状上方输入文字,完成标志的制作。
案例效果
案例效果如图6-1所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_2.jpg?sign=1739580116-eQuC9slTxSeyis74EcauFl59a4KvQ5V1-0-2a748641ebd3a266f71863d332871a95)
图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=1739580116-0i0yfTW3rDw9SvRYehwdd8hHykZ9INJR-0-44d9265a0cc42e8dc7fa4607b17b2b02)
图6-2
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_5.jpg?sign=1739580116-F4aArzolucw6k6VSjYacaP4b4neqzg1v-0-763883f8d9779dd8881a378d94faca4c)
图6-3
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-4所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_6.jpg?sign=1739580116-Z7PTe4mue02WZoF5bOVT6s00tHdAD4e9-0-6aeb14eed212d32818aeac2d28a53a36)
图6-4
03 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为粉色,使用钢笔工具在画面中多次单击绘制折线形状,如图6-5所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_7.jpg?sign=1739580116-dvi4eo7kbDuvViDU8iDjYtAFxlitZSF6-0-fb3e3e0ca6a7021364531a5a1a3529a1)
图6-5
04 在工具选项栏中单击“路径操作”按钮,在下拉菜单中选择“减去顶层形状”,单击“矩形工具”按钮,如图6-6所示。然后在折线中绘制一个矩形,使这部分被删除,此时画面效果如图6-7所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_8.jpg?sign=1739580116-m6eYZlPjAuJaTVOIxP7gQp3iwWP9o3Ah-0-9418cf9445d13efe5129bdb43b38baad)
图6-6
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_1.jpg?sign=1739580116-l59n61WK2H269uwdjTMHySQ6A6FEOMs9-0-62921be5d6a1a45951f9d6e76ed82150)
图6-7
05 选择工具箱中的横排文字工具,然后在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,此时画面效果如图6-8所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_2.jpg?sign=1739580116-L4vVKH9lUrxNJLdV54zGhRz4eqLjRzJS-0-4490a736329e502d09b49712a11227a0)
图6-8
提示 终止路径绘制的操作
如果要终止路径绘制的操作,可以在钢笔工具的状态下按Esc键完成路径的绘制。或者选择工具箱中的其他任意一个工具,也可以终止路径绘制的操作。
要点速查:路径的运算
选区可以进行运算,路径同样也可以进行运算。首先绘制一个形状,如图6-9所示。默认状态下,工具选项栏中的“路径操作”按钮为(新建图层)。单击该按钮,在下拉菜单中选择一种运算方式,如图6-10所示。图6-11所示为不同运算方式产生的运算效果。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_4.jpg?sign=1739580116-rjJ8JtAaabJbVCNw86rljaJNL049Yj4a-0-6efd890c715a3ed4abd6a38971807590)
图6-9
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_5.jpg?sign=1739580116-R8i0FmakqOsa13ptkw2D5LukJ3AxoBlN-0-de6969162bb68f1b7230c2c3f6f29d7f)
图6-10
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_6.jpg?sign=1739580116-dZI4uDpZG5UnjHgF1dGvv6hHRZYjMRiP-0-7c521b50b0894050d569b17da00a0c32)
图6-11
实例065 使用钢笔工具抠图制作购物APP启动页面
文件路径 第6章\使用钢笔工具抠图制作购物APP启动页面
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●将路径转换为选区
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_7.jpg?sign=1739580116-KKgzqRaCM8WS1OmZXWCc09fXVNS2EUKa-0-75f4e507ec37cbd1dd7cc202322d8715)
扫码深度学习
操作思路
本案例使用钢笔工具在人物周围绘制路径,并将路径转换为选区;使用图层蒙版将选区外的部分隐藏,此时画面出现新的背景。
案例效果
案例效果如图6-12所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_8.jpg?sign=1739580116-IRl2PFOT6Ve4zrM90IXSk9DP69UoIVtd-0-ca7c139f839894bd11548a98a69fd478)
图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=1739580116-yDpi6KZjxwIiKHER5d8176gMlPwDZkXQ-0-b8a59298f130ba76ffedec336aca4ce3)
图6-13
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_10.jpg?sign=1739580116-wpdLdpvnD6RWUyhMFKeICcnx0PAU9frx-0-6fc6740c8c3eb77156d1ace5d8189f47)
图6-14
02 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-15所示。将人物素材调整到合适大小,然后按Enter键完成置入。选择素材图层,执行菜单“图层>栅格化>智能对象”命令,将该图层栅格化为普通图层,效果如图6-16所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_1.jpg?sign=1739580116-Ckz6FdWNba9SQWTE0z39PvoRDxi9qItu-0-f1efb7b73880821a5fbc767c28f00d28)
图6-15
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_2.jpg?sign=1739580116-VDOQxGgRm9EJi9qRfPLkArTFjbCkal9u-0-e84ea51d2fea85644e9d11c5ca942d23)
图6-16
03 选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“路径”,在画面中人物边缘按鼠标左键单击拖曳绘制路径,如图6-17所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_3.jpg?sign=1739580116-Rl6eehDLsOyh5uqSp447S1SaA0UoMXH1-0-34941d69677919210a5d40f6fdfbf767)
图6-17
04 选择工具箱中的直接选择工具,然后框选人物头上的锚点,将锚点拖曳到人物边缘上,如图6-18所示。选择工具箱中的(转换点工具),然后将光标移动到锚点上,按住并拖曳使路径完全符合人物轮廓,如图6-19所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_5.jpg?sign=1739580116-Wut14GFNNk9Ry0ngbjiBbFaOgkqe2JSC-0-8ac7209a351254eb6950c8bc0a6a849b)
图6-18
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_6.jpg?sign=1739580116-wKvtEqw5fnXrWmNAKgBzeuFUJ8FVmPv6-0-1cd67305377df890d9877338ef61a2e5)
图6-19
05 使用同样的方法,调整其他锚点,如图6-20所示。调整完成后使用Ctrl+Enter快捷键将路径转换为选区,如图6-21所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_7.jpg?sign=1739580116-qlYYyk5ZvlRaHCof9CmH13VgJbKVHM0Q-0-3e8cab148516c13f28204b3b616ef409)
图6-20
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_9.jpg?sign=1739580116-SkV8b4OJmeWjnb8DSnr9KjOVTPASfuSo-0-c5e29ddf59108ee2c37bd74b11cefee6)
图6-21
提示 基于选区添加图层蒙版
如果当前图像中存在选区。选中某图层,单击“图层”面板底部的“添加图层蒙版”按钮,可以基于当前选区为任何图层添加图层蒙版,选区以外的图像将被蒙版隐藏。
06 选中人物图层,在“图层”面板中单击“创建图层蒙版”按钮,如图6-22所示。使选区以外的部分隐藏,画面效果如图6-23所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_10.jpg?sign=1739580116-Tjbd1LRobczvixvrIuTDCYkL4mTnpWpa-0-ac4f81d9f79bfcd2695448db4c7c3240)
图6-22
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_11.jpg?sign=1739580116-KTJGCzrccu394Uzjxo5zzkMnWMy7R8no-0-bee02049281d6eb1e46308714304277e)
图6-23
提示 蒙版的使用技巧
要使用图层蒙版,首先要选对图层,其次要选择蒙版。默认情况下,添加图层蒙版后就是选中的状态。如果要重新选择图层蒙版,单击图层蒙版缩览图即可。
实例066 使用形状工具与形状运算制作引导页
文件路径 第6章\使用形状工具与形状运算制作引导页
难易指数 ★★★☆☆
技术掌握
●形状工具
●形状运算
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_1.jpg?sign=1739580116-qG0wmtfZ4Biu5rujUt18O9Yj28qQyAnH-0-6089647532f2f0d53f593127a5da2a4e)
扫码深度学习
操作思路
本案例主要使用工具箱中的各种形状工具在画面中绘制图案,在绘制过程中要合理使用形状运算,利用形状运算的特征制作外形奇特的图形。
案例效果
案例效果如图6-24所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_2.jpg?sign=1739580116-7u6hwVUnNJGtoksVrQdCy9ifmwieXNGE-0-6d6b4f95406581e1ccca1022a3856a4f)
图6-24
操作步骤
01 执行菜单“文件>新建”命令,创建新文档。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为蓝色,单击“确认”按钮完成设置,如图6-25所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_3.jpg?sign=1739580116-Gr1MEfTXyNivBsTr5Tzn1RP3ixABV2RX-0-33610fb8d28aa8604cb93d95d0f1be40)
图6-25
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-26所示。右击工具箱中的形状工具组,在工具组列表中选择椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为红色,按住Shift键并按住鼠标左键在画面左侧位置拖曳绘制圆形,如图6-27所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_4.jpg?sign=1739580116-HulCkg2OqPz1N4cgD7zG25iWoM37f8E1-0-2b96263727b23e82e45173d8e084c5d7)
图6-26
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_5.jpg?sign=1739580116-gZWdG8STTf7iOI5ATCGugEmKvEbhKpWX-0-d5f9201156e44d39509ee1bc830024ac)
图6-27
03 在“图层”面板中选中形状图层并将其拖曳到“创建新图层”按钮上,进行复制,如图6-28所示。选择复制的图层,在工具选项栏中设置“填充”为绿色,然后将复制的圆移动到红圆右侧,此时画面效果如图6-29所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_7.jpg?sign=1739580116-OAdB68wNdXjz7LzKWzs9HS8cQENinkm2-0-63404f2bdeaa65caa32cd1d930aad80b)
图6-28
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_8.jpg?sign=1739580116-Taza09li5Fjv8mtZDiHvWvrXQB2dKvzp-0-26a454f956cbeaa1e2adffc59f66904a)
图6-29
04 使用同样的方法,制作蓝色正圆,如图6-30所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_9.jpg?sign=1739580116-h4FZlswt4jt6JEqM9oYsv6zciIqQiJOp-0-65833df64fd022f970d0b01015f846b9)
图6-30
05 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为白色,在画面中绘制形状,如图6-31所示。继续使用钢笔工具,将工具选项栏中的形状“填充”改为蓝色,然后在右侧白色图形下方绘制三角形,如图6-32所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_11.jpg?sign=1739580116-YsFs3eGKS9z8Z30kZUqvumD4r91KKdfw-0-2cc0f002b0d574be9de0df7057b5a62e)
图6-31
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_12.jpg?sign=1739580116-GAIu9goVEPeNgcPTIhT8izVhIoqCAMIz-0-1fc41c6504283ac38f97dc272906d7b5)
图6-32
06 在选择钢笔工具的状态下,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色。在画面的左下角绘制一个三角形,如图6-33所示。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,设置“填充”颜色为白色,按住鼠标左键并拖曳绘制圆形,然后在其选项栏中单击“路径操作”按钮,在下拉菜单中选择“合并形状”,再绘制其他椭圆,同样的方法依次绘制两个椭圆,如图6-34所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_1.jpg?sign=1739580116-45nSFJQAllETHvDG1JTWFrb0wL8Rzu0N-0-388003ce4b370705d244fe214ad9fdbb)
图6-33
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_2.jpg?sign=1739580116-wpsn02e4HhpytKuQhiQu3mHHFviWHLq5-0-df78bcfa7c850509afb534de19661c71)
图6-34
07 继续在当前图层操作,在工具选项栏中单击“路径操作”按钮,设置为“减去顶层形状”,然后选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,设置“填充”颜色为白色,在白色图形的下方按住鼠标左键并拖曳绘制矩形,如图6-35所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_3.jpg?sign=1739580116-twXujpAFP9LJT9tiwBWlECCxHAO9cf31-0-1990151c2e292480cc51a3babebb8635)
图6-35
08 再次使用椭圆工具在云朵图形下方绘制深蓝色正圆,并将其复制,如图6-36所示。在“图层”面板中按住Ctrl键选中多个深蓝色正圆图层,在工具选项栏中单击“垂直居中对齐”按钮,在弹出的下拉菜单中选择“水平居中分布”,此时画面效果如图6-37所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_4.jpg?sign=1739580116-qAIKdMVfU73FxqNAIdBjnXLiKKMefjSX-0-0f384ad91a3db40f5e9e7b06401d2064)
图6-36
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_5.jpg?sign=1739580116-5Oh5bEjQXg55kx2ermtZAl51zkQB1ji5-0-6dca50fba09d6117100e7c19fbec6abb)
图6-37
09 在“图层”面板中选择一个椭圆图层,然后设置工具选项栏中的“填充”为白色,此时该圆变成白色正圆,如图6-38所示。在工具箱中选择横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,如图6-39所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_6.jpg?sign=1739580116-KlnZoZWo3xoPy2yeZgZbqubUINssaPx1-0-979bb668867053e1b9c0490cafca1ba4)
图6-38
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_7.jpg?sign=1739580116-osJXibSxDjpqR7TlvKIo2eEsI3nxds8Y-0-8906cd362744769807c530e14da6ae91)
图6-39
10 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.png”,然后单击“置入”按钮,如图6-40所示。将素材调整到适合位置,按Enter键完成置入,最终效果如图6-41所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_8.jpg?sign=1739580116-XSONMiLquGHwXlRofAHzM3sMqqDDdyLo-0-1b0b7f427adfba1545ebc22199d46ebd)
图6-40
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_9.jpg?sign=1739580116-s0fNmjtjrvavS6wbTVuuhmaHIYobRJkJ-0-87978911195e00d3dba043ccba54cfcf)
图6-41
实例067 使用椭圆工具制作画面创意效果
文件路径 第6章\使用椭圆工具制作画面创意效果
难易指数 ★☆☆☆☆
技术掌握
●椭圆工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_1.jpg?sign=1739580116-DIctRooYUbuVTie1LNzaJHg9zXXQe6QL-0-4812032789020a2298e7b275f8c46b54)
扫码深度学习
操作思路
本案例主要使用椭圆工具在画面中按住Shift键的同时按住鼠标左键拖曳绘制矢量圆形,然后在上方输入合适的文字,完成最终的操作。
案例效果
案例效果如图6-42所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_2.jpg?sign=1739580116-sZ7DmiSMMOMPdTZ4rEb7fMAsmh0MGoF1-0-913da6c8847deeebf2087d6b58f4f07d)
图6-42
操作步骤
01 执行菜单“文件>打开”命令,打开素材“1.jpg”,如图6-43所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_3.jpg?sign=1739580116-vTSMKCXGEaU2HFC6q450hUDMEuwwg3at-0-2eb6b503fe0aaf3d301a55d3c5d54436)
图6-43
02 选择工具箱中的(椭圆工具),将工具选项栏中的绘制模式设置为“形状”、“填充”为白色、“描边”为无,在画面中按住Shift键绘制一个白色正圆,如图6-44所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_5.jpg?sign=1739580116-LeHNR5VulaWSFQPAgQsg1vckG4kS9Yz9-0-9d15d5272cd7605ff08e34f2a2e8ce8e)
图6-44
03 接下来在画面中绘制文字部分。选择工具箱中的(横排文字工具),在工具选项栏中设置合适的“字体”“字号”和“颜色”。然后在画面中单击,输入文字。输入完成后单击工具选项栏中的“提交当前所有操作”按钮
,即可完成操作。将文字放置在正圆内部,如图6-45所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_8.jpg?sign=1739580116-03qtp0y6lZbSGVn7hzelxlOPEsP1ZRr8-0-89acc9cfbbb375519b45977ab19627de)
图6-45
04 变换“字体”“字号”和“颜色”,继续在圆形下方输入剩余文字,最终效果如图6-46所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_9.jpg?sign=1739580116-B1FpeNs8PGDQzLD8xRFs3TNhDwcjBh6v-0-09bd5f560e926d9c4193f8afc2d9ce1e)
图6-46
实例068 极简风格图标设计
文件路径 第6章\极简风格图标设计
难易指数 ★★★☆☆
技术掌握
●圆角矩形工具
●钢笔工具
●自定形状工具
●图层样式
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_10.jpg?sign=1739580116-BWN5w9a7tGza4MBiu6LMWo3gUnUU9Rap-0-de30af1d871e7dd82262663c7e972221)
扫码深度学习
操作思路
本案例首先使用圆角矩形工具制作图标背景部分,其次运用钢笔工具绘制矢量的蓝色形状,最后使用自定形状工具添加其他元素。
案例效果
案例效果如图6-47所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_11.jpg?sign=1739580116-EoMrqfoOhiOK3jRtln75Ba5g8gjfR5Oi-0-9f8e5ebe168449e48c2d85de3cb5c92a)
图6-47
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1600像素、“高度”为1400像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-48所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_1.jpg?sign=1739580116-yNTqEnKS4Cb0PkjmCuLYs5nq9KHVUz1a-0-20fb5a1376e8c579701b21998266b8c0)
图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=1739580116-4vmu3uzMg19z29JJsz95SF1TXVfWLZHT-0-3ff377205367d6dd11015e884aa6c452)
图6-49
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_3.jpg?sign=1739580116-0xaQjIgZsaBbA7cmQxijEiERmPhgILSk-0-d74b1633cfb686e74706b7bcd1704919)
图6-50
03 此时效果如图6-51所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_5.jpg?sign=1739580116-9CbmsR8pWZ35EeB1QREDGA6Clr1N2vZQ-0-3ea86b311731d44dccb3627980e93033)
图6-51
04 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为蓝色、“描边”为无,设置完成后,在圆角矩形框上方绘制一个多边形,如图6-52所示。使用同样的方法,在多边形右上角绘制一个三角形,将“填充”改为深蓝色,如图6-53所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_6.jpg?sign=1739580116-jBVO7b4ecdnicJnxvBspUBml8fUeUiEk-0-cffff87537b8dde36ce8951c056fcd58)
图6-52
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_7.jpg?sign=1739580116-LhsVFMgYaIvXpo4G25Gw8YAjvU1SQk7p-0-80c012b809e787c8ab0f4e067de0855b)
图6-53
05 选择工具箱中的(自定义形状工具),在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个音符形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-54所示。最后将得到的形状图层移动至三角形图层下方,效果如图6-55所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_1.jpg?sign=1739580116-zcdkTzw5Tjsu9gL279eOzBS8UC3a8UIp-0-b8cfcf32ba26b9667803eedcd77ff21a)
图6-54
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_2.jpg?sign=1739580116-o9HtMumpLusVFVrs3gniVJ80ZCQWTRFt-0-3a8be00dbdd67f0bdd606c7f0c35260f)
图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=1739580116-lWOnDT3irpqXMMViZdNOIEAJ1m3u8BA4-0-9188b784105ea0561aa4080681fb5af9)
图6-56
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_5.jpg?sign=1739580116-HX3rOkzMenfelgxAoKGjOewXOMm1vvCy-0-583a021f30f2bb78d72cbc312e77a82f)
图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=1739580116-qyEJhGliNaMqyjWnSXZA8zzP1E3y25RI-0-60c52bc0e57a09fb2bca0a1b4408eff5)
图6-58
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_7.jpg?sign=1739580116-2OdGmUXsX6FQfufHeLNOqlJfKcbQfRu6-0-43fdbf4bed02365566a29dc94c33cdeb)
图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=1739580116-cuIOMn1WuL5giejWjBDhKE9KKr9lufKK-0-043928b945b56025f7606285b2fa56cc)
图6-60
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_2.jpg?sign=1739580116-YokAY0btmesgUbphduKgjXGKcZQgs95y-0-eda5594e701f3a9c4f213ca029d2b274)
图6-61
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_3.jpg?sign=1739580116-i7LD6e4zrkQhAGy31wzFc5IhA5ehZc5U-0-e2a085737b4e55ad8c4282e1e6374b74)
图6-62
提示 将路径转换为选区
使用Ctrl+Enter快捷键可直接将路径转换为选区。
实例069 使用形状工具制作质感按钮
文件路径 第6章\使用形状工具制作质感按钮
难易指数 ★★★☆☆
技术掌握
●形状工具
●渐变工具
●椭圆工具
●钢笔工具
●图层样式
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_4.jpg?sign=1739580116-E9HmLmVapl0Jt6fBD4nQC5tNoaNFJd0e-0-e23a43954a2b9b0ef315c62558180c45)
扫码深度学习
操作思路
本案例在操作中多次运用到形状工具,使用该工具绘图时要注意形状的运算和工具选项栏中的绘制模式。
案例效果
案例效果如图6-63所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_5.jpg?sign=1739580116-PtJ1pzG6GR3uA76LlG0FwdzTUeD9OJ8V-0-d46ab9557ce6af5f968d8a02c32b821e)
图6-63
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为2604像素、“高度”为2413像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-64所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_6.jpg?sign=1739580116-jjbWlrcWk8FR9qMhyJC1JKq3k0cBPlKP-0-fc67b200f88425b9ea6fa92d4ab4c937)
图6-64
02 选择工具箱中的渐变工具,单击工具选项栏中的渐变色条,在弹出的“渐变编辑器”对话框中编辑一个蓝色系的渐变颜色,设置完成后单击“确定”按钮,如图6-65所示。然后在工具选项栏中设置渐变类型为“线性渐变”,最后使用渐变工具在画面中按住鼠标左键由下至上拖曳进行填充,效果如图6-66所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_1.jpg?sign=1739580116-z0CK4WqXQ70SUrdbnUWiio41tgR9Qf8c-0-4d9426fffef2f17c439c8fadb945b42a)
图6-65
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_2.jpg?sign=1739580116-A2FJWXSsm4EVjtStJUS71VTlXChZyqCp-0-fc10a1a09385e4e1bbc1ea60b9efa8af)
图6-66
03 选择工具箱中的(椭圆工具),在选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在画面底部按住鼠标左键绘制椭圆,如图6-67所示。在“图层”面板上将该图层的“不透明度”设置为20%,如图6-68所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_4.jpg?sign=1739580116-8ELJBWBYw52b9n858jOlEaCswaRLvBaQ-0-a1540fd19dd2a16bfc9042875c259d4a)
图6-67
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_5.jpg?sign=1739580116-vjAT0kUf7gx9pdvHMVbBBf0hWYNwqP8e-0-3d2481c911b8b1ea4b8df9323cdecb86)
图6-68
04 选择工具箱中的(自定义形状工具),在选项栏中设置绘制模式为“形状”、“填充”为绿色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个会话形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-69所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_7.jpg?sign=1739580116-tbFCnS4cct8ihFNYh9mWqZbmF2LPRJGJ-0-90024c2c468d3a7734d08064fd964f78)
图6-69
05 选择工具箱中的(椭圆工具),在工具选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,然后在对话形状上面按住鼠标左键并按住Shift键绘制正圆,如图6-70所示。在“图层”面板上设置该图层的“不透明度”为35%,效果如图6-71所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_9.jpg?sign=1739580116-keWe8wqmZeiqxxstEuayoNz6h7SSKcxA-0-9128221388adcdd8f6942c829a0bc72e)
图6-70
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_10.jpg?sign=1739580116-0XukgBqxqLSFRZDglDiDH35YRC63OQR4-0-0f14f1a93fab4ce48aad2a86890db3fe)
图6-71
06 选择正圆图层,单击“图层”面板底部的“添加蒙版”按钮,为该图层添加图层蒙版。选择工具箱中的(画笔工具),在选项栏中单击打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,如图6-72所示。将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-73所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_12.jpg?sign=1739580116-NxyR8V944LDYjllfHPNMBxte9SCOyLIB-0-5b1cfd1d1cb9e19bccc034ce6b4c6bb9)
图6-72
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_13.jpg?sign=1739580116-YNLxeFIoOd9QAFuPJXDVwl6p6xVhUmWM-0-3ef59c0c2ea484de91a2116b2960b5b6)
图6-73
07 在“图层”面板中选择正圆图层,使用Ctrl+J快捷键将形状进行复制,单击复制图层的图层蒙版缩览图,选择工具箱中的画笔工具,将前景色设置为白色,然后按住鼠标左键在画面下方涂抹,在“图层”面板上设置“不透明度”为90%,效果如图6-74所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_14.jpg?sign=1739580116-ooZ14GQIRzO8WKD6gRVXzqZRgzVKt9Wl-0-1c798712322817561ad9b0f9a21f66cf)
图6-74
08 选择工具箱中的(钢笔工具),在选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,设置完成后,在会话形状右侧绘制一个月牙形状,如图6-75所示。为该图层添加图层蒙版。然后选择工具箱中的画笔工具,在工具选项栏中打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-76所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_1.jpg?sign=1739580116-eZfKo8L77k2n212dxnYQVNwoqG0dYWvM-0-79f654b25cee4143eb5e7fc93945ec6d)
图6-75
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_2.jpg?sign=1739580116-NoKHyR4dRcygKtVIJYRi3qjf47yBbk63-0-a49b23d1156e99db28c67000de962974)
图6-76
09 绘制声音形状。选择工具箱中的自定义形状工具,在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个“声音”形状,然后在正圆上边按住鼠标左键拖曳进行绘制,如图6-77所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_3.jpg?sign=1739580116-LjeatUJHglJ9HVd4Ox6aOn64FVbXIbyt-0-f2fbf8b4cca301d871ca85b79d89b2c5)
图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=1739580116-evEgmK0ihzu9vbTjaTFwnjiLlFMnZ2wT-0-c4191f160077b5c5101744260a3b641e)
图6-78
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_5.jpg?sign=1739580116-kBeVH7FdiFYZhMwnZPyPFWQFb8donrG5-0-f029c8e48727ed83c0e2900d713b05e2)
图6-79
实例070 使用矢量工具制作活动标志
文件路径 第6章\使用矢量工具制作活动标志
难易指数 ★★★☆☆
技术掌握
●转换点工具
●自定义形状工具
●钢笔工具
●矩形工具
●横排文字工具
●自由变换
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_6.jpg?sign=1739580116-DzTZ7ZyKEmY9woLNn80mJYGcTj22sXdN-0-22b262c9e3bb0f02dfcc46e26f3280b5)
扫码深度学习
操作思路
转换点工具可以调节路径的弯曲度。本案例利用这一特征将直角五角星转换为圆角的五角星,然后使用钢笔工具绘制五角星的内部图案,最后在其上方输入文字。
案例效果
案例效果如图6-80所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_7.jpg?sign=1739580116-rnob7deZ2TBd00bUcnjBv4bsM5xP4iFe-0-94d7356f0a43bf8a5e0f60d87c592e73)
图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=1739580116-pBO3QQrvewU3pkbIzrmoBXobVnlG7NN7-0-1ba4104f0ae4f25bab750277bc6b8fe3)
图6-81
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_2.jpg?sign=1739580116-BDCy5a8v364wpTdvnmghDv5YWbXLk096-0-08926cc0355891b202adfc4290ca5a92)
图6-82
02 使用前景色(填充快捷键为Alt+Delete)填充画布为深蓝色,如图6-83所示。使用鼠标右击工具箱中的“形状工具组”,在工具组列表中选择自定义形状工具,在工具选项栏中设置“形状”为五角星,然后在画面中按住鼠标左键进行拖曳,完成五角星绘制,如图6-84所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_3.jpg?sign=1739580116-ENlAyfNy7ieUWJ1Gb2dlSWQ19ggBxKgi-0-9873120d75c925cdb239dc15757720c6)
图6-83
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_5.jpg?sign=1739580116-0GmpsmwwGHgK1q9tCS7FIo4YwdLEjCHs-0-131bd069587f5d9efc621b7447d97dca)
图6-84
03 在工具箱中右击“钢笔工具组”,在工具组列表中选择(转换点工具),按住五角星的一角进行拖曳,改变五角星一角的形状,如图6-85所示。使用同样的方法,制作其他角,如图6-86所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_6.jpg?sign=1739580116-ljPxkisAn2p5aEgIItK5WO2pUPl47Irf-0-6479bbfa3179da9dae24f90152debc04)
图6-85
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_7.jpg?sign=1739580116-yD7EzgvMhLGeueE1DlL5EqyUcjyDnABt-0-bfed9ebb0e38e0fbe3658e7134339115)
图6-86
04 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-87所示。将素材进行旋转调整到合适位置,按Enter键完成置入,并执行菜单“图层>栅格化>智能对象”命令,此时画面效果如图6-88所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_8.jpg?sign=1739580116-SOshm79KRwZOdkvOTWXlmY0VHyk3b71o-0-4caa54fcef9ca204a7ff9d9d4c1885a5)
图6-87
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_9.jpg?sign=1739580116-4UgdGYQ5uExjuve9B5YT57DgZLGBgyT9-0-46d1faaade579e17e9e5b14e13dcbdb4)
图6-88
05 在“图层”面板中选择素材“1.jpg”所在图层,右击该图层,在弹出的快捷菜单中执行“创建剪贴蒙版”命令,如图6-89所示。此时画面效果如图6-90所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_1.jpg?sign=1739580116-rE8rkLhfPptKqdHUvflwJtotQRDztipV-0-3da769c7ec4ac5271e42536dddded021)
图6-89
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_2.jpg?sign=1739580116-FOss3pUCMKJ3BTfSNk50hEEUl2oBk6HG-0-2b4d29f6aa7694e3acca278e177ea8a7)
图6-90
06 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在星形中下部按住鼠标左键拖曳绘制矩形,如图6-91所示。使用Ctrl+T快捷键调出界定框,然后将矩形旋转一定角度,使用Enter键完成变换,效果如图6-92所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_3.jpg?sign=1739580116-IBrQTHUkVkdXTBiyNYvPNYwQ5hCLTkAe-0-b886c2a664d297a7a35e63c00a4fdeed)
图6-91
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_4.jpg?sign=1739580116-euinj7EFXGYi5TBEPhzlOFmGhbIrjkv4-0-6150981e4673f6454a8cbfeeb4fd7ae0)
图6-92
07 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为黄色,使用钢笔工具在画面右上角绘制三角形,如图6-93所示。然后在“图层”面板中选中该图层,设置“不透明度”为30%,如图6-94所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_6.jpg?sign=1739580116-A7MNednaJKmyIabOcUA2ISLr2FNu2v9t-0-c5a87e223f8ef2c30148820f6706afa7)
图6-93
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_7.jpg?sign=1739580116-KBCPAuJJkRi275UBR2ubAJOcUm7399E2-0-9a843fa908d1d7fd47a2fd1651fff586)
图6-94
08 在“图层”面板中选中三角形图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-95所示。使用Ctrl+T快捷键调出界定框,然后将其进行适当的旋转、缩放,并将其拖曳到适当位置,如图6-96所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_9.jpg?sign=1739580116-9vciReZjwimXBODhgcRdgwoouiML6emP-0-0a7c2110e1c10483e5aaa71120c5ef19)
图6-95
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_10.jpg?sign=1739580116-LUDOg14RNx5DA7u4jQAoxfgi7WPDoNLA-0-1964b7dc4367420a1df98261acad9b29)
图6-96
09 使用同样的方法,再制作另外一个三角形,如图6-97所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_11.jpg?sign=1739580116-U8EzDPZYpfJNOONOJiekIzQ6UaERH6Pt-0-d4c216b917d480b265a3ca7d69f2b943)
图6-97
10 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为橘红色,使用钢笔工具在画面中绘制形状,如图6-98所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_13.jpg?sign=1739580116-KELgXKNzq4Q7zD35O0vGarKwyglcdfNX-0-e8530495c453dc94e869ba01d6eaed97)
图6-98
11 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色设置为白色,在画面中输入文字,如图6-99所示。同样的方法输入右侧的文字,如图6-100所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_1.jpg?sign=1739580116-wFbLjV0Pr8qvNN1HqTHGA6gEvfveu193-0-16b5dd52b1206a93d8e8ff505cb1e13e)
图6-99
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_2.jpg?sign=1739580116-oaTvPTNzgvctQMIHGeGAu8PZW9HOQUO0-0-a8a9e806bb484afbcc92a337a7bfe0d9)
图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=1739580116-lLCmfZx0vyKO3egfqMFvOHkimq4zf033-0-61da58fb61c05492b10999e32768bc5f)
图6-101
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_4.jpg?sign=1739580116-mJndrVib8VLm3GoUoDFl9o1oudegxPdL-0-d327cf113ba236111bbc9f9bd4b8b2b4)
图6-102
13 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置填充颜色为灰色,然后按住鼠标左键拖曳绘制圆形,如图6-103所示。使用Ctrl+T快捷键对矩形进行自由变换,将矩形旋转一定角度,按Enter键完成变换,如图6-104所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_5.jpg?sign=1739580116-JjnUUNqUvN1Mve6tubrSVzVa4k8BynAx-0-9cf3da0f37e93174f216cbb69dc0b926)
图6-103
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_6.jpg?sign=1739580116-ku5LxOoNOaYf8DKGNXmltAueBV54zVYw-0-a56f12a82e6c4db4960fb6b668d8c042)
图6-104
14 再次绘制一个稍小一些的五角星,然后将其移动到合适位置并适当旋转,如图6-105所示。使用同样的方法,复制一个五角星,并移动到合适位置,如图6-106所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_7.jpg?sign=1739580116-t8Da9R6qxWasMHfbMY7f8KghZJAFWDea-0-f0939e874360c5e0f8e43ed2145ec539)
图6-105
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_8.jpg?sign=1739580116-MWpMYb6I7oWiBLgkpxJZnXG9o7MKvaO7-0-21b65d0b8953c78b7d139479737e9524)
图6-106
实例071 天气时钟小组件界面设计
文件路径 第6章\天气时钟小组件界面设计
难易指数 ★★★★☆
技术掌握
●形状工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_9.jpg?sign=1739580116-jKraj0IOG6huQn2y4Te3tg7vo5VmPxzq-0-ff82499011c7bf63a4298dfcafe4dad9)
扫码深度学习
操作思路
本案例主要使用形状工具绘制矢量小组件图形,在绘制时要注意调整图层的混合模式,最后在画面中合适的位置输入文字,从而制作出天气时钟小组件界面。
案例效果
案例效果如图6-107所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_1.jpg?sign=1739580116-LxV3vSHHmNqDWJB4RzQ6ZC2HASnhbCnl-0-57d98aacfc6eff8d547d9cbae4d35390)
图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=1739580116-TAWUiOOS6shwlepN5mQSmvcYquZH9e6p-0-d5e3047176f9c5287adaa213823d0b2f)
图6-108
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_4.jpg?sign=1739580116-yzQC9jLIA5tEA4HlFIeD4f7Ce6Z1KRcj-0-cf581add798e8c55ebaeeb925f65f4a2)
图6-109
02 在画面中按住鼠标左键由左至右拖曳填充渐变,如图6-110所示。新建一个图层,右击工具箱中的“矩形工具组”,在工具列表中选择圆角矩形工具,然后在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色,“半径”为40像素,在画面的中间位置绘制一个圆角矩形,如图6-111所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_5.jpg?sign=1739580116-Ael4becSUg5ZTAw6DfkdVCoc7iWKVp75-0-3ac192634884e2eab9402912f44bed3e)
图6-110
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_6.jpg?sign=1739580116-qL34HUYdgIMzWEOo7uBIXNCCd2Ao8rca-0-a60e0dbd4b239680cae48a77b1698651)
图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=1739580116-uHlKNQqu2LJ4TIFTH1I1jaOktj3G9Ykz-0-370d981c297819e5ea56122d998d3798)
图6-112
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_1.jpg?sign=1739580116-o6u39KUbshiMtxABAHR6jwds4mvyC8zw-0-fd3e3942ae5d7015377e4de1fc413073)
图6-113
04 此时效果如图6-114所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_2.jpg?sign=1739580116-zVGMG7IpL7IEH4CWSgGf0rHOrpewCjct-0-d609810f5a8b96e2c9ffdd6e4cd8057b)
图6-114
05 新建一个图层,选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为灰色,在相应位置按住鼠标左键拖曳绘制矩形作为分割线,如图6-115所示。在“图层”面板中选中灰色矩形图层,然后设置其混合模式为“柔光”,如图6-116所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_3.jpg?sign=1739580116-H3s4Z29VXMvgxH8tS4MM6jYlg5ebVw4s-0-c57aaa3632533329402f110fe0ad8f92)
图6-115
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_4.jpg?sign=1739580116-kzul0zjk6o6EM7KVslpzLRMLcZYX7h1W-0-a80dee8c39f055cbfe7e8d708480b72b)
图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=1739580116-utHvT1AXypzdh4gxoiJrVcjC1hdhHIKr-0-2c12bab287eab6376b6bf2a928e0da21)
图6-117
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_6.jpg?sign=1739580116-0jBxlmabcrLVMz4rV77nRXLtBfEVuClA-0-9a622e39b7a9fb6009c9a5b071532d93)
图6-118
07 此时要绘制位于画面左下角的卡通太阳。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择“填充颜色”为淡黄色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制正圆形,如图6-119所示。绘制太阳的“红脸蛋”。继续使用椭圆工具,然后在工具选项栏中设置“填充颜色”为粉色系渐变,在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,效果如图6-120所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_7.jpg?sign=1739580116-gqnHm3rMNwzzajqxAi1bc2zXG1B7wHei-0-61f0d78dabb996b72b5e82decb5ae5f5)
图6-119
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_8.jpg?sign=1739580116-WwuhzvRVFnke0La4W63YhyXAfFcKYky9-0-7eeb4b0843c65d220c1ac2b949781510)
图6-120
08 在“图层”面板中选中圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并移动到右侧脸颊处,如图6-121所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_10.jpg?sign=1739580116-4yhpk9HrBTCZs4hOkqNorvEkVj1BZNzd-0-15510c3309da102a924c33e65141b62d)
图6-121
09 最后要绘制太阳的“眼睛”。在选择椭圆工具的状态下,将“填充颜色”设置为黑色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,如图6-122所示。在“图层”面板中选中该圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并将其移动至黑圆右侧,效果如图6-123所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_12.jpg?sign=1739580116-Ru16PzDQUhXXIefZyGP7QB4qdKesnBQu-0-699be011bc0eab728a9b49a4fd47568b)
图6-122
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_1.jpg?sign=1739580116-bXd3msFbG02poAHWqHC2TCMvmtfyRdbx-0-9f9d7c67537857480b0992a7a0a59c5d)
图6-123
10 新建一个图层,选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,在下拉面板中单击“渐变”按钮,然后编辑一个浅蓝色系的渐变颜色,在画面的右上角绘制一个云朵,如图6-124所示。选中“云”图层,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为75%、发光颜色为黄色、“大小”为18像素、“范围”为50%,单击“确定”按钮,完成设置,如图6-125所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_3.jpg?sign=1739580116-Zy8K9cqqey6n8ndLR3ttj9HHFzY0DHbj-0-4d231f3029ba7ac58d0abd7024cfebc7)
图6-124
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_4.jpg?sign=1739580116-gZsuFnjG8gYUgzeUFdC4PHbeXQQ80SAD-0-6b7cf01fdfdba6913a47f3ee3d36fb2e)
图6-125
11 此时云朵效果如图6-126所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_5.jpg?sign=1739580116-D6VfeDmMBUGaCX8sdXH8nN1OFwfB4edh-0-89f55f8e30b708d188b3e6e52efd1fac)
图6-126
12 在“图层”面板中选中云朵图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-127所示。使用Ctrl+T快捷键调出界定框,进行适当的缩放,并拖曳到合适位置,如图6-128所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_7.jpg?sign=1739580116-eGvqodef8lVXFfHITjbu2jfOdfH1R3Ov-0-835203c0a4c6b45dcd5cb30bdadf764b)
图6-127
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_8.jpg?sign=1739580116-2trHZGD2msx6Zidsf0VF8xBnwRQujPGv-0-cd03f2d5330e2e0540f13d6718da1bb5)
图6-128
13 使用同样的方法,依次复制其他云朵,此时画面效果如图6-129所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_9.jpg?sign=1739580116-oSMXjCdsYk3EX8Iqjj9XAcfDcjOyoVns-0-d544390a7e6ba527f7b074d3dc5d093a)
图6-129
14 选择工具箱中的自定义形状工具,然后在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“形状”为音符,在画面中按住鼠标左键进行拖曳,完成音符绘制,如图6-130所示。选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为浅蓝色,在画面的右上角绘制一个雨滴,如图6-131所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_10.jpg?sign=1739580116-Jb5lQEEks3RfTUrYrn2ycavjibCSh5sj-0-273a1123d45a3f635a5754a4aae5facb)
图6-130
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_1.jpg?sign=1739580116-0vFvJoUcE5PmWVaO3UJTDHAJlJIeKUip-0-8ffe85d2fc73eb5440f3747c23e2d777)
图6-131
15 在“图层”面板中选中雨滴图层,然后将其拖曳到“创建新图层”按钮上进行复制,使用Ctrl+T快捷键调出界定框,将复制的雨滴进行适当的缩放,并拖曳到适当位置,如图6-132所示。使用同样的方法,依次制作其他雨滴,此时画面效果如图6-133所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_2.jpg?sign=1739580116-Y9G6SbC6qjUxZeQkgHTCeDc7YQn4My2O-0-ad016ba38353abe6fd9f4279e4b36194)
图6-132
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_3.jpg?sign=1739580116-3ExYptrgSQKT9cFFgFlZrF4ElLPxT6mZ-0-835bae8265df74274ea03e606866f7d0)
图6-133
16 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色为白色,在画面中单击并输入文字,如图6-134所示。继续使用横排文字工具在画面其他位置输入不同的文字,此时画面效果如图6-135所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_4.jpg?sign=1739580116-txkerG4Cu7qSTVTkVkb4PQWPvVWmOOs8-0-60f5cc9515db5c7fb4d56b3daefba23a)
图6-134
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_5.jpg?sign=1739580116-vHDLAq7zbSK3QBjkQn8oWYs9lC8158uT-0-2ac3f1ae801871e37bc9b43e9c7b1e40)
图6-135
17 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择卡通素材“1.png”,单击“置入”按钮,如图6-136所示。将素材放置在适当的位置,按Enter键完成置入,最终画面效果如图6-137所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_6.jpg?sign=1739580116-eNn4EQSHxm77rp75CUfaHdZ2e5MikcqG-0-868c3654cc5d268109fdf1ed00ba6747)
图6-136
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_7.jpg?sign=1739580116-BwLdauEOBOoDzB1JVqKydzO9ChwQYP8J-0-c68c9c10e9e129393e824ae31ba6708d)
图6-137