0.Photoshop切图

PS初始设置

PS首选项的设置

• 编辑> 首选项> 单位与标尺 设置为像素

开启

• 选项面板
• 工具面板
• 信息面板
• 图层面板
• 历史记录面板

保存工作区

• 窗口>工作区>新建工作区

工具

• 切图常用工具
  移动工具、矩形选框工具、魔棒工具、裁剪工具+切片工具、缩放工具（放大：Ctrl+加号、缩小：Ctrl+减号）、取色器

辅助试图

在“视图”菜单下开启：

• 对齐
• 标尺 Ctrl+R
• 显示 >参考线 Ctrl+;
  (需要勾选显示额外内容)

补充：

• Sprite的补充说明：可以通过搜索CSS sripte或者图片精灵等关键字来了解更多，推荐阅读：《谈谈CSS Sprites(css精灵)》
• Adobe CC的官网：http://www.adobe.com/products/photoshop.html
• 缩放画布的其他方式：除了通过Ctrl+加号（减号）来缩放外，还可以通过Alt+鼠标滚轮的方式来进行缩放

sprite 图片精灵

sprite.png

在PS测量出图片宽和高位128px
测量得出每个小图标：width:128px;height:128px;
.ico这是原点的图标；
.youtobe 是一排二列 ，需要在原点显示，这图片位移坐标 x:-128px y:0;
.f 是二排四列，需要在原点显示，则图片需要位移坐标 x:-384px y:-128px;
.digg 是五排二列，需要在原点显示，则图片需要位移坐标　ｘ：-128px y:512px;

1.jpg

CSS部分

html部分