![网店美工实操(全彩)](https://wfqqreader-1252317822.image.myqcloud.com/cover/382/23914382/b_23914382.jpg)
1.4 上传发布
图片需要上传发布后才能被客户看到。很多卖家在上传图片之前,都会先对图片进行切片处理。
1.4.1 图片切片流程
研究表明,用户最满意的打开网页的时间为2秒以内,用户能忍受的最长等待时间为6~8秒,也就是说8秒是临界值,如果你的网站打开速度在8秒以上,那么很可能大部分访问者最终都会离你而去。如果等待12秒以上,网页还是没有被载入,那么90%的用户会关闭这个网页,不再等待。
如图1-12所示,这是一家网店的描述页,美工设计好图片后,将整张2.24MB的图片上传发布,打开页面需要1分钟;而在切片后,每张图片大小在120KB以下,只需2秒就打开了。可见,除网速因素外,图片大小也是影响页面打开速度的主要因素。页面打开速度快,跳失率自然就会降低。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1738927276-5re0I3cWErRda3kREaJoLSOR1elHDA9J-0-2a1fa27f2bc0cbc6778c39a6a65a3035)
图1-12 网店的描述页
现在我们来认识一下切片。打开Photoshop CC软件,在工具箱中找到切片工具,如图1-13所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1738927276-ckd3WafpqyeV7y7vR2hOeX057s061tqc-0-21e8ae64a333d340ac0d098797e56c26)
图1-13 切片工具
第一种切片方法:
(1)打开一张需要切片的素材图片,并选中切片工具,如图1-14所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1738927276-TvKoAMX9B55oJp1vC9ZewT9VwUbsFtbp-0-f6349b482c433668e183489bcb742d09)
图1-14 打开素材图片
(2)在图片上单击鼠标右键,在弹出的快捷菜单中选择“划分切片”命令,如图1-15所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1738927276-Nu5Iqhzni7J1JNeMpdXe4FsatBSk7fro-0-d425d31d122d0f75c0a9b2b94eea7606)
图1-15 选择“划分切片”命令
(3)根据图片布局,设置水平划分和垂直划分,如图1-16所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1738927276-qS34LYRVkUqqN8X1FUtBQW657XfvGtBL-0-21e5b4d74fa361d73d0187eb4bb19fb9)
图1-16 设置水平划分和垂直划分
(4)图中切片编号01和02是一个整体,需要组合成一个切片,如图1-17所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1738927276-JxHTdIzgHNaJ5Xs4Jc3He0kz7PcFus0o-0-c1818295ddb9f6ca5fbdb2460476aaca)
图1-17 图片切片
(5)选择“切片选择工具”,或者按Shift+C组合键切换到切片选择工具,按住Shift键选中切片01和02,如图1-18所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1738927276-JfDYYA9FgU0aHCHj6eZ9WICgiaWOKM0P-0-40deea49b5c14b50e0947cbe520ceb2f)
图1-18 选中切片
(6)单击鼠标右键,在弹出的快捷菜单中选择“组合切片”命令,即可完成切片组合,如图1-19所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1738927276-wqmT3o0oV23pL19SXRbFYwehzuy8oTPm-0-33b291dc6d4629477cc296cc0ac1f9fd)
图1-19 组合切片
(7)切片组合完成后,有数字编号的蓝色方框为一个切片,导出后成为一个个独立的图片文件,如图1-20所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1738927276-kXqLMh2SfVfxrkwClvY2TTZAuc6V6sH2-0-376b29f60f7356146ddeeeb9aadd0839)
图1-20 有数字编号的蓝色方框为一个切片
(8)选择“文件”|“存储为Web所用格式”命令,或按Alt+Shift+Ctrl+S组合键,将切片文件存储为Web所用格式,如图1-21所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1738927276-1rMZYFPNgz4tkPnHwF4eoAa9bB9Tq72S-0-8697f8b0a62d078a5ed3219a62cd4828)
图1-21 将切片文件存储为Web所用格式
(9)选择保存位置,设置好文件名、格式(HTML和图像),“设置”选择“默认设置”,“切片”选择“所有切片”,单击“保存”按钮,如图1-22所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1738927276-5WK4ceqm8PfKh95EQ0SguhTe0jp4xXVd-0-a3c9a4425f07cd6ac4c4c20aa330984f)
图1-22 保存切片设置
打开保存后的切片文件夹,就可以看到切片后的单独图片,如图1-23所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1738927276-8QLcfhzM5HLSKakHhJZdGjzdcKYRqJgV-0-61bafa789aa995ac85144310d54cd6a5)
图1-23 查看切片后的单独图片
第二种切片方法:常规切片。选择切片工具,逐个框出切片的范围,如图1-24所示。在框选切片的过程中注意不要有切片交叉或空隙出现。切片完成后,存储为Web所用格式。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1738927276-SN6uBrIGCkxDRNuHDAwyXEM6pYdxYCCs-0-9dd072e5711244265ad4b185bd0c7e5e)
图1-24 常规切片
1.4.2 图片空间的使用
如何使用图片空间呢?这个问题其实很简单,首先要进入你的图片空间,这个图片空间是淘宝免费提供给广大淘宝卖家的,所以,只要你是淘宝卖家,就有一个自己的图片空间。
使用图片空间的具体步骤如下。
(1)进入图片空间,如图1-25所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0002.jpg?sign=1738927276-qxB11bqSjTe9EOndOcwS4fHe0QMyo08h-0-7bd3ef80de6c093b69c3a1a6f418ec6b)
图1-25 进入图片空间
(2)设置图片分类,选择图片上传,如图1-26所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1738927276-RtOLdZ1g4HZiLoXB1pUqrvMhqoYz0Rlm-0-805f09efcc0baf2cc8d342a6674b2881)
图1-26 选择图片上传
(3)设置图片存储目标文件夹,然后上传图片,如图1-27所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1738927276-kMsuKZW0JeYcFiAD2EI4a2Mxd371m68K-0-c4dce836c785d69683ee3109e2ba26f4)
图1-27 上传图片