电商设计——零基础学装修

时间：2022-08-03 15:09:02 | 来源：网站运营

时间：2022-08-03 15:09:02 来源：网站运营

电商设计中做需要认识的图片及专用名称

一、主图：800X800px，分辨率72（电商所用图片基本上都是这个分辨率，下面不重复写了）

所谓主图就是：展示产品全貌，可以前后左右，也可以是局部，反正就是给消费者展示我这个产品卖的是什么，加不加产品品牌Logo看运营。

展现形式：可以是拍摄图，有背景的，也可以是白底图，棚拍的（在摄影室搭建白布背景拍摄的图片），看店铺。

打开淘宝或天猫，随便搜索某个产品，出来的产品图就是主图，最右边一栏掌柜热卖，一般是直通车图，都是花钱买的，有些公司直通车烧不起，可能也不会要求做，这些主图是采集于店铺产品详情页里面的主图，如下：

所以，电商中，运营要我们做主图，就是放在产品详情页这个位置的，然后第一张会展示到外面平台界面。

二、打标图：800x800

所谓打标图，就是在主图的基础上，打上标签，所加内容有：活动价、到手价、价格、赠品、新品上市及时间、活动logo（双十一、双十二等电商活动都有特定的logo）等等，但这些内容都不会影响到主图观看。

例如：




这个加了活动价，就是打标，一般打标在四角或者最下面一行。

做打标图，一般运营都会提出具体要求的。

三、钻展图：PC尺寸：520-280，手机端：640-200

钻展图是需要付费的推广广告图，一般位置都是在PC/手机端首页，如下

手机端也是，打开手机淘宝，首页最顶部，轮播形式的海报图就是钻展图。

制作钻展图，运营会给文案或者利益点（打几折，领券，有什么优惠），制作要求就稍微高一点，公司花钱推广告，就是要引消费者看到能点击，点击进来了，才有可能转化消费支付，所以钻展图要费心点，但又不能做得很复杂，不是我们设计师觉得做的图好看就有点击率的，有时候特别丑的图，人家点击率就是高，那也是没有办法的。

钻展图制作参考，一个建议花瓣搜索，一个是看店铺有没有买可以看钻展点击率的服务功能，如果有，你可以要求运营给你开个帐号，去看看同行点击率高的钻展图是什么样的，只有你想不到的图，没有你做不到的图。

四、品销宝（N多尺寸，具体看运营需求，运营忘记给，就去问要尺寸）

我们能够常见的品销宝PC端位置是这里：

其他地方，我不知道运营推广到哪里去了，制作要求，运营会给，产品，文案，利益点等。

五、首页=店招+海报+页面排版

店招：一般尺寸是1920-150或者1920-120，这是全屏尺寸，但有些店铺没有购买阿里巴巴的智能模板，就做不了全屏了，那店招的尺寸可能就是950-120或者是950-150，看后台显示，怎么看，下面会讲，不要着急，继续往下看。

另外这里有个高度：150和120的区别，150高度的店招呢，就是导航栏做到店招同张图片上面去了，120高度的店招，是不包含导航栏的，其他都没啥区别。

这个就是店招，内容有logo、店铺名称，这是必须有的，另外可增加：收藏、关注、新品、优惠券等，有些店铺导航栏是跟店招连一起的，有些是分开的，所以具体情况，看你所在公司店铺之前是什么样的。

六、海报

这个海报尺寸看用什么样的装修方式了。

宽度是比较统一的，都是1920px，全屏的尺寸，高度就看具体情况具体分析。

一般1920-650尺寸的海报用的比较多，还有一个是1920-540的，是店铺后台所要求的；如果借助编辑器或者码工助手，高度就没啥限制了，都可以装修上店铺上去。

海报形式两种：一种活动页面的海报，就一张，随意发挥，借助编辑器或者码工助手都能安装上。另外一种就是平时页面，海报一般做轮播，这时候，最好统一一下尺寸，1920-650的最常见，个别店铺的要求的尺寸也有可能是1920-540，目前就遇到这两种，好像就是天猫店铺和淘宝店铺有略微差别的，到时候还是看后台所要求图片尺寸。

注意事项：在PS作图的时候，新建所需尺寸的画布，然后画1000宽度的矩形，居中对齐，拉参考辅助线两根，删除矩形，海报文案及主要的展示图都要在1000宽度范围内，不要超出，因为有些电脑屏幕没有1920那么宽，为了照顾那些小屏幕电脑能看全海报，所以内容最好集中中间一块，两边给与缩小的空间，淘宝和天猫都不是自适应网站（自适应网站，可以根据屏幕不同的大小，页面会等比例缩放，不是自适应网站，屏幕小了，页面不会等比例缩放，还是那么大）。

店招下面展示的就是海报，如下是轮播海报，放置的张数很多张，看到过最多的好像是六七张吧，也是看后台限制及编辑器的限制。

七、页面排版

首先是问运营需求，页面上需要放那些东西，然后再到咱设计师手里进行设计。

页面怎么设计，看自己造化了，哈哈哈哈，打开花瓣看看，平时注意收藏，打开淘宝天猫，看看同行或者其他行的页面排版，找找灵感。

我们公司目前是运营自己找好样式，然后我们根据运营提供的，优化成我们自己的风格就好了。

页面排版注意事项：一个是跟制作海报一样，拉1000宽度的参考线，好像是淘宝店铺吧，加热点有这个空间范围，其实是950来着，但为了好记，我都以1000宽度算。加热点就是加链接的意思，所谓空间范围，就是这个范围内加的链接，能打开，超过这个范围了，链接点不开。这个注意事项只针对那些没有买智能模版的店铺，只用码工助手或者后台原有的模块，就有这个限制，因此，你们可以打开各个店铺，有些店铺页面是这样的，产品比较集中在中间，两边是空的或者装饰性的图；有些店铺是可以全屏的，产品能布局到两边。

这就是买智能模板和没买的差别。

八、产品页=主图+详情（+关联+小广告）

主图上面已经讲过了，天猫和淘宝店甚至京东店，都一样的尺寸800-800，不再多说了。

详情：PC端（天猫尺寸：790-高度不限 淘宝：750-高度不限 京东：990-高度不限）

手机端（宽度640）

制作详情，第一步运营提出需求，产品卖点，提供文案，设计师构思，全淘宝网天猫网，找同行参考图，找国外的也行，进行简单的排版，非常简单，就是这个文案或者卖点，我要通过什么样的图表示，就把找的参考图放进去，一般用xmind或者excel表格，都能做这件事；有了大概参考之后，如果是新品，那就根据参考，找模特或者产品进行拍摄；如果不是新品，老品翻新详情，那公司就有图，拿来直接作图就好了。

做详情，多找找参考，不是坏事；如果公司有京东天猫淘宝店，那么一开始做详情，就按990的尺寸来，做完了，等完稿了，等比例缩小就好了；990尺寸定稿，另存为JPG格式，将JPG拖入PS，拉参考线，然后切片，最后是web格式保存。

注意：现在将就移动时代，有些公司要求低，PC端和手机端详情同步，那么我们做详情最好是竖版的，传统是横版的，竖版尺寸高度大于宽度即可，像990的宽度，我们设计的时候，一模块的高度大概1400，790的宽度，对应高度大概在1100，这个做多了，就把握个大概高度即可，没有特别标准。如果公司要求高，要求PC端一个版本，手机端另外一个版本，那就PC做横版，手机端做竖版即可。

做法如下：

1、按照自己设计的拉参考线，不要把图不完整的中间切开，最好是一块一块的内容，方便运营调整模块顺序，后期修改替换某张图片的时候，也会很方便。

2、切图：找到切片工具——基于参考线切片——然后图片就切好了

3、保存（重点！！！！！！重点！！！！！！重点！！！！！！）

保存快捷键：shift+ctrl+alt+s

按完快捷键，就跳出这个窗口了。

首先第一个：注意保存格式是jpeg的，也就是jpg；

第二：品质要100，如果显示小于100，自己手动拉到100即可，不然保持出来的画质是模糊不清晰的；

第三点H（高度hign首字母）超过了8000，那么第四点百分比的地方显示的就不是100%，W（宽度width）也改变了，不是990了，那么保存出来的画质也是模糊不清楚的，也是不能用的，这个时候，就关闭这个窗口，回到画布页面。

4、裁切页面

回到画布之后，用裁切工具裁切页面，最好从下往上拉，跟着有数值显示，数值显示高度小于8000的时候，根据所拉的参考线，切平即可，按enter键或者按上面打勾的地方，都可以。

然后再进行上面3保存切片的步骤，显示如下，可以看到箭头所标的数值都是正常的了：

然后再按储存，会跳出下面窗口：

建议文件名成后面写个1，因为后面还要继续保存后面剩下部分的图片，为了详情切片不打乱顺序，保存一次，就后面写个1，第二次，就写2，以此类推。

点保存会出来一个窗口，按确定就好了，保存完第一部分的图，我们继续回到画布，可以按ctrl+z撤销返回，也可以打开菜单栏——窗口——历史记录

点一些裁切前面一个步骤，就会恢复裁切前的完整详情页，记住之前保存第一部分的图片到哪个位置，裁切的时候，就把那部分先裁切掉，如下

裁切的时候，也是会显示剩余页面高度的，截图是截不出来的，自己操作一下就看到了；然后剩下的部分如果没有超过8000高度，那就直接web保存就好了，命名的时候后面加2；如果超过8000，那继续从下往上裁切，重复步骤，直到裁切完所有详情。

打开图片保存位置，就可以看到自动建的一个images文件夹

打开，看到的就是切片了

990尺寸的详情，我们就是完成切图了，出来把images名字更换成990，因为我们还要裁切其他尺寸，以免图片都保存到同个文件夹混乱，所以要更改命名，系统默认名称都是images。

6、更改尺寸

第一步，还是回到最初完整没裁切的详情页面，然后再更改尺寸，快捷键ctrl+alt+i，出来这个窗口：

如果窗口出来了，显示的单位不是像素，那就点一下，换成像素即可；这里可以看到宽度高度，链接他俩是一个类似锁链一样的图标，如果需要等比例缩放，这个锁链就要如我截图的那样是选中状态，如果是下面这种

点一下那个锁链，就好了，这表示对宽度和高度都上锁了，要变大家一起变。

单位是像素，锁链上锁了，直接更改宽度为790即可。

后面就是重复前面的步骤web格式保存，切图……后面切750、640尺寸，都是一样的步骤。

切图这块内容讲得蛮多的，因为有不少坑，对于新手来说，很容易就入坑里，还不知道自己错在哪里。

这里另外说一句，既然讲到web格式保存，那就讲讲png透明底图怎么保存，一种方法是另存为，直接能找到PNG格式的，另外一种就是web格式保存：

这个地方点开，一般选中png-24保存格式，然后保存即可。

这里可以看到，你要是会做动画，也能存为GIF格式的。

为什么要用web格式保存呢？前面我们说的主图、海报基本上都要web格式保存，因为这样保存出来都jpg小，另存为的方式，jpg可能几M，但web格式保存出来的，可能就几kb，用于网上的图片，大多数用这种方式，浏览页面的时候，打开图片速度快。

小重点：手机端图片切片高度都不能高于2500，京东的，好像是1500吧，我给忘记了，基本上后台都有显示的，不需要死记硬背，知道就行，PC端切片高度没有限制，但最好也不要太长了，太长了，图片就大，打开速度就慢。

详情内容就结束了，讲讲关联及小广告，如下：

大家注意观察的话，就可以发现，有些店铺正式详情开始之前，都会有这些广告，当然是店铺自家产品的广告，现在还没有活动，优活动的话，就是有活动海报+优惠券的图，那叫关联，天猫关联宽度790，淘宝关联宽度750，关联组成=首页海报+优惠券，没找到图，自己电商活动节日的时候，可以找店铺看看，这种关联，基本上都是电商活动的时候做的，平时几乎不做，顶多放些广告图。

到此，产品页就讲完了，内容有点多，看一遍消化不了的，多看几遍，然后自己上手操作几遍，就好了。

九、下面我们开始讲实操装修了

打开千牛卖家中心，进入卖家中心页面：

对于我们设计来说，主要用到的是店铺管理这块，最初运营给与帐号的时候，可能店铺管理下面是空白的，这时候，我们点一下店铺管理旁边的箭头，就会出来一排，后面有大头针的图标，点我们经常所需要用的：图片空间、店铺装修、查看淘宝店铺、手机淘宝店铺就可以了，以后再用的时候，就会直接在外面，不需要重复点箭头，方便了很多。

作为电商设计师，最好养成一个图片整理的习惯，不管是店铺的，还是自己电脑里的文件，对文件要命名，工作时间一长，图片就很多啊，可能一年后要用一年前的图片，要是整理不妥当，真的是找不到，大海捞针，很费时间。

目前根据工作经验，比较高效的文件命名方法是这样的：

美工组——日常——年——日+名称

这样以后寻找图起来非常方便了。

日常就是平时工作所做的内容，方便自己看自己都做了哪些东西，除去日常，若公司做好几个品牌，那么跟日常同等级别的，你就要新建XX品牌文件夹，YY品牌文件夹，把日常里面运营定稿的产品详情，就可以另存为一份到某品牌文件夹里面，再进行切图，把切图保存到某品牌文件夹里面去，方便其他同事找某个品牌的时候，就很容易找到产品详情、海报、主图及拍摄图了。

养成这个习惯，方便你我他，嘻嘻~~~

好了，进入正题！

图片空间：也是要建文件夹的，某个产品上新，某个活动页面，最好都命名好，方便以后图片空间不够了，知道那些图已经过时了，可以删除；图片空间的作用，就是店铺装修所用到的图片都要先上传到图片空间，这是装修的第一步。

店铺装修：开始装修页面了（我们这里主要讲没有买过智能模板的店铺装修，智能模板装修有特定的编辑器，光我以前用过的，就有四五个，很多，编辑器都不难，看一看，琢磨一下那些功能，就会了，方法都是想通的。）

装修页面也是主要讲首页装修，关联怎么上，至于详情怎么上，我真不知道呢，都是运营上的~

点击店铺装修，进入页面：

再点击店铺装修——点击PC端

可以看到首页是在基础页里面的，我们平常的页面，都会在首页装修，因为会放一段时间，做活动的时候，我们一般是自定义页，新建一个页面，最后做完发布，然后设置为首页，即可在PC端首页看到活动页面了。

这里方便讲解，我就新建一个自定义页讲解。

新建一个页面，然后命名一下这次活动名称，比如：2019五一劳动节，确定，就进入到装修页面了，要是进入不了，可能浏览器不好用，换个浏览器，这种情况是有的。

打开以后，我大概分为5块内容

1、模块：是跟2这块内容有关，用于各种编辑5这块内容的模块，也可说是功能区。

配色：很少用到，基本不用

页头：主要跟4店招的位置有关，主要是底色是纯色，还是上背景图片。

页面，就是跟5页面有关，主要是底色是纯色，还是上背景图片，跟页头一样。

2、功能区：直接左键鼠标按住某个功能，拖过去就好了。

宝贝推荐，基本上宝贝自动出来了，都不需要自己加产品了。

其他功能块呢，大家自己进入后台，挨个挪移遍，用一遍，就知道干嘛用的，我这边主要讲“自定义”这个功能。

3、可看到自己命名这个页面的名称，也可以跳到其他页面

我们目前所处的位置就是页面编辑，布局管理要特别讲一下。

我们看到现在页面5模块上面分为左右两栏，挺丑的，只有淘宝小店铺，没有专门的设计师，才会用这样的模式，所以我们要改一下页面布局。

点开布局管理

如图操作，多添加几个通栏单元

就会出现如上图所示的模块，把系统默认的上面模块，可以删掉，然后进入页面编辑，开始我们的装修。

4、店招

如图操作，点击编辑，有窗口，就可以开始装修我们的店招了。

新店铺，一般会显示默认店招，背景图可更换，店招高度及宽度，上面都有显示，950-120，默认店招上面也不能加链接，所以我们不会用默认店招，会用自定义店招。

不管自定义店招还是默认店招，宽度都是950，不算全屏1920，这个时候就要用到1模块的页头——背景图功能了，做一张1920-120的底图，通过页头上传，然后店招用950-120的尺寸，底图和店招用色什么的要一致，这样出来的全屏店招就毫无违和感了。

看着像是一张图，其实是两张图上下叠加一起的。

自定义店招里面，若店招上面只加一个链接，那么下面这种办法就能解决：

插入图片，图片地址就去图片空间复制，链接网址，一般是链接首页网址。

前面已经打开图片空间了，如若上传店招，鼠标放到店招图片上，就会显示出这四个图标，鼠标放上去，都会显示这个图标的作用，第二个图标就是复制图片链接的，点一下，复制了图片地址，再到页面编辑的地方，把图片地址复制过去，即可。

但是这种只能加一个链接的方式，往往是不能够满足店铺需要的，这个时候，我们就要借助DW或者码工助手了。

用DW：首先先下载好这个软件。

步骤：插入图片，但不加链接地址，然后点<>这个图标

复制这段代码到DW，放在<body</body>标签中间，然后点击左上角“设计”

鼠标单击图片，出现下面属性栏

选中矩形（旁边还有圆形和不规则图像，都是可以用的），在上面图上按住左键，进行拖拽自己想要的热点范围。

在链接中删掉#，复制链接地址，下面目标选择_blank（意思是点击链接，打开的页面新开窗口），然后再点击左上角“代码”回到代码页面

复制<body></body>标签之间的一段代码，回到我们的后台编辑页面，将这段代码代替刚才那一段，就好了。

确定保存。

用DW加热点，只要是后台系统默认的图片尺寸，比如950、790、750等，都可以用这种方式。

另外一种是借助码工助手。

码工助手的特点就是可以全屏，样式多样，

地址：https://dianshang.gaoding.com/tools

我用的比较多的就是第一个，然后就是全屏海报，其他的内容，都可以看看，功能很多，总有需要的时候。

我用第一个做示例，点开，可以给淘宝、天猫、京东、1688四个平台装修，目前你给哪个平台的店铺装修，就选择哪个；如果图片排列出来有空隙，一般去掉10px就够了；要是做的1920尺寸的图，那就选择全屏；然后复制图片链接地址，确认就好了

界面简单易懂，画好热点，加完链接，复制代码到页面编辑相应的位置，即可。

5、页面内容——自定义

一般页面通过设计，我们就会采用自定义的方式，将页面装修上去。

这里装修借助码工助手即可，方法不重复累赘了，自定义模块可以放很多个，基本上是够用的，装修完，可以点击右上角预览PC端，查看页面是否有问题，链接是不是都能点开，没问题了，再点击发布站点。

PC端首页，就这么装修完毕了。

现在说一说手机端的装修，那就很简单了，这里的美艳切图，用到的比较多，也就是手机端的自定义，载入图片画热点，加链接，保存，就好了，多个图片切片，那就多个美艳切图模块即可；手机端装修不需要借助外界任何软件编辑器，在这里就能完成装修。

其他功能模块，都可以点击看看，有些也是要用到的，比如轮播图模块，智能双列等。

然后讲一下关联和小广告怎么上，天猫和淘宝上关联方式不同。

天猫的就很简单，店铺装修——宝贝默认详情页

自定义模块，然后就用DW或者码工助手，就可以了。

淘宝的稍微复杂一点，有些店铺的运营用了神笔等其他辅助工具，我们如果还像天猫一样添加关联，可能造成重复，这个先问问运营，一般在公司做得时间比较长的运营知道，从哪里上关联。

讲到这里，实操部分，基本也结束了，希望能帮助到大家~~~~

额外补充点代码小知识，方便看得懂代码。

<img src=”图片地址”> img就是image在代码中的简写，大家看到img，就要知道，这个标签后面放的就是图片地址。

用处：如果一个店铺已经装修完毕，发现某张图有点小问题，不想重复加热点加链接，这个时候，在PS更改这张图的问题，不要改变这张图的尺寸，上传到图片空间，然后复制图片地址，找到img标签，替换它后面的图片地址，就可以达到替换图片的目的了，非常方便。

<a href=”链接地址”></a>，a标签就是用来放链接的地方，看到a标签，就知道，这里有个链接，知道就行，要更换链接的很少。

其他不多讲了，谢谢大家观看。