![中文版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=1739668740-BeHOgkF2cwsP9sAI7k416zV6qJ6WWusn-0-40ca7cd1b0832447be802e9b08a970d8)
实例064 使用钢笔工具制作APP标志
文件路径 第6章\使用钢笔工具制作APP标志
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●路径的运算
●文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_1.jpg?sign=1739668740-UkXj4NGkVDdLIjk21s8Hj1NotLoeHkUT-0-b58d6125afcea8b3f2a56f7af26f38cc)
扫码深度学习
操作思路
钢笔工具可以绘制“路径”对象和“形状”对象。本案例使用钢笔工具在画面中绘制形状,最后在形状上方输入文字,完成标志的制作。
案例效果
案例效果如图6-1所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_2.jpg?sign=1739668740-UyWFmAykgYM1PcUBR3QmzfVjTVOW9ThD-0-3060dcf2aee9684ca27e7392c85e2994)
图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=1739668740-mmPnOeHSM34kszEayDosjqlRQHRv0Pcr-0-44c6c3e50213d2e3d81ec1c90d011597)
图6-2
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_5.jpg?sign=1739668740-r32ehk62HXy8ZtnBNldjbQEmFoa4wTUb-0-3e58c9f329c8bed34791e37c58ef339a)
图6-3
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-4所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_6.jpg?sign=1739668740-vhRBuCqfHjfCiyeP2jnrwWqwjYZThFNl-0-adbd2b1e1a4bd40806214e3e0ce154be)
图6-4
03 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为粉色,使用钢笔工具在画面中多次单击绘制折线形状,如图6-5所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_7.jpg?sign=1739668740-YlYzCLJGw7onejLmOowvrYY8fhk7fwhq-0-d83de610b8adf7f8de7e07d13690b1c0)
图6-5
04 在工具选项栏中单击“路径操作”按钮,在下拉菜单中选择“减去顶层形状”,单击“矩形工具”按钮,如图6-6所示。然后在折线中绘制一个矩形,使这部分被删除,此时画面效果如图6-7所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_8.jpg?sign=1739668740-P2ypofOUOckQgBSTgX4sncJTSUDnud0a-0-fee5d5c2fef856e73397010454d10309)
图6-6
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_1.jpg?sign=1739668740-50i8FDThQoDXQJnNLuId86qucrwqm8OC-0-a863000a7d43ace25687fc18e16d008b)
图6-7
05 选择工具箱中的横排文字工具,然后在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,此时画面效果如图6-8所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_2.jpg?sign=1739668740-0MYwJxzC8WIBRG9dvuDNrz95XbPtUtXL-0-18846ce6bda39787c67f8cb4c4e1c8c4)
图6-8
提示 终止路径绘制的操作
如果要终止路径绘制的操作,可以在钢笔工具的状态下按Esc键完成路径的绘制。或者选择工具箱中的其他任意一个工具,也可以终止路径绘制的操作。
要点速查:路径的运算
选区可以进行运算,路径同样也可以进行运算。首先绘制一个形状,如图6-9所示。默认状态下,工具选项栏中的“路径操作”按钮为(新建图层)。单击该按钮,在下拉菜单中选择一种运算方式,如图6-10所示。图6-11所示为不同运算方式产生的运算效果。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_4.jpg?sign=1739668740-vMHKBtLJrZly56ui159qPP1yL0w4xxCC-0-d44a7e2107e6bfd74703ecf42a743782)
图6-9
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_5.jpg?sign=1739668740-ZdHlGB4NgGbgQnHKcYzZmEvzJ0f8zpYU-0-33e4fb6cf5a3e037d17d9ac335bd2ff9)
图6-10
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_6.jpg?sign=1739668740-7CZM0z8nCPPzaogbpbO8qkALIGq7DbX0-0-ebae0b70f228a31c90655c0970254c5c)
图6-11
实例065 使用钢笔工具抠图制作购物APP启动页面
文件路径 第6章\使用钢笔工具抠图制作购物APP启动页面
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●将路径转换为选区
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_7.jpg?sign=1739668740-jeBpVYmooSj0MUM6TIfjGyLwDhvTo4Kl-0-44334da572f51ce14e436b2df040e426)
扫码深度学习
操作思路
本案例使用钢笔工具在人物周围绘制路径,并将路径转换为选区;使用图层蒙版将选区外的部分隐藏,此时画面出现新的背景。
案例效果
案例效果如图6-12所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_8.jpg?sign=1739668740-9sP8qQg56rE4hD6MQAdhis7qAKZ42cz3-0-ce0221bb3b090f0e0bda9ef337ced664)
图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=1739668740-9bqIy8NzFXsZ7QcezCdcRT0Bt4XXlueg-0-617545f0e693c6bcd7e071d0a048b69c)
图6-13
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_10.jpg?sign=1739668740-HzwGDZSBXGlNo26NKOXbQAG26kE3ZTE6-0-40d608acee04995d179f75d59fc58e51)
图6-14
02 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-15所示。将人物素材调整到合适大小,然后按Enter键完成置入。选择素材图层,执行菜单“图层>栅格化>智能对象”命令,将该图层栅格化为普通图层,效果如图6-16所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_1.jpg?sign=1739668740-31MA9johxnw8kfmc5JCbkMGPMd62SlmU-0-8dd93b7d286ab54fe00edf5b4942ba7b)
图6-15
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_2.jpg?sign=1739668740-gBQeNA3vYoPO7uskMs8TpVwP1mcnt0zJ-0-6b93f5ca7b0cada94f91cf72177d9c9c)
图6-16
03 选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“路径”,在画面中人物边缘按鼠标左键单击拖曳绘制路径,如图6-17所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_3.jpg?sign=1739668740-0sQM1m6bOkDtVmC4aR3BDuzXOSZinzm3-0-90db80d97f54b548469b2db7ee5f527b)
图6-17
04 选择工具箱中的直接选择工具,然后框选人物头上的锚点,将锚点拖曳到人物边缘上,如图6-18所示。选择工具箱中的(转换点工具),然后将光标移动到锚点上,按住并拖曳使路径完全符合人物轮廓,如图6-19所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_5.jpg?sign=1739668740-P2aMiUNRNy1P5LsIcUhANrAIzA9AIUwi-0-e7c340d309d0942ee1f61c77fabe970e)
图6-18
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_6.jpg?sign=1739668740-xMUMsIMIQa6jJQNBBMtIMQhQaTRdRvT4-0-af93102902c40b230da94e420a8462fa)
图6-19
05 使用同样的方法,调整其他锚点,如图6-20所示。调整完成后使用Ctrl+Enter快捷键将路径转换为选区,如图6-21所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_7.jpg?sign=1739668740-NeO7pr37IfQD6E3Pn9zBLiWUbyqnDg2M-0-a77deddcac84b0bfd29b08409b292043)
图6-20
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_9.jpg?sign=1739668740-X9YDXQhB62FeEV1dV8ATuKKk4rIVya1v-0-17d95e00bccb9cbe8a1b94f36fb9b2ec)
图6-21
提示 基于选区添加图层蒙版
如果当前图像中存在选区。选中某图层,单击“图层”面板底部的“添加图层蒙版”按钮,可以基于当前选区为任何图层添加图层蒙版,选区以外的图像将被蒙版隐藏。
06 选中人物图层,在“图层”面板中单击“创建图层蒙版”按钮,如图6-22所示。使选区以外的部分隐藏,画面效果如图6-23所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_10.jpg?sign=1739668740-X7z3xArk0IhIrfI01dDGdyrsnocMyWcY-0-fd260f522ad68fe38e302f1d3e7d8a5d)
图6-22
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_11.jpg?sign=1739668740-rPvgszhkHL0Lc8JMH4KqK3gVHF34rPJn-0-0f63c9e926269e3b184b60150008c00d)
图6-23
提示 蒙版的使用技巧
要使用图层蒙版,首先要选对图层,其次要选择蒙版。默认情况下,添加图层蒙版后就是选中的状态。如果要重新选择图层蒙版,单击图层蒙版缩览图即可。
实例066 使用形状工具与形状运算制作引导页
文件路径 第6章\使用形状工具与形状运算制作引导页
难易指数 ★★★☆☆
技术掌握
●形状工具
●形状运算
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_1.jpg?sign=1739668740-VNllBDtV50iSubmY94kRPI2tkQYuI9oE-0-f45914e0b7fcec557df76088b68215fe)
扫码深度学习
操作思路
本案例主要使用工具箱中的各种形状工具在画面中绘制图案,在绘制过程中要合理使用形状运算,利用形状运算的特征制作外形奇特的图形。
案例效果
案例效果如图6-24所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_2.jpg?sign=1739668740-RFnABmQdRgDqQTvrcbemcEcISS0BTuKL-0-47222044fdda09ea2162fecb4ffc7030)
图6-24
操作步骤
01 执行菜单“文件>新建”命令,创建新文档。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为蓝色,单击“确认”按钮完成设置,如图6-25所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_3.jpg?sign=1739668740-mesAQ5KJXSnligAXrejoMJ0YmFetXmLF-0-357a60afbd6c785790b89a1186a72388)
图6-25
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-26所示。右击工具箱中的形状工具组,在工具组列表中选择椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为红色,按住Shift键并按住鼠标左键在画面左侧位置拖曳绘制圆形,如图6-27所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_4.jpg?sign=1739668740-icdsvwcGSdCJz2Xzqs0GmPU1YFOoU6CS-0-251c49e0582f0ddec0d654bf6e09af85)
图6-26
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_5.jpg?sign=1739668740-gYx6NqBphhIdltr5p1hfEVOpLLphRlij-0-d11cfb81cbf38ddd22e56ac0fd222074)
图6-27
03 在“图层”面板中选中形状图层并将其拖曳到“创建新图层”按钮上,进行复制,如图6-28所示。选择复制的图层,在工具选项栏中设置“填充”为绿色,然后将复制的圆移动到红圆右侧,此时画面效果如图6-29所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_7.jpg?sign=1739668740-fsogqnmB07whYkyoptkgfijukbFtXod4-0-cb27772f9efac325e38ef5819533e5ae)
图6-28
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_8.jpg?sign=1739668740-WMYjDQg0qjFpykPY6IXsDWd2aBaKkdL1-0-23a73aaea02e246b31a85dcfdb1f8a11)
图6-29
04 使用同样的方法,制作蓝色正圆,如图6-30所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_9.jpg?sign=1739668740-YKyagtzZ4cmVTT4VxrFw1tbUtHijTUF3-0-174a6479eed30336696016ea90e2e387)
图6-30
05 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为白色,在画面中绘制形状,如图6-31所示。继续使用钢笔工具,将工具选项栏中的形状“填充”改为蓝色,然后在右侧白色图形下方绘制三角形,如图6-32所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_11.jpg?sign=1739668740-mwvfXgWgN7TG5hjnGCo7u4AzxJOo02KA-0-c2d1de23c94c5e6afec5dfdab78c36c2)
图6-31
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_12.jpg?sign=1739668740-bctUknPF664gb06NcBsRq77kJb2O19hp-0-01d140b012e3cac5854e33bb2f9ee75e)
图6-32
06 在选择钢笔工具的状态下,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色。在画面的左下角绘制一个三角形,如图6-33所示。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,设置“填充”颜色为白色,按住鼠标左键并拖曳绘制圆形,然后在其选项栏中单击“路径操作”按钮,在下拉菜单中选择“合并形状”,再绘制其他椭圆,同样的方法依次绘制两个椭圆,如图6-34所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_1.jpg?sign=1739668740-EZjAh4OFYyh4RviE605GCp1ZpUisXHkK-0-1842bbbaa78fb5a608f76fba471425b7)
图6-33
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_2.jpg?sign=1739668740-AFL2cUMchikHYeFc4s6t3g58etYUJWTZ-0-237c04644e60ac899fd7ba2c92a25699)
图6-34
07 继续在当前图层操作,在工具选项栏中单击“路径操作”按钮,设置为“减去顶层形状”,然后选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,设置“填充”颜色为白色,在白色图形的下方按住鼠标左键并拖曳绘制矩形,如图6-35所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_3.jpg?sign=1739668740-WS9ev02yk8cdVNZXrn57aA2eMTDC1qIf-0-0fd666cf238d7c131753c535fed2c23b)
图6-35
08 再次使用椭圆工具在云朵图形下方绘制深蓝色正圆,并将其复制,如图6-36所示。在“图层”面板中按住Ctrl键选中多个深蓝色正圆图层,在工具选项栏中单击“垂直居中对齐”按钮,在弹出的下拉菜单中选择“水平居中分布”,此时画面效果如图6-37所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_4.jpg?sign=1739668740-rj83CVuegbCPvbEW5hfMjS9qfTiOgnHm-0-6fe6f39046f9f7af22f66de6f5edb660)
图6-36
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_5.jpg?sign=1739668740-VaEBZ25ommIeGna49cWNwMdhmaVX9M9y-0-82da0a017985291054ff7fc2e7a474c5)
图6-37
09 在“图层”面板中选择一个椭圆图层,然后设置工具选项栏中的“填充”为白色,此时该圆变成白色正圆,如图6-38所示。在工具箱中选择横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,如图6-39所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_6.jpg?sign=1739668740-yi6k1Z1c62MhiChqk6pmHaLpeUZIORDs-0-1f310ef82cffe25a5f1349c1a520070c)
图6-38
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_7.jpg?sign=1739668740-ImjfkImqintorSc6ysyOqBltJLYqgZVs-0-dd385f7317505c6b034c7037e3384d7c)
图6-39
10 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.png”,然后单击“置入”按钮,如图6-40所示。将素材调整到适合位置,按Enter键完成置入,最终效果如图6-41所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_8.jpg?sign=1739668740-kbpmhcjH2h4iDVn23d63LSUdMSNUSwTX-0-2ac29cedc155a912c2e7e01d752e0737)
图6-40
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_9.jpg?sign=1739668740-5CJPRnCjgYNNOKNvZtxsRvj3OEb84tqF-0-aff811a864a53cbbf19bd8ef9268063a)
图6-41
实例067 使用椭圆工具制作画面创意效果
文件路径 第6章\使用椭圆工具制作画面创意效果
难易指数 ★☆☆☆☆
技术掌握
●椭圆工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_1.jpg?sign=1739668740-L3AAiL5sVwrGR1tnFS56gggHtec6Qkj8-0-a4d939593de863fe556b18bc3fa2ea26)
扫码深度学习
操作思路
本案例主要使用椭圆工具在画面中按住Shift键的同时按住鼠标左键拖曳绘制矢量圆形,然后在上方输入合适的文字,完成最终的操作。
案例效果
案例效果如图6-42所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_2.jpg?sign=1739668740-f3R5rzsn9B50glZHQH5WO5ZiHuDc4yiB-0-4749bb3943c8ac4120a266fd151be732)
图6-42
操作步骤
01 执行菜单“文件>打开”命令,打开素材“1.jpg”,如图6-43所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_3.jpg?sign=1739668740-YqSaPRevcFxr9Dfa8w7HUaE2Zv9x50Ll-0-7638c75390b294c6d0ed6e0ed03fcb27)
图6-43
02 选择工具箱中的(椭圆工具),将工具选项栏中的绘制模式设置为“形状”、“填充”为白色、“描边”为无,在画面中按住Shift键绘制一个白色正圆,如图6-44所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_5.jpg?sign=1739668740-TYoFmBoKCkad8JJx0vW9535Aq3EnVJqJ-0-0eca74266908e96fe92919437ac9571c)
图6-44
03 接下来在画面中绘制文字部分。选择工具箱中的(横排文字工具),在工具选项栏中设置合适的“字体”“字号”和“颜色”。然后在画面中单击,输入文字。输入完成后单击工具选项栏中的“提交当前所有操作”按钮
,即可完成操作。将文字放置在正圆内部,如图6-45所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_8.jpg?sign=1739668740-jnSDsGGtyfcveulXtkQcvHocbPaWik8f-0-1c6e9bb4d8ff02c69ac772cb0a03c21b)
图6-45
04 变换“字体”“字号”和“颜色”,继续在圆形下方输入剩余文字,最终效果如图6-46所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_9.jpg?sign=1739668740-H3XOZoXDjRFiIoQQ2kdPBnAKiZlbxG5H-0-490c3658cb0dade7f4b48fa2ec0aec61)
图6-46
实例068 极简风格图标设计
文件路径 第6章\极简风格图标设计
难易指数 ★★★☆☆
技术掌握
●圆角矩形工具
●钢笔工具
●自定形状工具
●图层样式
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_10.jpg?sign=1739668740-52LygpAjyTKUA0Un5uoxkNpRqnh4aPig-0-0d6a61297b360a4094d7a0dea804a57f)
扫码深度学习
操作思路
本案例首先使用圆角矩形工具制作图标背景部分,其次运用钢笔工具绘制矢量的蓝色形状,最后使用自定形状工具添加其他元素。
案例效果
案例效果如图6-47所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_11.jpg?sign=1739668740-KuG3viUK1A4OD1WsLQ72MzECrWgyX5NP-0-b4cc7ab9eaba658bef34e7873f246491)
图6-47
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1600像素、“高度”为1400像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-48所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_1.jpg?sign=1739668740-JtcLuCAHWHKedKR0MjH5YeHPh6towph3-0-cb68b3bb96df1e7a5c489f99bf77c41b)
图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=1739668740-IcHvkYGS7qgy5DU2PnWAxu3nPx8eTjgp-0-e136a91e34066d9152946b52f6dd8d04)
图6-49
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_3.jpg?sign=1739668740-0OrAx30oJDUJjLLLGy4oM79ebsFK5sGk-0-97a85050bc11faf7526aaa9bb7c86495)
图6-50
03 此时效果如图6-51所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_5.jpg?sign=1739668740-gVwnaACZrzeMkPbZbZf4fhdpZ8X8aC4L-0-5bb62b387b1491e93225b4a7c11a1d54)
图6-51
04 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为蓝色、“描边”为无,设置完成后,在圆角矩形框上方绘制一个多边形,如图6-52所示。使用同样的方法,在多边形右上角绘制一个三角形,将“填充”改为深蓝色,如图6-53所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_6.jpg?sign=1739668740-Ql0sfHI3AGnJ1xDPxAbVfCg5EItyo97S-0-cc142c6d6c721bb6ab772e20065adadd)
图6-52
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_7.jpg?sign=1739668740-70ypXfFGepY908dC263jURH9VezH9yeF-0-51be1a21517fbabf9521303e90c590dd)
图6-53
05 选择工具箱中的(自定义形状工具),在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个音符形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-54所示。最后将得到的形状图层移动至三角形图层下方,效果如图6-55所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_1.jpg?sign=1739668740-A5ZpYpMfoECgzV51UokTVzkd5iGvg076-0-06c4e069f9356f84ba439c30b795e040)
图6-54
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_2.jpg?sign=1739668740-EjF0vraU59odMwcNCkZz8vxGMDUT48Pj-0-599848cc0445a5dc8b3d344fdec4948f)
图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=1739668740-2gbO3Xmc1O7nrY3JR73Gb51PzAFpfP18-0-ed0aad5d62e519111a0d5925fb4dcd82)
图6-56
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_5.jpg?sign=1739668740-cdapbBdU2bx28XVFa7yoT9nr3YTnCw26-0-64575aa6197e8508cb67bbe2f1576bef)
图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=1739668740-P0qaOQmeOwMCUNo7IfrmAVpN8fQlNLza-0-5de6c855d4cbd2b775bbbc6f18584072)
图6-58
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_7.jpg?sign=1739668740-q1ciODoaNEAnLeHyVB0CWI13QYoWFZF2-0-c406d9524f084d9c576847a947f8678a)
图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=1739668740-EvnRJNskzJpFwm17rloAeXMaqS7wqWJY-0-b22921dc57e0149e4f701a6c6b44a0e7)
图6-60
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_2.jpg?sign=1739668740-eqxJR13YUAEbrTkldtz11SAujsQM1GcB-0-e8cc5afe91cb9b5cb41ea3a60ca3bdc7)
图6-61
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_3.jpg?sign=1739668740-A77uMjg9pQM8CFeGW4Z8lDNPHIQaIWI7-0-bbd0a9cee70b5e20f9cfa8f08c659f19)
图6-62
提示 将路径转换为选区
使用Ctrl+Enter快捷键可直接将路径转换为选区。
实例069 使用形状工具制作质感按钮
文件路径 第6章\使用形状工具制作质感按钮
难易指数 ★★★☆☆
技术掌握
●形状工具
●渐变工具
●椭圆工具
●钢笔工具
●图层样式
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_4.jpg?sign=1739668740-4PViJ3bdXJLBy9g11nI8eYib2ePRo0bu-0-97545d2baed1a852b1902c39a6c6ae95)
扫码深度学习
操作思路
本案例在操作中多次运用到形状工具,使用该工具绘图时要注意形状的运算和工具选项栏中的绘制模式。
案例效果
案例效果如图6-63所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_5.jpg?sign=1739668740-6hPLVtARFOY1zI5ar3PVfLBceqne5GF2-0-8734544a36cd2a6405fbbb31c2b1e885)
图6-63
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为2604像素、“高度”为2413像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-64所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_6.jpg?sign=1739668740-M7pySOWS3oSLruFsVaHzRvovEAg9W51a-0-85e86d119b6a5442223b13ab0c72afd9)
图6-64
02 选择工具箱中的渐变工具,单击工具选项栏中的渐变色条,在弹出的“渐变编辑器”对话框中编辑一个蓝色系的渐变颜色,设置完成后单击“确定”按钮,如图6-65所示。然后在工具选项栏中设置渐变类型为“线性渐变”,最后使用渐变工具在画面中按住鼠标左键由下至上拖曳进行填充,效果如图6-66所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_1.jpg?sign=1739668740-6zcAzLcJVnh02AmPVF35UleVzl66MtDm-0-4fe4929ff34e51e5c9c5c1c6c2b43f56)
图6-65
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_2.jpg?sign=1739668740-PAhMqfwy7tDsNqK8ppjezSla25GO748D-0-969078a936508779488f7a258b4f99f0)
图6-66
03 选择工具箱中的(椭圆工具),在选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在画面底部按住鼠标左键绘制椭圆,如图6-67所示。在“图层”面板上将该图层的“不透明度”设置为20%,如图6-68所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_4.jpg?sign=1739668740-R3uV2rg33hUVNSczMZnsqk8xiUPF7AOE-0-06fd7fd25d7f1b9a4543502a73a5b8dc)
图6-67
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_5.jpg?sign=1739668740-yn5scNLQjNe3wMTPynPKKugOldNGPEKd-0-66edea3310aee50dfecc7c23e82ba65b)
图6-68
04 选择工具箱中的(自定义形状工具),在选项栏中设置绘制模式为“形状”、“填充”为绿色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个会话形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-69所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_7.jpg?sign=1739668740-m6gQcwG0EoHNM14lRsWij4p3l7JMhnfG-0-e2c81847b42333ed4d779b5c02379171)
图6-69
05 选择工具箱中的(椭圆工具),在工具选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,然后在对话形状上面按住鼠标左键并按住Shift键绘制正圆,如图6-70所示。在“图层”面板上设置该图层的“不透明度”为35%,效果如图6-71所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_9.jpg?sign=1739668740-EGURRdu9suMfgxpJPJJ5qYCQev2Ri4X1-0-f2bd4709d2914d8240b893b09118798a)
图6-70
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_10.jpg?sign=1739668740-Kc7Z0hlaeuuo75ZwEfZ86cSart9rPAp2-0-63ab49ead77dda32879a4c9aae429e89)
图6-71
06 选择正圆图层,单击“图层”面板底部的“添加蒙版”按钮,为该图层添加图层蒙版。选择工具箱中的(画笔工具),在选项栏中单击打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,如图6-72所示。将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-73所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_12.jpg?sign=1739668740-sVueN9NVR0OMpoI81PsxbLpz9RdZHtTX-0-a4fc2e2119bd45bf4a110512f8350bc6)
图6-72
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_13.jpg?sign=1739668740-taj8jPfYkV3HekPd4jX6zUnqUO6SX24A-0-6e9afc0851c6a3fcffe949a929235855)
图6-73
07 在“图层”面板中选择正圆图层,使用Ctrl+J快捷键将形状进行复制,单击复制图层的图层蒙版缩览图,选择工具箱中的画笔工具,将前景色设置为白色,然后按住鼠标左键在画面下方涂抹,在“图层”面板上设置“不透明度”为90%,效果如图6-74所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_14.jpg?sign=1739668740-zMVKkCazMYeQcw5HprykKY1wYhdktXpJ-0-84bc82fe3bb219898d1d621057aaec0a)
图6-74
08 选择工具箱中的(钢笔工具),在选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,设置完成后,在会话形状右侧绘制一个月牙形状,如图6-75所示。为该图层添加图层蒙版。然后选择工具箱中的画笔工具,在工具选项栏中打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-76所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_1.jpg?sign=1739668740-U2nDW6oVPtPylketlRea6lD5WNBEXPa7-0-c8073100cc8364ce5694d86778676c6f)
图6-75
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_2.jpg?sign=1739668740-ouF57FbpcLI3qWogA3vW9jxBBCop7Wyc-0-ff3e661a77fcff2c7bc7d2c4efcfbbcd)
图6-76
09 绘制声音形状。选择工具箱中的自定义形状工具,在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个“声音”形状,然后在正圆上边按住鼠标左键拖曳进行绘制,如图6-77所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_3.jpg?sign=1739668740-NAxtNr9SBu0zLl4wzfNtdOTXfeRvugmi-0-019c9db54caff90ceb51853c9e056701)
图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=1739668740-014OX98NVLsiPhLZephI3RAtA7K5BBOt-0-74d329f212ffcd8cc6832bad929784ac)
图6-78
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_5.jpg?sign=1739668740-2aj3X95KjBqh2RCQJqbdXt1OivOuDJUA-0-e4edcf98f081e7968522f7e73a4a11a0)
图6-79
实例070 使用矢量工具制作活动标志
文件路径 第6章\使用矢量工具制作活动标志
难易指数 ★★★☆☆
技术掌握
●转换点工具
●自定义形状工具
●钢笔工具
●矩形工具
●横排文字工具
●自由变换
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_6.jpg?sign=1739668740-P77cWcy4ZyJ2pvSoMA91dkljGRvMUG2k-0-486389e7d20ca8b9f33cbf95793ac42b)
扫码深度学习
操作思路
转换点工具可以调节路径的弯曲度。本案例利用这一特征将直角五角星转换为圆角的五角星,然后使用钢笔工具绘制五角星的内部图案,最后在其上方输入文字。
案例效果
案例效果如图6-80所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_7.jpg?sign=1739668740-PDpfwnmroQHoDidE6AMdQGNYPXpgYow4-0-9b2ad4657849f31af27faa1bcd787788)
图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=1739668740-PvcRf2TC3xP9fqL13NlgIVNzjkTVmLQ3-0-ec1318c5c85739d6930a95190171ccef)
图6-81
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_2.jpg?sign=1739668740-FgGnp20yLMRFuqtbwqx5t75fcl2w6s5O-0-90cc0259d1f102983c1d1ea8155e12a6)
图6-82
02 使用前景色(填充快捷键为Alt+Delete)填充画布为深蓝色,如图6-83所示。使用鼠标右击工具箱中的“形状工具组”,在工具组列表中选择自定义形状工具,在工具选项栏中设置“形状”为五角星,然后在画面中按住鼠标左键进行拖曳,完成五角星绘制,如图6-84所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_3.jpg?sign=1739668740-HTLtaHiWWmjO0FlMxYhTMF4PID7Sa5PW-0-ffa0231b01f15d76c466faa9a6bb747e)
图6-83
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_5.jpg?sign=1739668740-wQadyJhWV5nMiSYZG13KbyzDORysCkZs-0-12dc1cc228c04dd04f0437e251ba9e42)
图6-84
03 在工具箱中右击“钢笔工具组”,在工具组列表中选择(转换点工具),按住五角星的一角进行拖曳,改变五角星一角的形状,如图6-85所示。使用同样的方法,制作其他角,如图6-86所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_6.jpg?sign=1739668740-uxjgmQfmRcf936owuBu94XpEvpgWWfwh-0-e6179481942bf2b027aa1ee82df294f2)
图6-85
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_7.jpg?sign=1739668740-zQhj0ZeIH2ocnJjT1NI5BzEqGgsU9OlX-0-c7abf08f84005edb8a786bd86e1891cd)
图6-86
04 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-87所示。将素材进行旋转调整到合适位置,按Enter键完成置入,并执行菜单“图层>栅格化>智能对象”命令,此时画面效果如图6-88所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_8.jpg?sign=1739668740-W812VQkRCxo7r69M9de6sqxOhfumX6at-0-a71249b8578f7182ae584bac59c262c3)
图6-87
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_9.jpg?sign=1739668740-XXEpM96JlgzKjtlD8vP3HM6ruZwSEOtg-0-bcaf88a9b6c6a81707aad10141a529dd)
图6-88
05 在“图层”面板中选择素材“1.jpg”所在图层,右击该图层,在弹出的快捷菜单中执行“创建剪贴蒙版”命令,如图6-89所示。此时画面效果如图6-90所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_1.jpg?sign=1739668740-9rP7HAYX2xMVbPV3cALzvOzJmjajoBiq-0-09ba805691b7d6ae40a49fcce8612f5e)
图6-89
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_2.jpg?sign=1739668740-UQKDFVltr2ZbvAVQRqawYf1eOW8bX6DD-0-1f535a199375f33ecdb4541c91802ad1)
图6-90
06 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在星形中下部按住鼠标左键拖曳绘制矩形,如图6-91所示。使用Ctrl+T快捷键调出界定框,然后将矩形旋转一定角度,使用Enter键完成变换,效果如图6-92所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_3.jpg?sign=1739668740-dW9DeJIS8HbWUQnZZSHwRxbMJFBRVSw7-0-712532c6d4fed274cca5c849ae7cd251)
图6-91
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_4.jpg?sign=1739668740-EvooItrtbUtb1UjRhnjSAebza8sJeBRN-0-5315aa7800786762dd6f8ff24e5674ff)
图6-92
07 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为黄色,使用钢笔工具在画面右上角绘制三角形,如图6-93所示。然后在“图层”面板中选中该图层,设置“不透明度”为30%,如图6-94所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_6.jpg?sign=1739668740-VsYFNJ24yVip6nu5h7t6hxzynJNltutK-0-cac51f8b7b7a113cb12e5c25187835e2)
图6-93
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_7.jpg?sign=1739668740-pKO7IsG8fUFAXIPGmdTS6CvIZubxawpR-0-a54bbb3f0ed5fd96bbafc3521b44e14c)
图6-94
08 在“图层”面板中选中三角形图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-95所示。使用Ctrl+T快捷键调出界定框,然后将其进行适当的旋转、缩放,并将其拖曳到适当位置,如图6-96所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_9.jpg?sign=1739668740-EmomZljt5O4WD08jrPxc3LAUr5rkK416-0-a347e9a83e2116a0912b4e0e8248d8de)
图6-95
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_10.jpg?sign=1739668740-EqkdbCZyAH1BiThNDt7Ol1l1y8Ll8Fej-0-1ff96a538830d8887bdab3c01387d56e)
图6-96
09 使用同样的方法,再制作另外一个三角形,如图6-97所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_11.jpg?sign=1739668740-N5ep2GKmSD47V0uqWNGY8NUz6DrqtUgC-0-1675e4bc345ce321c2c8a99539e2b446)
图6-97
10 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为橘红色,使用钢笔工具在画面中绘制形状,如图6-98所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_13.jpg?sign=1739668740-ENolPq5esTLTxIZ7XUHnUX9UDBM3ETTu-0-bae1075b986c956609a64bb13a63e6bc)
图6-98
11 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色设置为白色,在画面中输入文字,如图6-99所示。同样的方法输入右侧的文字,如图6-100所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_1.jpg?sign=1739668740-aUjK8sntW6PETdhu9FzFLUcr5BaSWCtj-0-fb4b6b332ad6366e99bb5b40747ed91d)
图6-99
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_2.jpg?sign=1739668740-fCFsbf6HspWDgCeyD1AixLVtMms2DezJ-0-6efabc4743e82531503bc89d2441d497)
图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=1739668740-jCXEYB6MruVw9CsO1DAkqwIKvXFzfzkr-0-fe3f39c0a74481c0bc025275e41af91f)
图6-101
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_4.jpg?sign=1739668740-6Bs0CyzkjogRE4l8OhnSLHWMGu7yYORn-0-0c15b91b83be75b706c95143dc301230)
图6-102
13 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置填充颜色为灰色,然后按住鼠标左键拖曳绘制圆形,如图6-103所示。使用Ctrl+T快捷键对矩形进行自由变换,将矩形旋转一定角度,按Enter键完成变换,如图6-104所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_5.jpg?sign=1739668740-PNxQOgRh5Sr8A8Iw5SXEFWtWNj125ue5-0-5ad28e15971c6339e9f75b0903482007)
图6-103
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_6.jpg?sign=1739668740-URnv2gMxR7wCSBuziy4qpH8gwiA5zZdn-0-8721d51bb3a6ac71c38de508ceb223a6)
图6-104
14 再次绘制一个稍小一些的五角星,然后将其移动到合适位置并适当旋转,如图6-105所示。使用同样的方法,复制一个五角星,并移动到合适位置,如图6-106所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_7.jpg?sign=1739668740-F3VHpSrJgTZwCBvaSb8JJxx3fzzU8mcQ-0-e842f58aa2537d55e7d1083539e51ddc)
图6-105
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_8.jpg?sign=1739668740-w9Nr1YEIIDxNFwUCwEMxvoaf7fMBQRX4-0-71e787f6830f111670b78cbfbda06009)
图6-106
实例071 天气时钟小组件界面设计
文件路径 第6章\天气时钟小组件界面设计
难易指数 ★★★★☆
技术掌握
●形状工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_9.jpg?sign=1739668740-9LXgUEjJggkZs7l85NJll6tUotIKVyx5-0-32f3168f797ba874b727e78c6238da37)
扫码深度学习
操作思路
本案例主要使用形状工具绘制矢量小组件图形,在绘制时要注意调整图层的混合模式,最后在画面中合适的位置输入文字,从而制作出天气时钟小组件界面。
案例效果
案例效果如图6-107所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_1.jpg?sign=1739668740-f9canFWnZPKAql5auZuMGdFn7YyiIpzn-0-cd55cd54fe567a7e5e0d6988f11d2d23)
图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=1739668740-tbNFtzPDta1LL0WWZm35HyKtTz9r2YqK-0-f1fd127e8b52d57baa4bd5d2ff42ea45)
图6-108
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_4.jpg?sign=1739668740-0S4ABMF3A4eWUsScThdt8qdqx7Y9xrMB-0-7925bdc754050e602b2f31680d7beac2)
图6-109
02 在画面中按住鼠标左键由左至右拖曳填充渐变,如图6-110所示。新建一个图层,右击工具箱中的“矩形工具组”,在工具列表中选择圆角矩形工具,然后在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色,“半径”为40像素,在画面的中间位置绘制一个圆角矩形,如图6-111所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_5.jpg?sign=1739668740-o9trpLuaMQtTJlhlAxtPXCIOmtKC7dKm-0-5687765f5568c82ea592102ad975745b)
图6-110
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_6.jpg?sign=1739668740-dNBXhRxRZ90WCMxqeyoYQqsnrXwMxfBk-0-37616191908b88b30d964e9acf5d0011)
图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=1739668740-SMFz5l6whL6PkAm0vWqWb1ScTywpQ8oS-0-0719ca79c8be0640b120076c4d2fd66e)
图6-112
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_1.jpg?sign=1739668740-mVxB4aST8AXvnK6XwUCkFpvpsHyDX216-0-bbef1ccedd2df7240f94b2464755fcf8)
图6-113
04 此时效果如图6-114所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_2.jpg?sign=1739668740-sZxgOM549OzUUAWJLpZFuYNE7GoIVsmz-0-76bac8d120e2dba6f02a2b1559f08cb8)
图6-114
05 新建一个图层,选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为灰色,在相应位置按住鼠标左键拖曳绘制矩形作为分割线,如图6-115所示。在“图层”面板中选中灰色矩形图层,然后设置其混合模式为“柔光”,如图6-116所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_3.jpg?sign=1739668740-7LHVAcK2A2ZD2vHMJrcnaptsTWOrihDh-0-d9d174651a493c1a5b63a1079de805d7)
图6-115
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_4.jpg?sign=1739668740-gtResi3Na4CN1U9IOHwlGvB0ntSer97l-0-e4417f565a8133d386d318c58d9610cc)
图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=1739668740-et6SsIrMmGwnygGWbxrafQdmlvTutMQ4-0-0e1c10f91b5e7d3e58a82f827d747c48)
图6-117
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_6.jpg?sign=1739668740-rdVXY1b0Tl48JJybMd9SGNiEBgUR7D0I-0-123f1e7c1cba752c66a03041cfd491d5)
图6-118
07 此时要绘制位于画面左下角的卡通太阳。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择“填充颜色”为淡黄色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制正圆形,如图6-119所示。绘制太阳的“红脸蛋”。继续使用椭圆工具,然后在工具选项栏中设置“填充颜色”为粉色系渐变,在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,效果如图6-120所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_7.jpg?sign=1739668740-XJL7jdQCyBDDjZvzcLavC69wwamv8lRk-0-8022684ff59e913110ce65e39453fc0d)
图6-119
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_8.jpg?sign=1739668740-E4ZZDCabFE7D0jcCO1tuWQrzJjPWWZtP-0-2f02c14ef26d63c2049b2bc51d7f0950)
图6-120
08 在“图层”面板中选中圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并移动到右侧脸颊处,如图6-121所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_10.jpg?sign=1739668740-UzIACliHMP9r0aY18LzAKCcxiCtFC2pY-0-b04e6a7c2dd59c5957ccd9cf293729cf)
图6-121
09 最后要绘制太阳的“眼睛”。在选择椭圆工具的状态下,将“填充颜色”设置为黑色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,如图6-122所示。在“图层”面板中选中该圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并将其移动至黑圆右侧,效果如图6-123所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_12.jpg?sign=1739668740-UwwHUfLkoRrXVNXdtlAaHD0ZIX6vvaVO-0-ebfeb228f95452ac510c1e3bee4251a1)
图6-122
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_1.jpg?sign=1739668740-ujJnQzwY1tNUdCpOCUoT4zrD4FfpBJ5q-0-ef5d2c29614b5b2a75d0128b8743f2ec)
图6-123
10 新建一个图层,选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,在下拉面板中单击“渐变”按钮,然后编辑一个浅蓝色系的渐变颜色,在画面的右上角绘制一个云朵,如图6-124所示。选中“云”图层,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为75%、发光颜色为黄色、“大小”为18像素、“范围”为50%,单击“确定”按钮,完成设置,如图6-125所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_3.jpg?sign=1739668740-9umrmCMtLxRLl2VI2NNcxs5YXlhaJo1O-0-0341d92242a49f8c6e3a10e297353d8a)
图6-124
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_4.jpg?sign=1739668740-90a0AusoXujrO9U36k0pUCxthsw7btSx-0-83e4cc6a80ac2b3cc382800e1e215be3)
图6-125
11 此时云朵效果如图6-126所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_5.jpg?sign=1739668740-tzPkHKS1wEbl3Lvgfico1zikT8bjPzYk-0-f857f3bac9f186c9598c657563e9b77c)
图6-126
12 在“图层”面板中选中云朵图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-127所示。使用Ctrl+T快捷键调出界定框,进行适当的缩放,并拖曳到合适位置,如图6-128所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_7.jpg?sign=1739668740-bNFkjVEyRGEsmZ1XItEkjqWCQnB8l5dT-0-1b6d9d0b4f832e8396de6927cbe4034c)
图6-127
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_8.jpg?sign=1739668740-CzccV5J1F3YqbQ9idzPp2OMHpcacwBXE-0-32adb3d92b50d0c65bde6bb372c564b3)
图6-128
13 使用同样的方法,依次复制其他云朵,此时画面效果如图6-129所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_9.jpg?sign=1739668740-7cvoUUtYDdRw2I4JBEqFCQdWIkXybEtB-0-2ea98f7f865d7f5dc7b79babd6e40fdc)
图6-129
14 选择工具箱中的自定义形状工具,然后在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“形状”为音符,在画面中按住鼠标左键进行拖曳,完成音符绘制,如图6-130所示。选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为浅蓝色,在画面的右上角绘制一个雨滴,如图6-131所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_10.jpg?sign=1739668740-bKaI2gkTqLf7viKPTm9oUctu6z1wKcgV-0-b870d99a129fe623700d4a22ce2e39cc)
图6-130
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_1.jpg?sign=1739668740-HThUojPFctmYKYxO8UCjDXVyJnwX0EpH-0-c6f7f9c2fa89bb3115444b84f03bedc8)
图6-131
15 在“图层”面板中选中雨滴图层,然后将其拖曳到“创建新图层”按钮上进行复制,使用Ctrl+T快捷键调出界定框,将复制的雨滴进行适当的缩放,并拖曳到适当位置,如图6-132所示。使用同样的方法,依次制作其他雨滴,此时画面效果如图6-133所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_2.jpg?sign=1739668740-6rh918KdAA7xfFlgcNPCQP9oP77xAngi-0-bf1040f8f43f0ffa9183cc513c72db8f)
图6-132
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_3.jpg?sign=1739668740-rZqcJf55lsnyEK60bBErU98UJSU43j9k-0-6ff0ff56a37038730e0f9bcd42552e23)
图6-133
16 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色为白色,在画面中单击并输入文字,如图6-134所示。继续使用横排文字工具在画面其他位置输入不同的文字,此时画面效果如图6-135所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_4.jpg?sign=1739668740-SvyXSWbZZAJ9ymAP2ImJyJTealBySQ3A-0-dce97488f64619f9a35867f0eb5f42cb)
图6-134
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_5.jpg?sign=1739668740-kSesryoZOYb8CsZVj9V9QPNCbjDzonKm-0-6e1f42a1599077cf9fd81b1b4a4df95b)
图6-135
17 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择卡通素材“1.png”,单击“置入”按钮,如图6-136所示。将素材放置在适当的位置,按Enter键完成置入,最终画面效果如图6-137所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_6.jpg?sign=1739668740-rX3anbgEYVu51yv2zUDbufxfEDjaovw8-0-bc052b8a3fc50e56767172906e929b79)
图6-136
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_7.jpg?sign=1739668740-YgixSofwZ3sW6BzL1cyEtJlCAuCIkKjC-0-913398488a2c813404dd2a6085060a24)
图6-137