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部分
<style type="text/css">
.ico {width:128px;height:128px;
background-image: url(sprite.png);
background-position: 0 0px ;
background-repeat: no-repeat;}
.youtobe {width:128px;height:128px;
background-image: url(sprite.png);
background-position: -128px 0px ;
background-repeat: no-repeat;}
.f {width:128px;height:128px;
background-image: url(sprite.png);
background-position: -384px -128px ;
background-repeat: no-repeat;}
.digg {width:128px;height:128px;
background-image: url(sprite.png);
background-position: -128px -512px ;
background-repeat: no-repeat;}
</style>
html部分
<body>
<!-- <div class="ico"></div> -->
<!-- <div class="youtobe"></div> -->
<!-- <div class="f"></div> -->
<div class="digg"></div>
</body>
网友评论