之前一直用别人切好的页面，心中很是惭愧，为不在麻烦于他人，还是重新打开很久没用过得PS，学习了一下如何切页面，顺便整理一下近期学到的PS切图的基本方法。
美工一般只提供设计稿，那么问题来了，我们如何把设计稿切成自己想要的图片呢，今天我们来简单学习一下如何切图：
切图我们一般只切两种类型的图片，JPG图片和icon图表。重点还是在icon上。
# PS环境配置
- ps中用到的快捷键：
- 放大：
z - 缩小：
Ctrl+alt+空格+鼠标点击 - 切片：
c - 移动：
v - 拖动：
空格+鼠标拖动’ - 撤销：
Ctrl+z ctrl+alt+z - 保存：
Ctrl+shift+Alt+s
- 放大：
- 配置工作环境：
# 基本图片的切法
# icon图标切法
# 图片在网页中的定位
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.tb{background-image:url("icon.png");background-repeat:no-repeat;display:block;}
.icon{
width:28px;
height:28px;
background-position:-28px 0px;
}
.icon1{
width:38px;
height:38px;
background-position:-39px -27px;
}
@前端进阶之旅: 代码已经复制到剪贴板
<span class="icon tb"></span>
<span class="icon1 tb"></span>
@前端进阶之旅: 代码已经复制到剪贴板
这里介两种图片的定位方法
-
方法一：通过浏览器的插件定位图片的具体位置
-
方法二：在ps原稿中测量图片的位置
（完）
