Penpot：用懒猫做专业设计

https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.penpot

说是专业设计，其实这个封面图只是马马虎虎设计一下。不过，没错，这张封面图就是在Penpot里边试用边做的。

Penpot是专门为专业设计师打造的在线设计工具，所支持的功能不仅仅是画图，不过本篇只是基础篇，而且我也是边体验边学习，所以我们一步步来。

Penpot官网应用也算是对免费用户相当大方了，但是self-host版仍然有很多好处，比如无限存储无限团队和可访问内部元素的API。

要感谢zeroc大佬的移植。

# 账号创建

安装并打开应用后，Penpot会要求用户用邮件注册并登录，由于是内置版，所以并不需要真正的电子邮件注册，而是要在注册后打开以下网址： http://penpot.[xxx].heiyu.space:1080 【注意把[xxx]替的换为你的微服名称】
这是一个“假”的邮件系统mailcatch，它会创建临时的邮箱地址并接收邮件，并不需要通过外网真实电邮平台。在这里你会收到验证链接，点击后就注册成功了，并直接打开网页版Penpot。 再经过一些初始化的调研选择后，就可以快乐地使用Penpot了。

![屏幕截图 2025-07-07 222526.png](https://dl.playground.lazycat.cloud/guidelines/319/24bade62-4841-4582-8db4-a162dd66209c.png "屏幕截图 2025-07-07 222526.png")

![屏幕截图 2025-07-07 223115.png](https://dl.playground.lazycat.cloud/guidelines/319/8ef5a39c-e9c3-461c-aa17-a056b8afa1ea.png "屏幕截图 2025-07-07 223115.png")
![屏幕截图 2025-07-07 223010.png](https://dl.playground.lazycat.cloud/guidelines/319/ded1acc6-52a3-4eb3-8754-3893ba8f9bec.png "屏幕截图 2025-07-07 223010.png")


![屏幕截图 2025-07-07 223103.png](https://dl.playground.lazycat.cloud/guidelines/319/b287279b-605d-43fc-afd6-ecdb6b15f938.png "屏幕截图 2025-07-07 223103.png")

打开新建的文件，可以看到整个编辑界面还是相当专业的。

![屏幕截图 2025-07-07 223300.png](https://dl.playground.lazycat.cloud/guidelines/319/0d3c6e71-7633-4bfd-a514-97c6e6fe8ae1.png "屏幕截图 2025-07-07 223300.png")

# 基本绘图
在创建文件之后，我们首先要做的是建立一个画板，整个文件的画布或者说桌面上，可以容纳无数个画板，每个画板内即是你需要创作的图像或者界面区域。
## 画板
当然你也可以不建立画板而直接在桌面上绘画，但使用画板有更多好处。

由于要做的封面大约是3:2比例，所以我为画板设置的尺寸是600x400px

![屏幕截图 2025-07-07 223351.png](https://dl.playground.lazycat.cloud/guidelines/319/ec64509e-b31c-469c-99b4-8ffae06343a2.png "屏幕截图 2025-07-07 223351.png")

然后做最简单地尝试，导入一张图片：

![屏幕截图 2025-07-07 223523.png](https://dl.playground.lazycat.cloud/guidelines/319/c9880b17-dcd9-4bcf-8e93-aa6ab68244c1.png "屏幕截图 2025-07-07 223523.png")

画板会对图片超出其面积的部分进行自动裁切，这是用画板的第一个好处。


![屏幕截图 2025-07-07 223741.png](https://dl.playground.lazycat.cloud/guidelines/319/3d475ff9-91a1-47f6-9c27-295d0aa5efe6.png "屏幕截图 2025-07-07 223741.png")

在我的4G内存猫上，在Penpot中写字有时会引发错误页面，但不用担心，只要刷新重试就好了，你的文件也不会丢失。

## 文字
加入文字后尝试文字颜色和效果，有自动描边和阴影选项，这对于基础的文字效果已经足够了。

![屏幕截图 2025-07-07 223847.png](https://dl.playground.lazycat.cloud/guidelines/319/62b84604-efbd-4a99-bd83-0e562f7a49fd.png "屏幕截图 2025-07-07 223847.png")

接下来给文字做一个渐变填充，Penpot的调色板很专业，基本的填充模式也都有，这些特性已经足以让用户使用它做基本设计工作了。

![屏幕截图 2025-07-07 224026.png](https://dl.playground.lazycat.cloud/guidelines/319/924faccf-4632-4df9-b7d2-957643d6bb1d.png "屏幕截图 2025-07-07 224026.png")


## 渐变
顺便拉两个透明度方向相反的白色渐变，一个简单的玻璃字就做好了。

![屏幕截图 2025-07-07 224117.png](https://dl.playground.lazycat.cloud/guidelines/319/78d54909-d29b-4a56-a3dd-07c7a14c851d.png "屏幕截图 2025-07-07 224117.png")
接下来创建一个矩形，设置圆角和深色渐变。
![屏幕截图 2025-07-07 224153.png](https://dl.playground.lazycat.cloud/guidelines/319/e2b0e3d0-096b-4d99-afe7-ddfc27108ad8.png "屏幕截图 2025-07-07 224153.png")
然后再设置渐变的边框，内阴影，做一个半透明的黑色文字框
![屏幕截图 2025-07-07 224528.png](https://dl.playground.lazycat.cloud/guidelines/319/9cd55559-5eb2-4fae-a7e4-c62604edbd73.png "屏幕截图 2025-07-07 224528.png")
上面的文字用银灰色渐变加阴影，形成有点金属感的凸起字。


![屏幕截图 2025-07-07 224753.png](https://dl.playground.lazycat.cloud/guidelines/319/c3e6fdf6-c4e9-4a3c-a2ec-43a9a82d12a5.png "屏幕截图 2025-07-07 224753.png")

## 形状

再画一个矩形，双击它会进入曲线编辑模式，

![屏幕截图 2025-07-07 224836.png](https://dl.playground.lazycat.cloud/guidelines/319/e68330f9-f7ff-4ea9-a323-aae0724a4b31.png "屏幕截图 2025-07-07 224836.png")

在顶部增加一个点，向上移动它使整个形状更像一支铅笔。从右键菜单或按Ctrl+D为这个形状创建副本，再选中两个底部的点，删除得得到了笔尖处的三角形。


![屏幕截图 2025-07-07 224958.png](https://dl.playground.lazycat.cloud/guidelines/319/63eb89a9-a687-425e-8766-8a7f61bd4192.png "屏幕截图 2025-07-07 224958.png")

![屏幕截图 2025-07-07 225056.png](https://dl.playground.lazycat.cloud/guidelines/319/c28a695f-1572-4718-ab78-ec99b340620b.png "屏幕截图 2025-07-07 225056.png")

再重新复制一次三角形，缩小，然后将它对齐到之前的三角形，铅笔尖也成了。最后修改一下颜色，基本的铅笔就完成了。

![屏幕截图 2025-07-07 225222.png](https://dl.playground.lazycat.cloud/guidelines/319/f87870cf-7cb7-45aa-8525-da726f82e188.png "屏幕截图 2025-07-07 225222.png")

按Ctrl+G把铅笔成组，复制出另外两支铅笔，并设置为不同的颜色。


![屏幕截图 2025-07-07 225341.png](https://dl.playground.lazycat.cloud/guidelines/319/d2f6ddfa-b985-45f6-8948-d176cd1d6b4c.png "屏幕截图 2025-07-07 225341.png")

## 变换
重新画一个矩形用来做盒子。
我没有在矩形的属性中找到扭曲（skew）的选项，所以这里只能做点移动，使新画的矩形变成一个平行四边形。
复制并镜像这个平行四边形，就形成了盒子的另一面，同时要调整另一面的渐变，使它整体上比另一面要深。
![屏幕截图 2025-07-07 225550.png](https://dl.playground.lazycat.cloud/guidelines/319/84587634-a3b0-45b8-87f1-b2a9049ea3c7.png "屏幕截图 2025-07-07 225550.png")

![屏幕截图 2025-07-07 225743.png](https://dl.playground.lazycat.cloud/guidelines/319/867c0e06-4e09-477c-b08e-b1150d8e156c.png "屏幕截图 2025-07-07 225743.png")

将两个盒子面做两次镜像，再用Ctrl+↓将它移到铅笔的下层，一个简易的盒子（或笔筒）就画好了。

![屏幕截图 2025-07-07 225912.png](https://dl.playground.lazycat.cloud/guidelines/319/113f6507-e992-4da1-b45c-0d0ddef226d0.png "屏幕截图 2025-07-07 225912.png")

如果有耐心，可以给盒子再加上厚度和更多质感，但因为这里只是测试，就整体用一个半透明的白色做为边框，最简易的质感效果也有了。
![屏幕截图 2025-07-07 230229.png](https://dl.playground.lazycat.cloud/guidelines/319/f1a81b32-b27c-4f5a-a326-855d77c1a7e1.png "屏幕截图 2025-07-07 230229.png")


# 插件

接下来尝试一下Penpot的插件，虽然是self-host版，但仍然可以无障碍享受Penpot的插件库。
从工具栏最后一个图标打开插件管理窗口，从上面的链接可以访问到Penpot插件库的网站。


![屏幕截图 2025-07-07 230551.png](https://dl.playground.lazycat.cloud/guidelines/319/40e50136-3f64-43a0-943a-d63bf6e30b2c.png "屏幕截图 2025-07-07 230551.png")
找到想安装的插件后不要直接点击安装，而是从详情页点击Copy install URL，然后把复制来的网址粘贴到插件窗口，确认权限后就可以看到插件顺利装好了。

![屏幕截图 2025-07-07 230507.png](https://dl.playground.lazycat.cloud/guidelines/319/ba8dff43-8edb-44d9-9e85-090747c5ea6e.png "屏幕截图 2025-07-07 230507.png")

我从插画插件随手找了两个文具的小插画放进去，是很卡通感的矢量组件，有可能是SVG，但是因为与画面风格不符，所以只是看一下就再删掉它们好了。
![屏幕截图 2025-07-07 230744.png](https://dl.playground.lazycat.cloud/guidelines/319/f02f0fd1-5d8b-4750-9e78-b0272b5e213a.png "屏幕截图 2025-07-07 230744.png")


![屏幕截图 2025-07-07 230856.png](https://dl.playground.lazycat.cloud/guidelines/319/bc9f1853-71de-4681-9153-2e70833cc75d.png "屏幕截图 2025-07-07 230856.png")

顺便提一句Penpot的导入图片也可以导入动画GIF，动画可以直接在面板中显示。但因为我们这次做的是静态图像，所以不需要。

# 图库
然后试用了一下免费图库插件，它可以自动从免费的图库网站查找你需要的素材图。选了一张彩色铅笔的图像，但是发现并没有抠图的功能（应该会有矢量曲线做遮罩的解决方案但嫌太麻烦了）

![屏幕截图 2025-07-07 231556.png](https://dl.playground.lazycat.cloud/guidelines/319/fbad9a4f-17ea-448f-aef6-17d31f106765.png "屏幕截图 2025-07-07 231556.png")

我打开检查面板，从最下端下载这张图片的原图，然后在本地电脑上用AI去掉了背景，再在图像的填充属性中把抠完的图上传，透明背景的铅笔素材就有了。
![屏幕截图 2025-07-07 231702.png](https://dl.playground.lazycat.cloud/guidelines/319/6d554ff2-62ef-4436-9096-d183125f073f.png "屏幕截图 2025-07-07 231702.png")

![屏幕截图 2025-07-07 231844.png](https://dl.playground.lazycat.cloud/guidelines/319/384690ce-2d6c-42b8-b1cb-8af79d857f25.png "屏幕截图 2025-07-07 231844.png")

# 导出

最后调整一下层次和位置，再选中整个画板，在右栏最下方设计导出的格式。


![屏幕截图 2025-07-07 232034.png](https://dl.playground.lazycat.cloud/guidelines/319/7dd73c59-66e9-4c6f-8161-c8fd26041a21.png "屏幕截图 2025-07-07 232034.png")

再从文件菜单选择导出，就可以将这张封面图的结果保存为本地的图片文件了。

![屏幕截图 2025-07-07 232004.png](https://dl.playground.lazycat.cloud/guidelines/319/eed2183c-f46b-4447-95b3-dfea46f3ede7.png "屏幕截图 2025-07-07 232004.png")

![Board.png](https://dl.playground.lazycat.cloud/guidelines/319/c44bbdd8-429e-472b-a387-96d57e31d4b6.png "Board.png")


以上只是首次的粗浅尝试，Penpot的强大功能在此只用了估计不到十分之一。
下次再做更深入的尝试，谢谢阅读。