ps 快速切图

article/2025/10/26 3:31:26

×

前端实战系列之---两种快速切图的方法


今天给大家分享一下我自己在前端工作中的一些切图小技巧,虽然好的UI会给我们把图切好,但是他们切的图不一定百分之百符合我们的需求,所以还是自己动手丰衣足食嘛,看本教程之前希望大家能先看看慕课网的切图教程 http://www.imooc.com/learn/506 哦。

这里给大家介绍我在实际工作中用的两种切图方法,一种是“图层切图”,这种切图方式比较适合切形状不规则的png格式的小图标,如企业logo等等,而另外一种是“切片切图”,这种切图方式比较适合形状规则的jpg格式的大图。

一.图层切图:

1.打开你的Photoshop,点击选择工具,将右上角的自动选择勾上,选择为图层,为下图:  

2.用鼠标左击某一个图层,这里我选择了psd设计图中的企业logo新天杰股份。

3.ps帮我们自动定位到了该图层所在的位置

4.然后右击图层12,将图层转换为智能对象,至于为什么要转换为智能对象,大家可以参考这篇文章:http://www.jianshu.com/p/73bee622017f。

5.选择选框工具,将你要切的图层圈起来:


6.接着按ctrl+c复制,再按ctrl+n新建,注意背景颜色设置为透明:


7.点击确定,再按ctrl+v粘贴,我们就得到要切的图层了:


8.再按ctrl+shift+alt+s保存,记住背景图存为PNG24格式:


9.存储到我们要存的文件夹下,就大功告成了,是不是很快,下面我们介绍切片切图,和慕课网的大同小异。

二。切片切图:

1.拉辅助线,如下:


2.选择切片工具,将我们要切的所有图片区域,用切片工具选中:


3.按住ctrl+alt+shift+s保存,保存的时候注意,保存为JPEG格式,选择为保存所有用户切片,这样子切出来的才是我们想要的图片:


4.保存之后就完工了,切片切图的方法很方便,但是注意它只能切出形状规则的图片。

×

前端实战系列之---两种快速切图的方法

96 
筆莘  关注
2017.02.07 14:28*  字数 704  阅读 4541 评论 0

今天给大家分享一下我自己在前端工作中的一些切图小技巧,虽然好的UI会给我们把图切好,但是他们切的图不一定百分之百符合我们的需求,所以还是自己动手丰衣足食嘛,看本教程之前希望大家能先看看慕课网的切图教程 http://www.imooc.com/learn/506 哦。

这里给大家介绍我在实际工作中用的两种切图方法,一种是“图层切图”,这种切图方式比较适合切形状不规则的png格式的小图标,如企业logo等等,而另外一种是“切片切图”,这种切图方式比较适合形状规则的jpg格式的大图。

一.图层切图:

1.打开你的Photoshop,点击选择工具,将右上角的自动选择勾上,选择为图层,为下图:  

2.用鼠标左击某一个图层,这里我选择了psd设计图中的企业logo新天杰股份。

3.ps帮我们自动定位到了该图层所在的位置

4.然后右击图层12,将图层转换为智能对象,至于为什么要转换为智能对象,大家可以参考这篇文章:http://www.jianshu.com/p/73bee622017f。

5.选择选框工具,将你要切的图层圈起来:


6.接着按ctrl+c复制,再按ctrl+n新建,注意背景颜色设置为透明:


7.点击确定,再按ctrl+v粘贴,我们就得到要切的图层了:


8.再按ctrl+shift+alt+s保存,记住背景图存为PNG24格式:


9.存储到我们要存的文件夹下,就大功告成了,是不是很快,下面我们介绍切片切图,和慕课网的大同小异。

二。切片切图:

1.拉辅助线,如下:


2.选择切片工具,将我们要切的所有图片区域,用切片工具选中:


3.按住ctrl+alt+shift+s保存,保存的时候注意,保存为JPEG格式,选择为保存所有用户切片,这样子切出来的才是我们想要的图片:


4.保存之后就完工了,切片切图的方法很方便,但是注意它只能切出形状规则的图片。


http://chatgpt.dhexx.cn/article/nuNLi1Om.shtml

相关文章

切图工具:又一个处理大图的例子

工具下载 有些同学对处理大图还是不太明白,这里再仔细写一个例子,希望能有所帮助。 基本情况: 1、使用高德地图; 2、朋友使用12级地图截屏做底图,制作的源图为17级,分辨率为40960*40960; 由于…

地图切图工具:初步实现顺序法批量切图处理,用于处理大图

工具:https://blog.csdn.net/bq_cui/article/details/47372005 (20190504) 由于技术限制,本工具无法打开超级大图。切图时如果遇到一个很大的源图片,工具会难以处理,一般是跳出内存溢出提示,点击…

houdini 之copy to points

将第一个输入中的几何图形复制到第二个输入的点上。 属性备注Source Group几何体来源Target Points要复制到的目标点集合Show Guide Geometry是否显示该操作预览流程Pack and Instance在复制之前将输入几何体打包到嵌入式打包图元中。这导致输入几何被每个副本共享(…

如何利用Photoshop进行快速切图

在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计、排版和导出。 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photoshop CC 2015…

图像分割之图割(Graph Cut)

基本概念 这里介绍一种用于n维图像数据的边界优化和区域分割的分割技术。该分割算法来自论文:Interactive Graph Cuts for Optimal Boundary & Region Segmentation of Objects in N-D Images。该方法通过交互式的或自动的定位一个或多个代表“物体”的点以及一…

4. PS切图

4.1常见的图片格式 jpg图像格式: JPEG ( .JPG )对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的gif图像格式 : GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果png图像格式&am…

Photoshop 实时切图功能 Generate

大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢!!! 本文发表在【湖边的小屋遗址】 转载请注明出处 Generate web assets in Photoshop CC 貌似就是以前的 Ctrl Shift Alt s 升级。并不只是操作上,感觉是要优化输出资源的…

IOS切图直接作为Android切图使用

跳槽到新公司之后,发现工作真心挺坑的,基本没什么流程规范,职责分工也不明确,整天瞎折腾。。。,慢慢的开始怀念起老东家了。 在新公司UI只提供ios的切图给开发,其实他们不会做android切图。。。&#xff0c…

Group Convolution与Depthwise Convolution

转自:Group Convolution分组卷积,以及Depthwise Convolution和Global Depthwise Convolution - 云社区 - 腾讯云 写在前面 Group Convolution分组卷积,最早见于AlexNet——2012年Imagenet的冠军方法,Group Convolution被用来切分…

Graph Cut(图割)详解

原文地址:http://blog.csdn.net/zouxy09/article/details/8532111 Graph cuts是一种十分有用和流行的能量优化算法,在计算机视觉领域普遍应用于前背景分割(Image segmentation)、立体视觉(stereo vision)、…

sketch的切图技巧总结:如何批量切出固定大小的切图并保留透明部分?

原文来自公众号:希音的设计笔记 获取方式 关注公众号:希音的设计笔记,后台回复 切图插件 👇👇 限时免费扫码进群,交流行业设计 添加小编微信一起见证彼此成长 最近有刚转战sketch的同学问到两个问题&am…

利用Photoshop进行快速切图

概要 在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计、排版和导出。 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photoshop CC…

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

文章目录 1.常见的图片格式方法1. PS图层切图方法2. 切片切图方法3.Cutterman插件切图(最简单、最好用的切图工具) 准备工作:一个非绿色版的PS软件,如果还没安装好PS的,建议在微信搜“软件安装目录”小程序,里面有大多数办公和编程…

图像处理:U-Net中的重叠-切片(Overlap-tile)

深蓝学院是专注于人工智能的在线教育平台,已有数万名伙伴在深蓝学院平台学习,很多都来自于国内外知名院校,比如清华、北大等。 最开始接触 U-Net 的时候并不知道原作使用了 Overlap-tile 这种策略,因此当时不太理解为何网络结构要…

图像分割之(二)Graph Cut(图割)

图像分割之(二)Graph Cut(图割) zouxy09qq.com http://blog.csdn.net/zouxy09 上一文对主要的分割方法做了一个概述。那下面我们对其中几个比较感兴趣的算法做个学习。下面主要是Graph Cut,下一个博文我们再学习下Gr…

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

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

vue中的.passive修饰符的作用以及应用场景

passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。 浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认…

burp插件系列1 passive-scan-client

阅读目录 插件介绍插件使用 插件介绍 被动扫描流量转发插件 项目地址: https://github.com/c0ny1/passive-scan-client这个项目其实主要功能和目前版本burp的Upstream Proxy Server功能基本重复,但是其也有自己的优势 不用每次新打开burp都要去配置U…

vue中的事件修饰符.self、.capture和.passive

vue中的事件修饰符有6种&#xff1a; .stop.prevent.capture.once.self.passive .stop是stopPropagation停止冒泡&#xff0c; .prevent是preventDefault阻止默认事件&#xff0c; .once是点击事件将只会触发一次 <!-- 点击事件将只会触发一次 --> <a v-on:click.o…

FileZilla客户端连接腾讯云FTP服务器时出现“227 Entering Passive Mode”

FTP的主动模式(PORT Mode)及被动模式(Passive Mode) FTP的特殊性&#xff1a; 大多数的TCP服务是使用单个的连接&#xff0c;一般是客户向服务器的一个周知端口发起连接&#xff0c;然后使用这个连接进行通讯。但是&#xff0c;FTP协议却有所不同&#xff0c;它使用双向的多个连…