搜索
WEB前端——图片篇分享者：王志程矢量图与位图•矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。•它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。•位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。•位图的优点是利于显示色彩层次丰富的写实图像。•缺点则是文件大小较大，放大和缩小图像会失真。•目前在前端的开发中常用的图片格式有三种：jpg、png、gif。这些都是位图。有损压缩和无损压缩•有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。•JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。•我们在保存图片为jpg格式时，会有一个品质选项这里指的就是对图片的损耗程度，如果压缩的话一般选择品质在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色图•每个像素的保存形式是一个8位二进制数，换算成十进制就是可以保存从0-255的256个整数，显示时图像像素的值根据查找表关系映射成一种颜色，但是对于不同的图像这个查找表是可以不一样的，也就是说对于单个图像只能够映射256种颜色。•实际上就是每个像素只有8bit，保存的是一个索引值。这个值指向调色板中某一个RGB值。显示的时候要根据索引去找对应像素需要显示出来的颜色。移动设置•自动选择•组•图层•建议：只选择图层，【自动选择】不勾选•Ctrl+图层单击视图设置•步骤：•1.视图/显示/智能参考线以及视图/标尺，这两个都要选上；•2.窗口/信息、窗口/字符ctrl+T，两个打开，其他的多余的可不需要，将前面的勾取消；•图层、信息、历史记录、字符4大主要界面。•3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定；•4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】•这样的做的好处：在PS里打开一个网页，随便点击哪个图片或者某个字符，就可以知道详细的信息。•5.窗口/工作区/新建工作区/名称：web切除，后两个选上，然后点击存储，这样就可以保存下来，防止丢失了。传统切图•正常切图•参考线切图：放好参考线-切片-基于参考线的切片•储存为WEB所用格式一、photoshop切图技巧•1、使用psd格式并且带有图层的图像切图•2、在图像上用切片工具切出需要的小图•3、双击切片，给切片命名•4、执行菜单命令存储为web所用格式•5、点选切片，设置切片的图片格式•6、存储切片，选择“所有用户切片”，点存储(多个切片会存到所选文件夹中的images文件夹中)精准切图•利用ps脚本，进行一种更加快捷精准的切图方法。•自动化切图，省时省力。•计算机自动计算，尺寸更精确。•【文件】→【脚本】→【将图层导出到文件】扩展知识介绍•【编辑】→【首选项】→【增效工具】→【启用生成器】•【文件】→【生成】→【图像资源】•去图层重新名称图片，加上png/jpg/gif等后缀•Button.jpg•200%button@2x.jpg•Button.jpg8质量80%•SVG•Css属性•SVG意为可缩放矢量图形。•图层右键复制CSS/复制SVG图片的批处理•打开一个文件，执行“窗口——动作（Alt+F9）”命令打开动作面板。•新建立一个动作。设置动作名称和组名。动作面板的下面出现一个红色的按钮，表示已经要开始录下我们接下来操作的每一个步骤了。文件-自动-批处理•在“批处理”对话框中：目标选择”无“就是将处理好的文件直接代替原文件，•如果要保留原文件需要再另备份一份或是选择”存储并关闭“和另外选择路径来存储也可以。ThankYou!