![网店美工实操(全彩)](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=1739331832-UeqGLNl65cLm8Zn2VHaOKmUKG5MwIQlH-0-c4c974f970c3dec2d9f831a4f88c578a)
图1-12 网店的描述页
现在我们来认识一下切片。打开Photoshop CC软件,在工具箱中找到切片工具,如图1-13所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1739331832-tzjintFJEKyXWhRdm0U5b1mwvFYSSPH2-0-3cf0a23ed9dd3b2c293130b09ded0c0f)
图1-13 切片工具
第一种切片方法:
(1)打开一张需要切片的素材图片,并选中切片工具,如图1-14所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1739331832-EVZ3gNJBQQ3lTqjOg6ZeFDxpNlxb2JKu-0-75cc824ab67d1a037050dfe32deb5836)
图1-14 打开素材图片
(2)在图片上单击鼠标右键,在弹出的快捷菜单中选择“划分切片”命令,如图1-15所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1739331832-DCPRyl52BNLzTwcji7Wl37rhPWqgLjFW-0-a7c97ab136d2fd9fec2531ed6f9934b5)
图1-15 选择“划分切片”命令
(3)根据图片布局,设置水平划分和垂直划分,如图1-16所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1739331832-14WgRm3SqyrOuKkggFX7fwOWh9Bb4UD9-0-5efa34a48c5306c2364c4964da4bccb7)
图1-16 设置水平划分和垂直划分
(4)图中切片编号01和02是一个整体,需要组合成一个切片,如图1-17所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1739331832-G6BmGisULor4nBCjXcvqwHHdQVo0boll-0-76ff7d0c1fed919cbb4030ee76ead729)
图1-17 图片切片
(5)选择“切片选择工具”,或者按Shift+C组合键切换到切片选择工具,按住Shift键选中切片01和02,如图1-18所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739331832-oJj4680JDmt9edoXMiM42FCUzB45cPWd-0-139bcdfbbc653c626a4e775265bd9d93)
图1-18 选中切片
(6)单击鼠标右键,在弹出的快捷菜单中选择“组合切片”命令,即可完成切片组合,如图1-19所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1739331832-N9WchWM2SV9lq2rLxATgUEJ80VHic37N-0-04a87078aeb09d786cfe261aa1e53db2)
图1-19 组合切片
(7)切片组合完成后,有数字编号的蓝色方框为一个切片,导出后成为一个个独立的图片文件,如图1-20所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1739331832-JNtsPG0cyQglwaatxaRw80bHxcz1QfvB-0-797bae13b86c7e15037136c5eb01a339)
图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=1739331832-r2cKbsV5YTDNdfl7ZAQKhCnud4FSHlfy-0-b43eabc78a1adab39649e5c6168f2fac)
图1-21 将切片文件存储为Web所用格式
(9)选择保存位置,设置好文件名、格式(HTML和图像),“设置”选择“默认设置”,“切片”选择“所有切片”,单击“保存”按钮,如图1-22所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1739331832-rkZBy1dD2X8CJBSDmy9ahLkadFDBFr9I-0-df8ea905f98f3b649ebbbf3e69153340)
图1-22 保存切片设置
打开保存后的切片文件夹,就可以看到切片后的单独图片,如图1-23所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1739331832-mOXpZl74Xq5zoVM0PanCA47LjGynvseS-0-c29ffb631a5d6670652526ee0cf881e1)
图1-23 查看切片后的单独图片
第二种切片方法:常规切片。选择切片工具,逐个框出切片的范围,如图1-24所示。在框选切片的过程中注意不要有切片交叉或空隙出现。切片完成后,存储为Web所用格式。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1739331832-QLIF2rZ4JTC5rGFtfL30wjgd3BPRKvH0-0-0410731d3f0a7bb6080d0357e3772837)
图1-24 常规切片
1.4.2 图片空间的使用
如何使用图片空间呢?这个问题其实很简单,首先要进入你的图片空间,这个图片空间是淘宝免费提供给广大淘宝卖家的,所以,只要你是淘宝卖家,就有一个自己的图片空间。
使用图片空间的具体步骤如下。
(1)进入图片空间,如图1-25所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0031_0002.jpg?sign=1739331832-j8zbnD3zMcqjULAKoOv1a1b5UwDPMdZE-0-9a4139b6aba1ea56dd3bc98c06cc7b84)
图1-25 进入图片空间
(2)设置图片分类,选择图片上传,如图1-26所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1739331832-RlW4dUSPdyXunjFcBiYzIE5iQd9YGoCI-0-c8b49f0d44e1280172946fcc1223ac03)
图1-26 选择图片上传
(3)设置图片存储目标文件夹,然后上传图片,如图1-27所示。
![](https://epubservercos.yuewen.com/61F54F/12741014604669106/epubprivate/OEBPS/Images/figure_0032_0002.jpg?sign=1739331832-WrATgoBtg90000bxKB3GxUYFunRTzxaC-0-7aeacd04bb4c7e3395d93907c857ad71)
图1-27 上传图片