ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Neovide macOS DMG 安装器背景定制指南:从 source.pdf 到 Retina 兼容的完整流程

Neovide macOS DMG 安装器背景定制指南:从 source.pdf 到 Retina 兼容的完整流程 桌面应用开发工具【免费下载链接】neovideNo Nonsense Neovim Client in Rust项目地址https://gitcode.com/gh_mirrors/ne/neovide点击查看免费下载NeovideRust 编写的 No Nonsense Neovim GUI 客户端在 macOS 上通过.dmg磁盘映像分发安装包而 DMG 安装器窗口的背景图由assets/dmg-background/目录下的设计源文件驱动。本篇指南以 assets/dmg-background/README.md 为骨架完整讲解如何修改背景设计、按规范导出多分辨率 PNG、用tiffutil合成 Retina 兼容的 TIFF以及如何将成品接入macos-builder/run打包脚本。读完本文你将掌握一套可复现、可直接落地的 DMG 视觉定制工作流。一、背景资源在仓库中的角色与整体工作流在 Neovide 仓库中与 DMG 背景相关的资源与脚本分散在四个位置共同构成一条完整链路资源/脚本相对路径作用背景设计源文件assets/dmg-background/source.pdf可编辑的设计稿用于修改背景视觉背景说明文档assets/dmg-background/README.md定制流程的操作规范背景成品PNG/TIFFassets/neovide-dmg-background.png、assets/neovide-dmg-background2x.png、assets/neovide-dmg-background.tiff打包脚本实际引用的背景文件生成与打包脚本macos-builder/make-icns、macos-builder/run合成 TIFF/ICNS、构建并生成 DMG从上图可以看出Neovide 的 DMG 背景是一张简洁的设计稿渐变浅蓝背景上放置品牌 Logo 与 Neovide 字样中下部右侧的浅灰色箭头用于暗示将应用拖入 Applications 文件夹的操作指引——这正是 DMG 安装器打开后用户看到的第一印象。标准流程为修改source.pdf→ 导出两张指定尺寸的 PNG → 运行make-icns合成 TIFF → 通过macos-builder/run打包成带背景的 DMG。下文按此顺序逐步展开。二、修改背景设计以 source.pdf 为源字体注意点assets/dmg-background/README.md明确指出本目录下的source.pdf可用于修改 OSX DMG 安装器的背景。这意味着背景图的真源是 PDF 矢量稿而不是仓库里现有的 PNG/TIFF——PNG 与 TIFF 只是导出的产物。在修改时有一个容易被忽略的字体坑文档建议使用JetBrainsMono Nerd Font可从 Nerd Fonts 官网下载因为背景图中品牌文字所使用的字体家族来自该字体集。如果你在本地打开 PDF 后发现文字渲染成了替代字体请先确认系统中是否已安装对应字体否则导出结果可能与仓库现有成品不一致。修改完成后必须导出两张特定路径、文件名和尺寸的图片这是后续所有脚本的前提路径均相对仓库根目录assets/neovide-dmg-background.png—— 尺寸650×450assets/neovide-dmg-background2x.png—— 尺寸1300×900两处细节值得注意2x 即 Retina 版本1300×900 恰好是 650×450 的两倍像素属于标准的2x命名约定。macOS 的 Retina 屏以 2 倍物理像素渲染逻辑点单独一张 1x 图在高分屏上会被拉伸模糊。路径不能变脚本硬编码了assets/下的这两个文件名详见下文make-icns与run的变量定义导出到别的位置或改名都会导致打包失败。仓库中这两张成品图内容完全一致、仅分辨率不同正是同源导出 1x/2x的直观示例而assets/neovide-dmg-background.tiff则是通过脚本合成的组合产物。三、合成 Retina TIFFmake-icns 脚本逐行拆解assets/dmg-background/README.md说明为了支持 Retina 图片必须在项目根目录运行构建脚本macos-builder/make-icns该脚本是一个#!/usr/bin/env bash脚本macos-builder/make-icns核心逻辑分两步。3.1 第一步tiffutil 合成背景 TIFFtiffutil \ -cathidpicheck \ ${ASSETS_DIR}/neovide-dmg-background.png \ ${ASSETS_DIR}/neovide-dmg-background2x.png \ -out ${ASSETS_DIR}/neovide-dmg-background.tifftiffutil -cathidpicheck是 macOS 自带的命令行工具用于把 1x 与 2x 两张 PNG 合成一个包含多个表示representation的 TIFF 文件。macOS 的许多系统控件如 Finder 的 DMG 窗口背景能够识别这种多表示 TIFF并自动根据屏幕分辨率挑选合适的那一层——这正是支持 Retina 图片的底层机制。如果漏掉这一步、只把 650×450 的 PNG 传给 create-dmgRetina 屏上背景就会发虚。3.2 第二步顺带生成完整 ICNSmake-icns的脚本名暗示了它的另一个职责从assets/neovide-1024.png源图生成全套尺寸的应用图标。脚本用sips将 1024px 源图缩放到以下 10 个尺寸并写入extra/osx/Neovide.app/Contents/Resources/Neovide.iconset/iconset 文件名尺寸icon_16x16.png16×16icon_16x162x.png32×32icon_32x32.png32×32icon_32x322x.png64×64icon_128x128.png128×128icon_128x1282x.png256×256icon_256x256.png256×256icon_256x2562x.png512×512icon_512x512.png512×512icon_512x5122x.png1024×1024直接复制源图随后调用iconutil -c icns把 iconset 打包成Neovide.icns并清理临时目录iconutil -c icns ${ICONSET_DIR} rm -R ${ICONSET_DIR}最终的 extra/osx/Neovide.app/Contents/Resources/Neovide.icns 会被 extra/osx/Neovide.app/Contents/Info.plist 中CFBundleIconFile键引用同时作为 DMG 的卷图标volicon。运行前提tiffutil、sips、iconutil均为 macOS 自带工具该脚本只能在 macOS 环境下执行。四、背景如何进入最终 DMGmacos-builder/run 打包链路背景 TIFF 生成后真正把它贴到 DMG 窗口上的是 macos-builder/run 打包脚本说明见 macos-builder/readme.md。该脚本在设置阶段就固定了背景文件路径ASSETS_DIRassets DMG_BACKGROUND${ASSETS_DIR}/neovide-dmg-background.tiff即 DMG 背景只认assets/neovide-dmg-background.tiff——这正是上一步make-icns合成出的文件两处通过固定的相对路径耦合在一起。4.1 create-dmg 参数与背景布局run脚本在GENERATE_DMGtrue时调用create-dmg生成磁盘映像create-dmg \ --filesystem ${DMG_FILESYSTEM} \ --format ${DMG_FORMAT} \ --hdiutil-retries ${DMG_HDIUTIL_RETRIES} \ --volname ${DMG_VOLNAME} \ --volicon ${DMG_ICNS} \ --background ${DMG_BACKGROUND} \ --window-size 650 470 \ --icon-size 80 \ --icon Neovide.app 240 320 \ --app-drop-link 410 320 \ ${APP_DIR}/${DMG_NAME} \ ${APP_DIR}/${APP_NAME}各参数与背景的关系如下参数值默认含义--filesystemHFSDMG 文件系统格式--formatUDZO压缩磁盘映像格式--hdiutil-retries${DMG_HDIUTIL_RETRIES:-20}hdiutil 失败重试次数可用环境变量覆盖--volnameNeovideDMG 卷名--voliconNeovide.icns卷图标来自 make-icns 产物--backgroundneovide-dmg-background.tiff窗口背景图即本文定制对象--window-size 650 470—安装器窗口尺寸与背景图 650×450 高度匹配470 含标题栏--icon-size 80—图标显示尺寸--icon Neovide.app 240 320—应用图标在窗口中240, 320的位置--app-drop-link 410 320—Applications 文件夹拖放链接在410, 320的位置可以看到--window-size 650 470与背景图逻辑尺寸 650×450 几乎一一对应而--icon与--app-drop-link的坐标恰好落在背景图右侧箭头的视觉导引方向上——背景、窗口尺寸、图标坐标三者共同构成一致的视觉设计。4.2 一次完整的打包调用GENERATE_BUNDLE_APPtrue GENERATE_DMGtrue ./macos-builder/run aarch64-apple-darwin脚本行为要点第一个位置参数为TARGET_ARCHITECTURE如aarch64-apple-darwinApple Silicon或x86_64-apple-darwinIntel若指定了目标架构RELEASE_DIR为target/${TARGET_ARCHITECTURE}/release否则回退为target/release若 release 二进制不存在脚本自动执行cargo build --release [--target 架构]说明文档注明这主要面向本地开发CI 中通常预先构建GENERATE_BUNDLE_APPtrue时从模板 extra/osx/Neovide.app 拷贝生成.app包、放入二进制并执行codesign签名第二个位置参数可作为DEVELOPER_ID传入此时脚本对应用与 DMG 执行codesign --force --options runtime --deep --sign本地签名用脚本注释说明这是为了在流水线失败时仍可手动签名最终产物为target/arch/release/bundle/osx/Neovide[-arch].dmg架构后缀随目标而定。另外脚本支持CLEAN_BUILDtrue触发cargo clean以及用DMG_HDIUTIL_RETRIES环境变量调节重试次数便于在 CI 上调试 hdiutil 偶发失败。五、打包前置检查清单与常见问题macos-builder/readme.md的 Notes 部分强调了检查要点结合源码可以整理出以下清单文件必须就位assets/neovide-dmg-background.tiff、assets/neovide-1024.png、extra/osx/Neovide.app/Contents/Resources/Neovide.icns等必须存在且路径正确。DMG 背景路径由run硬编码为assets/neovide-dmg-background.tiff漏跑make-icns或改错文件名会直接失败。依赖工具齐全需要 cargo、create-dmg第三方 DMG 打包工具与codesignApple 签名工具。create-dmg与codesign均需自行安装/配置脚本不做安装。在 macOS 上运行tiffutil/sips/iconutil与create-dmg、codesign都依赖 macOS 环境本套脚本不适用于 Linux/Windows 构建机。保持路径与命名规范assets/dmg-background/source.pdf修改后必须导出为assets/neovide-dmg-background.png650×450与assets/neovide-dmg-background2x.png1300×900再执行macos-builder/make-icns更新 TIFF。常见问题速查Retina 屏背景模糊多半是跳过了tiffutil合成步骤或2x文件尺寸不是 1300×900。重新执行macos-builder/make-icns即可。DMG 中没有背景检查create-dmg的--background是否指向有效的neovide-dmg-background.tiff并确认 DMG 窗口尺寸--window-size 650 470与背景匹配。图标缺失或尺寸不全重新运行macos-builder/make-icns以重建Neovide.icns并确认 Info.plist 中CFBundleIconFile指向Neovide.icns。打包报 hdiutil 错误提高DMG_HDIUTIL_RETRIES环境变量的值重试。六、背景资源与打包流程的耦合关系小结从源码层面可以清晰看到 Neovide DMG 定制涉及的三份资源、两个脚本、一条链路设计源assets/dmg-background/source.pdf→ 人工修改导出产物assets/neovide-dmg-background.png650×450与2x1300×900合成产物assets/neovide-dmg-background.tiff由 macos-builder/make-icns 用tiffutil合成打包消费macos-builder/run 通过DMG_BACKGROUND变量引用 TIFF并配合--window-size、--icon、--app-drop-link完成最终布局配套图标make-icns顺带从assets/neovide-1024.png生成全套 ICNS供应用包与 DMG 卷图标使用。修改背景的正确姿势是改source.pdf→ 导出两张 PNG → 跑make-icns→ 跑macos-builder/run任何一步跳过都会导致成品缺位或 Retina 适配失效。掌握了这条链路你就可以为 Neovide 定制完全属于自己的 DMG 安装器视觉了。赞分享桌面应用开发工具【免费下载链接】neovideNo Nonsense Neovim Client in Rust项目地址https://gitcode.com/gh_mirrors/ne/neovide点击查看免费下载相关推荐Boring Notch 发布流程从代码到 DMG 安装包的完整制作Boring Notch 发布流程从代码到 DMG 安装包的完整制作 Boring Notch 是一款专为 macOS 设计的创新应用程序它重新定义了刘海屏桌面应用create-dmg自定义图标制作从应用图标到DMG图标的完整流程create dmg自定义图标制作从应用图标到DMG图标的完整流程 想要为你的macOS应用程序创建一个既专业又美观的DMG文件吗create dmg工具让CLI开发工具LeetCode-Book 刷题导航剑指 Offer 75 道题的算法地图与 31 天通关节奏LeetCode Book 刷题导航剑指 Offer 75 道题的算法地图与 31 天通关节奏 刷到 Day 8斐波那契、爬楼梯、股票利润都顺手了可面试官示例工程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进