前端之Photoshop切片

Posted 2020-08-20 尘埃

        什么是切片 ？     （Photoshop中的切片）

切片：将图片切成几部分，一片一片往上传，这样上传的速度比较快。每个切片作为一个独立的文件传输，文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。

切片工具：主要是用来将大图片分解为几张小图片，这个功能用在网页中较多，因为现在的网页中图文并茂，也正因如此所须的时间就比较长，为了不让浏览网页的人等待时间太长，所以他们将图片切成几个小的来组成。

 

      切片是网页制作过程中非常重要的一个步骤，往往切片的正确与否会影响着网页的后期制作。一般是用Ps或者Fw对网页的效果图或者大幅度的图片进行切割。重要的正确的切片会给网站带来一非常正面的影响。比如：减少网页加载时间、制作动态效果、优化图像、链接等。

一、网页切片的制作

1、  减少网页加载时间

     有时候网页上可能需要大的banner图片，那么浏览器下载这个图片就要花费很长的时间，这是很不利于用户体验的。而网页切片的出现就很好的解决了这个问题。切片的使用使整个大的图片分为不同的很多的小图片，浏览器也会对这些小图片进行下载，这样浏览器下载图片的时间就大大的缩短了，节约了很多时间。

2、  优化图像

    一般说一个完整的图像只能是一种格式，jpg、gif、png、psd、dpf或者其他，一种格式那么我们就只能采取一种优化方式。而网页切片可以把这张分割成很多小图片，并且可以保存成其他格式，可以分别对其优化。这样就能保证图片质量高等的情况下还能减少图片的内存，也提高网页的加载速度。

   切片前的准备：另存网页PSD文件，整合ps的图片

   切片的具体准备：分割切片、切片的类型（用户切片、非用户切片）

   切片的基本要点:

                        1、根据颜色范围来切；

                        2、切片大小：把网页的切片切的越小越好；

                        3、切片区域为完整性:保证完整的一部分在一个切片内，例如某区域的标题文字，以后修改时方便；

                        4、导出类型：颜色单一过渡少，应该导出GIF，颜色过渡比较多，颜色丰富的应该导出JPG，有动画的部分应该导出为GIF动画；

                         5、保留文件：即使页面好了，也要保留带切片层的源文件，说不上哪天要改某个部分，例如文字什么的，直接修改单独到处所用的切片就可以了。

    切片的图层显示和隐藏：背景图片的切片；不规则图片的切片。

    切片的编辑：大小、调整、删除、清除切片（可一个个选中右击删除，也可视图所有都删除）、保存切片（存储为web所用格式）

                    删除切片

                    编辑切片选项：切片类型、名称：自动生成的，一般采用英文命名，网页代码中运用英文比较友好、URL：是链接地址、目标、ALT标记：通过可以搜索优化图片、                                         尺寸W H X Y、切片背景：一般默认无

                    划分切片：水平划分、垂直划分         组合划分

                    保存切片（存储为web所用格式）ctrl+shift+alt+s：一般常用格式为jif、png—24支持背景透明（透明度勾选支持背景透明）、jpeg（图片品质一般80以上）。                                  然后点击保存，保存格式，格式有极限图像，设置为默认设置，切片（所有切片：不管是用户切片还是非用户切片都会导出来、所有用户切片：只会导出                                  切到的切片、选中切片：只会导出在选中的切片），会自动生成一个文件夹（images）                                          

                   切片的格式：

                                    1、三种切片格式的介绍：颜色范围比较鲜艳的使用jpg格式、png支持网页透明、jif支持颜色范围比较单一。

                                    2、三种切片格式的比较（适用范围）：jpg网页中都支持这种格式；png支持透明和背景无关；jif动画可以发表情。

                                    3、三种切片的适用范围及优缺点：png：IE6不支持图片透明；gif动画导出的颜色单一，当颜色鲜艳时会出现锯齿状。

                    切片的保存及重命名：

                                   1、切片的导出保存

                                   2、切片的重命名，名称最好是英文的，也不要以特殊的符号开头

                   切片的技巧（渐变、阴影、不规则） ：

                                   渐变：可以单独拉一个切片

                                   阴影：网页中如何实现，css3也可以实现阴影但是ie6、ie8不支持，可以单独为阴影做一个切片，让背景关掉保存为png-24格式

                                   不规则：背景隐藏掉，保存png格式

网页切片实战练习

     有的颜色可以自己表示、挂件制作（整个切）、视频播放按钮

     步骤：整理图层、另存一下（为图片做备份）、尽可能的做精确点、画布多的话可以新建一个然后复制到新的画布

切片如何快速插入：超链接或者添加为背景链接

总结   切片的知识点及要点：切片的概念、作用、格式选择

         以上为自己自学中的笔记记录，如有错误请指教，谢谢。