做开发这么多年我最怕的不是需求改来改去而是某天运营同事突然在群里喊一句“咱们App下周要上推荐位你能出一张宣传图吗”这个场景我相信不少研发都经历过。手里正排着接口联调的任务嘴上还得说“行我看看”实际上打开 Photoshop 的一瞬间人已经麻了图层、蒙版、钢笔工具、字体嵌入……每一个概念都比老项目的屎山代码还劝退。后来我为了给自己的App做推广素材专门研究了一圈免费的设计工具最后锁定的方案让整个研发小组都说省心。这篇不吹不黑我把需求梳理、工具选型、完整实操到常见翻车点全部写出来希望帮到那些被拉去“兼职设计”的研发或者想给自己业余项目做宣传图的独立开发者。1. 先说清楚研发给自家App做宣传图到底难在哪1.1 需求从哪里来为什么会落到研发头上我身边研发给App做宣传图的基本逃不出三种情况。第一种是初创团队或小公司压根没有专职设计产品、运营、测试、研发谁有空谁上。第二种是App本身的目标用户就是技术人群运营觉得“你们程序员最懂你们自己的同行”需求直接派到研发组。第三种是独立开发者做业余项目从编码到上架到推广全是一个人扛宣传图不自己做还能找谁。这三种场景有同一个特征预算有限、时间紧、需求琐碎。宣传图可能只是社群分享用的一张横图也可能要给应用商店换一张封面单独为这种事走一遍设计采购流程既不现实也没必要。很多研发遇到这种需求的第一反应是硬着头皮上结果搭进去一整个下午做出来的东西自己都看不下去。真正的问题不是你不适合做图而是没用对工具和流程。1.2 为什么说用传统设计软件“硬扛”不划算先算一笔工具账。主流的专业设计软件按年订阅对偶尔做一张图的研发来说属于纯沉没成本。更重要的是学习成本钢笔工具怎么拉曲线、画笔怎么调压感、图层样式怎么叠加这些技能不连续用一个月根本记不住等你有空学完运营那边要的图早就过期了。再者宣传图的产出频率其实比很多人想的高。一个版本要配套5到8张不同渠道的素材运营每隔两三周就要换一批文案角度做测试。这种情况下每一张图都应该在15分钟内完成而不是花两个小时去画一朵云。我见过不少研发朋友把宣传图做成了“功能说明书”把App所有亮点全部堆上去配色用了七八种字体加了投影和描边。这样的图放出来用户第一眼根本找不到重点。这里先把一个观念摆正宣传图的本质不是“画得好看”而是“把信息讲清楚”。1.3 一张宣传图本质上只讲三件事我后来做宣传图之前会先想清楚三个问题。这个App是什么它解决什么问题用户为什么现在就要下载。然后分别对应到主标题、副标题和行动按钮三块内容上。主标题要短八个字以内最好直接说价值比如“专注25分钟”“一键生成周报”“跨端同步待办”。副标题用来补场景控制在半句话到一句话比如“专为开发者设计的番茄工作法计时器”。行动按钮如果渠道允许放就写“立即下载”如果只是社群分享图就改成一句轻量提示比如“iOS/Android 均可使用”。把这个文字骨架搭好比打开设计软件早。文字逻辑通了后面的排版只是把内容放到合适的位置而已。2. 免费工具选型一圈用下来我为什么锁定它2.1 免费设计工具的横向对比市面上能白嫖的设计工具其实不少。我花了两个晚上把主流方案都试了一圈简单分了几类。工具/方案上手难度模板丰富度免费版限制适合人群Figma社区版中高多但偏专业组件免费版足够个人使用但学习曲线陡有一定设计基础或想学设计体系的研发稿定设计 / 创客贴低多国内场景多免费导出有次数和格式限制国内渠道分享图为主Canva可画免费版低非常多App宣传模板成套免费版无水印素材够用想快速出图的研发/独立开发者手写 HTML/CSS 再截图高无全靠自己无平台限制但维护成本高对代码更亲切、不怕折腾的研发如果你是完全零基础想马上拿到一张能用的图前面两个模板类工具上手最快。但如果你希望以后每张宣传图都省心工具本身最好还要满足三个条件模板更新快、素材可商用、导出不受太多限制。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 第一步先确认投放渠道和画布尺寸打开工具之前先回答一个问题图是要放到哪里的。不同渠道对尺寸的要求千差万别直接决定了画布是横的、竖的还是方的。我常用的一组尺寸如下具体以上线渠道后台的说明为准投放场景尺寸像素说明应用商店封面 / Icon 周边1024×1024部分平台还会缩放显示社交媒体分享头图1200×630也常用于公众号头图手机竖版海报1080×1920信息流、朋友圈场景较多网页横幅 Banner1920×600官网或活动落地页应用商店内截图如用于预览素材1242×2688 等按真机屏幕尺寸要求严格制作这里有个研发容易踩的坑把社交媒体的尺寸拿去传应用商店或者在网页上用手机竖图。我的习惯是先到渠道后台看一遍官方规格说明然后用在线工具里的“自定义尺寸”新建画布而不是盲目套模板。顺便提一句如果你要做的不是宣传物料而是上传到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 自动化之后反而更理解模板工具的价值用了脚本方案之后我对在线模板工具的价值反而看得更清楚了。模板工具帮你省掉的不是“操作时间”而是“设计决策”。主标题多大、副标题放哪、按钮用什么颜色……这些都已经被专业设计师验证过了你只需要替换内容就能得到一个视觉合理的成品。代码方案则把设计决策变成了代码参数主标题字号是变量间距是变量背景渐变也是变量。这种控制力很强但前提是你已经知道一个合理的基准值是多少。所以我的建议是先通过模板工具做几套图积累出适合自己的设计规范再把这些规范翻译成代码模板顺序千万别反。说了这么多最后分享一个我自己的小习惯每做完一套宣传图我会把其中效果最好的一张单独存到“灵感库”里下次做新版本之前先翻一遍。道具是死的流程是活的真正让你越做越省心的永远是那套你已经熟练到不需要思考的操作路径。不管你是用免费模板工具还是写脚本能把宣传图这件事稳定干完对研发来说就已经赢了。