使用Pixso创建卡通炸弹图标：11步教程

这个卡通图标由圆形、圆角矩形、引线、星形火花和骷髅装饰组成。先用联集拼出主体，再叠加描边、内阴影和高光，最后检查缩小后的轮廓。按下面 11 步绘制过程与参数，你可以在Pixso 矢量设计画布中逐层完成，并把它们当作这个例子的起点。

Pixso 可以通过浏览器进行设计。Sketch 的设计编辑在 Mac 应用中完成，浏览器则可用于查看、评论和检查文件；选择工具时应区分编辑与查看的设备需求。绘制这张图标前，先准备一个空白设计文件，并把画布缩放到容易观察描边的大小。

云端保存不等于浏览器不占用本机内存，复杂文件仍需要设备处理。选择协作方式时，应同时检查团队的设备、文件位置与访问权限。

下面按主体、引线、火花和骷髅装饰逐层绘制。颜色和尺寸对应这张卡通图标；如果换成其他尺寸，描边、高光和小装饰也需要一起调整。

Step1：在Pixso中新建文件，绘制圆形

在Pixso中新建一个画板，画板尺寸可以自定义，也可以根据下方的尺寸提示选择网页、手机机型等固定尺寸大小的画板。

 新建画板完成后，在Pixso中左上角形状工具栏选择“圆形”后，按住Shift来限制比例绘制一个圆。将颜色填充为：#934CC1，填充比例：100%。

如果需要独立背景，可单独绘制底层矩形并锁定，避免后续选中主体时误移背景。背景层与炸弹主体应分别命名，便于最后单独导出透明图标。

Step2：绘制炸弹形状，使用布尔运算

 绘制一个圆角矩形，并放置于圆圈顶部，与圆圈中心水平对齐。 矩形：颜色填充：#934CC1。

把圆角矩形旋转 45°，让它与圆形重叠，形成炸弹顶端的接头；再选中两者使用“联集”。联集保留两个区域的整体外轮廓，交集只保留重叠部分。若只剩一小块形状，先撤销，再确认没有选成“交集”。

这个步骤的关键是“合并两个区域”，并不是某个工具特有的捷径。可参考Pixso 布尔运算说明，区分联集、减去顶层、交集和差集。

Step3：添加样式

 现在为合并后的炸弹形状添加一些样式：

颜色填充：#934CC1

边框颜色填充：#434343，外部，6

内阴影颜色填充：#2C2424，25%，X：-12 Y：-12，模糊：0，扩展：0

对比Sketch：Pixso与Sketch的操作方式类似。

Step4：添加引线，并填充样式

 在Pixso中，使用钢笔工具从旋转矩形的中心画一条短波浪线，到圆的大约一半。总共使用 3 个点，包括起点和终点，然后添加边框，并设置以下效果填充： 

颜色填充：#EBCFA8，中间，8

边框颜色填充：#434343，外部，3

内阴影：黑色，40%，X：-4 ，Y：-4，模糊：0，扩展：0

在引线上方绘制几条短斜线，作为缠绕纹理。让斜线沿引线方向分布，并控制在绳体轮廓内；这种装饰可用基本直线完成，不需要寻找一个默认图案填充。

直线填充参考：黑色，40%，1，中间。 

如果引线仍是开放路径，先检查描边的宽度与端点。需要把描边当作封闭形状添加内部图案时，另存一份可编辑路径后再转换轮廓；不要在唯一原稿上过早合并，否则调整弧度会更费力。

Step5：绘制引线火花

 使用星形工具绘制一个与引线和炸弹形状略微重叠的星星形状，并为星形图层添加 3 个边框以创建火花效果，按照从上到下按以下顺序添加边框效果：

边框 1：#434343，外部，6

边框 2：#F2780D，内部，6

边框 3：#F5A623，内部，12

Step6：为炸弹添加光泽度

 炸弹目前看起来有点平坦，所以让我们添加一些额外的照明。在炸弹圆形部分的中心绘制一个没有填充和白色边框的新圆形图层。边框颜色填充：#FFFFFF ，中心 ，6

 双击圆形图层进入路径编辑模式，然后删除多余的线条，只保留圆的左上角四分之一，如上图所示。

 选择边框选项并添加虚线描边，并将图层的不透明度降低到 20%，虚线参数：5,200，圆形样式。

Step7：添加装饰元素

 在炸弹形状的顶部附近画1个小星星，然后复制星星，然后将其向左移动，稍微减小尺寸并逆时针旋转-45°，星星颜色填充：#F2780D。

Step8：为炸弹添加阴影

 为炸弹创建阴影，在炸弹图层下方绘制一个新的椭圆形图层： 阴影，颜色填充：黑色，不透明度 20%，尺寸：宽：104 高：21。

Step9：添加骷髅头装饰

 做到这一步，炸弹看起来已经很酷了。但是我们需要为它添加一个危险标识：在炸弹上画一个友好的骷髅和交叉骨标志来表示危险。从头骨的简单圆圈开始： 

尺寸：宽：40 高：40，颜色填充：#ECD6C3，无边框填充。

头骨的下颌部分使用一个小圆角矩形： 

颜色填充：#ECD6C3，尺寸：宽：24 高：14，圆角半径：10。

 然后再给头骨加上眼睛和鼻子，眼睛画两个圆圈（或只画一个并复制第二个）。

眼睛圆圈尺寸：8，颜色填充：#934CC1。

对于鼻子，使用三角形工具绘制基本形状。尺寸：宽：10，高：12，颜色填充：#934CC1。

Step10：绘制交叉骨

 接下来绘制交叉骨。首先绘制一个基本矩形：颜色填充：#ECD6C3，尺寸：宽：70 高：6。然后在矩形的左边和右边各画2个小圆圈与之相交，圆圈：颜色填充：#ECD6C3，尺寸：宽：8 高：8。

选中四个小圆圈和矩形，使用联集形成一根完整骨骼，再将其旋转 -15°。检查圆圈与矩形相交的位置没有意外缺口，保留这根骨骼供下一步复制。

复制这一根骨骼并水平翻转，使两根骨骼交叉；把它们放在骷髅头下方，调整层级与间距。

Step11：进行润色处理（添加背景颜色）

最后一个步骤，我们可以为炸弹添加背景颜色，让它看起来更真实、美观。

背景颜色填充1：白色，不透明度：20%

背景颜色填充2：黑色，不透明度：10%

让我们来看看最终完成后的炸弹图标吧！

完成炸弹图标设计后，让我们使用Pixso一键链接分享功能把设计稿分享给其他同事进行查看和点评吧！

分享文件前，先确认接收者的查看或编辑权限。请同事在实际使用尺寸检查轮廓，并将意见留在对应图层附近，避免只按放大的画布判断小图标是否清楚。

Sketch 的共享 Workspace 支持实时协作编辑，浏览器支持查看、评论与检查，并不是只能上传后等待他人下载。其实时协作文档说明了 Mac 应用、订阅和共享文档条件。对这份图标练习，选择团队能访问的文件与权限即可，不必用未经验证的速度或效率比较解释绘图步骤。

团队协作：团队成员面对一个复杂的设计项目，可以在Pixso多人云端协作设计，实时同步字号、边框、颜色等各种细节。

智能设计工具：Pixso自带专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计。

矢量网格：模拟画笔的特色，提供精细化矢量设计，自由切割线段，连点成面。

组件变体：随意切换一个组件的多种状态，设计师可以更加高效地去创建和复用组件。

格式兼容：导入其他工具的文件后，应检查图形、文字和样式的还原；格式支持不代表所有效果无损。本例中的矢量主体可另导出 SVG，用于需要可缩放图形的场景。

海量设计模板：集成腾讯、阿里、字节、蚂蚁设计等众多大厂设计系统，组件素材直接拖拽复用，省去大量重复劳动。

需要交付这张图标时，在文件旁说明使用尺寸、透明背景与导出格式，并让开发查看图层和样式。图标用在按钮中时，还应附上留白和触控区域，避免把绘图边界直接当成按钮边界。

以上就是使用Pixso来绘制卡通炸弹图标的全部教程，涵盖了许多设计自定义图标必不可少的技术，例如组合简单的形状来创建更复杂的图层，以及使用图层样式来创建视觉效果。这些技术也普遍适用，不仅仅是在Pixso中。

轮廓不对时，先定位是哪一层

把主体、引线、火花、骷髅、投影和背景分别命名。导出 PNG 时检查背景是否符合用途；导出 SVG 时检查轮廓和多重效果的表现。把导出文件放回实际页面尺寸看一眼，确认高光没有压过主体，也没有因为阴影被裁掉而留下突兀边缘。