WEB前端之切图篇.pptxVIP

WEB前端?——图片篇;矢量图与位图;位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。 位图的优点是利于显示色彩层次丰富的写实图像。 缺点则是文件大小较大，放大和缩小图像会失真。 目前在前端的开发中常用的图片格式有三种：jpg、png、gif。这些都是位图。;有损压缩和无损压缩;这里指的就是对图片的损耗程度，如果压缩的话一般选择品质在60-80之间，60以下图片失真会很严重。;无损压缩 PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。 这里要说明的是，无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。 ;透明 索引透明：即布尔透明，类似于GIF，某一像素只有全透和全不透明两种效果不能对透明度进行设置。 索引色是画布的颜色即背景色，如果图片上存在与你设定的背景色相同的颜色的话，那么在索引色透明模式下，该图片上所有颜色里与背景色相同的部分以及背景色都将建成全透明。 Alpha透明：半透明 （阿尔法透明） Alpha的数值范围为从0(黑色)到255(白色)，黑色代表透明，白色代表不透明。如果你的图片的白色部分是附着在某种颜色之上，那么即使背景是白色的，使用Alpha透明后，你图片上的白色部分仍然是不透明的。 ;GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到??GIF仍然是图片文件格式。 但GIF只能显示256色。和jpg格式一样，这是一种在网络上非常流行的图形文件格式。;jpg全名是JPEG，是图片的一种格式。JPEG图片以24位颜色存储单个位图。JPEG是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。 由于体积小，jpg在万维网中被用来储存和传输照片。 JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等等。;PNG常用:PNG8，PNG24。 后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。 关于透明： png8 色盘索引、调色板中一位透明值、不支持阿尔法通道的半透明，存储格式中每个像素无透明度的数据块定义； png24　无调色板、支持阿尔法通道的半透明、每个点阵都有透明度的定义，最低32位真彩色；;256色图;移动设置;视图设置;3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定； 4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】 这样的做的好处：在PS里打开一个网页，随便点击哪个图片或者某个字符，就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称：web切除，后两个选上，然后点击存储，这样就可以保存下来，防止丢失了。;传统切图;一、photoshop切图技巧;精准切图;扩展知识介绍;图片的批处理;动作面板的下面出现一个红色的按钮，表示已经要开始录下我们接下来操作的每一个步骤了。;文件-自动-批处理;在“批处理”对话框中：目标选择”无“就是将处理好的文件直接代替原文件， 如果要保留原文件需要再另备份一份或是选择”存储并关闭“和另外选择路径来存储也可以。 ;Thank You!