研发做App宣传图，免费在线工具+模板全流程实操指南

做开发这么多年，我最怕的不是需求改来改去，而是某天运营同事突然在群里喊一句：“咱们App下周要上推荐位，你能出一张宣传图吗？”

这个场景我相信不少研发都经历过。手里正排着接口联调的任务，嘴上还得说“行，我看看”，实际上打开 Photoshop 的一瞬间，人已经麻了：图层、蒙版、钢笔工具、字体嵌入……每一个概念都比老项目的屎山代码还劝退。后来我为了给自己的App做推广素材，专门研究了一圈免费的设计工具，最后锁定的方案让整个研发小组都说省心。这篇不吹不黑，我把需求梳理、工具选型、完整实操到常见翻车点全部写出来，希望帮到那些被拉去“兼职设计”的研发，或者想给自己业余项目做宣传图的独立开发者。

1. 先说清楚：研发给自家App做宣传图，到底难在哪

1.1 需求从哪里来，为什么会落到研发头上

我身边研发给App做宣传图的，基本逃不出三种情况。第一种是初创团队或小公司，压根没有专职设计，产品、运营、测试、研发谁有空谁上。第二种是App本身的目标用户就是技术人群，运营觉得“你们程序员最懂你们自己的同行”，需求直接派到研发组。第三种是独立开发者做业余项目，从编码到上架到推广全是一个人扛，宣传图不自己做还能找谁。

这三种场景有同一个特征：预算有限、时间紧、需求琐碎。宣传图可能只是社群分享用的一张横图，也可能要给应用商店换一张封面，单独为这种事走一遍设计采购流程，既不现实也没必要。

很多研发遇到这种需求的第一反应是硬着头皮上，结果搭进去一整个下午，做出来的东西自己都看不下去。真正的问题不是你不适合做图，而是没用对工具和流程。

1.2 为什么说用传统设计软件“硬扛”不划算

先算一笔工具账。主流的专业设计软件按年订阅，对偶尔做一张图的研发来说属于纯沉没成本。更重要的是学习成本，钢笔工具怎么拉曲线、画笔怎么调压感、图层样式怎么叠加，这些技能不连续用一个月根本记不住，等你有空学完，运营那边要的图早就过期了。

再者，宣传图的产出频率其实比很多人想的高。一个版本要配套5到8张不同渠道的素材，运营每隔两三周就要换一批文案角度做测试。这种情况下，每一张图都应该在15分钟内完成，而不是花两个小时去画一朵云。

我见过不少研发朋友把宣传图做成了“功能说明书”：把App所有亮点全部堆上去，配色用了七八种，字体加了投影和描边。这样的图放出来，用户第一眼根本找不到重点。这里先把一个观念摆正：宣传图的本质不是“画得好看”，而是“把信息讲清楚”。

1.3 一张宣传图，本质上只讲三件事

我后来做宣传图之前，会先想清楚三个问题。这个App是什么，它解决什么问题，用户为什么现在就要下载。然后分别对应到主标题、副标题和行动按钮三块内容上。

主标题要短，八个字以内最好，直接说价值，比如“专注25分钟”“一键生成周报”“跨端同步待办”。副标题用来补场景，控制在半句话到一句话，比如“专为开发者设计的番茄工作法计时器”。行动按钮如果渠道允许放，就写“立即下载”，如果只是社群分享图，就改成一句轻量提示，比如“iOS/Android 均可使用”。

把这个文字骨架搭好，比打开设计软件早。文字逻辑通了，后面的排版只是把内容放到合适的位置而已。

2. 免费工具选型：一圈用下来，我为什么锁定它

2.1 免费设计工具的横向对比

市面上能白嫖的设计工具其实不少。我花了两个晚上把主流方案都试了一圈，简单分了几类。

如果你是完全零基础，想马上拿到一张能用的图，前面两个模板类工具上手最快。但如果你希望以后每张宣传图都省心，工具本身最好还要满足三个条件：模板更新快、素材可商用、导出不受太多限制。

2.2 最终选择免费版在线设计工具的理由

我最终把主力工具定在了免费版的在线设计平台上，理由很实际。第一，上手成本接近零，浏览器打开就能用，不需要安装客户端，公司电脑和个人电脑之间切换也方便。第二，它内置了大量App宣传场景的成套模板，从“应用商店封面”到“社交媒体信息流配图”都有，直接套模板比从空白画布开始省太多事。第三，免费版的图片和素材库对我日常做App宣传图来说完全够用，而且免费素材的授权说明写得比较清楚，普通推广场景不用太担心版权问题。

第四点是我最看重的：导出图片不带水印。做推广素材最怕平台水印糊在画面上，影响观感也没法直接交差。我实测免费版导出PNG和JPG都很干净。需要说明的是，不同地区和版本的套餐权益不一定完全一样，用之前花两分钟看一眼当前的免费权益说明，免得做到一半发现某个素材用不了。

2.3 两个备选路线：Figma模板和用代码生成宣传图

不是所有研发都喜欢在线拖拽，我身边也有同事更习惯写代码。备选方案有两个。

备选方案A是Figma的社区模板。在Figma里搜“App Store Screenshot”或“App Promotion”，能找到不少可以免费复制到草稿的模板。Figma胜在专业，模板的排版、字体、间距都比较讲究，适合想往设计方向进阶的人。缺点是需要适应图层和组件的概念，初次上手有点门槛。

备选方案B是直接写一个HTML页面，然后在浏览器里“另存为PDF”或者用无头浏览器截图。这个方式程序员会觉得很亲切，改文案就是改变量，批次生成也方便。我放一个最小示例在下面，用Puppeteer截图就能得到和HTML样式一致的宣传图。

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setViewport({ width: 1200, height: 628 }); await page.goto('file:///path/to/promo.html'); await page.screenshot({ path: 'promo.png' }); await browser.close(); })();

HTML里把主标题、副标题放在固定的容器结构里，替换内容就像替换模板字符串一样快。不过这个备选方案的坏处也很明显：视觉风格需要自己写CSS调，复杂背景和渐变没有可视化编辑器直观。我的建议是，日常快速出图用在线模板工具，周末想折腾或需要批量生成时再上代码方案。

3. 实操：给一款App做一整套宣传图的完整流程

3.1 第一步：先确认投放渠道和画布尺寸

打开工具之前，先回答一个问题：图是要放到哪里的。不同渠道对尺寸的要求千差万别，直接决定了画布是横的、竖的还是方的。

我常用的一组尺寸如下，具体以上线渠道后台的说明为准：

这里有个研发容易踩的坑：把社交媒体的尺寸拿去传应用商店，或者在网页上用手机竖图。我的习惯是先到渠道后台看一遍官方规格说明，然后用在线工具里的“自定义尺寸”新建画布，而不是盲目套模板。

顺便提一句，如果你要做的不是宣传物料，而是上传到App Store Connect的正式商店截图，一定按真机尺寸和官方要求来，别用营销尺寸糊弄，审核环节会被打回来。

3.2 第二步：用手机写文案骨架，而不是对着画布发呆

我见过很多研发拿到空画布之后，第一件事是去找背景图，结果图都放好了，才发现标题还没想好，只能现想。这个顺序是反的。先文案后视觉，效率至少高一倍。

拿我自己的一款“番茄闹钟”App举例。需求是三个场景的素材：应用商店封面、公众号头图、竖版海报。我先在备忘录里写下一版文字骨架。

主标题：专注25分钟。副标题：简单高效的番茄工作法计时器。辅助信息：Android 和 iOS 均可下载。行动提示：立即体验。

然后对着这个骨架想：主标题要不要更具体？“专注25分钟”偏功能，用户看了知道是计时器，但不知道和我手机自带计时器有什么区别。于是改成“为开发者设计的番茄钟”，副标题改成“专注25分钟，休息5分钟，自动循环”。这样画面上的信息就变成一个完整故事了。

文字骨架定下来之后，剩下的工作就是把这个内容放进符合场景尺寸的画布里，视觉只是容器。

3.3 第三步：搜模板、替换内容、删多余元素

在模板类工具里有一步很省心的操作：搜索“App 宣传”“应用下载”或者“科技产品”，会出来一堆成套模板。我的选择标准是“气质接近”：产品是效率工具，就选简洁的浅色模板；产品是游戏，就选有冲击力的深色模板；产品偏专业，就避免卡通元素太多的模板。

选好模板后，我一般按四个动作处理。第一，把模板里的主视觉替换成自己App的真实截图，这里强烈建议用真机截图，而不是模拟器截图，后者在细节清晰度上完全不一样。第二，把模板自带的文案改成我们定好的主标题和副标题。第三，把不需要的英文小字、装饰图形、多余按钮全部删掉，减少干扰。第四，如果模板主色和品牌色差异大，先在调色板里换成自家App的品牌色。

这一步做完，图的基本盘就有了，没必要从零开始排元素。模板的精髓是“骨架”，不是“素材”，我每次都会确保最终画面能看清自己的App长什么样。

3.4 第四步：文字层级和留白，决定这张图专不专业

很多让研发自己做的图一眼露怯，问题通常不在配色，而在文字层级。我的检查方法很简单：把彩色背景调成黑白或者眯着眼睛看，如果主标题、副标题、按钮之间分不清主次，那说明字号和字重没拉开。

我给自己定了一套规则。主标题用最大字重，字号至少是副标题的两倍；副标题只承担补充说明，不抢戏；按钮区域如果放了，就放在视觉重心附近；整张图四周保留至少10%左右的安全边距，因为很多渠道在展示时会二次裁切，贴边的文字最容易被切掉。

字体数量上，不超过两种。模板自带字体通常不止一套，我都删到只剩一个主字体加一个辅助字体，或者干脆全用同一种字体的不同字重。这里尤其别用那种花哨的装饰字体放正文，用户下载界面追求的是信息清晰，不是书法展。

3.5 第五步：导出前的检查和批量适配

导出之前有五个检查点。文字有没有被背景图案干扰，主视觉截图清不清晰，二维码有没有留出白边，是不是所有元素都在安全区域里，再扫一眼有没有模板自带的Logo或者图标残留。

确认无误后，用在线工具的“调整大小/副本”功能把当前设计复制成另一套画布尺寸，比如把1200×630的横图复制成1080×1920的竖版。每次适配都要手动微调，把多余留白删掉，把标题字号放大或缩小，而不是直接拉伸。

文件命名我习惯这么做：项目名_尺寸_版本_日期。比如 tomato_banner_1200_630_v2_0115，运营拿到文件后不会问“哪个是最新版”，这个习惯同行都说好。

4. 常见问题与排查手册

4.1 做出来的图总觉得“不像宣传图”，问题到底出在哪

这个问题我收到过很多次，而且截图发过来一看，基本是同一个原因：背景比文字抢眼。要么背景是密密麻麻的风景照，要么模板自带的装饰元素太多，用户的视线不知道该落在哪里。

我的排查顺序是先用黑白模式看布局，再恢复彩色看配色。如果黑白状态下主标题依然一眼就能聚焦，这张图的骨架就成立的，剩下的只是配色喜好问题。如果黑白状态下标题被淹没了，那就需要放大主标题字号、加深背景透明度，或者直接换成干净的纯色背景。

另外一个高频问题是“什么都有什么都想放”。功能列表、版本号、技术栈、奖项……这些东西对小尺寸宣传图来说全是噪音。一张图只保留一个核心信息，其他放下载按钮和App图标就够了。

4.2 导出后图片发虚、色差明显

免费版工具导出时偶尔会遇到画质问题，多数时候是导出格式和尺寸设置没选对。图片类素材优先导出PNG，别用JPG，后者压缩痕迹在深色背景下特别明显；如果平台限制尺寸，宁可缩小后导出，也别把一张小图放大了用。

色差也很常见。同一张图在电脑上看着正常，传到手机上却偏灰偏暗，多半是色彩配置问题。普通推广素材尽量在做好后导成SRGB色彩模式的图片，大部分在线工具会按此处理，但如果你用过专业工具二次编辑，就要留意颜色配置这一步。

还有一个小坑：在线工具里预览效果会比导出后的图片“显得更好看”，因为预览时浏览器做了缩放平滑。所以导出后一定要放到1:1比例下看一遍，别只看缩略图就交差。

4.3 素材和模板的版权问题，这个坑千万别踩

模板类免费工具最容易被忽视的坑是版权。普通用户能直接搜到的图片素材，绝大多数可以用于常规推广，但有几类东西要格外小心：平台自家的Logo和吉祥物、名人的照片、知名影视作品截图、带明显品牌商标的实物图。

我自己就栽过一次跟头。某次素材里出现了一个著名运动品牌的鞋子，当时觉得效果挺好，结果投放之后平台以“疑似品牌侵权”为由把广告下架了。从那以后我用素材只认一条原则：找不到明确授权说明的，一律不用。

如果你是给公司App做宣传图，还要多问一句公司和渠道的素材合规要求。免费工具提供的是“素材可商用”，不代表“在所有投放渠道都能用”，特殊行业或特殊渠道可能还有自己的规定，使用前花两分钟确认总比被下架划算。

4.4 应用商店审核不通过，大概率与设计有关

宣传图如果是用在应用商店的，设计不当真的会影响审核。我见过几种典型被拒情况：宣传图上的文字挡住了App界面里的关键按钮，使用体验描述和App实际功能不一致，用屏截图做宣传时没有用真实手机尺寸比例。

这里要区分一下：应用商店的截图和推广素材完全是两回事。前者必须符合设备规格，建议直接看开发者后台的硬性要求，每个尺寸都要对应到具体机型；后者是渠道投放用，看广告平台建议的营销尺寸。两边不能互相替代，我每次新建画布前都会先确认手里这张图最终会出现在什么位置。

审核相关的文案也需要注意，像“第一”“最”“100%”这类绝对化表述，在部分平台规则里有争议，用于宣传物料会增加审核风险。研发做图时容易把这些当营销话术随手写上去，我建议谨慎使用。

4.5 团队协作时文件混乱，比设计本身更费时间

免费在线工具的协作功能其实很适合研发团队用。只需要把设计文件链接分享到群里，同事点进去就能看，还能用评论功能直接在图上标注“这里底色改深一点”“这个按钮去掉”。比起把图片文件传来传去，最后在微信里分离出一堆“这张才是最终版”，效率不知道高到哪里去了。

如果团队里已经有设计师，更要利用好这个链接协作。我通常是先用模板工具做出初稿，把链接发给设计伙伴，对方在源文件基础上精细化就很快，省去了来回沟通的成本。

文件名命名规范这一点，无论用不用在线工具都很重要。我见过同事的文件面板里躺着“未命名-42.png”“最终版2.0.png”“真的最终版.png”，这种混乱在宣传图这种高频产出的项目里特别致命。建议命名里至少包含项目、渠道、尺寸、版本四个信息。

5. 把宣传图当作“组件系统”来做，研发的降维打击

5.1 复用你的品牌组件，而不是每次都从零开始

我做了几套宣传图之后发现，研发熟悉的“组件化思维”完全可以用在设计上。比如番茄闹钟App，我固定下来四样东西：品牌色板，浅蓝主色、深灰辅助、白色背景；字体方案，中文用思源黑体，英文用Inter；元素规范，圆角统一8像素，主标题间距统一40像素；Logo和App图标永远放在固定位置。

有了这套组件，以后不管运营要什么尺寸的图，我都只需要把内容放进对应的画布里，改改文字和主视觉，十分钟搞定一张。这比每次重新翻模板、重新调色快得多，而且出来的图风格统一，用户一眼就能认出是一个系列。

模板工具里的“品牌工具包”功能就是干这个的，把品牌色、字体、Logo、常用元素都存成一套组件，做新图时直接拖进来用。如果你用Figma，也可以做一套Design Tokens的思路来管理颜色和字体变量，更接近咱们写代码的思维。

5.2 文案和素材的版本管理要跟上

宣传图数量一多，版本管理就开始考验团队默契了。我的习惯是维护一张在线表格，记录每个渠道的当前版本、上次修改时间、用到的模板链接、最终导出文件名。运营提交文案修改时，我改完复制一版，在表格里更新状态，这样全组人都知道当前哪个版本是有效的。

素材文件方面，虽然在线工具有历史记录可以回退，但导出后的图片不可能每次都让别人重新打开链接看。所以命名规范必须遵守，再加一条：删除稿放进单独文件夹，不跟正式稿混着放。这套方法很土，但实用，至少不会再出现“你用的是旧版图”这种扯皮。

5.3 和专业设计师协作，工具不同但目标一致

最后说个边界问题。很多研发用了免费工具以后容易产生一种错觉：设计不过如此，以后全包了。这话我可不敢接。模板工具能解决的是80%的信息传达问题，剩下20%的品牌感、审美细节和创意，还是需要专业设计师来拔高。

所以我的建议是：如果公司有设计师，免费工具是你的提案神器。你需要一张图，但不想排队等两天，就可以先用模板做一版初稿，让设计师在初稿基础上快速调整，把沟通成本压缩到最低。如果设计师明确说这块由他们负责，也别抢活，你把文案和尺寸提清楚就够了。

我自己现在的状态是：独立项目用免费工具全流程搞定，公司项目用免费工具出提案，最终视觉交给设计师精修。这才是“省心”的正确定义。

6. 再进一步：用脚本批量生成宣传图，程序员最好的归宿

6.1 什么时候需要自动化

如果你的App需要适配十几个不同文案、不同语言、不同尺寸的投放素材，逐个手改显然不现实。这时候代码方案就是归宿。思路很简单：先用HTML/CSS把一套宣传图模板写成页面，再用无头浏览器对每个文案组合截图，一次跑完几十张图。

这个方案的优点对程序员几乎完美契合：文案在配置文件里改，尺寸在脚本中定义，跑一遍就是一批图，还不用担心手滑点错按钮。缺点是需要维护代码和页面样式，偶尔调整设计细节要改CSS，不像在线工具那么可视化。

6.2 一个最小可用的自动化流程

我用过的流程分四步。第一步，写一个HTML模板文件，里面用占位符放主标题、副标题和背景色。第二步，用Node.js读取一个配置数组，里面有所有文案和尺寸。第三步，用无头浏览器把每个配置中的占位符替换掉，然后截图。第四步，脚本按指定规范命名输出图片。

上面给的Puppeteer示例就是第三步的核心，很小的一段代码就能解决批量出图问题。我建议把HTML模板当作设计源文件来管理，配置数组当作素材配置来管理，以后改文案就改配置，跑一下脚本，全新的宣传图就出来了。

如果你不想维护一套Puppeteer环境，也可以退一步用在线工具的“批量创建”功能，把文案做成变量列表，一次生成多张变体。这个方式比脚本更简单，适合大多数日常场景。我自己是两手都备着，脚本解决语言替换和定时生成，在线工具解决临时改图。

6.3 自动化之后，反而更理解模板工具的价值

用了脚本方案之后，我对在线模板工具的价值反而看得更清楚了。模板工具帮你省掉的不是“操作时间”，而是“设计决策”。主标题多大、副标题放哪、按钮用什么颜色……这些都已经被专业设计师验证过了，你只需要替换内容，就能得到一个视觉合理的成品。

代码方案则把设计决策变成了代码参数，主标题字号是变量，间距是变量，背景渐变也是变量。这种控制力很强，但前提是你已经知道一个合理的基准值是多少。所以我的建议是先通过模板工具做几套图，积累出适合自己的设计规范，再把这些规范翻译成代码模板，顺序千万别反。

说了这么多，最后分享一个我自己的小习惯：每做完一套宣传图，我会把其中效果最好的一张单独存到“灵感库”里，下次做新版本之前先翻一遍。道具是死的，流程是活的，真正让你越做越省心的，永远是那套你已经熟练到不需要思考的操作路径。不管你是用免费模板工具还是写脚本，能把宣传图这件事稳定干完，对研发来说就已经赢了。