ps切图怎么切？PS-前端切图教程（切jpg图和切png图）

本文目录

• ps切图怎么切
• PS-前端切图教程（切jpg图和切png图）
• photoshop怎么切图
• Ps切图 切完了正常的 还需要2倍图3倍图该怎样弄才能得到

ps切图怎么切

• ps切图方法是：
  1、在pS中打开图片。
  2、选择切片工具。
  3、右键图像界面--划分切片。
  4、在宽度和高度上分别输入需要划分的数量。
  5、存贮为Web和设备所用格式。

• 01
  将准备好的详情页置入PS画布中（或随意一张图片置入画布中）
  02
  选择工具栏中的“切片工具”，然后鼠标移动到画布中的时候，就会显示一个刀片的形状，而且会有数字显示切片个数。
  03
  在最上方开始，鼠标按住开始拖动，这样就形成了一个切片，在滚动鼠标时，在右侧位置会显示滑动过得距离大小。
  04
  当切片过程发生重叠现象，比如裁切到同一个部分时，需要将另外一个切片移动位置，这时候可以选择“切片工具”下方的“切片选择工具”再选择移动位置
  05
  当需要删除切片时，选择切片，然后右键选择删除，或者直接按delete键删除。
  06
  当需要全部删除切片时，这时选择工具栏中的“视图”-“清除切片”，这样就将切片全部清除掉了。
  07
  当切片切完之后，就需要将切片导出。这时候选择工具栏中的“文件”-“导出”-“存储为Web所用格式”，或快捷键ctrl+shift+alt+s
  08
  然后选择切片工具，选中全部切片（需要导出哪张，切片工具点击哪张），然后选择“存储”
  09
  选择好保存位置，然后选择“所有切片”，点击保存
  10
  等待保存完成，返回保存位置，可以看到已经将之前的图片保存了下来。将原来的图片切成了几部分，现在显示的就是几部分。

PS-前端切图教程（切jpg图和切png图）

转发自： PS-前端切图教程（切jpg图和切png图） - xing.org1^ - 博客园 (cnblogs.com)

———————-------------------------------------------------------------------- PS切图步骤说明 ————————————————————————————————

一共分两大项：切jpg图、切png图。

我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。

一、 切JPG图

1．打开ps导入图片的步骤是铁定的了

2．选择左边工具栏里的“切片工具”

事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标

你可以鼠标左键点住“裁剪工具”不松手，他会在右边展开（我这是工具栏在ps界面左侧的情况下）这一组的所有工具，在里边选择“切片工具”即可

我图中之所以框选了两个工具，是因为后期还要用到“切片选择工具”，这里先认识一下他的位置在哪。

3．用“切片工具”切出想要的范围，框选范围就像平时用qq的截图工具一样。

如下，我需要这个小图标，我就框选了他。

框选中：

框选后：

如果你框选好了松开了鼠标，他还是这种黄色的边线，你把“切片工具”移到附近，他还能调整框的大小范围。

但是如果你框选了好几个了，想改前边已经框选好的：
像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。

这就要用上“切片选择工具”了

4．“切片选择工具”调整范围：

切片选择工具就在“切片工具”的下边，寻找方法见上解。点击选择要调整的切片蓝线，待其变成黄色后，调整范围。

切片选择工具只能选择并调节范围，不能切片。

5．切好后保存

保存方法：文件——存储为web所用格式【快捷键ctrl+shift+alt+s】

在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式

按需求更改质量（低、中、高、非常高、最佳。这五个模式）

点击存储后弹出【将优化结果存储为】的对话框

选择存放位置、设置文件信息——

一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图。

命名文件名

“格式“——仅限图像

在“切片”那里，可以选择是存储全部切片还是只存储选中的切片，
一般默认就存储全部切片就好了，有时候只需要一小块切片时，可以选择存储选中的切片，他会只保存一张你当前切得图，这样省的自己去一大堆切片中捡出来自己要用的了。

二、 切PNG图

切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。

1．打开ps拖进来你要切的psd或者tif文件，

一定得是带图层的。

2．先选择移动工具

3．并在顶部选项栏里勾选自动选择，

4．下拉框里选择图层

若没有选项栏或者图层栏的：

在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。

5．然后用“移动工具”点击你不需要的背景图，ps会自动选中该背景所在的图层，

6．你在图层面板中，把对应这层的左边小眼睛关掉就好了，让背景图先隐藏起来。

有时候设计会有好几层，他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边，

你就用移动工具（快捷键v【英文输入法下按v就可以锁定移动工具】）点击它然后关掉它，有几层就多做几步，直到你不需要的背景全部隐藏掉。

但是良心的设计一般会把背景都放到一个图层中，你找到一层背景，所有的都和他在一个组里边，你把组的小眼睛关掉即可

7．然后切片工具切出你要的那个图标

8．保存：文件-存储为web所用格式(ctrl+shift+alt+s)

9．选择png-8/png-24格式，看你对图标的要求了

PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；

png8：

每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，

例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；

png24：

每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；

所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，

所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；

这是二者的区别，根据自己的需求选择吧。

10．然后就是一定要勾选透明度，其他默认设置就好。

Png-8的透明度位置

Png-24的透明度位置

11．”保存全部切片“或者“保存选中切片”

这里还要说明一个问题，有时候一个页面中，我用切片工具选出好几张png图标准备切，然后保存的时候也选择png格式都没问题，

但是到了选择保存位置这个对话框里，选择的是“保存所有切片“，

最后保存出来的图片，只有最后切得那张或者说切片工具选中的那张是png的，其他就都存成jpg格式了，背景是白色底

！！所以切png的图，还是建议，一张一张“保存选中切片”比较好。

或者你的图标与白色底差别大的话，你也可以不计较，让他保存成jpg后再去ps中魔棒抠图也好，不过这样比较麻烦不是。

有的说，背景图和图标每分图层咋办？那咋办？找设计吧。要不你自己选取工具扣吧，扣好了另存为png也是一种办法

三、 其他技巧 ：

1．Ctrl+ +号放大图片，

2．ctrl-缩小

3．按住空格，鼠标图标变成抓手工具，移动页面

四、重磅彩蛋！！！还有一个吊炸天的方法——针对单一小icon切成png的

“移动工具”点击图标，选中图标所在的图层；

右击该图层，选择“转换为智能对象”；（ps这时候没反应，不要大惊小怪，是你看不到而已）

接着再次在这个图层上，右击——“内容”

对话框点击确定

ps就自动生成一个新的文件，只有那个icon，而且是透明的哦！

很神奇有么有！

很省力有么有！

1秒搞定有没有！
以下是图解：

这是点击一个小图标

选中图标后的图层面板

右键点击该图层选择“转换为智能对象”
没转换前的图层样式：

转换后的图层样式：

所以别说“我转换了ps没反应”这样的话了，是有的，你不仔细看看不到

接着再右击——“内容”

点击“确定”

看，他就新建了一个“形状8”的页面，放的是我的png的小图标，

 最后你保存为png也好，“存储为web所有格式”也好，自由发挥吧。

 这个方法可能只能保存一个图标，

有的人说我好几个图：例如文字+图片都有咋弄？

那就切图呗！

那还要纠结的话那就合并图层吧！

photoshop怎么切图

　　1.传统切图

　　(1)打开一个psd文件，选择ps左边菜单栏的裁剪工具，选择切片工具。首先我们对这个psd文件进行分析，有意识的将其划分成几个选区，然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来。

　　蓝色标号的切片是我们手动选择的切片，灰色标号是自动生成的切片，然后导出这些切图，选择文件—》导出—》存储为Web所用格式，保存到你要用的文件夹里。

　　问题：观察上述操作，我们会发现这样一个一个图案切太麻烦耗时了，如果一个电商网站要你切几百个图肿么办?于是有下面一个较为方便的办法：

　　(2)一般设计师在设计的时候通常会用到参考线，那我们也可用参考线来简化切图操作，首先选定你要切的某个图案的图层，然后用鼠标拖动左部或顶部的标尺将其拉到该图案的边界，该边界会自动吸附参考线，因而比较准确，这样这个图案的参考线就设置好了，同理再去设置其他图案的参考线

　　由于参考线密集，会出现很多我们不需要的切片，我们可以点击鼠标右键删除不需要的，我们发现像这样一次性切图太累了，要删除很多不用的切片，所以建议将psd文件进行裁剪一块一块切，然后关闭参考线检查切图。最后将切片导出到文件夹里。

　　以上就是传统切图方式，比较麻烦耗时且不精准，所以我们使用计算机进行精准切图。

　　2.精准切图

　　下面我们来用photoshop的’脚本进行一种更加快捷精准的切图方法。它的优点在于，自动化切图省时省力，计算机自动计算，尺寸更精确。

　　首先打开一个psd文件，选择文件—》导出—》将图层导出到文件—设置其属性，选择存储位置和保存类型，勾选透明区域，交错，裁剪图层，最后运行导出，这个过程需要等几分钟。建议还是一块一块区域切。

　　3.photoshop CC版本的精准切图—自动切图

　　(1)首先我们选择一个需要切的图案，选择其图层。然后设置参数，选择—》首选项—》增效工具—》勾选启用生成器，点击确定。选择文件—》生成—》图像资源。我们发现在psd文件所属目录下会生成一个空的.assets文件夹，最后我们将该图层的名字后缀改为.png，会发现assets文件夹里多出了我们切的图案，这样一个图案就切好了。

　　(2)在(1)的基础上，很容易导出SVG格式，只需要将该图案所在的图层名字后缀改为.svg就可以。

Ps切图 切完了正常的 还需要2倍图3倍图该怎样弄才能得到

1、首先打开电脑上的PS 软件，双击打开，进入操作页面。

2、然后打开或者拖入要切的图片。

3、接着选用工具栏里的-切图工具，根据自己喜好进行切图。

4、切完之后，ctrl+shift+alt+s 一起按。保存切图弹出窗口在最左上角“预设”。

5、单击打开可以选择自己要的格式。

6、之后就可以直接保存了，下面的格式都变成了预设的格式了。