盒子
盒子
文章目录󰁋
  1. PS环境配置
  2. 基本图片的切法
  3. icon图标切法
  4. 图片在网页中的定位

PS基本切图及应用

之前一直用别人切好的页面,心中很是惭愧,为不在麻烦于他人,还是重新打开很久没用过得PS,学习了一下如何切页面,顺便整理一下近期学到的PS切图的基本方法。

美工一般只提供设计稿,那么问题来了,我们如何把设计稿切成自己想要的图片呢,今天我们来简单学习一下如何切图:

切图我们一般只切两种类型的图片,JPG图片和icon图表。重点还是在icon上。

PS环境配置

  • ps中用到的快捷键:
    • 放大:z
    • 缩小:Ctrl+alt+空格+鼠标点击
    • 切片:c
    • 移动:v
    • 拖动:空格+鼠标拖动
    • 撤销:Ctrl+z ctrl+alt+z
    • 保存:Ctrl+shift+Alt+s
  • 配置工作环境:


基本图片的切法

icon图标切法


图片在网页中的定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
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;
}
1
2
 <span class="icon tb"></span>	
<span class="icon1 tb"></span>

这里介两种图片的定位方法

  • 方法一:通过浏览器的插件定位图片的具体位置

  • 方法二:在ps原稿中测量图片的位置

(完)

支持一下
扫一扫,支持poetries