Grida 实战入门从克隆仓库到导出第一张设计稿【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/grida想随手做一张活动海报又不想翻出笨重的设计软件Grida 是一个免费开源的 2D 画布编辑器无限画布、图层树、文本与矢量编辑、右侧属性面板做海报需要的东西它都有。快速跑起来Grida 安装命令一条命令克隆仓库仓库里自带完整的启动说明git clone https://gitcode.com/gh_mirrors/gr/grida cd grida pnpm install pnpm dev装之前确认两件事Node.js 24 和 pnpm 11。整个过程零配置不用配环境变量、不用起本地服务页面打开时编辑器就已经在等你了。界面速览图层、画布、属性面板界面打开后三个区域各管各的事和任何顺手的创作工具一样直觉左侧图层树像剧组的演员名单画布上每个元素都有一行点它选中、拖它调序中间无限画布可以拉到像素比手掌还大也可以缩到一眼看完整张海报右侧属性面板位置、尺寸、颜色、字号改数字、画布实时跟着变图Grida 画布编辑器三层核心区域一目了然实战从空白画布到能发出去的活动海报以做一张活动海报为例六步出成品。1. 选择画板预设尺寸点界面左上角的「」新建画板预设尺寸直接选移动端竖版、桌面横幅都在也可以自己输数字。此时画布中央会出现一块空白画板。2. 添加渐变背景插入一个背景元素选渐变预设。挑一张橙紫带颗粒感的海报的氛围先有了——项目里内置了一整组这种背景素材。图内置背景资源库里的渐变预设拖进画布即可用3. 画主体图形在工具栏选「形状」工具在画布上拖出几个矩形和圆形再拖角点调整比例。图形四周会立刻出现描边与控制点说明它已经处于可编辑状态。4. 加标题与正文选文字工具「T」在画布上点一下就能直接打字活动名做标题下面补三行日期、时间、地点。字体、字号、颜色都在右侧属性面板里调每敲一个字符画布同步刷新。5. 对齐与分布元素框选标题、日期几行文字点工具栏的对齐按钮。拖动时元素会自动吸附到其他元素的中线不用肉眼对齐。图拖动时元素自动吸附到其他元素的中线位置6. 保存并导出为 PNG选中整个海报按 Cmd Shift C选区就以 PNG 进剪贴板了贴进聊天窗口直接发。 想留档继续改就从菜单「保存」为.grida文件下次打开接着编辑图层一个不少。进阶一瞥数据联动把画布接到 database/ 的表上海报内容就能从数据里来Figma 导入.fig文件和 Figma 剪贴板内容都能进画布AI 辅助见 docs/with-figma/ 里的 Assistant 工作流第一张海报已经到手。想继续深挖功能与快捷键从 docs/ 入手想看引擎和包怎么拆直接逛packages/目录——开源的东西都摆在明面上。【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/grida创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考