电商banner横幅和首页焦点图：用AI出底图的实操路子

电商首页 banner 是改稿重灾区。同一个活动，PC 端是超宽横幅，手机端是另一个比例，焦点图轮播又要三四张。文案天天变——今天”满300减50”，明天加个”前100名送赠品”。运营催得急，设计师就在重复画背景里耗着。

AI生图能接走的就是这部分重复劳动：出 banner 底图、补不同尺寸、给产品打光。它做不了的是把文案排得严丝合缝——那个还得回设计软件。下面按一次大促前赶 banner 的真实顺序讲。

先认清banner的结构

一张电商 banner 拆开看就两层：底图层（背景氛围、产品、配色、光效）和文案层（主标、卖点、价格、按钮）。

AI生图管底图层。让AI直接出”带价格文案的完整 banner”是死路——生成图里的”满减”会糊、价格数字会粘连、字会拼错。文案层必须在设计软件（Photoshop、即时设计这类）里用真实文字图层做，因为价格要改、活动时间要改，图片里的字改不了。

图叮网页版无需安装，浏览器打开就能出底图，运营自己也能上手；设计师如果常驻 Photoshop，图叮的 PS 插件版能让出图和排版接在一个窗口里，少导一次文件。

PC宽屏和手机竖屏是两套banner，但底图可以共用一张主视觉

第一步：有产品图就走图生图，别凭空文生图

电商 banner 跟纯营销海报不一样——它几乎都要放真实商品。所以起手别用文生图凭空画，用图生图，把你的产品实拍图丢进去。

图生图是上传一张图当底子让AI改。电商场景的标准用法是：把产品实拍图放进去，让AI围着这个产品生成一个促销氛围背景——夏季清凉场景、节日喜庆场景、科技冷感场景，产品本身保留，只换它周围的环境。这样出来的 banner 里，商品是真货，不是AI瞎画的。

如果产品需要换个角度才好放进 banner，图叮的自适应角度溶图能把商品贴进新场景时让透视和光线对得上，不至于像生硬抠图贴上去那样违和。

第二步：产品溶图打光，让商品”长”在背景里

图生图换了背景后，常有个问题：产品的光是实拍时的光，背景的光是AI生成的光，两者对不上，看着就是”贴上去的”。

图叮的产品溶图打光专门解决这个。它给产品重新打光，让光线方向、冷暖跟背景统一——背景是暖色夕阳调，产品高光也跟着暖；背景是冷色科技调，产品反光也偏冷。这一步做完，商品才像真的摆在那个场景里，banner 的高级感大半靠它。

2026年5月一个做小家电的店铺赶 618 主图，运营小吴一开始嫌打光这步麻烦想跳过，直接拿图生图换了背景的图去用。结果主图里咖啡机是冷白光，背景是暖色厨房，违和得像两张图拼的。返工补了产品溶图打光之后，咖啡机的金属高光跟着背景暖了下来，整张图才立住。她后来说这步是”看着可省、其实最不能省”的一步。

第三步：扩图搞定多端尺寸

一张主视觉做完，PC 宽屏、手机竖版、轮播焦点图，比例全不一样。不要每个尺寸重新生成——主体会变、配色会飘，整套就散了。

图叮的图像扩展（扩图）把一张图往外补画。PC 端超宽 banner 缺左右，就用扩图把两侧背景延展出去，产品居中不动，AI顺着原图的渐变和纹理把两边补满；手机端要竖版，就补上下。主体始终是同一个，只是周围背景被续上，多端看起来是一套。

扩图擅长补的是纯色、渐变、墙面、天空这类延续性强的背景，电商 banner 背景大多是这类，所以命中率高。但如果产品已经顶到画面边缘，或者要补的是复杂物体，AI容易出错，这种就得换构图重出，别硬扩。

第四步：回设计软件排文案

底图、打光、多尺寸都齐了，剩下把文案摆上去——主标、卖点、价格、倒计时、按钮。这步必须在设计软件里做。

不能让AI带文案出图，核心原因是文案要改。大促价格临时调、活动延期、赠品规则变，这些只有可编辑的文字图层能改。而且电商文案排版有讲究：价格要最大最突出，卖点要分主次，按钮要显眼，这些层级关系是设计师的功夫，AI排不出来。banner 的转化率，很大程度押在文案怎么排上。

整套跑下来，AI接走的是出底图、打光、补尺寸这些重复活，把设计师从机械劳动里解放出来，省下的时间用在调构图、排文案、想卖点上。底图交给AI，文案留给设计软件，这套分工在大促赶图时尤其值。能出到什么质感，以图叮官网实际效果为准。

几个容易翻车的点

banner必放真实产品，优先图生图不要凭空生成。 电商图骗不了人，AI瞎画的”产品”用户一眼看穿。

产品溶图打光别跳过。 跳过这步，换了背景的商品就是”贴上去的”，违和感毁掉整张图。

多端尺寸优先扩图。 重新生成会让主体和配色飘，一套 banner 就对不上了。

文案回设计软件，价格务必用可编辑文字。 大促价格频繁改，图里的字改不动。

商用授权要确认。 AI生成图用于电商商业投放，各家工具的可商用范围不同，上线前去工具官网确认清楚，别默认能用。