淘宝天猫全屏海报制作方法详细教程
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第6章制作PC端网店首页
22
构图：构图的好坏直接影响海报的效果，构图主要分为左右构图、左中右三分式构图、上 下构图、底面构图和斜切构图6种。
左右构图
6.3.2 全屏海报的设计要点
23
配色：海报需要统一色调。在配色时，重要的文字信息用突出、醒目的颜色进行强调，通 过明暗对比以及不同颜色的搭配来确定对应的风格。海报的背景颜色应该统一，不要使用 太多的颜色，以免页面杂乱。
6.3.1 全屏海报的组成要点
20
全屏海报一般是由文案、商品图片、模特或背景中的至少两种元素组成的，下面分 别分别介绍。
文案：文案主要用来表现海报
主题，其组成部分包括标题、
01
副标题、促销信息等。
商品图片：可以让文案描述更
02
加具象化。
模特：模特是辅助商品展示的
03
元素。
背景：背景主要起烘托主题的
3 创建组 5 输入“农家果园”文字 6 输入其他文字
4 添加 Logo
6.2.5 制作通栏店招
17
7 输入其他文字 8 拖入水果素材 9 输入商品促销文字 10 绘制圆角矩形 11 绘制导航条
6.2.5 制作通栏店招
12 设置导航条文字
13 绘制矩形框 15 完成后的效果
18
14 设置色阶值
ห้องสมุดไป่ตู้
6.1 认识PC端网店首页 6.2 网店店招与导航条的制作 6.3 全屏海报的制作 6.4 优惠券的制作 6.5 商品分类的制作 6.6 其他板块的制作 6.7 课堂实训——制作女包PC端网首页
6.2.1 店招的制作要点
7
就淘宝网而言，按尺寸大小可以将店招分为常规店招和通栏店招两类。常规店招 为950×120像素，而通栏店招尺寸多为1920×150像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
淘宝里这种图片是怎么做的
篇一：最简单的教程,教你怎么做淘宝网店图片!纯手打很多人不知道做网店从那里下手，最难的恐怕还是图片问题，又不能一直在网上找人家做好的图片，废话不多少，一下是个人的经验，简单的处理图片，希望能帮助大家把自己的网店做的更漂亮！使用工具：photoshop主要ps工具：色阶 ctrl+l曲线ctrl+m可选颜色 alt+i+a+s ,菜单/图像/调整/可选颜色对比度 alt+i+a+c色相饱和度 ctrl+u裁剪c选区m移动vno.1 ,拍出来的图片太暗调整色阶，拉动两头的滑块，往中间部分拉，右边往左拉变亮，左边往右拉变暗，同时可以增加图像对比度，让图像更有立体感。
之后，如果还是感觉图像整体太暗，可以修改曲线，一般选择黑色的位置往上拉一点，图像就会平滑的增亮。
左下角调整深色位置，右上角调整高光位置。
no.2 ，单种主要颜色效果不好，偏色例如这一张，我要的白色不够白，调整可选颜色。
选择白色，把白色中的黑色去掉一点，就显的更白了。
果说这张的红色本身是偏黄的软色的，拍出来偏色的，太红了，我就选择红色的，然后调整洋红和黄色。
o.3 ，本来很鲜艳的产品拍出来不鲜艳，颜色饱和度不够调整图像饱和度，整体饱和度不好，就选择rgb 整体增加饱和度，想要突出单种颜色饱和度，就选择对应的颜色调。
我把红色的饱和度提高一点。
o.4 ，图像模糊调整对比度，有点饿图片拍好后会像蒙了一层纱一样，增加对比度就可以改善。
篇二：淘宝宝贝详细图制作方法淘宝宝贝描述模板制作教程现在好多新手都自己去下载宝贝描述的模板，但是又发现没有自己想要的，没有符合自己小店的，那下面我就教大家怎么做，宝贝描述的模板，其实道理是很简单的，做模板，最后只要得到代码就行了！呵呵废话不多说了现在就开始吧！工具： ps、dreamweaver第一部分，用photoshop制作出模版jpge图片。
这个我就不多说了这个我也教不了大家这个都要靠平时的积累和自己的美术功底不过，宝贝模板的主要模块总结就是以下就是几块：a商品的大图 b.商品的描述 c.买家事宜d.配送方法 e.店铺分类f.店铺连接我给大家看看我做的吧。
淘宝、天猫装修全屏静态海报代码
<div style="height:海报高度px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"> <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;"><!--可以HTML代码替换本区域开始--><!--可以HTML代码替换本区域结束--></div></div></div>红色的地方按照你的具体情况修改就行了，然后在添加的自定义模块里面黏贴到源代码那里就可以了，希望能帮到你！！！集市店铺首页单张图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;width:1920px;"><div class="footer-more-trigger" style="width:1920px;height:500px;left:auto;top:auto;margin:0;padding:0;border:0;"> <div class="footer-more-trigger" style="top:auto;left:-485px;margin:0;padding:0;border:0;"><imgsrc="/imgextra/i2/2154817394/TB2iTUYaXXXXXceXpXXXXXXX XXX_!!2154817394.png" border="0" style="float:none;margin:0px;" /></div></div></div>集市店铺首页多张图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;width:1920px;"><div class="footer-more-trigger" style="width:1920px;height:500px;left:auto;top:auto;margin:0;padding:0;border:0;"> <div class="footer-more-trigger" style="top:auto;left:-485px;margin:0;padding:0;border:0;"><table width="1920" height="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr><td><imgsrc="/imgextra/i2/2154817394/TB2IxQ4aXXXXXXIXXXXXXXXX XXX_!!2154817394.png" width="485" height="250" alt="" /></td><td><imgsrc="/imgextra/i2/2154817394/TB2VGg3aXXXXXbrXpXXXXXXXXXX_!!2154817394.png" width="475" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2XTg6aXXXXXamXXXXXXXX XXXX_!!2154817394.png" width="375" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2EMU4aXXXXXa0XXXXXXXX XXXX_!!2154817394.png" width="585" height="250" alt="" /></td></tr><tr><td><imgsrc="/imgextra/i3/2154817394/TB2kX77aXXXXXXTXXXXXXXX XXXX_!!2154817394.png" width="485" height="250" alt="" /></td><td><imgsrc="/imgextra/i4/2154817394/TB2kEQUaXXXXXa.XpXXXXXXX XXX_!!2154817394.png" width="475" height="250" alt="" /></td><td><imgsrc="/imgextra/i3/2154817394/TB2pKU4aXXXXXXYXXXXXXXX XXXX_!!2154817394.png" width="375" height="250" alt="" /></td><td><imgsrc="/imgextra/i1/2154817394/TB2U5E7aXXXXXXFXXXXXXXX XXXX_!!2154817394.png" width="585" height="250" alt="" /></td></tr></tbody></table></div></div></div>天猫店铺首页多图片自定义模块全屏代码：（红色部分都可以更改）<div style="height:500px;"><div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;"><div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;"><table width="1920" height="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr><td rowspan="2"><img width="465" height="500" alt="" src="/imgextra/i1/2074411095/TB2DDE1aXXXXXa.XXXXXXXXX XXX_!!2074411095.png" /></td><td><img width="495" height="194" alt="" src="/imgextra/i3/2074411095/TB2vhs1aXXXXXcoXXXXXXXXX XXX_!!2074411095.png" /></td><td rowspan="2"><img width="496" height="500" alt="" src="/imgextra/i4/2074411095/TB2ZD30aXXXXXc3XXXXXXXXX XXX_!!2074411095.png" /></td><td rowspan="2"><img width="464" height="500" alt="" src="/imgextra/i1/2074411095/TB287wZaXXXXXXSXpXXXXXXX XXX_!!2074411095.png" /></td></tr><tr><td><img width="495" height="306" alt="" src="/imgextra/i2/2074411095/TB2hNE3aXXXXXbjXXXXXXXXX XXX_!!2074411095.png" /></td></tr></tbody></table></div></div></div>天猫首页单张图片自定义全屏代码：（红色部分都可以更改）<div style="height:500px;"><div class="sn-simple-logo" style="padding:0px;left:50%;top:auto;"><div class="sn-simple-logo" style="padding:0px;left:-960px;top:auto;"><imgsrc="/imgextra/i4/2074411095/TB2Zv33aXXXXXcfXXXXXXXXX XXX_!!2074411095.png" alt=" 950全屏海报" /></div></div></div>--------------------------------------------------------------------------------------------------------------------<div style="height:4305px;"><div class="footer-more-trigger sn-simple-logo ks-switchable-panel-internal603"style="padding:0px;left:50%;top:auto;"><div class="footer-more-trigger sn-simple-logo ks-switchable-panel-internal603"style="padding:0px;left:-960px;top:auto;"><div style="width:1920px;">导出一切片代码放到这里{ 整个全屏首屏切好后 </table>到</table>的内容}</div></div></div></div>代码完结注：<div style="height:4305px;"> 这里的4305是高度要改成你导出来的高度尺寸"padding:0px;left:-960px;top:auto;"> 这里的960是宽度的一半，例：你的宽度是1900 那就要改成950 <div style="width:1920px;">这里的1920是宽度要改成你导出来的宽度尺寸悬浮导航代码：<div class="J_TWidget"data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-psm-shop-ww-hover','interval':0.1,'e ffect':'scrollx','activeIndex':1,'navCls':'user-bd11','contentCls':'user-hd11','autoplay':true}"data-widget-type="Carousel" style="position:relative;"><ul class="user-hd11" style="display:none;"><listyle="top:235px;width:200px;height:294px;right:50%;margin-right:505px;float:left;display:bloc k;">;</li></ul><ul class="user-bd11"><li style="left:80%;top:100px;width:200px;height:300px;margin-right:500px;"><table border="0" cellpadding="0" cellspacing="0" class="" width="200"><tbody><tr><td width="200"><p><img border="0"src="/imgextra/i2/395597533/T2QzXBX8BXXXXXXXXX-3955975 33.png" /></p></td></tr></tbody></table></li></ul></div>。
淘宝双11素材、淘宝双11活动促销海报及商家店铺装修模板使用指南
双11促销海报、素材在最下面双十一店铺模板装修说明书为了商家们能更方便的装修店铺，总结了以下几点店铺装修步骤，以供商家学习使用。
（*请使用google浏览器或者火狐firefox浏览器进行操作）一、生成装修代码第一步：打开网址: /go/act/tmall/htmlcodebuilder.php此页面为装修代码生成器，用户可通过此工具快速生成双11商品活动页面。
详细如下：通过下面的表单将商品信息填入，如图2-2：图2-2 商品列表1.商品列表信息中左边数字表示商品序号。
2.“商品图片”栏中填入商品图片地址。
（请把图片上传到到淘宝店铺装修图片空间内）。
3.“商品标题”中填入商品的名称。
（*文字必须控制在15个字以内，超过页面会乱掉）4.“商品链接”中填入商品的页面链接地址。
5.“现价”一栏中填入商品的双十一折扣价格。
6.“原价”一栏中填入商品的原价。
第二步：填入产品的相关信息,填写完毕如下图2-3显示:图2-3注意：商家可根据自己的需要填写多条商品，如只有5个商品，则只需要填写前5条即可。
若商家需要填入商品数量很多，页面上显示的个数不够，需要继续添加的，可将页面拉至底部，“在尾部添加一行”或者“在头部添加一行”两个按钮皆可以添加商品列表的数量。
如图2-4：图2-4 添加商品列表功能说明：“在尾部添加一行”添加后的数据显示在所有商品列表的最后面“在头部添加一行”则是在所有商品列表的最前面。
“清空数据”按钮可以清空在框内所写的所有商品信息。
将商品信息填写完毕后，可在页面右上角找到两个按钮，如图2-5；一个为“完成”按钮，一个为“关闭”按钮。
·点击“完成”，可对用户填写的商品信息保存，并在页面上展示商品信息填写完毕后的预览效果。
图2-9·点击“关闭”则不作保存！如图2-6；图2-5 编辑完成第二步：预览页面导出HTML代码（1）点击完成按钮之后可预览页面效果如下图2-6所示:图2-6 页面预览（2）页面内容确认无误后，点击“备份/还原数据”按钮。
电商2021教你打造一个优秀的淘宝天猫详情页!
电商2021教你打造一个优秀的淘宝天猫详情页！面对货比三家，非常挑剔的买家。
我们应该怎么从细节下手，去吸引我们的优质买家群体？细节，我们肯定联想到详情页。
那我们应该怎么做优秀，完美的详情页呢？下面，我就给大家整理的一套完美的思路，教大家怎么做好一个完美优秀的详情页！！〔文章有局部内容是来自其他网络〕一丶详情页有什么用？为什么我们要用详情页？详情页中的主图，就相当于是我们的人脸，详情页的图片丶文字丶媒体，文案等就是这款商品的简历，整个详情就如同一个店铺的核心，是从买家观看阅读直到转化最重要的一个细节，当然详情页也是展示宝贝重要的核心卖点、详细产品、品牌象征，赢得客户的收藏，转化重要的“基地〞！那对于我们的买家，卖家，平台详情页又代表着什么呢？！假如我们把店铺比方成一个超市里的一个商铺。
那么，与买家-详情页就是商铺的导购员，负责介绍消费者买家阅读的产品；与卖家-详情页就是铺中的展示柜，希望的是无死角去展现自己产品，对消费者买家形成诱惑力，加强购置欲；与平台，详情页是商铺的验收单，符不符合规定，有没有利益点，有没有成为“行业好商铺〞的典范？！二丶关键词1.导购员的关键词相貌端正，表里如一：1.脸面：主图干净明晰，说到主图，不可防止的就要谈到“牛皮癣〞的问题，其实根据不同类目有不同的要求，其实你只要把你作为一个客户，当你看到这张主图时，你会不会去点，不要老是说我要放这个我要放那个。
2.主图与详情页描绘商品要一致：主图描绘的商品要和详情页讲述的商品要是同一个商品，不可推此说彼。
3.店铺风格与主图丶详情页风格要一致：在这个问题上，千万不要发挥我朝人民“金玉其外败絮其中〞的“优良传统〞，要风格统一，不要远看高富帅，近看穷屌丝。
口齿伶俐，表达明晰:度：全方位讲解宝贝:可以从前后左右,亦可从上至下,甚至可以由表及里等方式仔细的介绍产品。
2.图文并茂：可看丶可读：图片的可看性强于文字，文字的可读性又强于图片，因此强强结合才是王道。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。
2、掌握版式布局的知识。
3、掌握文字的运用原则。
4、掌握文案设计与编写。
课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
天猫淘宝全屏代码的使用方法(附全屏代码)
天猫全屏页面图文教程第一步当然是给代码了，这个是我用的代码，图片和衔接也都是我的，大家可以复制在DW里打开直接更换。
<div class="J_TWidget mypoperpAAmyDpr" data-widget-config="{'effect': 'fade','circular':true ,'contentCls':'sj-tpAAmyDpr','navCls':'sj-npAAmyDpr','autoplay':'true'}" data-widget-type="Tabs"style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:5527px;overflow:hidden;padding-top:0px;"><div class="sj-tpAAmyDpr"><div class="J_TWidget" data-widget-config="{'contentCls': 'sj-contentpAAmyDpr','navCls': 'sj-npAAmyDpr','triggerType':'click','effect': 'fade','steps':1 ,'autoplay': true,'circular':true ,'prevBtnCls':'prev1pAAmyDpr','nextBtnCls':'next1pAAmyDprpAAmyDpr'}" data-widget-type="Carousel"><div class="pa2"><ul class="sj-contentpAAmyDpr"style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:5527px;overflow:hidden;padding-top :0px;"><listyle="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1920px;padding-right:0px;padding-top:0px;left :-485px;top:-20px;"><table border="0" cellpadding="0" cellspacing="0" class="" height="0" width="1920"><tbody><tr><td><img border="0" height="363" src="/imgextra/i2/1645086116/T27z1nXwtaXXXXXXXX_!!1645086116.jpg" width="1920" /></a></td></tr><tr><td><img border="0" height="356" src="/imgextra/i3/1645086116/T2aBmEXwFaXXXXXXXX_!!1645086116.jpg"style="float:none;margin:0px;" width="1920" /></a></td></tr><tr><td><img border="0" height="177.76" src="/imgextra/i3/1645086116/T2b8yeXD0XXXXXXXXX_!!1645086116.jpg" style="float:none;margin:0px;" width="1920" /></a></td></tr><tr><td><img src="/imgextra/i2/1645086116/T2JL9pXCFXXXXXXXXX_!!1645086116.jpg" width="1920" height="700.44" border="0" usemap="#dfsafasdasfsdf" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2bRuSXB4XXXXXXXXX_!!1645086116.jpg" width="1920" height="809.13" border="0" usemap="#adsfsdfdfdahzzcv" /></td></tr><tr><td><img border="0" height="743.66" src="/imgextra/i1/1645086116/T2W5ixXtpaXXXXXXXX_!!1645086116.jpg" usemap="#sdfsdfwetq" width="1920" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2wxmsXwBaXXXXXXXX_!!1645086116.jpg" width="1920" height="774.50" border="0" usemap="#Mapsdfaewqr" /></td></tr><tr><td><img border="0" height="749" src="/imgextra/i4/1645086116/T2Eb5pXl8cXXXXXXXX_!!1645086116.jpg" usemap="#ewrqewqrtyjkkwq" width="1920" /></td></tr><tr><td><img src="/imgextra/i4/1645086116/T2pxMfXhRbXXXXXXXX_!!1645086116.jpg" width="1920" height="804.63"border="0" usemap="#asdfsdfasfs" /></td></tr></tbody></table></ul></div>第二步将这段代码放入DW代码模式，第三步这部分设置页面大小的部分，从图上看，我的页面是5527的高度，（划红色圈），这里可以更改成你的页面大小。
天猫淘宝C店装修全屏海报代码
天猫淘宝C店装修全屏海报代码现在很多人都入驻淘宝网成店主商家，店铺的海报全屏海报各种麻烦，图片太大打开慢，清晰度低等等麻烦，而全屏海报通过代码完成的方法瞬间就高端大气上档次了。
下面向您介绍通过代码完成全屏海报的方法。
全屏海报用代码的方法1、天猫全屏海报代码<div style="height: 600px"><div class="sn-simple-logo" style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; top: auto; left: 50%"><div class="sn-simple-logo" style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; top: auto; left: -960px"><a href="链接地址" target="new"><img alt="0" border="0" src="图片地址" /> </a></div></div></div>2、就改几个地方第一个600是图片的高度这个你自己图多高就改多少中间一个 960 这个是根据你图片的宽度决定的就是你图片宽度的一半图是1920的那就是960 如果是宽1440的那就改720 以此类推再就是改链接地址和图片地址了另外在二级页面全屏效果需要发布后才能看到在装修页面是只能显示990的发布后就能看到全屏3、淘宝C店【首页】全屏海报代码把b店的代码改掉所属的类就行了，即：class="sn-simple-logo"修改成class="footer-more-trigger"示例<div style="height:自定义高度px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"><div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;"><!--添加任意全屏内容 --></div></div></div>以上就是全屏海报代码的方法。