两种ps切图方法（图层/切片）

两种Ps切图方法

一．基础操作：

a) Ctrl++ 放大图片，ctrl - -缩小图片

b) 按住空格键space+，点击鼠标左键，拖动图片。

c) 修改单位，点击编辑->首选项-> 单位与标尺，将厘米修改为像素px。

d) 点击视图，选择标尺（ctrl+R），清除默认参考线(ctrl+.)，清除切片(ctrl+,)。

e) 点击编辑->设置快捷键，将常用操作设置为我们熟悉的键。

f) 移动（V），选区（M），切片（C），将v图层转换成智能对象（ctrl+/）.

二．切图过程：

1、打开psd图，先浏览整个页面，哪些是能用css实现，哪些是用图片实现的，能用css代码实现的尽量用代码实现；

2、页面中需要切成图片的，看是背景图还是内容图，背景图保存为png,内容图保存为jpg,页面中不是从后台获取的图片一般为背景图(png)，后台获取的一般为内容图（jpg）；

3、形状不均匀的背景图片使用图层切图，形状均匀的内容图用切片切图。具体切图方式按实际情况而定，切片切图与图层切图相结合。如果规则图片多的使用切片切图，其他的图片使用图层切图；

4、使用切片切图保存图片时，图片的格式视情况而定，可以自己为选中切片中的图片设置格式，若需要全部选中为同一种格式，全选中整个页面再选图片的格式。

5、最后保存时要注意，一定要选中所有用户切片；

6、命名时注意，（内容图）jpg图片以pic-xx.jpg命名，（背景图/小图标）png图片以icon-xx命名，xx要有语义。

三．图层切图(形状不均匀的背景图片)：

a) 点击移动选择工具,将左上角的的自动选择勾上,再将旁边的组换成图层.

b) 用移动选择工具将我们要切得图层选中，在右侧的图层区，可以自动定位到我们的图层，点击左边的小眼睛确定此图层是否使我们要切得图层，确定之后，将右击将图层转换为智能对象（防止图片失真）。

c) 用矩形选框工具，将图层框起来（框框只能打不能小于图层）。

d) 依次执行以下操作：ctrl+c复制图层，ctrl+n新建透明背景画布，，ctrl+v粘贴图层，ctrl+alt+shift+s保存图层，如果切得是背景图，保存为png24格式，前缀为icon-xxx.，再保存到我们的项目工程里。

e) 背景图，类似于图标之类的都用png，其他的都用jpg，png可以代替jpg，但是jpg不能代替png。

四．切片切图（形状均匀的内容图）：

a) 选择切片工具。

b) 用辅助线将要切的图层框起来。

c) 用切片框住我们的图层。

d) Ctrl++alt+shift+s保存用户切片，格式选jpeg，前缀为pic-xxx。

e) 在保存时选中了假如默认为png，但是要选择jpeg时可能会出现有部分图片还是会有png的图片，此时需要自己选中图片修改为jpeg。

五．合并图层(需要切的图由多个图层组合而成)

a) 按住ctrl，选中我们要合并的两个图层，右击转换为智能对象，进行图层切图。

六．图片格式.

切图出来的图片一般保存为png-24和jpeg格式

两种ps切图方法（图层/切片）相关推荐

真正的ps切图方法（前端必看）
看了很多ps切图方法,真的感觉都不是很满意,可能说不是很合适我们前端的用法,毕竟我们要获取的是某一个图层里面的小图片,不需要获取全部切图,好了,废话不多说,看方法. 1.选中所在的图层,commond ...
ps切图保存所有切片为png
ps切图保存所有切片为png的步骤: 1. 切图完毕后 2. 点击'文件'--'保存为web格式',弹出对话框 3. 选择左下角的缩放,缩放到一定的比例 4. 按住键盘shift 点选需要的切片(切片 ...
ps切图保存所有切片为jpg等统一格式
问题描述:网页效果图切图输出的时候,经常碰到输出的图片格式不一样的情况,有的是jpg,有的是png等. 解决办法: 一.切图完成后,按Ctrl+Shift+Alt+S键(存储为web所用格式). 二. ...
前端必备 PS三种切图方法 Cutterman最好用的切图工具
文章目录 1.常见的图片格式方法1. PS图层切图方法2. 切片切图方法3.Cutterman插件切图(最简单.最好用的切图工具) 准备工作:一个非绿色版的PS软件,如果还没安装好PS的,建议在 ...
PS三种切图方法+Cutterman（安装教程、基本使用）
常见的图片格式 jpg图像格式 JPGE(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式 gif图像格式 GIF格式最多只能储存256色,所以常用来显示简单图形及字体 ...
实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
【前端】psd到html切图，包含ps切图
仅仅记录自己所学. 学习链接: 前端工程师必备技能-PS切图-免费在线视频教程-php中文网主要是后面两个视频,前面介绍ps基本操作比较多前端psd到html切图视频教程-慕课网这个包含代码构建 ...
【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）
PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...
如何把PDF转换成长图？分享两种可以实现的方法
在某些情况下,我们需要将 PDF 文件转换为长图,以便更好地展示和分享.那么如何将PDF 转换为长图呢?今天分享两种可以实现的方法. 1.使用 Adobe Acrobat DC Adobe Acrob ...

两种ps切图方法（图层/切片）

两种ps切图方法（图层/切片）相关推荐

最新文章

热门文章