1.4 淘宝海报的各模块尺寸

淘宝店铺的装修体现着一家店铺的形象、气质、档次。在淘宝店铺中，不同的页面、不同的模块用到的海报尺寸是不同的，有淘宝网规定的标准规范。

1.4.1 设计小白如何理解像素？

像素（Pixel）是由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，而这些小方格的颜色和位置决定了该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者元素，不可分割的意思是它不能够再切割成更小单位抑或元素，它是以一个单一颜色的小格存在的。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上呈现的大小。

如果将图片放大到最大会出现一个个方格，这些方格称为像素点，下面来看看一个像素点究竟有多大。

1 新建一个宽度为1像素、高度为1像素、分辨率为72像素/英寸的文档，单击【创建】按钮，如下图所示。

2 屏幕中只有一个小亮点，很难看清，按住【Alt】+鼠标滚轮将图像放大至最大，如下图所示。

3 另外新建一个1万像素的文档，在1∶1情况下它的大小如下图所示。

下面通过实际图像来感受一下像素和像素点的大小。

1 在PS中打开“素材\ ch01\像素配套图.jpg”，我们看到的物理大小是不算大的，如下图所示。

2 我们将视图比例调为1∶1，如下图所示。

3 选择【图像】→【图像大小】选项，可以查看图像真正的大小和像素大小，如下图所示。

为了巩固大家对像素的理解，我们可以打开淘宝网，让大家用猜的方式加强对像素的理解。比如在钻展图的区域，凭肉眼看像素大概的大小，前文我们介绍了100万的像素大概是多大，也介绍了整个屏幕的宽度是1440像素，那我们就可以拿这张图来做对比，它大概占整个屏的宽度是多少，就可以算出图像的大概尺寸了，公式就是用1440像素除以图像占满全屏的个数。

下面看几个在设计中比较常用的尺寸1∶1情况下的大小，依次是700×700和950×400像素，如下图所示。

1.4.2 全屏1920海报设计规范

主流的计算机分辨率为1024×600像素、1366×768像素、1024×800像素及1400×900像素、1920×1080像素等，在做设计时需要考虑屏幕显示问题，并对不同的分辨率做适配。

1 打开“素材\ch01\1920海报规范用图1和图2.jpg”，选择【图像】→【图像大小】选项，查看图像大小是否是1920×650像素，如下图所示。

2 从“素材\ch01\1920海报规范用图1和图2.jpg”可以看出，设计的主题只在整个海报的中心，如下图所示。

1. C店（直系店铺卖家）的设计规范

1 新建一个1920×400像素的文档，如下图所示。

2 C店的中心尺寸是950像素，选择【视图】→【新建参考线】选项，在弹出的【新建参考线】对话框的【位置】中依次输入“485px”和“1435px”添加参考线，单击【确定】按钮，如下图所示。

3 添加参考线后的效果如下图所示。

2. B店（天猫店）的设计规范

B店的中心尺寸是990像素，依照C店参考线的操作，添加参考线，像素值为465像素和1455像素。C店的中心尺寸用红色表示，B店用黑色表示，对比图如下图所示。

1.4.3 基础950&990模块

通常的店铺装修主要应用的是950模块，下面我们来学习如何进行950模块的设计。

1．进入950模块的编辑

1 进入淘宝账号中的卖家中心，在左侧的列表【店铺管理】栏中单击【查看淘宝店铺】链接，可以看到店铺的首页如下图所示。

2 返回【店铺管理】栏中单击【装修店铺】链接，会弹出一个页面，单击【立即升级】按钮，如下图所示。

3 在【服务市场】页面，单击【一钻以下卖家可免费使用智能版，请点击这里立即使用】打开淘宝旺铺的智能版，如下图所示。

4 进入PC端，单击【首页】后的【装修页面】按钮，如下图所示。

5 再次进入PC端，单击【首页】后的【装修页面】按钮，进入店面编辑页面，如下图所示。

6 选择【950】模块，先将【图片轮播】【SALE特价】【本店搜索】等区域删除，如下图所示。

7 将所有模块删除后，单击【预览】按钮，可以看到店铺就只剩一个导航条，如下图所示。

8 放置店铺招牌时会出现【松开鼠标模块会放到这里】的提示，如下图所示。

9 导航条的位置可以通过上下箭头来调整，如下图所示。

2．自定义模块的编辑

页面编辑是直接从基础模块中拖曳出来的，950模块中出现的红包、满返、购物券、满减等，都需要配合营销来制作。最常用的就是自定义模块，自定义模块的编辑方法如下。

1 在左侧【基础模块】区域选择【自定义区】模块，按住鼠标左键，将其拖曳至右侧1920的【可添加模块】区域，之后单击【编辑】按钮，如下图所示。

2 单击【插入图片空间图片】按钮，如下图所示。

3 选择【上传新图片】选项，单击【添加图片】链接，如下图所示。

4 在弹出的上传图片页面中单击【点击上传】，如下图所示。

5 选中要上传的图片，单击【上传图片】按钮，如下图所示。

6 从图片空间中选中一张图片，单击【插入】按钮，再单击【确定】按钮，预览效果如下图所示。

3．图片的适配方法

可以通过裁剪的方式将主题部分完全显示出来，具体操作步骤如下。

1 在PS中打开“素材\ch01\1920海报规范用图1.jpg”图片，使用【裁剪工具】按钮，选择宽为950像素、高为650像素的分辨率进行裁剪，效果如下图所示。

2 单击【文件】→【储存为】选项，将其保存到桌面。在弹出的【JPEG选项】对话框中，将【图像选项】的【品质】设置为“10”，单击【确定】按钮，如下图所示。

3 重复自定义模块编辑的操作步骤第3～5步上传修剪好的图片，预览的最终效果如下图所示。

4 通过复制链接的方式载入图片，将鼠标指针放在载入图片上，会出现【复制链接】按钮，如下图所示。

5 单击【复制链接】按钮，在弹出的对话框中复制链接，如下图所示。

6 返回自定义内容区，单击【插入图片】按钮，在弹出的图片对话框中粘贴链接，单击【确定】按钮，如下图所示。

7 滚动滑轮条至底部，单击【确定】按钮，再单击【预览】按钮，即可看到效果图，如下图所示。

8 添加图片链接，在PC端页面装修页面，单击需要添加链接区域的【编辑】按钮，如下图所示。

9 单击【插入图片】按钮，双击图片弹出【图片】对话框，如下图所示。

10 在淘宝中找一个页面，复制链接，如下图所示。

11 返回【图片】对话框，将链接粘贴到链接网址中，单击【确定】按钮，如下图所示。

12 在自定义内容区，单击【确定】按钮，如下图所示。

13 在预览模式下，单击该图片任意位置都会跳转至步骤10的页面。

4．添加图片轮播模板

下面介绍添加图片轮播模板的方法，具体操作步骤如下。

1 拖曳图片轮播模板至合适区域，单击【编辑】按钮，打开【图片轮播】对话框，如下图所示。

2 在图片空间中复制图片链接，粘贴至图片地址文本框中，单击【添加】按钮，可以添加一张新的轮播图片，如下图所示。

3 再复制粘贴一个图片链接，单击【保存】按钮，即可得到效果图，如下图所示。

1.4.4 基础750&790模块

本节介绍750和790模块的设计方法，750模块是淘宝店铺中使用的模块，而790模块是天猫店铺中使用的模块，应用模块的具体操作步骤如下。

1 进入“店铺装修”界面，选择【PC端】，进入店铺首页的装修页面，在【布局管理】区域中添加相应的750模块，如下图所示。

2 选择左宽右窄的模式，返回编辑页面，选择750区域中的任意模块拖曳至此即可，如下图所示。

790模块的图片添加过程和750模块相同，在此不作详细介绍。下面介绍有关首页部分750模块的知识。

1 首页部分包括基础页、宝贝详情页和宝贝列表页，更细的划分如下图所示。

2 默认宝贝详情页使用的是750模块，单击进入默认宝贝详情页查看，如下图所示。

3 第3个入口在宝贝分类页，点击进入，如下图所示。

4 以海澜之家天猫旗舰店为例，在分类页面点击【夏季新品】，其模式就是默认宝贝分类页的布局，如下图所示。

5 单击任意一个宝贝，进入宝贝详情页，该图就是利用默认宝贝详情页做的，如下图所示。

1.4.5 基础190模块

190模块一般在店铺网页的左侧部分，在以往的设计中，190模块往往只会简单地做一些客服、价格搜索和手机店铺等模块，但现在无论是首页、默认宝贝详情页还是默认宝贝分类页都更加重视190模块的设计。

当搜索进入某家店铺时，最重要的是详情页，浏览详情页的时候很容易会注意到左侧的190模块，所以190模块的设计比首页设计更为重要，仅次于详情页的重要性。下面打开一个宝贝详情页作为参考，如下图所示。

190模块可以用到首页、默认宝贝详情页和默认宝贝分类页的设计当中，与750模块的功能一样。