WEB前端之切图篇.ppt

《WEB前端之切图篇.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、WEB前端——图片篇分享者：王志程矢量图与位图矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。目前在前端的开发中常用的图片格

2、式有三种：jpg、png、gif。这些都是位图。有损压缩和无损压缩有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。我们在保存图片为jpg格式时，会有一个品质选项这里指的就是对图片的损耗程度，如果压缩的话一般选择品质在60-80之间，60以下图片失真会很严重。无损压缩PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同

3、的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。这里要说明的是，无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。透明索引透明：即布尔透明，类似于GIF，某一像素只有全透和全不透明两种效果不能对透明度进行设置。索引色是画布的颜色即背景色，如果图片上存在与你设定的背景色相同的颜色的话，那么在索引色透明模式下，该图片

4、上所有颜色里与背景色相同的部分以及背景色都将建成全透明。Alpha透明：半透明（阿尔法透明）Alpha的数值范围为从0(黑色)到255(白色)，黑色代表透明，白色代表不透明。如果你的图片的白色部分是附着在某种颜色之上，那么即使背景是白色的，使用Alpha透明后，你图片上的白色部分仍然是不透明的。GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然

5、是图片文件格式。但GIF只能显示256色。和jpg格式一样，这是一种在网络上非常流行的图形文件格式。jpg全名是JPEG，是图片的一种格式。JPEG图片以24位颜色存储单个位图。JPEG是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式JPEG文件支持交错。由于体积小，jpg在万维网中被用来储存和传输照片。JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等等。PNG常用:PNG8，PNG24。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有16

6、00多万色。关于透明：png8色盘索引、调色板中一位透明值、不支持阿尔法通道的半透明，存储格式中每个像素无透明度的数据块定义；png24无调色板、支持阿尔法通道的半透明、每个点阵都有透明度的定义，最低32位真彩色；256色图每个像素的保存形式是一个8位二进制数，换算成十进制就是可以保存从0-255的256个整数，显示时图像像素的值根据查找表关系映射成一种颜色，但是对于不同的图像这个查找表是可以不一样的，也就是说对于单个图像只能够映射256种颜色。实际上就是每个像素只有8bit，保存的是一个索引值。这个值指向调色板中某一个RGB值。显示的时候要根据索引去找对应像素需要显示出来的

7、颜色。移动设置自动选择组图层建议：只选择图层，【自动选择】不勾选Ctrl+图层单击视图设置步骤：1.视图/显示/智能参考线以及视图/标尺，这两个都要选上；2.窗口/信息、窗口/字符ctrl+T，两个打开，其他的多余的可不需要，将前面的勾取消；图层、信息、历史记录、字符4大主要界面。3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定；4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】这样的做的好处：在PS里打开一个网页，随便点