第 节 切片保存第七 章 页面设计实操.pptx

第七章页面设计实操;;;;本图是一个两皇冠的淘宝卖家的宝贝详情页，宽750像素，高14814像素。

保存下来，文件大小是4.9MB

这对网络来说是一个巨大的考验。因为，这个这么大的图片，在网络不太好的情况下，是要读取很久的。所以，很有可能消费者进到店铺，根本就没看到图，如果是这样的话？图都没看到，那怎么可能成交呢？;在一次店铺诊断的活动中，发现一家品牌知名度比较高的店铺，在图片切割时，使用的是等分的方式切割。这就出现了图中第一条红线位置，原来是一张完整的图，被切开成两半了。这种现象是绝对不允许出现的，

因为，后期这将些图排版到页面时，两图之间，可能会出现间隔，产生缝隙或白条，两张图就真被拆成两半了！;也曾经在诊断店铺时，发现学员的店铺，将一张宽750，高400的广告图，切割成如图所示的4小张。

询问时，回答是：“为了防止盗图”

如果将时间往回推到2000年左右的时候，技术难学，网速超级慢时，这是非常重要的技术，将图切割得非常小，甚至是不规则切割，让盗图难度加大的同时，最主要是提高读取速度。但后来，网络越来越快，存图技术也越来越简单，就没必要这样了;这里要为网店美工特别提醒一点：因为我们的设计，最终是在显示器、手机屏幕呈现，也就是说，我们用电脑设计时是用屏幕看图，最终的查看介质也是屏幕。而目前屏幕能够识别的分辨率是72像素/英寸，再高肉眼看不见的

所以，我们在设计时，就没有必要像做宣传单或画册设计时，使用300像素/英寸或更高的分辨率，那样只会增加电脑负担，让工作效率变低。而很多从事网店美工的设计师，来自线下的广告公司，整天担心图片不够清晰，所以也才会有这些错误存图的现象存在;为什么以上三种存图方式，到很多店铺去诊断时，非常容易出现呢？经过一次又一次的授课，问了无数的设计师，终于知道，原来他们是这样存图的：;按【Ctrl】+【字母O】键，打开要进行处理的图片。;很多人，用过PS一段时间，都会知道“文件”菜单有个命令“存储为…”，快捷键是Ctrl+Shift+S;命令“存储为…”命令时，可以选择多达10几种的保存类型，当然，当中会有在互联???最常用听说和用到的JPG格式;如果在上一步骤，我们点了“保存”按钮，就会到JPEG选项，很多人会在这里把品质设置为最大值12，其实，这个操作是我们在做平面设计时，保存给客户预览或给喷绘公司时使用的。互联网的图片，不用这种方法保存图片

因为，这样存图，没有真正用到互联网图片的优化，所以我们会看到这图保存的大小是1.9MB

那么，接下来，我们开始用互联网正确的存图方法吧;;选取切片工具。在PS左侧工具箱的“裁剪工具”按住鼠标1秒以上，会弹出多个工具，选择“切片工具”;将鼠标移到图像区域。按鼠标右键，选择“划分切片…”;设置水平划分为“4”个纵向切片，均匀分隔，如图所示，然后点击确定。;目前，切片是等距离划分的。所以，会看到切割的线条，会割在图像的中间位置，甚至会直接从人脸切过去。;所以，我们一定要将几条切割的线，调好位置，就是拉到空白的位置

这时候，我们要调用切片选择工具，可按Shift+C切换，或者直接从左侧工具箱选取;要调整切割线，操作方法是：按Ctrl++，将图放大，方便精确调整，用“切片选择工具”，单击选择切片，然后将鼠标移到线上，出现双箭头时拖动，就可以将切割线，移到白色空白的位置;点击“视图”菜单的“按屏幕大小缩放”，或者直接按快捷键Ctrl+0。查看整体效果，检查所有切片的线，是否都在空白位置;;使用“文件”菜单“导出”的“存储为Web设备所用格式”命令，这个命令太常用了，所以希望大家把快捷键Ctrl+Alt+Shift+S记住，并能够熟练用左手，单手快速完成按钮操作;这里，针对电商用的图片，我们兼顾图片品质的同时，考虑网络的传输速度，合理的设置是：

格式：JPEG，

品质：60，

勾选：连续。;很多人不知道，这个对话框，是可以用“切片选择工具”单独选取每一个切片，然后设置不同的图片品质，比如，我们把其中一张不是重点要表达的图，设置为：

格式：JPEG，

品质：36，

勾选：连续。

这张图保存出去品质会差一些，占用空间小，传输快;在上一步骤，点“存储”按钮后，我们还要继续设置。

选择我们要保存的文件夹

文件名要输入易记的

格式选“仅限图像”

切片选“所有切片”

然后，点“保存”按钮，即可;经过以上步骤正确保存的图，到文件夹查看，大小只有498KB，只有1.9MB的1/5左右。所以，今天这堂课，就显得特别的重要了，希望大家能够学好、用好