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了。     打开新建的文件，可以看到整个编辑界面还是相当专业的。  # 基本绘图 在创建文件之后，我们首先要做的是建立一个画板，整个文件的画布或者说桌面上，可以容纳无数个画板，每个画板内即是你需要创作的图像或者界面区域。 ## 画板 当然你也可以不建立画板而直接在桌面上绘画，但使用画板有更多好处。 由于要做的封面大约是3:2比例，所以我为画板设置的尺寸是600x400px  然后做最简单地尝试，导入一张图片：  画板会对图片超出其面积的部分进行自动裁切，这是用画板的第一个好处。  在我的4G内存猫上，在Penpot中写字有时会引发错误页面，但不用担心，只要刷新重试就好了，你的文件也不会丢失。 ## 文字 加入文字后尝试文字颜色和效果，有自动描边和阴影选项，这对于基础的文字效果已经足够了。  接下来给文字做一个渐变填充，Penpot的调色板很专业，基本的填充模式也都有，这些特性已经足以让用户使用它做基本设计工作了。  ## 渐变 顺便拉两个透明度方向相反的白色渐变，一个简单的玻璃字就做好了。  接下来创建一个矩形，设置圆角和深色渐变。  然后再设置渐变的边框，内阴影，做一个半透明的黑色文字框  上面的文字用银灰色渐变加阴影，形成有点金属感的凸起字。  ## 形状 再画一个矩形，双击它会进入曲线编辑模式，  在顶部增加一个点，向上移动它使整个形状更像一支铅笔。从右键菜单或按Ctrl+D为这个形状创建副本，再选中两个底部的点，删除得得到了笔尖处的三角形。   再重新复制一次三角形，缩小，然后将它对齐到之前的三角形，铅笔尖也成了。最后修改一下颜色，基本的铅笔就完成了。  按Ctrl+G把铅笔成组，复制出另外两支铅笔，并设置为不同的颜色。  ## 变换 重新画一个矩形用来做盒子。 我没有在矩形的属性中找到扭曲（skew）的选项，所以这里只能做点移动，使新画的矩形变成一个平行四边形。 复制并镜像这个平行四边形，就形成了盒子的另一面，同时要调整另一面的渐变，使它整体上比另一面要深。   将两个盒子面做两次镜像，再用Ctrl+↓将它移到铅笔的下层，一个简易的盒子（或笔筒）就画好了。  如果有耐心，可以给盒子再加上厚度和更多质感，但因为这里只是测试，就整体用一个半透明的白色做为边框，最简易的质感效果也有了。  # 插件 接下来尝试一下Penpot的插件，虽然是self-host版，但仍然可以无障碍享受Penpot的插件库。 从工具栏最后一个图标打开插件管理窗口，从上面的链接可以访问到Penpot插件库的网站。  找到想安装的插件后不要直接点击安装，而是从详情页点击Copy install URL，然后把复制来的网址粘贴到插件窗口，确认权限后就可以看到插件顺利装好了。  我从插画插件随手找了两个文具的小插画放进去，是很卡通感的矢量组件，有可能是SVG，但是因为与画面风格不符，所以只是看一下就再删掉它们好了。   顺便提一句Penpot的导入图片也可以导入动画GIF，动画可以直接在面板中显示。但因为我们这次做的是静态图像，所以不需要。 # 图库 然后试用了一下免费图库插件，它可以自动从免费的图库网站查找你需要的素材图。选了一张彩色铅笔的图像，但是发现并没有抠图的功能（应该会有矢量曲线做遮罩的解决方案但嫌太麻烦了）  我打开检查面板，从最下端下载这张图片的原图，然后在本地电脑上用AI去掉了背景，再在图像的填充属性中把抠完的图上传，透明背景的铅笔素材就有了。   # 导出 最后调整一下层次和位置，再选中整个画板，在右栏最下方设计导出的格式。  再从文件菜单选择导出，就可以将这张封面图的结果保存为本地的图片文件了。   以上只是首次的粗浅尝试，Penpot的强大功能在此只用了估计不到十分之一。 下次再做更深入的尝试，谢谢阅读。

Penpot进阶：简单制作交互模型

https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.penpot 我在之前的文章《[Penpot：用懒猫做专业设计](https://lazycat.cloud/playground/guideline/693)》中讲解了怎样用Penpot做专业的界面设计，但基本上是基于静态画面的。 实际上Penpot还有一个强大的功能是交互设计，只需要简单的拖拽就可以做出可以交互的原因，在界面设计上非常有用。 首先让我们参照前文的方式登录并打开Penpot：  这次主要会用到“画板”这个工具，画板在做视觉设计时是一个图片的容器，但在交互时就相当于一个界面。  你可以随便画一个大小，然后在右栏中选择预设的尺寸。  让我们选一个基本的1024x768尺雨的web界面，这次我只是做一个演示性的界面，我们在左栏中给这个界面取名为home。  选中home画板后，只需要按Ctrl+D，就会在旁边建一个完全同样大小的画板副本，让我们给它取名list。  在画面上画一个主体矩形，在限制设置中让它居左下右三方对齐。  再画一个顶部的Header，居左上右三方对齐。  最后再画一个圆，做为Logo的替代品，把它放在中央合适的位置。  分别选择Logo和Header，在右键菜单里找到“创建组件”把它们分别建成两个组件。  可以看到左栏中的图标样式发生了变化，变成了组件的图标。  为了演示交互，我们再创建一个圆角矩形和文字，同时选中后创建组件，取名为listBtn。  将Header和Logo复制到list页面，并改变Logo的大小和位置，让它居于Header的左方。  双击进入组件编辑模式，改变一下圆形的颜色，可以看到在list界面的Logo也同时改变了颜色，说明组件是关联的，以后细化的时候可以随时修改。  现在在右栏选择我们之前没有提到过的“原型”tab，在添加交互之前，这里是空的，只显示基本的使用方法。  选中listBtn，它的右侧会出现一个小键头，把它拖拽到list界面上，就自动建立了一个页面链接。  再从list页的小Logo上拖出线条，连接到home界面，一个基本的交互闭环就  此时点击位于界面最右上角的“执行”图标，就可以在新窗口中打开交互原型了。  交互原形中是我们首页的样子。  测试一下操作，交互很正常。 https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/b2b9ad93-8515-4774-8133-51eaf4a4cb3b.mp4 * 接下来我们复制一下List按钮，先要将它从原来的组件“解绑”（在右键菜单中），然后重新创建组件，我们叫它SettingsBtn。  同样按Ctrl+D把list界面复制一份，改名为settings，并在两个页面上分别加上标题以示区分。  Settings页面上的logo会继承list上的互动，所以不需要管它，只需要把Settings按钮的链接关系从list改到settings界面。  看一下效果，一个多页面的交互原型就做好了。 https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/5b638a76-a1eb-407b-b05a-63bf00aa0247.mp4 界面间的交互我们学会了，那本页内的界面怎么办？ 让我们画一个简化了的模态窗口，这上面只有一个红色的“关闭”按钮，并把它生成组件。  双击进入模态窗口的组件编辑，选择关闭按钮，在右栏中给它手动添加这样的交互，让它“关闭自己”（这里是指模态组件本身）  再给首页的主LOGO加上这样的交互，让它被点击后可以打开这个模态窗口。  因为上一步设置了打开时相对home界面的中心，所以模态窗口不一定要放在画面当中，可以拖到画布之外。这样来看更直观一些。  最后测试一下，发现点击主logo可以正常打开模态对话框，在对话框中点击关闭按钮或外侧空白处，都可以关闭这个对话框。 https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/86d5a7a3-fc2a-4fc5-a440-67ebdc6c1490.mp4 是不是很简单，一个流畅的交互原型就这样做好了，可以用来指导具体的视觉设计和编码了。