ps有很多切图方式:图层切图切片切图ps插件切图
在ps切图时,我们需要注意的是这些图片都是.psd格式的

1.图层切图

最简单的切图方式:右击图层—>快速导出为PNG。
具体操作:
第一步:

第二步:点击要切的图片
第三步:发现图层被选中

第四步:右击图层,点击快速导出PNG

但是很多情况下,我们需要合并图层再导出:
方法:1.选中需要的图层:图层菜单—>合并图层(ctrl+e)
2.右击—>快速导出为PNG
具体操作:
第一步:按住一个图层+shift键,就可以选择多个图层了

第二步:右击,会出现合并图层选项,点击此选项

发现两个图层合并成了一个

第三步:再按如上操作(点击图层—>快速导出PNG)

2.切片切图

1.利用切片选中图片

利用切片工具手动划出

2.导出选中的图片

文件菜单—>导出—>存储为web设备所有格式—>选择我们要的照片格式
—>存储

具体操作:
1.选择切片工具

2.划中要选择切的图片

3.导出图片
选择文件菜单,里面的导出

4.选择文件格式
在点击存储为Web格式后会弹出一个对话框,在右上角位置会有一个选择文件格式的地方

选择完格式后,下面有一个存储按钮,点击存储

最后在保存时需要注意,切片后面要选择选中的切片

如果想切透明的图片,可以把后面的背景去掉,那么切出的图片就是透明的
(1)透明:

(2)不透明:

3.ps插件切图

cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工“导出web所有格式”以及使用切片工具进行挨个切图的繁琐流程
下载Cutterman:
cutterman官网:http://www.cutterman.cn/zh/cutterman
注意:Cutterman插件要求你的PS必须是完整版,不能是绿色版
看是否下载好了,需要打开ps软件(如果已经打开,那么需要关掉后再次打开),点击窗口菜单—>扩展功能
如果安装成功,会出现下图所示情况(cutterman—切图神器)

使用:
1.现在如果是PC端的话,就选择web,然后选择输出路径

2.点击要导出的图层,然后点击cutterman中的导出图层即可

对于由多个图层组成的图片
1.先选中所有图层

2.把前面“合并导出选中的图层”的按钮,然后在点击“导出选中图层”即可

这里只介绍了cutterman两种最常用的方法,更多使用方法,可以cutterman官网学习cutterman官网:http://www.cutterman.cn/zh/cutterman

三种PS切图方法—简单易懂相关推荐

  1. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  2. 真正的ps切图方法(前端必看)

    看了很多ps切图方法,真的感觉都不是很满意,可能说不是很合适我们前端的用法,毕竟我们要获取的是某一个图层里面的小图片,不需要获取全部切图,好了,废话不多说,看方法. 1.选中所在的图层,commond ...

  3. 实用形ps切图技巧,图片格式及其相关

    写在前面 之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...

  4. 【前端】psd到html切图,包含ps切图

    仅仅记录自己所学. 学习链接: 前端工程师必备技能-PS切图-免费在线视频教程-php中文网 主要是后面两个视频,前面介绍ps基本操作比较多 前端psd到html切图视频教程-慕课网 这个包含代码构建 ...

  5. 前端必备 PS三种切图方法 Cutterman最好用的切图工具

    文章目录 1.常见的图片格式 方法1. PS图层切图 方法2. 切片切图 方法3.Cutterman插件切图(最简单.最好用的切图工具) 准备工作:一个非绿色版的PS软件,如果还没安装好PS的,建议在 ...

  6. PS三种切图方法+Cutterman(安装教程、基本使用)

    常见的图片格式 jpg图像格式 JPGE(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式 gif图像格式 GIF格式最多只能储存256色,所以常用来显示简单图形及字体 ...

  7. 【前端必学】PS切图详细教程3种方法(图层切图,切片,切图神器cutterman)

    PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...

  8. [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

    网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketc ...

  9. ps切图基础(慕课网切图篇学习)

    一.PS切图基础 1.  PS界面设置 1) 新建设置: Ctr+N(新建快捷键) 预设选定web或自定义,宽1920,高2000像素,背景透明,分辨率72像素/英寸,RGB颜色 8位. 在设置好参数 ...

  10. 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点

    该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...

最新文章

  1. 垃圾清理代码_最近弄了个清理电脑C盘的经验
  2. VR/AR行业发展至今,它的市场规模如何
  3. 使用Lucene2.3构建搜索引擎
  4. 任正非迷茫的背后是华为在“治未病”
  5. vs2005格式化代码
  6. WinDbg !locks 不可用的问题
  7. 配置安全的Impala集群集成Sentry
  8. YOLOv5算法详解
  9. 搭建WeApacheb网站服务器
  10. Java——线程的四种不同形式
  11. ubuntu16.04配置sonarqube+MySQL
  12. 《深入理解JVM.2nd》笔记(三):垃圾收集器与垃圾回收策略
  13. php调用接口搜索的网页源代码,PHP用户管理中常用接口调用实例及解析(含源码)...
  14. java系列9:对象数组
  15. AIR:使用 HTML + Javascript 开发桌面应用
  16. windows10便签在哪,windows电脑版便签工具在哪里打开
  17. 电脑重装系统后当前安全设置不允许下载该文件
  18. .net 实现网页截图
  19. 如何利用PowerShell完成的Windows服务器系统安全加固实践和基线检测
  20. 深恶痛绝的No mapping found for HTTP request with URI

热门文章

  1. 试图执行系统不支持的操作,问题
  2. excel画风玫瑰图_教大家Excel如何绘制线性玫瑰图
  3. S35VB100-ASEMI日本新电元平替整流桥S35VB100
  4. 数据结构与算法分析(一)
  5. 超声波测距(含报警功能)
  6. 显卡测试软件velmon,furmark显卡测试工具
  7. ensp VLAN划分
  8. 中国移动G3随e行最详教程
  9. 寻找春天nbsp;九宫格日记-2011.08.24
  10. PHP网站批量自动发外链工具源码