Web前端笔记

第三部分：PS学习

1. 常用图片格式

图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，
可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：
1、psd
photoshop的专用格式。
优点：完整保存图像的信息，包括未压缩的图像数据、图层、透明等信息，方便图像的编辑。
缺点：应用范围窄，图片容量相对比较大。
2、jpg
网页制作及日常使用最普遍的图像格式。
优点：图像压缩效率高，图像容量相对最小。
缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。
3、gif
制作网页小动画的常用图像格式。
优点：无损压缩，图像容量小、可以制作成动画、支持透明背景。
缺点：图像色彩范围最多只有256色，不能保存色彩丰富的图像，不支持半透明，透明图像边缘有锯齿。
4、png
网页制作及日常使用比较普遍的图像格式。
优点：无损压缩，图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
缺点：不能制作成动画
5、webp
将要取代jpg的图像格式。
优点：同jpg格式，容量相对比jpg还要小。
缺点：同jpg格式，目前不支持所有的浏览器。
位图和矢量图
位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，
位图在放大时，图像会失真。上面讲的5种图像都属于位图。

矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，
实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。
svg
目前首选的网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
缺点：色彩不够丰富。
flash
退出历史的重量级网页矢量图格式。
优点：图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
缺点：不支持搜索引擎、运行慢、浏览器需要装插件才可支持。
总结
在网页制作中，如何选择合适的图片格式呢？
1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；
如果要使用透明或者半透明背景的图片，就使用png图片；
2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；
如果图片是单色，而且要求有很好的显示效果，可以使用svg；
如果是图片时动画的，可以使用gif。

2. photoshop批量切图技巧

切图，就是从效果图中把网页制作需要的小图片裁剪出来。
1、使用psd格式并且带有图层的图像切图
2、在图像上用切片工具切出所有需要的小图
3、双击切片，给切片命名
4、将需要制作透明背景图像的切片的背景隐藏
5、执行菜单命令存储为web所用格式
6、点选切片，设置切片的图片格式
7、存储切片，选择“所有用户切片”，点存储(多个切片会自动存到所选文件夹中的images文件夹中)

3. Photoshop制作雪碧图技巧

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，
雪碧图可以减少网页加载时的http请求数，优化网页性能。
步骤：
1、使用Photoshop新建一张背景透明的图片
2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小
3、按照所有小图片的范围裁剪图片，存为透明背景的png图片