App 功能做完了测试也跑得差不多了接下来要上架应用商店结果发现苹果和安卓渠道都要宣传图。问了一圈设计师排期最快也要两周后。小团队哪有这个等待成本最后这个活儿就落到了我这个写代码的人头上。一开始我本能地抗拒觉得自己一个研发搞什么设计但硬着头皮试了一圈免费工具之后发现App 宣传图这件事只要方法对研发自己完全能搞定而且真能做得不丢人。这篇文章就聊聊我这段时间给自家 App 做宣传图的完整经历——用什么工具、按什么流程做、哪些地方容易翻车、怎么批量产出多尺寸的图。如果你也是研发、独立开发者或者团队里恰好没有专职设计这篇应该能帮你少走不少弯路。1. 研发给App做宣传图核心痛点到底在哪1.1 没设计师时需求是怎么落到研发头上的很多研发觉得自己不会碰到这种需求但我观察下来中小团队里App 上架素材没人做是特别普遍的情况。产品经理说商店后台必须要传截图和推广图不然提审都过不了设计师要么没配要么排期排到了下个版本老板眼里这活儿又确实不大不值得外包。于是最闲或者说最没借口拒绝的研发就被拉来顶上了。我当时的处理方式和很多同行一样先把应用商店要求的几张截图用模拟器截图充数。结果上传之后发现要么分辨率不符合要求要么图片内容太干一眼看去像开发调试界面。商店后台审核对质量并没有主观打分但截图信息不完整、主次不分转化率会很难看。后来我才意识到做宣传图真正的难点不是会用软件而是不知道标准是什么。设计软件可以现学但渠道规范、尺寸要求、信息层级这些看不见的规则才是让研发无从下手的根源。1.2 宣传图的标准比想象中严格这里说的标准不是审美上的标准而是硬性的技术规范。不同渠道对宣传图的尺寸、格式、数量、是否允许透明通道都有各自要求我一开始完全没意识到这里面水有多深。以我实际踩过的为例使用场景常见尺寸px注意事项iOS 6.7 英寸截图1290 x 2796PNG 或 JPG无透明通道iOS 6.5 英寸截图1242 x 2688较旧机型兼容显示安卓商店主图1080 x 1920 起步竖屏各厂商规则有差异官网产品页横幅约 1600 x 900横版为主注意留安全边距社交媒体分享图各平台不同小红书、公众号尺寸差异大这里列的是我制作时常用的参考值真正的硬性规则会随苹果和安卓各厂商的后台要求更新所以每次动手之前都应该先查一遍目标渠道最新的官方规范。制作前多花十分钟核对比做完之后发现尺寸不达标重新导出要省心得多。除了尺寸还有内容层面的要求。比如 App Store 截图不能带透明通道某些安卓商店要求截图里不能出现友商竞品的水印有些渠道要求首图要能体现核心功能。这些细节设计规范文档里写得很清楚但没有设计背景的研发基本不会专门去翻。1.3 免费工具遍地都是为什么大多数不省心提到免费做图很多人的第一反应是找破解版 Photoshop。我自己也短暂想过这条路但立刻放弃了首先公司办公电脑装破解软件有合规风险其次破解版经常崩溃做到一半图没了心态真的会崩。后来又试了几款在线设计工具问题也很典型。有的网站模板确实多但导出原图要开会员有的下载图片强制带平台水印还有的说是免费但每次保存都要等几十秒广告。试用一圈下来感觉免费工具全都卡在免费和可用的夹缝里。不过在踩了这些坑之后我逐渐摸清了什么才算真正省心的免费工具标准其实就三条模板质量够用、免费导出没有隐藏陷阱、学习成本低到可以忽略。按这三条标准重新筛了一圈最后稳定用下来的还是 Canva 免费版。2. 工具选型免费里踩了一圈我把Canva免费版作为默认答案2.1 为什么不是PS、Figma、或者截图硬拼先说截图硬拼。这种做法不是不行但只适合内部沟通真放到应用商店当宣传图问题很明显没有文案层级用户根本不知道你 App 是干嘛的没有品牌氛围感整体观感很简陋。而且截图硬拼出来的图要做成多尺寸时基本是重做一遍完全没有复用的余地。Figma 我会用团队里用 Figma 做原型也很顺手。但拿 Figma 给 App 做宣传图等于从零开始搭模板——画布要自己建设备外框要自己找素材中文字体要自己确认授权光是把这套基础环境搭完一个下午就没了。Figma 是给设计团队用的协作工具不是给研发临时出图用的。破解版 PS 就更不用说了。法律风险、安全风险、稳定性问题每一条都够劝退。而且新手打开 PS 的第一反应往往是按钮在哪还没开始做图就已经失去耐心了。Canva 免费版能成为我的默认答案核心原因就一句话它把做一张宣传图需要的 80% 能力直接打包好了搜索模板、换文案、换图、导出整个过程不需要任何设计基本功。2.2 免费版到底够不够用我的实测结论很多人一听到免费版就默认功能会很鸡肋但放在 App 宣传图这个具体场景里实测结论是核心流程完全够用。搜索App Store、应用商店、手机截图这些关键词能翻到大量模板覆盖 iOS 上架、安卓商店、官网 banner、社媒分享图各种场景。编辑操作就是点一下文字直接改拖一张图进来替换原图所有步骤跟用 Word 差不多。导出环节也过关PNG 和 JPG 都是免费支持的格式宣传图需要的就是这两个格式。当然免费版的边界我也摸过。部分图片素材和元素会有高级版标志点开之后提示要升级才能用一些高级字体和背景移除功能也要会员。但实测下来这些限制主要影响的是锦上添花的部分不影响做出一张合格宣传图这个核心目标。素材不够就去掉字体不够就用开源字体背景复杂了就换简洁风这些都是可以绕过去的。2.3 免费不等于随便商用版权边界必须搞清楚这里必须单独提醒一句很多研发在这上面吃过亏工具免费不代表工具里所有素材都能免费商用。Canva 免费版自带的模板和大量素材在授权范围内允许商业使用但模板里嵌套的资源不一定都包含在内。尤其要警惕的是字体中文环境下很多好看的字库都是有版权的商用需要单独购买授权。我现实中就见过有团队因为宣传图上用了一个商用需授权的字体被字库公司发函要求赔偿的案例。我现在做 App 宣传图时中文文案基本只用开源免费商用字体最常用的是思源黑体、阿里巴巴普惠体、站酷系列。英文文案相对宽松一些但也会先确认一下授权说明。我的操作习惯是每个素材拖进画布之前先看一下它的授权标注标注不明确的坚决不用。别嫌麻烦版权的事一旦出问题费用比省下的时间贵得多。3. 实操全流程把一张上架宣传图从零做到可用3.1 动手之前先列出这张图到底要给谁看我见过很多研发包括我自己早期做宣传图的时候第一步就打开工具开始拖素材结果做了半天图里的信息全是功能清单用户看完根本不知道这个 App 能解决什么问题。正确的做法是先想清楚三个问题这张图放在哪个渠道看到这张图的人处于什么阶段这个 App 最核心的卖点是什么举个例子我给自己的待办清单 App 做宣传图时一开始也想把所有功能都放上去语音记录、多端同步、智能提醒、番茄钟、标签分类……后来挤牙膏一样排了一堆画面和信息都乱成一团。后来我把逻辑换成用户为什么需要你——对目标用户来说最痛的不是缺少功能多而是记录太麻烦。于是整张图只剩下一句话3 秒记录待办跨端随时提醒。这个转变之后宣传图的信息层级反而清晰了。动手之前先花二十分钟梳理这张图的策略比在工具里折腾两小时更值钱。3.2 两条路线套模板和从空白做实操层面有两条路线一条是套模板一条是从空白画布开始两条我都走过。第一次做的时候我强烈建议走模板路线。打开 Canva搜索App Store 截图或应用商店 推广选一个结构干净的模板然后把模板里的文字替换成自己的 App 名和卖点把示例截图换成自己的界面截图整个过程大概二十分钟就能出第一版。套模板最大的价值是让你直观看到一张合格宣传图应该长什么样——原来需要留白原来文字和截图的比例是这样原来背景色要压暗才能突出前景。模板路线跑通之后再考虑做品牌化。这时候可以从空白画布出发尺寸按渠道规范设置背景用自己品牌色渐变大标题、副标题、功能点、截图一块一块摆进去。有了前面套模板的经验你会清楚知道每个区域该放什么不会像第一次那样发怵。有一点要特别提醒模板是别人做的同一套模板可能被上百个 App 用过。如果你不想自己的宣传图跟竞品长得一模一样替换模板里的背景素材、图标风格甚至调整整体配色都是必要的。3.3 一张合格宣传图的模块拆解不管套模板还是从零做一张 App 宣传图的核心模块基本都是固定的。理解了这些模块你就能判断一张图到底合不合格。第一个模块是设备外框。要不要把截图放进手机模型里我的实测建议是纯 UI 截图比带 3D 手机模型的图更好用。原因很简单纯 UI 截图信息密度高用户一眼看到的是 App 本身而 3D 手机模型在手机小屏幕上会压缩 UI 的显示面积反而看不清界面细节。另外纯 UI 截图在 App Store 审核时也更稳定不容易因为模型渲染问题产生色差。第二个模块是文案层级。一张图上的文案通常分三层大标题说清楚这个 App 是什么、解决什么问题副标题补充信任依据功能点短句做细节支撑。大标题我建议不超过 8 个字副标题不超过 20 个字再多用户根本来不及看。第三个模块是背景与配色。背景是品牌色渐变大面积铺底或者干净的浅色底加简单图形装饰保证文字对比度足够。这里有个很实用的技巧如果大标题压在背景图上看不清就在标题后面加一层半透明遮罩问题立刻解决。第四个模块是功能点。不管 App 有多少功能宣传图上最多放 3 个功能点每个功能点用图标短句的形式呈现。比如我的待办 App 选的是语音输入、多端同步、智能提醒三个点图标统一用线性风格短句不超过 6 个字。3.4 导出环节容易出错的三条细节图做完了导出的时候反而最容易出问题。我总结下来有三条细节每个都踩过。第一分辨率按渠道最大尺寸做。不要按差不多做1280 也可以、1290 也可以最后提审被打回来重新导出的时间成本更高。我现在做 iOS 截图统一按 1290 x 2796 来做这是 6.7 英寸的最大尺寸往下兼容完全没问题。第二导出格式注意透明通道。App Store 的截图要求是 JPG 或 PNG且不能带 alpha 透明通道。如果你在画布里用了透明背景的 PNG 元素导出时保留了透明度上传后台就可能报错。我的检查习惯是导出后把文件拖到看图软件里看一眼背景是不是纯白或纯色。第三能用真机截图就别用模拟器截图。模拟器截图在分辨率上没问题但状态栏时间和机型渲染效果可能露馅尤其苹果审核对截图来源比较敏感。另外在安卓渠道上用模拟器截图还可能出现分辨率不符合特定机型要求的情况。我的做法是固定一台测试机专门用来截宣传图用的 UI 界面截完直接 AirDrop 到电脑再拖进画布。4. 批量生产多尺寸宣传图的省心套路4.1 先把最大尺寸做出来宣传图这东西永远不是只做一张。iOS 要一套截图安卓商店要一套主图官网要 banner社媒又要分享图。早期我是一个尺寸做一张每次都要重新排版效率特别低。后来我换了一个思路先做最大尺寸再往小尺寸衍生。最大尺寸能承载的信息最多文字和截图清晰度也最高在这个版本里把所有内容都排好到小尺寸时工作是删减而不是重排。比如我先做 1290 x 2796 的 iOS 主图把大标题、副标题、三个功能点、截图都放上去排版满意后再做安卓商店的 1080 x 1920 版本时只需要把部分功能点删掉、把截图位置调整一下十几分钟就能完成。4.2 复制页面改尺寸一个文件管所有渠道如果你用的工具支持多页面那这套流程能更省心。我在 Canva 里的做法是一个设计文件就是一个 App 的全部宣传图集合每个渠道对应一个页面。操作方法也很简单先做好最大尺寸的页面然后复制这个页面复制出来的页面再修改画布尺寸最后针对新画布微调元素位置。所有尺寸都在同一个文件里导出的时候一起导出省去反复切换文件的痛苦。这里有一个必须注意的细节修改画布尺寸之后元素位置不会自动适配到新画布。如果原图是 1290 x 2796改成 1080 x 1920 之后原来偏右下角的标题可能就会顶到画布边缘。所以每次改完尺寸都要逐页预览一遍确认没有元素被裁切或挤压。4.3 团队协作与版本管理也要一起搞定宣传图在发布前通常要过一遍产品、运营甚至老板的意见如果没有协作功能光是把文件传过来传过去就够烦了。多页面工具的好处在这里也体现出来把整个文件的协作链接发给同事他们可以直接在对应页面上评论我在编辑端能看到所有批注改完之后再分享一次。免费档的版本记录也够用改错了可以回退到历史版本。另一个很容易被忽略的是命名规范。我的习惯是App名-渠道-日期-版本比如TodoApp-iOS-0601-v3。这样后续找图、回溯版本都方便尤其是当团队不止一个人维护这套素材的时候命名乱掉会非常痛苦。5. 实测过程中遇到的坑与对策5.1 素材版权免费模板不代表全都能商用这个坑我前面提过一句但值得单独拿出来详细说因为实在太容易踩了。有一次我在一个模板里看到一个挺好看的中文标题字体替换成自己 App 名之后发现字体风格跟模板里展示的完全不一致仔细一看才发现模板里的字体需要单独购买商用授权免费预览版只能用有限的字重。后来我把整张图的文案都换成了思源黑体风格统一了版权风险也没了。图片素材也是同理。有些免费模板里嵌的底图来自付费图库如果你只用了模板但没有购买图库授权一旦用在商业发布里风险是实打实的。我的对策是图片尽量用我自己截的 App 截图、自己拍的实拍图或者明确标注 CC0 的图库网站。这样从源头上规避版权问题晚上睡觉都踏实。5.2 排版明明在电脑上好好的导出之后就乱了这是在线设计工具里很常见的现象编辑界面显示正常导出图片之后文字和元素位置偏差、缺字、重叠。原因通常是字体渲染不一致。我在 Canva 里用的有些字体电脑浏览器里渲染出来的行高和最终导出时的行高会略有差异如果图形里文字块贴得太紧就可能互相挤压。另外从大尺寸复制到小尺寸之后固定定位没有做好也会导致错位。对策有两个。第一关键文字不要贴着画布边缘放四周留出至少 50 到 80 像素的安全边距。第二每次导出之前把所有页面都点开预览一遍重点检查文字是否完整、标题和副标题是否有重叠。预览确认没问题再导出。5.3 导出之后看起来很糊原因不只在画布尺寸以前踩过一个坑我给官网做 banner画布是 1600 宽导出 PNG 之后感觉边缘发虚放大看字都是糊的。排查下来有三个原因叠加。第一是画布尺寸本身不够有些渠道要求 2 倍图1080 宽的图实际需要 2160 宽才能扛住高清屏幕。第二是素材分辨率不够拖进去的图片原图只有 800 宽但我把它拉大到了 1600 宽放大超过原图 150% 之后画质就会明显下降。第三是导出时选了压缩过的格式或低质量等级。现在的检查方法是导出前把画布里所有位图素材都检查一遍确认没有明显拉伸变形导出时选原画质关掉压缩选项导出后用看图软件按 100% 到 200% 放大检查文字边缘是否发虚。发现模糊就回到画布调整不将就着用。6. 更进一步把宣传图做成可复用的内部资产6.1 把做好的图沉淀成团队模板第一次做宣传图你会觉得新鲜第二次、第三次那就是纯重复劳动了。等你做过一次完整流程之后一定要把成品沉淀成团队模板。我的做法是把做好的宣传图文件复制一份清掉里面的实际文案和截图保留布局、配色、字体、Logo 的位置另存为一个母版。下次再发版只需要打开母版替换文案和截图导出完事。这一步做完你会发现后续版本的宣传图制作时间从几个小时压缩到了二十分钟以内。而且因为母版的布局是经过验证的排版质量的下限有了保障不会再出现乱排一气的情况。6.2 和自动化思路结合多语言版本不愁如果你的 App 要出海宣传图还要做多语言版本这里可以引入一点自动化的思路。我的做法是保留一份主母版所有文案层都放在固定位置然后复制出多个页面把每个页面的文字替换成对应语言。截图也可以配合工具批量处理安卓用 adb 截屏指令iOS 用 Xcode 模拟器脚本固定好机位和状态栏时间截出来的图风格统一。再进一步可以写一个简单的脚本读一份语料表格自动把主母版里的文案替换成多语言批量导出不同语言的宣传图。这里要注意别过度工具化自动化处理的是重复劳动但布局是否在每个语言下都正确还是需要人工检查一遍。文字长短不同排版很容易跑版。6.3 什么时候该找专业设计师这个边界要清楚最后聊一个没法回避的问题免费工具能做这么多是不是就完全不需要设计师了我的判断是看情况。如果你的 App 处于起步阶段、团队没有专职设计资源、需要快速迭代出图上架那这套免费工具半自动化的流程完全够用。我自己现在日常版本迭代的宣传图就全部走这个流程。但如果你的产品要正式做品牌升级或者要投大量付费广告素材又或者需要动效宣传视频那专业设计师的不可替代性就体现出来了。专业设计带来的品牌识别度、视觉冲击力、动效质感不是在线模板能比的。哪怕是这样研发用免费工具做的这版宣传图也不是白做——它可以作为给设计师的初稿把信息层级、卖点结构都定义清楚设计师在这个基础上去做视觉升级沟通成本会低很多。最后再分享一个小经验我第一次用免费工具做宣传图时也纠结过会不会太业余。但后来想明白了用户只会在手机屏幕前停留三秒钟宣传图的任务不是炫技而是让人一眼看懂你的 App 解决什么问题。工具免费不免费反而没那么重要把价值说清楚这张图的任务就完成了。