AI+电商视觉营销设计课件 项目七 AI与直播电商视觉营销设计

AI与直播电商视觉营销设计项目七设计直播间设计直播宣传图任务一任务二实训AI助训目录/CONTENTS任务描述Taskdescription小赵不太熟悉直播间的相关设计，为了完成老李交付给他的任务（见表），打造出有吸引力、让消费者满意的直播间，小赵需要先学习直播间画面的构成、直播间各种元素的设计等相关内容，再进行直播间的设计操作。一、直播间的画面构成个完整的直播间通常包括直播账号名称、直播背景、主播、商品样品、贴片、评论区、互动按钮、购物车等多种元素。而从视觉营销的角度来看，直播间是一个立体的空间，可划分为4层：背景层、主播层、悬浮层、系统层。二、直播间的背景设计目前，直播间背景主要有两种形式：一种是利用真实场景布景，现场感与立体感强，但对布景、打光、物品摆放要求较高；另一种是使用静态图片或动态视频作为虚拟背景，虽在空间层次上相对简单，但具有灵活度高、易于更换的优势，便于配合不同直播主题快速变换内容。电商视觉营销一般采用虚拟背景，在设计时需关注以下要点。根据主流直播平台的技术规范与观看终端的显示特性，直播间背景的推荐宽高比通常为9∶16，标准分辨率为1080像素×1920像素，顶部需留出200像素，左右两侧需各留出140像素的“安全区域”，以确保画面在不同设备上不会被裁切或遮挡。规范尺寸12背景画面应精简有序，避免导致观众注意力分散。色彩宜选用柔和、明亮的浅色系，并与主播着装、商品色调协调，营造整洁、舒适的视觉环境。画面简洁34背景要与直播主题、品牌定位高度一致，以维持整体风格的一致性。主题契合背景元素的布局应疏密有度，同时规划好主播在画面中的位置和比例关系，使主题突出、画面协调。布局合理三、主播形象设计当前主播分为真人和数字人两种形式，真人主播可以灵活处理各种突发事件，并与观众实时互动；数字人主播可根据直播主题与商品类型灵活改变形象，并通过预设脚本实现长时间、标准化的直播，显著降低人力和时间成本。通常主播的形象需满足以下基本要求。服装得体主播的服装需与商品类型及直播主题匹配。仪容整洁主播需保持精神饱满的状态，注重脸部和手部的保养与护理，妆容应自然得体，不宜过浓或夸张。表达专业主播在镜头前应展现亲切、专业的形象，保持端正坐姿、口齿清晰、面带微笑，同时通过自然的手势与目光交流，准确传达商品信息并与观众有效互动。三、主播形象设计使用即梦AI生成的数字人主播四、直播间贴片设计直播间贴片是悬浮层的内容，其设计核心在于将商品信息、促销活动、主播信息、活动安排及常见问题解答等内容，以清晰、直观的方式即时呈现给观众，并在适当节点烘托气氛。根据在画面中的位置，直播间贴片可分为以下类型。01顶部贴片。02底部贴片。03侧边贴片。04位置与尺寸得当。05视觉效果突出。06文案简练易读。任务实施Taskimplementation一、使用豆包规划直播间设计本任务需要使用豆包规划直播间设计，规划内容涵盖直播间背景、主播形象、直播间贴片等关键组成部分的设计，然后根据规划结果生成对应的提示词，以便后续使用AIGC工具快速设计对应内容，具体操作如下。步骤01进入豆包首页，在文本框中输入提示词“‘笔格’办公文具品牌的网店在淘宝平台直播，已知该品牌的Logo使用极简风格，#4A6FA5作为色彩系统的主色，#FFD700和#EFEFEF作为色彩系统的辅助色，#FF7F50作为色彩系统的点缀色，当前网店开展开学季促销活动，请规划直播间设计，涵盖直播虚拟背景设计、主播形象设计、直播间贴片设计的具体内容，要求主播形象设计中包含一段开场白设计；总结出直播主题作为顶部直播间贴片的核心元素，侧边贴片展示活动具体内容”。一、使用豆包规划直播间设计步骤02单击

按钮，此时页面左侧将显示生成结果，如下。生成结束后，页面右侧将出现整理好的文档，单击右侧的

按钮下载该文档。一、使用豆包规划直播间设计步骤03在文本框中输入提示词“根据文档中的直播背景设计内容，给出可以生成对应直播背景的中文提示词，可舍弃部分生成困难的物体，不要添加在文档中”并发送，单击

按钮获取可生成直播背景的提示词，如下。一、使用豆包规划直播间设计步骤04在文本框中输入提示词“若使用女性数字人作为主播，请根据文档中的主播形象设计规划内容，额外给出可以生成对应数字人形象的中文提示词，不要添加在文档中”并发送，单击

按钮获取可生成数字人主播的提示词，如下。任务实施Taskimplementation二、使用即梦AI生成直播背景本任务需要使用即梦AI，结合调整后的中文提示词生成直播背景，直播背景需要预留出中间区域和中间右侧区域放置主播和贴片，具体操作如下。01使用即梦AI生成的4张直播背景二、使用即梦AI生成直播背景02涂抹元素03消除元素后的效果任务实施Taskimplementation三、使用通义万相生成数字人主播本任务需要使用通义万相生成数字人主播，并借助已有对白测试数字人主播的视觉效果，具体操作如下。01生成主播形象三、使用通义万相生成数字人主播02设置音频内容和音色03数字人主播效果任务实施Taskimplementation四、使用Photoshop设计直播间贴片本任务需要使用Photoshop分别制作顶部贴片和右侧贴片，其中顶部贴片内容为直播主题和仅包含图形部分的品牌Logo，右侧贴片内容为活动信息，具体操作如下。01添加文字和图形02顶部贴片最终效果四、使用Photoshop设计直播间贴片03主轮廓效果04右侧贴片最终效果设计直播间设计直播宣传图任务一任务二实训AI助训目录/CONTENTS任务描述Taskdescription老李对小赵设计的直播间效果很满意，于是让他填写表所示的任务单，继续设计直播所使用的宣传图。一、直播预热图的设计要点04030201直播预热图的尺寸多样，一般分为方图、竖图和横图样式，其中方图适合社群传播，竖图和横图常用在微博、微信等社交平台以及电商平台中。尺寸适配直播预热图常使用具有悬念感的文案、画面，搭配冲击力强的色彩，吸引用户的视线，并引起其观看直播的兴趣。营造视觉悬念直播预热图必须清晰展示直播主题、核心嘉宾、关键福利以及具体直播时间，增强记忆点。信息突出精准直播预热图需在醒目位置设计明确的“预约直播”“点击提醒”按钮或行动号召文案，并可利用从众心理，通过展示“已预约人数”来提升用户预约率。强化预约引导转化二、直播引流图的设计要点直播引流图有方图、竖图和横图样式，和直播预热图一样需

要根据具体的平台选择合适的尺寸。01直播引流图需要明确标注“直播中”“正在热卖”等状态，并展示吸引人的实时优惠信息，刺激用户进入直播间。02直播引流图常以展示主播形象以及主推商品为主，增强真实

感和销售氛围。03直播引流图常在醒目位置设计具有较强视觉吸引力、高对比度色彩的“点击进入”“立刻购买”按钮或文字，引导用户无缝跳转，降低行动门槛。04尺寸匹配投放场景突出实时性与利益呈现主播与产品强化行动号召三、直播封面图的设计要点尺寸规范。直播封面图在淘宝平台默认尺寸为1080像素

×1080像素，上传后系统会自动裁剪，不同投放位置裁剪比例不同。风格统一且契合品牌定位。直播封面图的视觉风格应与直播间整体氛围、品牌调性、主播人设高度一致，从而让用户建立连贯的品牌认知。主题突出、信息简洁。直播封面图应以主播形象或核心商品的高清特写为主，避免文字堆砌。任务实施Taskimplementation一、使用创客贴生成直播预热图本任务需要设计发布在微博的横版直播预热图，包含直播时间、地点、主播和主推商品等信息，具体操作如下。01挑选智能生成的直播预热图02直播预热图最终效果任务实施Taskimplementation二、使用Photoshop制作直播引流图本任务需要以直播间售卖的多种商品为核心，设计直播引流图，通添加文字和二维码，引导用户进入直播间，具体操作如下。01投影效果02调整素材后的效果03设置斜面和浮雕04最终效果任务实施Taskimplementation三、使用美图设计室生成直播封面图本任务需要使用抠除背景后的数字人主播图像作为核心元素制作直播封面图，为提升效率可使用美图设计室中的模板，替换模板中的主播图像和直播信息，具体操作如下。01选择模板02调整比例03调整布局三、使用美图设计室生成直播封面图04调整主播图像05直播封面图最终效果设计直播间设计直播宣传图任务一任务二实训AI助训目录/CONTENTSAssistanttraining实训1文心一言+通义万相+Photshop设计农产品店铺直播间AI助训实训要求：“山水原”农产品店铺计划开展一场助农公益直播，现需要为此次直播设计配套的直播间。设计团队为提高效率，准备先使用文心一言生成直播间背景规划方案，要求包括直播背景、直播间贴片设计等内容，再基于该方案使用通义万相生成直播背景图，并在Photshop中进行处理与制作直播间贴片，参考效果如图所示。AssistanttrainingAI助训实训思路：步骤01品店铺计划开展一场助农公益直播，需要设计直播间，请给出直播间设计规划方案，要求方案仅包含直播背景设计和直播间贴片设计内容”。步骤02单击

按钮，文心一言将生成方案。单击“更多”按钮，在弹出的列表中选择“下载到本地”选项进行下载。步骤03在文心一言文本框中输入提示词“基于上面的背景设计规划，为我生成可以生成对应画面的中文提示词”，单击

按钮，稍后文心一言将生成提示词，参考示例如下，复制提示词。AssistanttrainingAI助训步骤04进入通义万相“生成”页面，在文本框中粘贴提示词，设置创作模型为“万相2.6”、比例为“9∶16”，单击

按钮生成图片，从生成的4张图片中挑选满意的一张，单击

按钮下载。步骤05启动Photshop，新建名称为“农产品直播间”、尺寸为“1080像素×1920像素”、分辨率为“72像素/英寸”的文件。置入乡村场景图和“枫叶.png”文件，调整大小和位置。借助参考线划分出顶部和两侧的裁切区。步骤06为乡村场景图创建图层蒙版，设置前景色为“#000000”，使用“画笔工具”的“柔边圆”画笔样式调整图像顶部显示范围。新建图层，使用“画笔工具”的“柔边圆”画笔样式在顶部绘制填充为“#e0f3fb”的天空。AssistanttrainingAI助训步骤07选择“横排文字工具”，输入主题文字和宣传文字，调整文字属性。再为主题文字添加大小为“10像素”、颜色为“#ffffff”的“描边”图层样式和颜色为“#cb4521”、不透明度为“75”、角度为“90”、距离为“28”、大小为“24”的“投影”图层样式。步骤08在宣传文字下方使用“矩形工具”绘制填充为“#ffa400”、描边为“#ffffff”、描边宽度为“4像素”、圆角半径为“23像素”的圆角矩形，完成顶部贴片的制作。步骤09使用“矩形工具”在画面右侧绘制一个填充为“#fdedc1”、圆角半径为“60像素”的大圆角矩形，一个填充为“#ff6b09”、圆角半径为“13像素”的小圆角矩形，一个填充为“#ff6b09”的矩形，调整大圆角矩形的不透明度为“53%”，再将矩形与其创建为剪贴蒙版。AssistanttrainingAI助训步骤10使用“横排文字工具”在大圆角矩形上输入“点击查看”文字，在小圆角节”，完成右侧贴片的制作。步骤11使用“矩形工具”在画面底部绘制填充为“#ffffff”、圆角半径为“25像素”的圆角矩形，并调整不透明度为“73%”。选择“横排文字工具”，在其上输入“现货直发”文字，调整文字属性。步骤12复制两次圆角矩形和其上的文字，调整位置后，修改文字内容，完成底部贴片的制作，保存文件。Assistanttraining实训2使用即梦AI+Photshop设计直播宣传图AI助训实训要求：进入即梦AI“生成”页面，在文本框中输入宣传图背景生成提示词，参考示例如下，设置模型为“图片4.5”、比例为“9∶16”，单击按钮生成4张图片，挑选满意的一张下载。AssistanttrainingAI助训实训思路：步骤01进入即梦AI“生成”页面，在文本框中输入宣传图背景生成提示词，参考示例如下，设置模型为“图片4.5”、比例为“9∶16”，单击

按钮生成4张图片，挑选满意的一张下载。AssistanttrainingAI助训步骤02输入生成人物的提示词，参考示例如下，调整比例为“1∶1”，单击

按钮生成4张图片，挑选满意的一张，使用“消除笔”功能去除不和谐元素后下载图片。步骤03启动Photshop，打开农夫图片，按【Ctrl＋J】组合键复制图层，使用“主体”命令、“魔棒工具”将农夫图像抠取出来。此时抠取出的图像白边比较明显，使用“选择”/“修改”/“收缩”命令处理。若还