1.4 淘宝海报的各模块尺寸
淘宝店铺的装修体现着一家店铺的形象、气质、档次。在淘宝店铺中，不同的页面、不同的模块用到的海报尺寸是不同的，有淘宝网规定的标准规范。
1.4.1 设计小白如何理解像素？
像素（Pixel）是由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，而这些小方格的颜色和位置决定了该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者元素，不可分割的意思是它不能够再切割成更小单位抑或元素，它是以一个单一颜色的小格存在的。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上呈现的大小。
如果将图片放大到最大会出现一个个方格，这些方格称为像素点，下面来看看一个像素点究竟有多大。
1 新建一个宽度为1像素、高度为1像素、分辨率为72像素/英寸的文档，单击【创建】按钮，如下图所示。
提示：和屏幕相关的设计的像素都是72像素。
2 屏幕中只有一个小亮点，很难看清，按住【Alt】+鼠标滚轮将图像放大至最大，如下图所示。
提示：像素的本质就是一个像素点，这个像素点可以对应任意一种颜色。如果一个图像有1000万像素，就代表这个图像有1000万种颜色点，它的颜色既可以相同也可以不同，相当于我们拿显微镜看到的像素点。
3 另外新建一个1万像素的文档，在1∶1情况下它的大小如下图所示。
下面通过实际图像来感受一下像素和像素点的大小。
1 在PS中打开“素材\ ch01\像素配套图.jpg”，我们看到的物理大小是不算大的，如下图所示。
2 我们将视图比例调为1∶1，如下图所示。
提示：用户可以按【Ctrl+1】组合键将图像放大至1∶1。
3 选择【图像】→【图像大小】选项，可以查看图像真正的大小和像素大小，如下图所示。
提示：一般显示屏容纳最多的像素是1440×900，大概可以容纳140万个像素点，可见我们的素材图片有多大。
为了巩固大家对像素的理解，我们可以打开淘宝网，让大家用猜的方式加强对像素的理解。比如在钻展图的区域，凭肉眼看像素大概的大小，前文我们介绍了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”添加参考线，单击【确定】按钮，如下图所示。
提示：如何得出参考线值，（1920－950）÷2=485就是第一个参考线的像素值，485+950=1435就是第二个参考线的像素值。
3 添加参考线后的效果如下图所示。
提示：在做设计时，重要内容凸显在区域框内即可。
2. B店（天猫店）的设计规范
B店的中心尺寸是990像素，依照C店参考线的操作，添加参考线，像素值为465像素和1455像素。C店的中心尺寸用红色表示，B店用黑色表示，对比图如下图所示。
提示：两边区域是用来做搭配的，重要文案切记不要放在两边区域内。
1.4.3 基础950&990模块
通常的店铺装修主要应用的是950模块，下面我们来学习如何进行950模块的设计。
1．进入950模块的编辑
1 进入淘宝账号中的卖家中心，在左侧的列表【店铺管理】栏中单击【查看淘宝店铺】链接，可以看到店铺的首页如下图所示。
2 返回【店铺管理】栏中单击【装修店铺】链接，会弹出一个页面，单击【立即升级】按钮，如下图所示。
提示：淘宝一钻以下的商家可免费使用智能版，但需要按照提示立即升级，而一钻以上的商家，每个月需要缴99元旺铺智能版使用服务费。
3 在【服务市场】页面，单击【一钻以下卖家可免费使用智能版，请点击这里立即使用】打开淘宝旺铺的智能版，如下图所示。
4 进入PC端，单击【首页】后的【装修页面】按钮，如下图所示。
提示：在弹出的新手引导页面中，选中【老司机不需要引导】即可。
5 再次进入PC端，单击【首页】后的【装修页面】按钮，进入店面编辑页面，如下图所示。
提示：950模块主要应用于首页。
6 选择【950】模块，先将【图片轮播】【SALE特价】【本店搜索】等区域删除，如下图所示。
7 将所有模块删除后，单击【预览】按钮，可以看到店铺就只剩一个导航条，如下图所示。
8 放置店铺招牌时会出现【松开鼠标模块会放到这里】的提示，如下图所示。
提示：店铺招牌只能放在固定位置。
9 导航条的位置可以通过上下箭头来调整，如下图所示。
提示：某些模块不能添加时，可以选择布局管理，并添加布局单元，再返回页面编辑就可以添加相应的模块了。当在布局管理中把布局单元删除后，在页面编辑中无法添加相应的模块。
2．自定义模块的编辑
页面编辑是直接从基础模块中拖曳出来的，950模块中出现的红包、满返、购物券、满减等，都需要配合营销来制作。最常用的就是自定义模块，自定义模块的编辑方法如下。
1 在左侧【基础模块】区域选择【自定义区】模块，按住鼠标左键，将其拖曳至右侧1920的【可添加模块】区域，之后单击【编辑】按钮，如下图所示。
2 单击【插入图片空间图片】按钮
，如下图所示。
提示：店铺装修时，可以通过代码或图片两种形式上传图片。
3 选择【上传新图片】选项，单击【添加图片】链接，如下图所示。
4 在弹出的上传图片页面中单击【点击上传】，如下图所示。
5 选中要上传的图片，单击【上传图片】按钮，如下图所示。
6 从图片空间中选中一张图片，单击【插入】按钮，再单击【确定】按钮，预览效果如下图所示。
提示：因为我们使用的图片是1920图片，所以没有完全显示出来，无法看到主题内容。
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模块，单击进入默认宝贝详情页查看，如下图所示。
提示：默认宝贝详情页是所有宝贝都可以应用的部分，是750模块的第2个入口。
3 第3个入口在宝贝分类页，点击进入，如下图所示。
4 以海澜之家天猫旗舰店为例，在分类页面点击【夏季新品】，其模式就是默认宝贝分类页的布局，如下图所示。
5 单击任意一个宝贝，进入宝贝详情页，该图就是利用默认宝贝详情页做的，如下图所示。
1.4.5 基础190模块
190模块一般在店铺网页的左侧部分，在以往的设计中，190模块往往只会简单地做一些客服、价格搜索和手机店铺等模块，但现在无论是首页、默认宝贝详情页还是默认宝贝分类页都更加重视190模块的设计。
当搜索进入某家店铺时，最重要的是详情页，浏览详情页的时候很容易会注意到左侧的190模块，所以190模块的设计比首页设计更为重要，仅次于详情页的重要性。下面打开一个宝贝详情页作为参考，如下图所示。
190模块可以用到首页、默认宝贝详情页和默认宝贝分类页的设计当中，与750模块的功能一样。