![中文版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=1739355725-THaGOSMeauhK13fiIoEXcBZvY966lo29-0-db514b398230bc27f4bdd65b2958307a)
实例064 使用钢笔工具制作APP标志
文件路径 第6章\使用钢笔工具制作APP标志
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●路径的运算
●文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_1.jpg?sign=1739355725-awgytQt0P61uaEI6QYlT7eGfD00p0urk-0-cafb092e5a13c5286aef3734b4212d09)
扫码深度学习
操作思路
钢笔工具可以绘制“路径”对象和“形状”对象。本案例使用钢笔工具在画面中绘制形状,最后在形状上方输入文字,完成标志的制作。
案例效果
案例效果如图6-1所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_2.jpg?sign=1739355725-swu5hVgfhrpxhuZKd1LSrTitOZEdl0kq-0-5254dac78c8bcfa07f506f3219a94cb1)
图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=1739355725-gAwkYeeinH0238yKbUGljhSUkOnGTZRF-0-8d0f4da2a8b54d34da88475db973622e)
图6-2
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_5.jpg?sign=1739355725-VZZxIXjAmAgmTQMVQg4CNdgJXeAHctva-0-8330e1c7c9d6d355247085515337090e)
图6-3
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-4所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_6.jpg?sign=1739355725-ZkhBedAlzR7JDewJYNU0WpmhiSX65W3S-0-620120fde3e125cb9e87ea86c1268f3b)
图6-4
03 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为粉色,使用钢笔工具在画面中多次单击绘制折线形状,如图6-5所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_7.jpg?sign=1739355725-PLhpmzkafIDNlIvJqhBxmCeBIGOnSTll-0-3d3a229f751632b492947397ffe5be37)
图6-5
04 在工具选项栏中单击“路径操作”按钮,在下拉菜单中选择“减去顶层形状”,单击“矩形工具”按钮,如图6-6所示。然后在折线中绘制一个矩形,使这部分被删除,此时画面效果如图6-7所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P125_8.jpg?sign=1739355725-6nOVSlIQUXjUwiwcN8Xdw6UABc7yAZFS-0-0227bc3ab9cbd46492d2e0fa7f29fedf)
图6-6
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_1.jpg?sign=1739355725-WqWgodbUwk5qc78IFj4Dqk80mQhnLpll-0-d5d2c7347dc1890cc62718d10034fb63)
图6-7
05 选择工具箱中的横排文字工具,然后在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,此时画面效果如图6-8所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_2.jpg?sign=1739355725-xqIkwbICasDDZJVaL34JiEKbtkvHdR01-0-6e6caf18fd102170ef03b1487109c94c)
图6-8
提示 终止路径绘制的操作
如果要终止路径绘制的操作,可以在钢笔工具的状态下按Esc键完成路径的绘制。或者选择工具箱中的其他任意一个工具,也可以终止路径绘制的操作。
要点速查:路径的运算
选区可以进行运算,路径同样也可以进行运算。首先绘制一个形状,如图6-9所示。默认状态下,工具选项栏中的“路径操作”按钮为(新建图层)。单击该按钮,在下拉菜单中选择一种运算方式,如图6-10所示。图6-11所示为不同运算方式产生的运算效果。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_4.jpg?sign=1739355725-OvSzVNulkmN3EdlSGgtFgIgaAuVDaoJc-0-baf916afc77fc42219342cf934281a8b)
图6-9
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_5.jpg?sign=1739355725-8jM2J2ClBEz490NJVcfq9pxfWWAyfKcx-0-b4a1c2c27961010e85726831cd5730aa)
图6-10
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_6.jpg?sign=1739355725-BVLH5gMu9OMlnkXGcj19nOtuNAOO8RAq-0-de4c953edfb46febf5bda77cfb2b696a)
图6-11
实例065 使用钢笔工具抠图制作购物APP启动页面
文件路径 第6章\使用钢笔工具抠图制作购物APP启动页面
难易指数 ★★★☆☆
技术掌握
●钢笔工具
●将路径转换为选区
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_7.jpg?sign=1739355725-rO25hBCU4IUUo6X6WqtaMRiO9P404uKe-0-83d2c57e0900745d00af2663c129a156)
扫码深度学习
操作思路
本案例使用钢笔工具在人物周围绘制路径,并将路径转换为选区;使用图层蒙版将选区外的部分隐藏,此时画面出现新的背景。
案例效果
案例效果如图6-12所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_8.jpg?sign=1739355725-tHfjYQlwL7qMRnYpriWyP8J3nERNWL33-0-d7d1dd61e723a72f7874b0995a42c340)
图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=1739355725-CSg9u6TMe9vif8pOxkH2s1cMSEg2Y40W-0-0e1781a3a42e3951e9b273edf30de634)
图6-13
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P126_10.jpg?sign=1739355725-FKWzoCZWNYdNj3rEc39mxqCcDvg7g7c5-0-b7619cf87df74ece008a5a17ce1be5ac)
图6-14
02 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-15所示。将人物素材调整到合适大小,然后按Enter键完成置入。选择素材图层,执行菜单“图层>栅格化>智能对象”命令,将该图层栅格化为普通图层,效果如图6-16所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_1.jpg?sign=1739355725-LrXHUDvK3v5TUDekGAJJBmSpEm0wUTrZ-0-2b1733d6e8b595d388c5354f4235c0c8)
图6-15
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_2.jpg?sign=1739355725-b9CqA7qrQv7eH3E2hU6wwyMZ26stXxVq-0-80757e812a40d492c5502db24cadfa48)
图6-16
03 选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“路径”,在画面中人物边缘按鼠标左键单击拖曳绘制路径,如图6-17所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_3.jpg?sign=1739355725-zd9EhkaZqk3o4F8rj5UnkddIFXWQJNo6-0-6f7ef70a19693c34e62cc73898c10114)
图6-17
04 选择工具箱中的直接选择工具,然后框选人物头上的锚点,将锚点拖曳到人物边缘上,如图6-18所示。选择工具箱中的(转换点工具),然后将光标移动到锚点上,按住并拖曳使路径完全符合人物轮廓,如图6-19所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_5.jpg?sign=1739355725-Br9d9sdTWmwS6QuGhsPCEwOS5xXb0tLv-0-8efa4dc9dd40f8ed2fe484e78cc7a8b3)
图6-18
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_6.jpg?sign=1739355725-IGJ5GkIQf3fkBLoRez0AAben92K3UKNN-0-4687d8e7a3a6a9f573f9fd85030f3fc2)
图6-19
05 使用同样的方法,调整其他锚点,如图6-20所示。调整完成后使用Ctrl+Enter快捷键将路径转换为选区,如图6-21所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_7.jpg?sign=1739355725-Ko3vgQGFPmC8DNja0692BWYKTNsWLyie-0-b37ae9a4f2d968cd53647f20742bd2a0)
图6-20
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_9.jpg?sign=1739355725-xxO9dSc8f2upY6f9HiQmukw2hDiyQ95H-0-6175642ae999ce472bd0ca898d8344cc)
图6-21
提示 基于选区添加图层蒙版
如果当前图像中存在选区。选中某图层,单击“图层”面板底部的“添加图层蒙版”按钮,可以基于当前选区为任何图层添加图层蒙版,选区以外的图像将被蒙版隐藏。
06 选中人物图层,在“图层”面板中单击“创建图层蒙版”按钮,如图6-22所示。使选区以外的部分隐藏,画面效果如图6-23所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_10.jpg?sign=1739355725-Pcl12mveYVSNJd3nBuBFgyYkPXlwhvGo-0-b3f69fd1eb0fdd8e9b98095735b35170)
图6-22
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P127_11.jpg?sign=1739355725-rkL95qA1GjyqAKc2aApcrwgn3k4ylayI-0-cefd3a6cfb0c61b82be8a5dd6c5991c9)
图6-23
提示 蒙版的使用技巧
要使用图层蒙版,首先要选对图层,其次要选择蒙版。默认情况下,添加图层蒙版后就是选中的状态。如果要重新选择图层蒙版,单击图层蒙版缩览图即可。
实例066 使用形状工具与形状运算制作引导页
文件路径 第6章\使用形状工具与形状运算制作引导页
难易指数 ★★★☆☆
技术掌握
●形状工具
●形状运算
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_1.jpg?sign=1739355725-rzWFqP12h05toB9S807R7rq7hp1BeTV4-0-d011778220e971708b42b08c5ae89294)
扫码深度学习
操作思路
本案例主要使用工具箱中的各种形状工具在画面中绘制图案,在绘制过程中要合理使用形状运算,利用形状运算的特征制作外形奇特的图形。
案例效果
案例效果如图6-24所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_2.jpg?sign=1739355725-Sy3T6frbxEJ1lQa080sQBs0FJNidhUAT-0-f9fe8bba1b2ec95800c918ac3fdaac27)
图6-24
操作步骤
01 执行菜单“文件>新建”命令,创建新文档。单击工具箱中的“前景色”图标,在弹出的“拾色器(前景色)”对话框中设置颜色为蓝色,单击“确认”按钮完成设置,如图6-25所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_3.jpg?sign=1739355725-Q8hubbfqbu2Lnn8F4FRglgB008zZHpvU-0-db5e70b483ddececb6ef8492832852fb)
图6-25
02 使用前景色(填充快捷键为Alt+Delete)填充画布为蓝色,如图6-26所示。右击工具箱中的形状工具组,在工具组列表中选择椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为红色,按住Shift键并按住鼠标左键在画面左侧位置拖曳绘制圆形,如图6-27所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_4.jpg?sign=1739355725-P1AB7ci4mmlh1bnq68Tr40bM0AWRdFOv-0-5c5984ae636b893134aaaf1fc7104dd1)
图6-26
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_5.jpg?sign=1739355725-Jdd2DBHcecw2zjcCaDvkzYDB4zWaGy7E-0-bd968ff3c38f33983c893b110243b784)
图6-27
03 在“图层”面板中选中形状图层并将其拖曳到“创建新图层”按钮上,进行复制,如图6-28所示。选择复制的图层,在工具选项栏中设置“填充”为绿色,然后将复制的圆移动到红圆右侧,此时画面效果如图6-29所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_7.jpg?sign=1739355725-oU0oMkXVTtu4TNSK3DQAp8ZfyPDoJwQX-0-0ff883fe843d7e106c587249083ff80a)
图6-28
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_8.jpg?sign=1739355725-8fWsJvJP59BX8JAGOHVinjpFhalnnAd3-0-0679674793804a51c10de292d9dc842b)
图6-29
04 使用同样的方法,制作蓝色正圆,如图6-30所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_9.jpg?sign=1739355725-HLs7eyQAo9SyR4CbeVzJuV7VREQ0qw9l-0-5a851bbd4a123efbab71cbe86f121ea8)
图6-30
05 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择填充颜色为白色,在画面中绘制形状,如图6-31所示。继续使用钢笔工具,将工具选项栏中的形状“填充”改为蓝色,然后在右侧白色图形下方绘制三角形,如图6-32所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_11.jpg?sign=1739355725-L9ml8YNjgi4Wl4BLGrccw1ib62Mqh8gQ-0-6c47ddc861415e91997db9570c92127d)
图6-31
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P128_12.jpg?sign=1739355725-YT9GiU4IapFAL9Edh4bQsRBdx0pVUQyW-0-7da63a2b18b8f4fee60e3d67e95b61ee)
图6-32
06 在选择钢笔工具的状态下,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色。在画面的左下角绘制一个三角形,如图6-33所示。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,设置“填充”颜色为白色,按住鼠标左键并拖曳绘制圆形,然后在其选项栏中单击“路径操作”按钮,在下拉菜单中选择“合并形状”,再绘制其他椭圆,同样的方法依次绘制两个椭圆,如图6-34所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_1.jpg?sign=1739355725-oKJ4pvxP5QebsWA23itS5MNHrZVqNfXS-0-61f100999e4787af3c51f9d8fe0f36ed)
图6-33
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_2.jpg?sign=1739355725-Sc4PsDYvdjqw77RJ48jUgugEPlz9tWow-0-51dd516e742f2adcd32feead5ddab937)
图6-34
07 继续在当前图层操作,在工具选项栏中单击“路径操作”按钮,设置为“减去顶层形状”,然后选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,设置“填充”颜色为白色,在白色图形的下方按住鼠标左键并拖曳绘制矩形,如图6-35所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_3.jpg?sign=1739355725-k0okzHaRj6VKITqjfqF2X3XVqQEPzJo4-0-bdfba5e6e91ad61a23797274b73f8d53)
图6-35
08 再次使用椭圆工具在云朵图形下方绘制深蓝色正圆,并将其复制,如图6-36所示。在“图层”面板中按住Ctrl键选中多个深蓝色正圆图层,在工具选项栏中单击“垂直居中对齐”按钮,在弹出的下拉菜单中选择“水平居中分布”,此时画面效果如图6-37所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_4.jpg?sign=1739355725-mqECTdwlmnjNdHCRxOp8ea6VhZTo6JZ4-0-3376cea49099323af7685c68e5d48000)
图6-36
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_5.jpg?sign=1739355725-4Si2AtUQ8sAVC1N5rIWtr2kkrU2v52Lt-0-fbf338fd384e1a22076e802f2983d750)
图6-37
09 在“图层”面板中选择一个椭圆图层,然后设置工具选项栏中的“填充”为白色,此时该圆变成白色正圆,如图6-38所示。在工具箱中选择横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,设置填充颜色为白色,然后在画面中单击并输入文字,如图6-39所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_6.jpg?sign=1739355725-LurHm6R2Bdbwc5umQof9Pjx2906FRwqy-0-44305f1c10129498c62fac185e916f60)
图6-38
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_7.jpg?sign=1739355725-ijW7jrqzY0B9oIlYKnkPmbMpAJqTkl5C-0-723ac1aa24e45327d03b40e3ca553a4d)
图6-39
10 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.png”,然后单击“置入”按钮,如图6-40所示。将素材调整到适合位置,按Enter键完成置入,最终效果如图6-41所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_8.jpg?sign=1739355725-I9GE76awy6tKG5g1idaGRs2fBlaciGcG-0-9cf74148114e6033fe68fd395f09393e)
图6-40
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P129_9.jpg?sign=1739355725-ShlZAYNDvK20WIy3yc8pguRKDMgkt9gw-0-91d9c097548a57d41bdb0805c4eb44db)
图6-41
实例067 使用椭圆工具制作画面创意效果
文件路径 第6章\使用椭圆工具制作画面创意效果
难易指数 ★☆☆☆☆
技术掌握
●椭圆工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_1.jpg?sign=1739355725-pYtKtSJKSQgYtBZYxhghfGa4OLpTYixj-0-b8a3e77607d3565351f1a08af50caf90)
扫码深度学习
操作思路
本案例主要使用椭圆工具在画面中按住Shift键的同时按住鼠标左键拖曳绘制矢量圆形,然后在上方输入合适的文字,完成最终的操作。
案例效果
案例效果如图6-42所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_2.jpg?sign=1739355725-DB6W2n9fkjV1SDXNIAPZ0Ku53wN1UfhT-0-b61c72cd600ea0b2486abd6c195cde02)
图6-42
操作步骤
01 执行菜单“文件>打开”命令,打开素材“1.jpg”,如图6-43所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_3.jpg?sign=1739355725-5IWphk9iV9Tib5SEANr0av2uLSKWVcAy-0-29e5d308077f7e2b4fdb57ff7530a4f3)
图6-43
02 选择工具箱中的(椭圆工具),将工具选项栏中的绘制模式设置为“形状”、“填充”为白色、“描边”为无,在画面中按住Shift键绘制一个白色正圆,如图6-44所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_5.jpg?sign=1739355725-8XCVOlnRCEk5xpPFSu27mGEdob5QtPdo-0-f3ae9eba11e702c1e7bf03296021ce27)
图6-44
03 接下来在画面中绘制文字部分。选择工具箱中的(横排文字工具),在工具选项栏中设置合适的“字体”“字号”和“颜色”。然后在画面中单击,输入文字。输入完成后单击工具选项栏中的“提交当前所有操作”按钮
,即可完成操作。将文字放置在正圆内部,如图6-45所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_8.jpg?sign=1739355725-VHWCQbWh4Z58su1TWT9Oga2JlPszJkAk-0-191cc541459399aabd690db5659f5d5a)
图6-45
04 变换“字体”“字号”和“颜色”,继续在圆形下方输入剩余文字,最终效果如图6-46所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_9.jpg?sign=1739355725-LKJvycbXUs59w6zW7uB5harl3iBYCcev-0-ffe00f0e1153635754fcc769d7ed81c1)
图6-46
实例068 极简风格图标设计
文件路径 第6章\极简风格图标设计
难易指数 ★★★☆☆
技术掌握
●圆角矩形工具
●钢笔工具
●自定形状工具
●图层样式
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_10.jpg?sign=1739355725-UOKasJ3rxrLLEWmwrYEsiTSdOX8GuGIS-0-ed306a2e4c7cb1e5af2540900089180a)
扫码深度学习
操作思路
本案例首先使用圆角矩形工具制作图标背景部分,其次运用钢笔工具绘制矢量的蓝色形状,最后使用自定形状工具添加其他元素。
案例效果
案例效果如图6-47所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P130_11.jpg?sign=1739355725-VUaXrnUFt4FIAO1CpQLrSFq9FgP9CTDW-0-bf7ab348371434e9776fc556a90db929)
图6-47
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为1600像素、“高度”为1400像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-48所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_1.jpg?sign=1739355725-quJ1yIfkJn6IR3JF1nRi0915ej1541Q7-0-c5f361209374f40efbe83f4b803bd154)
图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=1739355725-CKX1tJLC42o2c6hOGRwFYIoBFEheWvvZ-0-ddf6833931b2858ff20e92526f2c5f98)
图6-49
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_3.jpg?sign=1739355725-1ZT5dWKK1CCMmTSX2421G6OKNbI1uGtx-0-ef9436194594718917fd1432d9883463)
图6-50
03 此时效果如图6-51所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_5.jpg?sign=1739355725-lzmxqPehnbSa2oNLBtqDAqPMUGmqxCGZ-0-21ac91809154aef6efce963673ab7eb1)
图6-51
04 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为蓝色、“描边”为无,设置完成后,在圆角矩形框上方绘制一个多边形,如图6-52所示。使用同样的方法,在多边形右上角绘制一个三角形,将“填充”改为深蓝色,如图6-53所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_6.jpg?sign=1739355725-3BbdUgL20ChDc8vnk5723UbrwjYbYiA9-0-4880c1eb78377576cf7035680b39489e)
图6-52
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P131_7.jpg?sign=1739355725-hqLGUDzjvwAZic8v8FBal51NAnDeATm6-0-d9811cdf37be0a05259975fdf7f10afb)
图6-53
05 选择工具箱中的(自定义形状工具),在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个音符形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-54所示。最后将得到的形状图层移动至三角形图层下方,效果如图6-55所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_1.jpg?sign=1739355725-Q057hkh0ponQg7aDSRZuidfY9oPoUkyH-0-c54d1eabd55a059830936c40a53eef52)
图6-54
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_2.jpg?sign=1739355725-AIrqacxB6UMIMBudi1EM50OcDbdrW6eF-0-08cfe01657805a0b726c84c3f7489c3c)
图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=1739355725-iyS1hKby5JrL2eKlUklzb75gm9QBimGX-0-d4a4a36218e63bb4ec8fab034f7bf81e)
图6-56
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_5.jpg?sign=1739355725-AIMC3bS8HuymYQOrAg6QehGMm0p59Ixc-0-1d0b470c67a5de3d0b419da2f8d1aa35)
图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=1739355725-4KVDsTG751w0zWMfb6NL0SiklSicmmXq-0-959c77d66733521ba90bc7a911e90325)
图6-58
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P132_7.jpg?sign=1739355725-x3HK7ttGI0KJ31oglxMFMkalDEcod1E0-0-c170d3c28aa14b8e8b8d1cb1e31eac3a)
图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=1739355725-fBTAZ9h4SvgR1dZ1fsnWo0zgB9Tnmfbv-0-97d91c0d443a85b0c7c94b8c35cd4716)
图6-60
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_2.jpg?sign=1739355725-A9gM0yu7BniHqjNF8M11zAwgQFsOzpRk-0-ecf8f164b57541f78e654e81b735b566)
图6-61
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_3.jpg?sign=1739355725-9HFJ7nakbBJ2JKvxJIKN83upenMB8lZd-0-9dc328a9bfc48c5f83a644b5fbcb642b)
图6-62
提示 将路径转换为选区
使用Ctrl+Enter快捷键可直接将路径转换为选区。
实例069 使用形状工具制作质感按钮
文件路径 第6章\使用形状工具制作质感按钮
难易指数 ★★★☆☆
技术掌握
●形状工具
●渐变工具
●椭圆工具
●钢笔工具
●图层样式
●图层蒙版
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_4.jpg?sign=1739355725-YZKPhVqWaGV5VOoA0Mx5Z1UTDV69amdl-0-dc24647d41548978c579935f82f73b24)
扫码深度学习
操作思路
本案例在操作中多次运用到形状工具,使用该工具绘图时要注意形状的运算和工具选项栏中的绘制模式。
案例效果
案例效果如图6-63所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_5.jpg?sign=1739355725-XE7LinggSD4gkdl1GeBXPRGEoT8dZxzO-0-7eca282d18277b3d679c203984655589)
图6-63
操作步骤
01 执行菜单“文件>新建”命令,在弹出的“新建文档”对话框中设置“宽度”为2604像素、“高度”为2413像素、“分辨率”为72像素/英寸,设置完成后单击“创建”按钮,如图6-64所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P133_6.jpg?sign=1739355725-IEE32xG0wprNTLdjFPTg13mm21NNyTm9-0-71e71e53193c9bf18ad6ebab68dd66ab)
图6-64
02 选择工具箱中的渐变工具,单击工具选项栏中的渐变色条,在弹出的“渐变编辑器”对话框中编辑一个蓝色系的渐变颜色,设置完成后单击“确定”按钮,如图6-65所示。然后在工具选项栏中设置渐变类型为“线性渐变”,最后使用渐变工具在画面中按住鼠标左键由下至上拖曳进行填充,效果如图6-66所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_1.jpg?sign=1739355725-RDg5aqYmzQNJJKbAdWAJvgD1jBi65Loj-0-701194a3d90b2cc49a61735c4f6caff6)
图6-65
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_2.jpg?sign=1739355725-W3Ye8lXDnWziJxufKTj5QXhkyRPfhygv-0-127ded9af506a6963ee0bf1ec85c3f86)
图6-66
03 选择工具箱中的(椭圆工具),在选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在画面底部按住鼠标左键绘制椭圆,如图6-67所示。在“图层”面板上将该图层的“不透明度”设置为20%,如图6-68所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_4.jpg?sign=1739355725-MVC7yNEzn5KQtdINIMiIIRaj2Bh5URs5-0-e7c95738d94e076314d86816f1f66f13)
图6-67
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_5.jpg?sign=1739355725-LxhkDNpUV5rCIFpibsgkbUIpuAemslMW-0-9c85a262271699479e9a3afc2061808a)
图6-68
04 选择工具箱中的(自定义形状工具),在选项栏中设置绘制模式为“形状”、“填充”为绿色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个会话形状,然后在画面中按住鼠标左键拖曳进行绘制,如图6-69所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_7.jpg?sign=1739355725-hrM3KPOXfBWqrNpOgoL3Xwemky559kh9-0-6efcee65aa565e69cb9f9458065349ca)
图6-69
05 选择工具箱中的(椭圆工具),在工具选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,然后在对话形状上面按住鼠标左键并按住Shift键绘制正圆,如图6-70所示。在“图层”面板上设置该图层的“不透明度”为35%,效果如图6-71所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_9.jpg?sign=1739355725-UpBhSz17dlfEbgzoz4p1D1cqzpcbbwg1-0-a8e440cfdcd814437c54ac293db97abd)
图6-70
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_10.jpg?sign=1739355725-6QJo68nNfXQTQlkARVFAo0u0mvrmGpM7-0-6bcc5e051491cd8833cb4f1d492c7cf5)
图6-71
06 选择正圆图层,单击“图层”面板底部的“添加蒙版”按钮,为该图层添加图层蒙版。选择工具箱中的(画笔工具),在选项栏中单击打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,如图6-72所示。将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-73所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_12.jpg?sign=1739355725-Y4whYoKyGwjrIfpBtMOrwP7YXmt5s76e-0-45f2e8b3846126132355ccc85cb7f98f)
图6-72
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_13.jpg?sign=1739355725-ByqsRzZ4Jb00FRYVUFvPcNEjBMnWZaBt-0-1b1726308322fda6683666bb12d4de99)
图6-73
07 在“图层”面板中选择正圆图层,使用Ctrl+J快捷键将形状进行复制,单击复制图层的图层蒙版缩览图,选择工具箱中的画笔工具,将前景色设置为白色,然后按住鼠标左键在画面下方涂抹,在“图层”面板上设置“不透明度”为90%,效果如图6-74所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P134_14.jpg?sign=1739355725-pdkFivLQMuPKowMIGw7LtdwMs7wFeg8R-0-de564ccf2e1dd1545e5df539413895d8)
图6-74
08 选择工具箱中的(钢笔工具),在选项栏中设置“绘制模式”为“形状”、“填充”为白色、“描边”为无,设置完成后,在会话形状右侧绘制一个月牙形状,如图6-75所示。为该图层添加图层蒙版。然后选择工具箱中的画笔工具,在工具选项栏中打开“画笔预设”选取器,在画笔预设选取器中选择一个柔边圆画笔,设置画笔“大小”为1500像素,将前景色设置为黑色,设置完成后,在画面下方位置按住鼠标左键拖曳进行涂抹,效果如图6-76所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_1.jpg?sign=1739355725-Cl8SmHNkbowJBNrrOI58JkZZ5KteQzfB-0-d5f157444a04f81565fb19b9d85bfbb2)
图6-75
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_2.jpg?sign=1739355725-SOJMoL9lqtZLgJz2UiFIHlYQIZqCv6MZ-0-48c3606b50b93193cabee600bca81458)
图6-76
09 绘制声音形状。选择工具箱中的自定义形状工具,在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“描边”为无,单击“形状”按钮,在下拉面板中选择一个“声音”形状,然后在正圆上边按住鼠标左键拖曳进行绘制,如图6-77所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_3.jpg?sign=1739355725-kkrJmTRQiHlEmxelC8R4TIDCetD5Vc2M-0-2863dfde304800f592c985b4cb248aed)
图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=1739355725-fHtTqJXPEEUjkUGPfrgDuKozS7Scd5hi-0-e6a0f4a414296db3654cf2a0efda53e0)
图6-78
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_5.jpg?sign=1739355725-poRu3lYfMCyFrW3Tvhnvy4mg30Rp76zl-0-3e1f957f0c1762a9fbfc723d8c3c9813)
图6-79
实例070 使用矢量工具制作活动标志
文件路径 第6章\使用矢量工具制作活动标志
难易指数 ★★★☆☆
技术掌握
●转换点工具
●自定义形状工具
●钢笔工具
●矩形工具
●横排文字工具
●自由变换
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_6.jpg?sign=1739355725-bivocOdKUWPknetDb0qaR9nvRLVPRfAz-0-cd4b1be48584611314f7a7bf22fe613b)
扫码深度学习
操作思路
转换点工具可以调节路径的弯曲度。本案例利用这一特征将直角五角星转换为圆角的五角星,然后使用钢笔工具绘制五角星的内部图案,最后在其上方输入文字。
案例效果
案例效果如图6-80所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P135_7.jpg?sign=1739355725-q9WGbLrOBqDn0MWJP1LroTwaN4lmKfvo-0-34b1655faf7e65217cc5612916657ce5)
图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=1739355725-Ujshgmztm85oYBqKNECQMwzOoFO2tH2q-0-540c8471f1cf3f1af1c30ae15f67c503)
图6-81
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_2.jpg?sign=1739355725-Qkrg0gOovaqfMB8hiXHG8o2W9ewLTdyM-0-9f43e898231640dd367477235a4c6e45)
图6-82
02 使用前景色(填充快捷键为Alt+Delete)填充画布为深蓝色,如图6-83所示。使用鼠标右击工具箱中的“形状工具组”,在工具组列表中选择自定义形状工具,在工具选项栏中设置“形状”为五角星,然后在画面中按住鼠标左键进行拖曳,完成五角星绘制,如图6-84所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_3.jpg?sign=1739355725-8VDlbZwDccWt0F9IiycZYFdYOD55QTdq-0-5ac09b57aae5c3fea7beb005e11d4809)
图6-83
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_5.jpg?sign=1739355725-qZCePa4kmYtyMZHQS8nvuAxW7dXiNvFk-0-901ed44a7c2b4562fba971e6dfec97ba)
图6-84
03 在工具箱中右击“钢笔工具组”,在工具组列表中选择(转换点工具),按住五角星的一角进行拖曳,改变五角星一角的形状,如图6-85所示。使用同样的方法,制作其他角,如图6-86所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_6.jpg?sign=1739355725-Q6jHSagOSYSfAnKA8b7SFCWByzqfjrRH-0-cdbac8e25e97282bdc1520546b974270)
图6-85
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_7.jpg?sign=1739355725-bUO59eJiEZa2NAhX658kdI1Pu4k3wibm-0-63b3a1eee46c473e6b4f85bb8aa90702)
图6-86
04 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择素材“1.jpg”,然后单击“置入”按钮,如图6-87所示。将素材进行旋转调整到合适位置,按Enter键完成置入,并执行菜单“图层>栅格化>智能对象”命令,此时画面效果如图6-88所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_8.jpg?sign=1739355725-VzCL5V7rl0RJqNxxftC55CLwGpYx1RI4-0-b0f0cfbc9b2f8ca2b07b5d35a13b6979)
图6-87
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P136_9.jpg?sign=1739355725-JGBeNfSIpk9qO2FebF2LEy4HXat3BNFw-0-0787502b34728685faa0549d21c663e1)
图6-88
05 在“图层”面板中选择素材“1.jpg”所在图层,右击该图层,在弹出的快捷菜单中执行“创建剪贴蒙版”命令,如图6-89所示。此时画面效果如图6-90所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_1.jpg?sign=1739355725-tFxbntPLyqVWtsLsg5VGgdVfxMHnyrIy-0-17d4c23cb9d766c166cc664efc04a773)
图6-89
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_2.jpg?sign=1739355725-lhOBxWagmoh9XMZNJD25E5dE8WLAEHwE-0-a6366846d17c4e1f47909644dcae4990)
图6-90
06 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”、“填充”为深蓝色、“描边”为无,然后在星形中下部按住鼠标左键拖曳绘制矩形,如图6-91所示。使用Ctrl+T快捷键调出界定框,然后将矩形旋转一定角度,使用Enter键完成变换,效果如图6-92所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_3.jpg?sign=1739355725-YdGeXAuaJ5xiwG06VVR22QoZ0X5zQtxy-0-c1dd5868d47bc877189af94c323c1dac)
图6-91
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_4.jpg?sign=1739355725-WP35acASSu8TXFxqkxvhsFZS6F3AJDNH-0-2b9913d06852b1868550bfd456f129a9)
图6-92
07 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”、“填充”为黄色,使用钢笔工具在画面右上角绘制三角形,如图6-93所示。然后在“图层”面板中选中该图层,设置“不透明度”为30%,如图6-94所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_6.jpg?sign=1739355725-1UmJFgNVAOhuxlQlwc2ZMfac6HUwSOFu-0-ec36a1902d6cb9768fa5c1cd57335c4c)
图6-93
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_7.jpg?sign=1739355725-RabhCGDuo2lfdngV3XL9TbtvUTGKmyb5-0-2d3e7750fdff90db0ba057abdeffcb79)
图6-94
08 在“图层”面板中选中三角形图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-95所示。使用Ctrl+T快捷键调出界定框,然后将其进行适当的旋转、缩放,并将其拖曳到适当位置,如图6-96所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_9.jpg?sign=1739355725-ZY7TPYbMfRkQW0M2IkmKVs9TZyBb4BQU-0-4d48ed70433b4e480633d49cf616918a)
图6-95
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_10.jpg?sign=1739355725-h6LfVLwdfh6b5nIRiwz4G9UWTPm30xnl-0-feb615b7bb6f34dd8039da0579c4cc87)
图6-96
09 使用同样的方法,再制作另外一个三角形,如图6-97所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_11.jpg?sign=1739355725-LOtydjZuk54x9oRV4qnGxN4YC7nwIwYt-0-c64495611392e3db67f7170a4d8a30f3)
图6-97
10 选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置颜色为橘红色,使用钢笔工具在画面中绘制形状,如图6-98所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P137_13.jpg?sign=1739355725-wvKEQzfTjMhG8IjGiM0e9IQxkzr00Nrw-0-24d81090b2a8083996b79637d1e2f15a)
图6-98
11 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色设置为白色,在画面中输入文字,如图6-99所示。同样的方法输入右侧的文字,如图6-100所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_1.jpg?sign=1739355725-AEgCt4KGJK0ErFLj6Y9Za4NdopBakaJj-0-9327c994f63debdafe5df89fff22f571)
图6-99
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_2.jpg?sign=1739355725-uPUs67DE6dAPqbdZ0JWY4kpFVbGYm9Zd-0-94d0dc3029fa190e11c39d7654f77e2f)
图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=1739355725-wVibS4THQ0teivYxlJhLff1cpH4TBlqR-0-12c53ea430367e26b39e151507421415)
图6-101
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_4.jpg?sign=1739355725-2fDZm1PHJfxFAy6xnM4CPpHzvZcJDfk3-0-fdc100efd030a677a477133dd9d3c180)
图6-102
13 选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置填充颜色为灰色,然后按住鼠标左键拖曳绘制圆形,如图6-103所示。使用Ctrl+T快捷键对矩形进行自由变换,将矩形旋转一定角度,按Enter键完成变换,如图6-104所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_5.jpg?sign=1739355725-1l44LDa7rmDkQiJtTAEaTCC32bOe2p3s-0-f68a8046dc4f30f56aed289347d60a3e)
图6-103
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_6.jpg?sign=1739355725-FkC1DyOCbzt56xmuMSj9rHDKSItKnvNO-0-9c87a8d86e297843c37a37e4dea5a916)
图6-104
14 再次绘制一个稍小一些的五角星,然后将其移动到合适位置并适当旋转,如图6-105所示。使用同样的方法,复制一个五角星,并移动到合适位置,如图6-106所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_7.jpg?sign=1739355725-R1TRBCQcx8lBvzcD7KCDlYTZ9m09z4hK-0-1b26f0ac605b2ed60bd73767f61a96d6)
图6-105
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_8.jpg?sign=1739355725-hi6IVtAgK7Z7nQfaXIob8hmCGAhq8ZM6-0-44bac5739d8b6549377741be29b544e8)
图6-106
实例071 天气时钟小组件界面设计
文件路径 第6章\天气时钟小组件界面设计
难易指数 ★★★★☆
技术掌握
●形状工具
●横排文字工具
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P138_9.jpg?sign=1739355725-yOU9DXJbP6ycvdEnDNQxonrAPZ4R3FsF-0-712854cb839f33e2a902d3bea70e657d)
扫码深度学习
操作思路
本案例主要使用形状工具绘制矢量小组件图形,在绘制时要注意调整图层的混合模式,最后在画面中合适的位置输入文字,从而制作出天气时钟小组件界面。
案例效果
案例效果如图6-107所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_1.jpg?sign=1739355725-4KjqzakzN0S8rlCzwTuGctWAM0Ke5BwU-0-ed6705f86641fb75329b567f1f7d6732)
图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=1739355725-qRUX6YlTUQHyBEmFbW8e4dYLz82EfdaW-0-7e5e9b3575af277ec4af087bec1d11a9)
图6-108
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_4.jpg?sign=1739355725-SfNn06MEUSYyukU283atNgi8Y15rbdHf-0-b1253ae653cd85e65373fa0c5399a987)
图6-109
02 在画面中按住鼠标左键由左至右拖曳填充渐变,如图6-110所示。新建一个图层,右击工具箱中的“矩形工具组”,在工具列表中选择圆角矩形工具,然后在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中单击“渐变”按钮,然后编辑一个蓝色系的渐变颜色,“半径”为40像素,在画面的中间位置绘制一个圆角矩形,如图6-111所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_5.jpg?sign=1739355725-EpQ8pIh0V3NWEixnXiy8vZ9S0WfPcOyH-0-2c5937fb5cdc489bfb93ecd93b53b932)
图6-110
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P139_6.jpg?sign=1739355725-FncGJo7GKQ0MuggUXEIntgtyjaIegZGb-0-bcb0f632c6160e75f715d1ebc5e55bd9)
图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=1739355725-tMslRcPfgncVJBDGKw1C6Uwxbx3xmpS0-0-82d0f686cb1b3f5172175dfba85071d6)
图6-112
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_1.jpg?sign=1739355725-gFmUS8DrOS9NXElB9awJ7EKgFqtVgDhf-0-ddc62acc08307116722ddff9980e8bce)
图6-113
04 此时效果如图6-114所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_2.jpg?sign=1739355725-YrIMdBjQzDGpSvxxrQvaIIzK13o7mWMt-0-09596fdb1571f0435127fe4d3039dc3b)
图6-114
05 新建一个图层,选择工具箱中的矩形工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为灰色,在相应位置按住鼠标左键拖曳绘制矩形作为分割线,如图6-115所示。在“图层”面板中选中灰色矩形图层,然后设置其混合模式为“柔光”,如图6-116所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_3.jpg?sign=1739355725-8cdR2Klpb3EMwWPfll9BAIjsYCkAeJEF-0-589d18b450a0d59e5e25d70a01a65e1e)
图6-115
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_4.jpg?sign=1739355725-TUtnaLixjaopdhebjhhHB1qobH0xJaiH-0-b9bfd88b5baa4dec20ff6e6802fe65f1)
图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=1739355725-ZYo7MSuuS2g580uaKCWy8YsvKU7Z4swY-0-93a2243aeeb71d4cf77574eb860ea39a)
图6-117
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_6.jpg?sign=1739355725-iR3rae2oqeOE0CFGFisbeQLEZPnu9cCx-0-a23a7559eaea2a303c285991d7e51061)
图6-118
07 此时要绘制位于画面左下角的卡通太阳。选择工具箱中的椭圆工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中选择“填充颜色”为淡黄色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制正圆形,如图6-119所示。绘制太阳的“红脸蛋”。继续使用椭圆工具,然后在工具选项栏中设置“填充颜色”为粉色系渐变,在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,效果如图6-120所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_7.jpg?sign=1739355725-4hwd5ybG00grEYuZX8a34G2IHZ6Yxzyj-0-05b24f6e3d5cdf4d989259f9673c8fb6)
图6-119
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_8.jpg?sign=1739355725-lOeO3aB9Xyt7mECx5vVGH9GjxCBbfqPa-0-3cd574436921345739f31ab90a83ba02)
图6-120
08 在“图层”面板中选中圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并移动到右侧脸颊处,如图6-121所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_10.jpg?sign=1739355725-thvtYTNQYPGOAjjOEHIPiqwTCs36tE5u-0-bbbeea69fcb57c685d77f4d34379eb40)
图6-121
09 最后要绘制太阳的“眼睛”。在选择椭圆工具的状态下,将“填充颜色”设置为黑色,然后在相应位置按住Shift键的同时按住鼠标左键拖曳绘制圆形,如图6-122所示。在“图层”面板中选中该圆形图层,然后将其拖曳到“创建新图层”按钮上进行复制,并将其移动至黑圆右侧,效果如图6-123所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P140_12.jpg?sign=1739355725-fTrEmZpAY1DUfGOEhNoogPrhw5vXcY4O-0-40ad340da640c0f7a1d59299f247aac5)
图6-122
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_1.jpg?sign=1739355725-hVgTCJHOUMhYSz6dyhTzj13dtJ5RkcJV-0-0746e5c40cebdf79e76ea0ba3f7bccb3)
图6-123
10 新建一个图层,选择工具箱中的(钢笔工具),在工具选项栏中设置绘制模式为“形状”,单击“填充”按钮,在下拉面板中单击“渐变”按钮,然后编辑一个浅蓝色系的渐变颜色,在画面的右上角绘制一个云朵,如图6-124所示。选中“云”图层,执行菜单“图层>图层样式>内发光”命令,在弹出的“图层样式”对话框中设置内发光的“混合模式”为“滤色”、“不透明度”为75%、发光颜色为黄色、“大小”为18像素、“范围”为50%,单击“确定”按钮,完成设置,如图6-125所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_3.jpg?sign=1739355725-ge9twetkuSBbOR3b1slY7mzbKajSH20r-0-8bba92f0b82d4b350e38b1ac1b877455)
图6-124
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_4.jpg?sign=1739355725-wlsJy2xIs3oDPE1Q4KGYUqWiYxsu4lkT-0-cd04835f0280ffcc2b8abda5f1ab59a3)
图6-125
11 此时云朵效果如图6-126所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_5.jpg?sign=1739355725-8ugcxL40BQM3V77uIlAUde1cEAZkzSUW-0-2eabacc598cc8b70d20119617840c63a)
图6-126
12 在“图层”面板中选中云朵图层,然后将其拖曳到“创建新图层”按钮上进行复制,如图6-127所示。使用Ctrl+T快捷键调出界定框,进行适当的缩放,并拖曳到合适位置,如图6-128所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_7.jpg?sign=1739355725-bCXQwvw1vhndQVFaWeFJFOlFVLDx9ZeB-0-ed41bcfa2080163538255b76350951e2)
图6-127
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_8.jpg?sign=1739355725-AxJT9xdBBHVvdiS5tyd14cFnnrSq3itX-0-8b53e0345caa9f042600c12d94e46820)
图6-128
13 使用同样的方法,依次复制其他云朵,此时画面效果如图6-129所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_9.jpg?sign=1739355725-u9oGG3PrTvkxlqUTno92BLRrHvXRcW3Z-0-990321c7da55774c671480d2c15b187c)
图6-129
14 选择工具箱中的自定义形状工具,然后在工具选项栏中设置绘制模式为“形状”、“填充”为白色、“形状”为音符,在画面中按住鼠标左键进行拖曳,完成音符绘制,如图6-130所示。选择工具箱中的钢笔工具,在工具选项栏中设置绘制模式为“形状”,单击“填充”图标,在下拉面板中设置“填充颜色”为浅蓝色,在画面的右上角绘制一个雨滴,如图6-131所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P141_10.jpg?sign=1739355725-YowCV6otmG6JarFabL1gIrknodjE2fMn-0-54b3ee4d43d3f7100a9c222ab90fb231)
图6-130
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_1.jpg?sign=1739355725-KhBQ4pNJ7aUtLlOiAVqeX0gPwD83hlLf-0-6acd6f588f7fb6f563933f33c1f7d294)
图6-131
15 在“图层”面板中选中雨滴图层,然后将其拖曳到“创建新图层”按钮上进行复制,使用Ctrl+T快捷键调出界定框,将复制的雨滴进行适当的缩放,并拖曳到适当位置,如图6-132所示。使用同样的方法,依次制作其他雨滴,此时画面效果如图6-133所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_2.jpg?sign=1739355725-uL5sg123TbpV17RTtiKgMmOa9cAv2xLC-0-5b7e967e580d6fd58d28f90d5bc6512b)
图6-132
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_3.jpg?sign=1739355725-75KbqSFaLWiEJIohmsFoWpTVuyH705AG-0-78465ea2bc22bb654e1811545ee163ec)
图6-133
16 选择工具箱中的横排文字工具,在工具选项栏中设置适合的“字体”和“字号”,填充颜色为白色,在画面中单击并输入文字,如图6-134所示。继续使用横排文字工具在画面其他位置输入不同的文字,此时画面效果如图6-135所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_4.jpg?sign=1739355725-YX9WksYZ4cBEfKlYvQb8jh17o2W0zbH1-0-02880c25fde0bbedbd70ee14131022e9)
图6-134
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_5.jpg?sign=1739355725-k9o3IFmZWcg6tdYWswzMt4g5kxUZMdGq-0-fe75046c99c9d37e36b8200ebb9f4fc1)
图6-135
17 执行菜单“文件>置入嵌入的智能对象”命令,在弹出的“置入嵌入对象”对话框中选择卡通素材“1.png”,单击“置入”按钮,如图6-136所示。将素材放置在适当的位置,按Enter键完成置入,最终画面效果如图6-137所示。
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_6.jpg?sign=1739355725-A1zMjIi334eH2XiMXaa781LvFAeXmRP0-0-b9e325f8d1a822bf9d8e2943bd1f31d8)
图6-136
![](https://epubservercos.yuewen.com/6EC9EE/17214367904800106/epubprivate/OEBPS/Images/Figure-P142_7.jpg?sign=1739355725-2eI6HMnPiIygeROz7aLWaJj3CGmXOaE1-0-06048c0d3d0cdd24de6eb2858fefb7d8)
图6-137