• 前端之Photoshop切片


            什么是切片 ?     (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格式

    网页切片实战练习

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

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

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

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

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

  • 相关阅读:
    如何遍历对象,hasOwnProperty()方法,和 in 的区别【CordeWars实践】 Pete, the baker
    去除字符串内所有空格【在CodeWars中实践】The Hashtag Generator
    JS 去掉小数点
    "写出下列代码的执行结果"一直不会做?【JS Event Loop】
    【CodeWars】Large Factorials (计算阶乘)
    去掉数组或者字符串中相邻的重复数据
    纯CSS绘制三角形(各种角度)
    3.坐标系与轴心点
    2.blender的基本操作与动画案例挑战
    CF1470E Strange Permutation
  • 原文地址:https://www.cnblogs.com/hq123/p/6044008.html
Copyright © 2020-2023  润新知