0.Photoshop切图

2015-06-29 本文已影响0人 Ehome

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>