PSD 面板导出后放大,边框也变粗?先明确九宫格交付
把边距约定随面板图片一起交付,避免只给一张PNG就认为边框缩放方式已经确定。

封面为 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 Layer Exporter Guide: Export Game UI Assets from Photoshop Files
Learn how a PSD layer exporter helps game developers extract buttons, panels, icons, characters, and UI elements from Photoshop files faster.

PSD to Game Engine Workflow: Prepare UI Assets for Unity, Cocos, and Godot
Learn how to convert PSD design files into clean game engine assets for Unity, Cocos, and Godot with better naming, folders, PNG export, and QA checks.

How to Batch Export PSD Layers to PNG for Game Development
A practical workflow for batch exporting PSD layers to transparent PNG assets for mobile games, UI screens, icons, and 2D production pipelines.
