边画边体验：用Provector绘制应用图标

上一次在[《边画边体验：用SVG-Edit绘制应用图标》](https://lazycat.cloud/playground/guideline/818)中大吹特吹了SVG和矢量的好处，结果一转眼就看到商店里上了一款新的矢量绘画工具，那还不敢紧下载来用用？ https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.provector 这个可是比SVG-Edit用起来顺手太多了！界面是相当简洁专业的工具条+面板左右结构，比较现代的设计软件如Figma和Framer全是这种布局。除了还有几个小毛病，但瑕不掩玉，后面慢慢说。 |先随便选一个正方形的画布，800x800足够。![屏幕截图 2025-07-25 030142.png](https://dl.playground.lazycat.cloud/guidelines/319/2a1d1d31-44c3-4d4f-bb40-a86198334508.png "屏幕截图 2025-07-25 030142.png")|在画布中画个正方形，世界的一切都是简单形组成的！![屏幕截图 2025-07-25 030211.png](https://dl.playground.lazycat.cloud/guidelines/319/cc83279b-0e43-4c74-ad30-5455adeb784d.png "屏幕截图 2025-07-25 030211.png")| |---|---| |再画两个三角形，元素对齐功能相当好用。![屏幕截图 2025-07-25 030749.png](https://dl.playground.lazycat.cloud/guidelines/319/556bf4ec-12da-4bbf-a8b0-693819035e01.png "屏幕截图 2025-07-25 030749.png")|选择所有形状，用布尔运算合并在一起，猫耳朵就有了。![屏幕截图 2025-07-25 030825.png](https://dl.playground.lazycat.cloud/guidelines/319/de759b6f-37b0-4249-a21f-07c63de03974.png "屏幕截图 2025-07-25 030825.png")| |---|---| |多余的顶点，不能用删除键直接删，会打断线条![屏幕截图 2025-07-25 031018.png](https://dl.playground.lazycat.cloud/guidelines/319/8f4c316a-251a-4a64-a8ab-dde1f737db30.png "屏幕截图 2025-07-25 031018.png")|要用钢笔工具，钢笔工具可以自动识别目的增删或连接![屏幕截图 2025-07-25 031101.png](https://dl.playground.lazycat.cloud/guidelines/319/c4ca5eca-864b-4b70-8e91-8d5b4241e2c2.png "屏幕截图 2025-07-25 031101.png")| |---|---| 选中的顶点旁会出现一个小圆点的手柄，这是圆角手柄![屏幕截图 2025-07-25 031158.png](https://dl.playground.lazycat.cloud/guidelines/319/a3e83f14-9a5a-4357-9264-b90c31a348b4.png "屏幕截图 2025-07-25 031158.png")|拖动圆点，所有选中的顶点都会变成圆角，圆润的形状太简单了![屏幕截图 2025-07-25 031323.png](https://dl.playground.lazycat.cloud/guidelines/319/1f2faf89-dd9a-4ede-abcc-7fff257780f4.png "屏幕截图 2025-07-25 031323.png") |---|---| 右侧的属性栏会显示当前元件的属性，布局和设置都很好![屏幕截图 2025-07-25 031409.png](https://dl.playground.lazycat.cloud/guidelines/319/0c670bd3-c3d1-46c0-be6d-b1290e579768.png "屏幕截图 2025-07-25 031409.png")|完美的填充选择器，支持纯色、线性及辐射渐变和图案![屏幕截图 2025-07-25 031635.png](https://dl.playground.lazycat.cloud/guidelines/319/2c66578b-234f-4cae-9104-d92729d494b1.png "屏幕截图 2025-07-25 031635.png") |---|---| 渐变配色很好控制，是与Figma与Affinity designer等工具同款![屏幕截图 2025-07-25 031728.png](https://dl.playground.lazycat.cloud/guidelines/319/d0685d57-31fe-4e39-800c-c3a887676a0f.png "屏幕截图 2025-07-25 031728.png")|选中两个元件，用布尔相减可以抠洞，但线条会出问题不推荐![屏幕截图 2025-07-25 032029.png](https://dl.playground.lazycat.cloud/guidelines/319/fc355286-6aaa-4cfa-b8ae-cd927022e4c6.png "屏幕截图 2025-07-25 032029.png") |---|---| 改成金色的画框，金色的渐变其实很好配，有高光就好![屏幕截图 2025-07-25 032253.png](https://dl.playground.lazycat.cloud/guidelines/319/092f2c16-624e-44ee-bd09-c4237227a4ee.png "屏幕截图 2025-07-25 032253.png")|插入一张世界名画![屏幕截图 2025-07-25 033231.png](https://dl.playground.lazycat.cloud/guidelines/319/6933e8bb-4e7b-48d9-9f47-5c10f19a3106.png "屏幕截图 2025-07-25 033231.png") |---|---| Ctrl+]/[ 可切换图层，用右键菜单也可以 ![屏幕截图 2025-07-25 033346.png](https://dl.playground.lazycat.cloud/guidelines/319/8fc9ac69-d058-4925-81c0-6cc51372c2fa.png "屏幕截图 2025-07-25 033346.png")|选色器很好用，可以从位图图片中选色![屏幕截图 2025-07-25 033631.png](https://dl.playground.lazycat.cloud/guidelines/319/97aa262a-56c3-4e30-b2fe-8b34d04e9ea0.png "屏幕截图 2025-07-25 033631.png") |---|---| 线条可以通过offset path创建内扩或外扩形状![屏幕截图 2025-07-25 033815.png](https://dl.playground.lazycat.cloud/guidelines/319/4a49c7ba-0cfd-44ff-b5f8-4ea8965cae4c.png "屏幕截图 2025-07-25 033815.png")|再画个正方向转45度，可此时的边框也转了怎么办？![屏幕截图 2025-07-25 034157.png](https://dl.playground.lazycat.cloud/guidelines/319/c6b1f402-6885-4f3b-b701-977f5ef67b33.png "屏幕截图 2025-07-25 034157.png") |---|---| 不要慌，菜单里有边框复位，就可以在旋转后再改变形状了![屏幕截图 2025-07-25 034221.png](https://dl.playground.lazycat.cloud/guidelines/319/94e48045-4e94-4077-80f9-413af1cb89e0.png "屏幕截图 2025-07-25 034221.png")|三个连起来，用分布工具平均相互间的间距![屏幕截图 2025-07-25 034318.png](https://dl.playground.lazycat.cloud/guidelines/319/e1a49c1f-c70f-4c9d-aaa8-0e02263d51fd.png "屏幕截图 2025-07-25 034318.png")| |---|---| 复制成四个，按alt拖动和复制，按Shift可锁定比例![屏幕截图 2025-07-25 034507.png](https://dl.playground.lazycat.cloud/guidelines/319/d19d3595-5aa9-4163-b286-16f6cb12a557.png "屏幕截图 2025-07-25 034507.png")|布尔加运算，一个比较复杂的边框就画好了![屏幕截图 2025-07-25 034711.png](https://dl.playground.lazycat.cloud/guidelines/319/71e8ac2e-071a-4e52-90a9-a425802a5e25.png "屏幕截图 2025-07-25 034711.png") |---|---| 用弧线工具画出一个边的曲线，再复制成四份![屏幕截图 2025-07-25 035131.png](https://dl.playground.lazycat.cloud/guidelines/319/d989da7c-8214-4007-b32c-1b8f6dd5ab7b.png "屏幕截图 2025-07-25 035131.png")|成组后更好定位，按CTRL转动可以吸附整数角度![屏幕截图 2025-07-25 035209.png](https://dl.playground.lazycat.cloud/guidelines/319/bf7fe08c-e1ca-4608-90b5-7b2258c1b7f5.png "屏幕截图 2025-07-25 035209.png") |---|---| 加一个小矩形再把四角设成圆角，一般按钮也这么画![屏幕截图 2025-07-25 035524.png](https://dl.playground.lazycat.cloud/guidelines/319/3f4e217c-852d-4ca2-9496-92ac73c070bd.png "屏幕截图 2025-07-25 035524.png")|写上自己的名字或应用名称![屏幕截图 2025-07-25 041703.png](https://dl.playground.lazycat.cloud/guidelines/319/1ea43bb8-3eff-402b-9ef6-4e23d336be42.png "屏幕截图 2025-07-25 041703.png") |---|---| ## 此时，遇到了一个严重的问题，保存到本地设备的功能可能有损坏，保存的JSON文件是空文件！这导致我丢失了前面所有的作品！不过……倒也还好了，希望以后可以升级改进。用十分钟重新画一个好了，反正已经熟门熟路，其实真的用不了太久。![屏幕截图 2025-07-25 044237.png](https://dl.playground.lazycat.cloud/guidelines/319/61c98891-dd59-4f3d-a1f5-6cbde4f8c5e6.png "屏幕截图 2025-07-25 044237.png")|这次也特别强调了线条，因为图片在设备中会很小，所以明显的轮廓很重要。![屏幕截图 2025-07-25 045729.png](https://dl.playground.lazycat.cloud/guidelines/319/f4ab5782-21c7-4741-9cae-1be7fc1a5795.png "屏幕截图 2025-07-25 045729.png") |---|---| 加入更多装饰，一个基本的画框就好了。![屏幕截图 2025-07-25 050340.png](https://dl.playground.lazycat.cloud/guidelines/319/53de2b0b-5ad3-44ed-bc47-c9ecbb0a7389.png "屏幕截图 2025-07-25 050340.png")|用透视工具变形，但注意未转曲线的文字和位图都不能变形![image.png](https://dl.playground.lazycat.cloud/guidelines/319/ba5623df-9c29-4810-8872-1791e9feea8b.png "image.png") |---|---| 不过没关系，把内框放在图像的上层，图片可适当旋转没太大必要做透视。![屏幕截图 2025-07-25 050657.png](https://dl.playground.lazycat.cloud/guidelines/319/a709952f-b46b-45cc-aee3-519381c12281.png "屏幕截图 2025-07-25 050657.png")|同时选中后从菜单选Make Mask，上层的形状就会裁切下层的图片![屏幕截图 2025-07-25 050719.png](https://dl.playground.lazycat.cloud/guidelines/319/65e4ec30-7066-4485-9092-edfec7291170.png "屏幕截图 2025-07-25 050719.png") |---|---| 一个图标就做好了，虽然不能保存，但可以存为SVG![屏幕截图 2025-07-25 051238.png](https://dl.playground.lazycat.cloud/guidelines/319/f11054f7-af32-48f3-ae34-d8a11c1c012c.png "屏幕截图 2025-07-25 051238.png")|或者直接输入NPG，如果你不想要白底，用帧工具把当前帧背景设为“无”即可![屏幕截图 2025-07-25 051408.png](https://dl.playground.lazycat.cloud/guidelines/319/6f1a7661-b564-4cd0-bf4f-9957a46cd689.png "屏幕截图 2025-07-25 051408.png") |---|---| 如果你需要，Provector其实支持中文哦！![image.png](https://dl.playground.lazycat.cloud/guidelines/319/fc25f2e3-758a-40ec-a4ba-4b22f5ce1829.png "image.png")|最后输出结果，完成图标的设计。![lzc-icon.png](https://dl.playground.lazycat.cloud/guidelines/319/3ff46c9a-b7d5-43d4-a1f6-659039f84f16.png "lzc-icon.png") |---|---| 放到项目里看看，相当不错吧？ ![屏幕截图 2025-07-25 052153.png](https://dl.playground.lazycat.cloud/guidelines/319/15476831-5464-4f5a-aaa3-5f89bd748bdf.png "屏幕截图 2025-07-25 052153.png") 你学废了吗？以后不要用简陋难看的图标做应用了，都来画图标吧：）