之前一直用别人切好的页面,心中很是惭愧,为不在麻烦于他人,还是重新打开很久没用过得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;
}
@前端进阶之旅: 代码已经复制到剪贴板