
1.4 上传发布
图片需要上传发布后才能被客户看到。很多卖家在上传图片之前,都会先对图片进行切片处理。
1.4.1 图片切片流程
研究表明,用户最满意的打开网页的时间为2秒以内,用户能忍受的最长等待时间为6~8秒,也就是说8秒是临界值,如果你的网站打开速度在8秒以上,那么很可能大部分访问者最终都会离你而去。如果等待12秒以上,网页还是没有被载入,那么90%的用户会关闭这个网页,不再等待。
如图1-12所示,这是一家网店的描述页,美工设计好图片后,将整张2.24MB的图片上传发布,打开页面需要1分钟;而在切片后,每张图片大小在120KB以下,只需2秒就打开了。可见,除网速因素外,图片大小也是影响页面打开速度的主要因素。页面打开速度快,跳失率自然就会降低。

图1-12 网店的描述页
现在我们来认识一下切片。打开Photoshop CC软件,在工具箱中找到切片工具,如图1-13所示。

图1-13 切片工具
第一种切片方法:
(1)打开一张需要切片的素材图片,并选中切片工具,如图1-14所示。

图1-14 打开素材图片
(2)在图片上单击鼠标右键,在弹出的快捷菜单中选择“划分切片”命令,如图1-15所示。

图1-15 选择“划分切片”命令
(3)根据图片布局,设置水平划分和垂直划分,如图1-16所示。

图1-16 设置水平划分和垂直划分
(4)图中切片编号01和02是一个整体,需要组合成一个切片,如图1-17所示。

图1-17 图片切片
(5)选择“切片选择工具”,或者按Shift+C组合键切换到切片选择工具,按住Shift键选中切片01和02,如图1-18所示。

图1-18 选中切片
(6)单击鼠标右键,在弹出的快捷菜单中选择“组合切片”命令,即可完成切片组合,如图1-19所示。

图1-19 组合切片
(7)切片组合完成后,有数字编号的蓝色方框为一个切片,导出后成为一个个独立的图片文件,如图1-20所示。

图1-20 有数字编号的蓝色方框为一个切片
(8)选择“文件”|“存储为Web所用格式”命令,或按Alt+Shift+Ctrl+S组合键,将切片文件存储为Web所用格式,如图1-21所示。

图1-21 将切片文件存储为Web所用格式
(9)选择保存位置,设置好文件名、格式(HTML和图像),“设置”选择“默认设置”,“切片”选择“所有切片”,单击“保存”按钮,如图1-22所示。

图1-22 保存切片设置
打开保存后的切片文件夹,就可以看到切片后的单独图片,如图1-23所示。

图1-23 查看切片后的单独图片
第二种切片方法:常规切片。选择切片工具,逐个框出切片的范围,如图1-24所示。在框选切片的过程中注意不要有切片交叉或空隙出现。切片完成后,存储为Web所用格式。

图1-24 常规切片
1.4.2 图片空间的使用
如何使用图片空间呢?这个问题其实很简单,首先要进入你的图片空间,这个图片空间是淘宝免费提供给广大淘宝卖家的,所以,只要你是淘宝卖家,就有一个自己的图片空间。
使用图片空间的具体步骤如下。
(1)进入图片空间,如图1-25所示。

图1-25 进入图片空间
(2)设置图片分类,选择图片上传,如图1-26所示。

图1-26 选择图片上传
(3)设置图片存储目标文件夹,然后上传图片,如图1-27所示。

图1-27 上传图片