雪碧图和PS的应用

一、定义：

CSS Sprite也叫CSS精灵，CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。

二、优点：

（1）减少图片的字节。
（2）减少网页的http请求，从而大大的提高页面的性能。
（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

三、原理：

（1）需要一个设置好宽和高的容器
（2）通过background-image引入背景图片
（3）通过background-position把背景图片移动到自己需要的位置
调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

*默认显示在左上角，当只取一个值时，第二个值默认center

四、PS使用cutterman制作雪碧图的步骤：

1.打开图片（psd格式）：文件-打开——>Ctrl+o——>拖拽
2.点击移动工具（自动选择图层）
3.按住Ctrl选中制作雪碧图的图层
4.点击窗口-扩展功能

五、PS制作背景透明：

1.魔棒工具选中背景
2.delate删除背景颜色
3.删除不完美再次用选框工具选中
4.delate删除背景颜色

六、PS选中目标图案：

1.对象选择工具
2.魔棒工具选中背景区域，Ctrl+shift+i 反选
3.复制图层，Ctrl+j

七、去水印：

1.仿制图章工具
2.按住alt吸取颜色
3.涂改水印