独立游戏开发效率4 分钟阅读

PSD 面板导出后放大,边框也变粗?先明确九宫格交付

把边距约定随面板图片一起交付,避免只给一张PNG就认为边框缩放方式已经确定。

PSD 面板导出后放大,边框也变粗?先明确九宫格交付

封面为 AI 生成的徽章与分层装饰示意,不是九宫格面板或拉伸测试。图中有重要中心图案,不能仅因有边框就认定整张图适合九宫格。

PSD里边框看起来很精致,导出PNG后把整个图片等比例放大,边框也跟着变粗。先明确需求:是把整张美术放大,还是只增加面板容纳内容的区域?后者通常需要单独约定边框与中心如何处理,不是PNG后缀自动提供的行为。

图片导出与九宫格配置是两份信息

PSD 分层导出工具公开说明支持像素图层导出与ZIP打包。它没有在该说明中承诺导出任意引擎的九宫格配置;不要把一张面板PNG当作已经完成切分与接收端设置。

例如Godot官方NinePatchRect参考源文件单独列出四边边距和中心拉伸/平铺模式。这里用来说明图片与控件设置分别存在,不要求所有引擎采用相同字段。

一个没有额外缩放的像素模型

假设面板图片128×64,约定左、右边各12像素,上、下边各10像素。中心区域为104×44。若目标布局尺寸变为256×96,且边距保持原像素宽度,则中心区域变为232×76。

模型只改变布局尺寸,不施加额外节点缩放或设备UI缩放。它不是某引擎的实测结果,也不说明任何过小尺寸都能有效显示;目标小于边距总和时,应按接收组件规则另行检查,不套用一个通用压缩办法。

中心图案与边角装饰要分别判断

可伸展的中心与必须保持比例的徽章、文字或人物图案,不应不加区分地一起拉长。必要时在美术方案中将重要装饰作为独立元素交付,再由UI布局安排位置;不要承诺导出器会自动识别并拆分它们。

平铺与拉伸也是不同选择。需要平铺的纹理要检查重复接缝;拉伸中心可能改变纹理外观。选择哪一种,取决于实际面板图案和接收控件,而不是统一使用一个预设。

导出时保留参考空间

先保存原始PSD与批准预览,再选择对应像素图层导出。如果后续裁掉透明边或改变画布尺寸,原来按图片边界约定的边距可能需要重新核对。不要替换了图片,却继续沿用未检查的旧设置。

记录源文档、图层、图片尺寸、四边边距和中心处理方式。数据由实际设计确认,本文的12与10不应直接填入你的项目。

用实际UI尺寸验收

  • 在计划使用的小尺寸与大尺寸下检查四角、边线及中心图案。
  • 区分控件布局尺寸改变与整体缩放,不用一张静态预览代替两者。
  • 检查文字区域和装饰是否与背景冲突;内容留白不是自动等于边框宽度。
  • 保留实际组件设置与观察,未测设备或尺寸明确记为未验证。

基础导出步骤可查看PSD UI交付流程。一张PNG成功下载只说明文件交付,不代表面板已按预期伸展或通过所有分辨率测试。

推荐使用本站工具

准备好实践「PSD 面板导出后放大,边框也变粗?先明确九宫格交付」了吗?

使用本站在线工具,将教程中的步骤立刻应用到你的独立游戏项目。