![网店美工实操(全彩)](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=1739283714-4JXy3NEGcHFUFhdggXo68sHH2f4LUVq0-0-ab05ed66cb5b504c3a38636a21bd19f5)
图1-12 网店的描述页
现在我们来认识一下切片。打开Photoshop CC软件,在工具箱中找到切片工具,如图1-13所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1739283714-YS1cup04nShj7gGEgeQLigzGJloaOh4c-0-90b3753182dca17992f0b83828d8e4bc)
图1-13 切片工具
第一种切片方法:
(1)打开一张需要切片的素材图片,并选中切片工具,如图1-14所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1739283714-ZEBKrlqeHocugGVhu0DKDFIojWRA27nr-0-66d49e5db7193962878ed338e5a31b81)
图1-14 打开素材图片
(2)在图片上单击鼠标右键,在弹出的快捷菜单中选择“划分切片”命令,如图1-15所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1739283714-JABUkdEFs6BByWnbkn4U0aPnPFXXi2iT-0-f2f7b2138fda31b0f8d3edf7200ef708)
图1-15 选择“划分切片”命令
(3)根据图片布局,设置水平划分和垂直划分,如图1-16所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1739283714-mMFhG8WQygE9656a3mjEADv4tY6cibbT-0-f673428658eec713354cad6318fffa2d)
图1-16 设置水平划分和垂直划分
(4)图中切片编号01和02是一个整体,需要组合成一个切片,如图1-17所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1739283714-U2odWRwHIzhCyTTGekz3eqXS5t35VTUz-0-dd78a6154d8ed560cf1a8d8eae81065c)
图1-17 图片切片
(5)选择“切片选择工具”,或者按Shift+C组合键切换到切片选择工具,按住Shift键选中切片01和02,如图1-18所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739283714-MG065K8cq3vcuSc3iYWNdfoAP62Vyfj4-0-b9a9c3e81be72425c25797e1990aa2fa)
图1-18 选中切片
(6)单击鼠标右键,在弹出的快捷菜单中选择“组合切片”命令,即可完成切片组合,如图1-19所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1739283714-iaWZCYM1VFpdepulhG8sA4JtIan7qsgg-0-956992d4f540a57e3742618699865b61)
图1-19 组合切片
(7)切片组合完成后,有数字编号的蓝色方框为一个切片,导出后成为一个个独立的图片文件,如图1-20所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1739283714-7DmLkm8YOt9RFltZTmhJWGykGAOOhaoz-0-483e9a2023e23e73f7658d89c794ce0a)
图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=1739283714-KyC7AB7sJES6W91Fw4bzrIHP9XFJrhhg-0-cea5d485095a78cdf56f8cd0dd2c8d69)
图1-21 将切片文件存储为Web所用格式
(9)选择保存位置,设置好文件名、格式(HTML和图像),“设置”选择“默认设置”,“切片”选择“所有切片”,单击“保存”按钮,如图1-22所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1739283714-3SpR0O5vLcU3CeDA9bfhDDzAyuRpC6nC-0-00872776495c6d02c751f0dbf95b92e0)
图1-22 保存切片设置
打开保存后的切片文件夹,就可以看到切片后的单独图片,如图1-23所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1739283714-ZKaBvMbflElbQRG6ffogpIbvrC5GY5DM-0-1320f29735b6cc536b0462ab19c74c17)
图1-23 查看切片后的单独图片
第二种切片方法:常规切片。选择切片工具,逐个框出切片的范围,如图1-24所示。在框选切片的过程中注意不要有切片交叉或空隙出现。切片完成后,存储为Web所用格式。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1739283714-n3P9aFoeOHI5jdVG5eRSxrkm0qnBLl9N-0-41216ae99d500d23fa864fcfb78210d7)
图1-24 常规切片
1.4.2 图片空间的使用
如何使用图片空间呢?这个问题其实很简单,首先要进入你的图片空间,这个图片空间是淘宝免费提供给广大淘宝卖家的,所以,只要你是淘宝卖家,就有一个自己的图片空间。
使用图片空间的具体步骤如下。
(1)进入图片空间,如图1-25所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0002.jpg?sign=1739283714-DKLS17bb1BAotyYmevnyw7d1TAkKgTFI-0-7ad809745fcd114fec04792564ec2edf)
图1-25 进入图片空间
(2)设置图片分类,选择图片上传,如图1-26所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1739283714-3UPabVwiBPTOryuBHSmBjkoF42XvncC6-0-c7b078b127fc724476d1770e57bd6ca8)
图1-26 选择图片上传
(3)设置图片存储目标文件夹,然后上传图片,如图1-27所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1739283714-XQcK431T7jhbmfunmlnVx4IxUlKFBxzJ-0-204447bcca503a5be40abab6848096b1)
图1-27 上传图片