三种PS切图方法—简单易懂
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切图方法—简单易懂相关推荐
- 两种ps切图方法(图层/切片)
两种Ps切图方法 一. 基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
- 真正的ps切图方法(前端必看)
看了很多ps切图方法,真的感觉都不是很满意,可能说不是很合适我们前端的用法,毕竟我们要获取的是某一个图层里面的小图片,不需要获取全部切图,好了,废话不多说,看方法. 1.选中所在的图层,commond ...
- 实用形ps切图技巧,图片格式及其相关
写在前面 之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
- 【前端】psd到html切图,包含ps切图
仅仅记录自己所学. 学习链接: 前端工程师必备技能-PS切图-免费在线视频教程-php中文网 主要是后面两个视频,前面介绍ps基本操作比较多 前端psd到html切图视频教程-慕课网 这个包含代码构建 ...
- 前端必备 PS三种切图方法 Cutterman最好用的切图工具
文章目录 1.常见的图片格式 方法1. PS图层切图 方法2. 切片切图 方法3.Cutterman插件切图(最简单.最好用的切图工具) 准备工作:一个非绿色版的PS软件,如果还没安装好PS的,建议在 ...
- PS三种切图方法+Cutterman(安装教程、基本使用)
常见的图片格式 jpg图像格式 JPGE(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式 gif图像格式 GIF格式最多只能储存256色,所以常用来显示简单图形及字体 ...
- 【前端必学】PS切图详细教程3种方法(图层切图,切片,切图神器cutterman)
PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...
- [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
- ps切图基础(慕课网切图篇学习)
一.PS切图基础 1. PS界面设置 1) 新建设置: Ctr+N(新建快捷键) 预设选定web或自定义,宽1920,高2000像素,背景透明,分辨率72像素/英寸,RGB颜色 8位. 在设置好参数 ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
最新文章
- 垃圾清理代码_最近弄了个清理电脑C盘的经验
- VR/AR行业发展至今,它的市场规模如何
- 使用Lucene2.3构建搜索引擎
- 任正非迷茫的背后是华为在“治未病”
- vs2005格式化代码
- WinDbg !locks 不可用的问题
- 配置安全的Impala集群集成Sentry
- YOLOv5算法详解
- 搭建WeApacheb网站服务器
- Java——线程的四种不同形式
- ubuntu16.04配置sonarqube+MySQL
- 《深入理解JVM.2nd》笔记(三):垃圾收集器与垃圾回收策略
- php调用接口搜索的网页源代码,PHP用户管理中常用接口调用实例及解析(含源码)...
- java系列9:对象数组
- AIR:使用 HTML + Javascript 开发桌面应用
- windows10便签在哪,windows电脑版便签工具在哪里打开
- 电脑重装系统后当前安全设置不允许下载该文件
- .net 实现网页截图
- 如何利用PowerShell完成的Windows服务器系统安全加固实践和基线检测
- 深恶痛绝的No mapping found for HTTP request with URI