![零基础电商设计全套技能修炼](https://wfqqreader-1252317822.image.myqcloud.com/cover/319/34232319/b_34232319.jpg)
1.4.6 图片的切割、优化与存储
简单来说,图片切割就是把一张大图切割成若干张小图,然后再上传到网上去,避免因整张图太大,上传后导致网页加载过慢,顾客等待时间过长,造成不必要的顾客流失。假如我们对图片做了切片处理之后再上传,网页会逐个把切片图依次打开,这样网页的加载速度自然就快了,也就优化了顾客的体验。
1. 图片的切割
切片工具的使用,主要分为以下3个步骤。
01 执行“文件>打开”命令,打开需要进行切片处理的图片,如图1-91所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_40_5_m.jpg?sign=1739543274-oXgP4oMHe9y3iNwN3bkPKz9DDR0h43L7-0-7c12706dd3b9b99ce7215f5dcf13225a)
图1-91
02 执行“视图>标尺工具”命令,调出标尺。选择“移动工具”,然后依次从上方和左侧拉出参考线,并放置到合适位置,作为切割参考线,如图1-92所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_40_6_m.jpg?sign=1739543274-GNlkOnBEgrNJ3ntvu8a9kJea7jbfTi3B-0-2e7d45c91a063b3db226228cf0837a60)
图1-92
03 选择“切片工具”,然后单击选项栏中的“基于参考线的切片”按钮,即可根据画面中的参考线快速创建切片,如图1-93所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_41_3_m.jpg?sign=1739543274-a0lfH3m066TajKfG3u4oCyjrGB8lAXIF-0-2db1dbea4a3eef5168cd09f10d6c21f3)
图1-93
小提示
另外还有一种切片方法是可以根据自行设定的数值进行自动切片,即划分切片。选择“切片工具”,将指针移动到画布中,然后单击鼠标右键,在弹出的菜单中选择“划分切片”选项,如图1-94所示。之后在弹出的对话框中,根据需要设置切割的形式为水平划分或竖直划分,同时设置切片的个数或按切片的像素数进行切割,如图1-95所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_41_7_s.jpg?sign=1739543274-WOO9Hs1Tn4xbvjkk4lWPToAVVq3Ku1JM-0-9391c0e7af6463adbd998fa9bfaf1aac)
图1-94
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_41_8_m.jpg?sign=1739543274-pH94muqevTrNRuCqMmyjDYMrvrDZo8nZ-0-0e26dac8a325994f42b8069d878791bd)
图1-95
2. 切片图的优化
在切片的时候,有时候我们会发现一些不需要切开的地方却被切开了,这时候如何对其进行优化处理呢?主要可分为以下两步来完成。
01 执行“文件>打开”命令,打开“切片”素材,如图1-96所示。观察图片,会发现这张切好的图其实标题部分是不需要分割的,但被切开了。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_40_5_m.jpg?sign=1739543274-oXgP4oMHe9y3iNwN3bkPKz9DDR0h43L7-0-7c12706dd3b9b99ce7215f5dcf13225a)
图1-96
02 选择“切片选择工具”,然后在按住Shift键的同时,单击选中想要合并的切片,如图1-97所示。之后单击鼠标右键,在弹出的菜单中选择“组合切片”选项,即可完成切片的合并,如图1-98所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_41_2_l.jpg?sign=1739543274-zEw7LXKMXPM1u80FU53xyziSVP24L8Af-0-b1be190ae2a1ca9124668ff301fe40b4)
图1-97
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_41_5_l.jpg?sign=1739543274-Tq6qNvjPPmiKNLKVwnkVRYMKjO2uOBlr-0-6fa52a2e08a105bc1a9b61b67faee40f)
图1-98
3. 切片图的存储
当将图片按照需求切好之后,我们需要对其进行存储,然后再上传到网页中。
执行“文件>存储为Web所用格式”命令,如图1-99所示。在弹出的“存储为Web所用格式”对话框中设置“存储格式”为“JPEG”,“品质”为“80”,之后单击“存储”按钮,如图1-100所示。选择图片保存的位置,然后依次进行编号,并单击“保存”按钮,即可完成存储操作,如图1-101所示。
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_42_0_l.jpg?sign=1739543274-TiyMZoIO7PPrr2w31IPPeni7R9RBgEuP-0-a13254a70aba1d26fdf8a022d1cb454c)
图1-99
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_42_1_l.jpg?sign=1739543274-J13qrcAwXbYzNo1oVlnkHJ54cFLNzc60-0-3d9ba5ba3a64bfd491936e776852f915)
图1-100
![](https://epubservercos.yuewen.com/F5EAC8/18320272201285706/epubprivate/OEBPS/Images/image_42_2_m.jpg?sign=1739543274-cDIZPaUuqftmGO17vTIpPAgjHUw74ntP-0-138af43ec7c0a3b24e48341067f9828e)
图1-101