之前一直用别人切好的页面,心中很是惭愧,为不在麻烦于他人,还是重新打开很久没用过得 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
20
21
22
23
24
* {
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
<span class="icon tb"></span> <span class="icon1 tb"></span>

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

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

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

(完)

转载请保持原始链接

原始链接: https://ru23.com/note/374c3d40.html