Photoshop 实时切图功能 Generate

article/2025/10/26 3:30:03

大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢!!!
本文发表在【湖边的小屋遗址】 转载请注明出处

Generate web assets in Photoshop CC
貌似就是以前的 Ctrl + Shift + Alt + s 升级。并不只是操作上,感觉是要优化输出资源的工作流程。现在还不好说新方案一定屌。但起码在切图方面来说确实是大大地方便了。

简单的说就是新增了一个功能,以后不用苦逼切图了。
开关位置: File > Generate > Image Assets
把这个勾上后,通过对图层(组也行)按一定规则命名,PS就自动帮你实时出图了。
开启 Cenerate


大概的命名规则###

大概的命名规则如下:[尺寸] 文件名.扩展名[品质]
举例:
50% logo.jpg70%
表示:
尺寸:50% (尺寸与名称间有空格)
文件名:logo.jpg
JPG压缩质量:70%

你也可以用具体的尺寸如###

300mm x 20cm Rounded_rectangle_3.png
20in x 50cm Rounded_rectangle_3.gif
尺寸单位

png, jpg 格式的写法###

.png (默认不写的话就是 png32)
.png32
.png24
.png8
在这里插入图片描述
jpg 就是设置图片质量,默认不写为 90%
在这里插入图片描述

要输出高中低不同质量怎么办?###

100% logo.jpg, 50% logo.jpg, 25% logo.jpg
不错就是用逗号分开就行了。上面那些参数都可以加进来。
如果想分别放到对应的文件夹只要在文件名前加上目录就行了,如:
100% h/logo.jpg, 50% m/logo.jpg, 25% s/logo.jpg
这样就会分别把高中低质量和图片放到 h, m, s 三个文件夹里了。

什么图层太多,你懒癌晚期?###

那就介绍个特殊图层 default####

新建一个空图层,命名为 default 然后空一格,接着写命令,它就是会对所有的图层生效了。
比如上面我们把 logo 图层只写个名字不加参数 logo.jpg
然后在default 图层这样:
default 100% h/, 50% m/, 25% s/
看看怎么样?

什么你不想分文件夹,想放在一起用后缀区分?####

试试这样:(我跟图里写的不一样,但道理相同)
default 100% -h, 50% -m, 25% -s
在这里插入图片描述

**统一添加后缀 **####

在这里插入图片描述

丢进文件夹####

在这里插入图片描述

高中低质量图片加后缀区分####

在这里插入图片描述


其实这个思路好像就有插件在用了。只是这次是官方加入了这个功能,但是总感觉有点打补丁的感觉不够王道。不过起码能解决点问题。其实我这里用的是精简版,所以并没有新手体验。

有了上面的介绍,再看下视频YOUKU点击观看 就算听不懂,看能也能懂怎么回事了。

想了解详情看原文吧:Generate image assets from layers


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

相关文章

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;它使用双向的多个连…

FTP Entering Extended Passive Mode

目录 原因 两种方法解决,哪个行用哪种 方法一 方法二 原因 FTP的连接建立有两种模式PORT

ftp的passive模式

昨天调试了半天的ftp passive模式&#xff0c;记录一下 今天在一台测试服务器上搭建ftp&#xff0c;折腾了许久。 主要是不了解ftp的passive模式和port模式的区别。这里记录一下。 和passive模式对应的叫做port模式&#xff0c;也叫做standard模式&#xff0c;也叫主动模式。 每…

一篇文章彻底掌握 FTP 服务器的 ACTIVE 与 PASSIVE 工作模式

1 背景 某客户现场&#xff0c;每天都会批量生成大量 CSV 文件存放到 FTP 系统&#xff0c;这些 CSV 文件需要导入到大数据平台 HIVE 数仓中做后续离线分析&#xff0c;且 HIVE 数仓中的离线分析作业目前是使用 JENKINS 来调度的。 由于这些 CSV 文件是每天都会生成&#xff0c…

passive 的事件监听器

很久以前&#xff0c;addEventListener() 的参数约定是这样的&#xff1a; addEventListener(type, listener, useCapture) 后来&#xff0c;最后一个参数&#xff0c;也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数&#xff0c;变成了可选参数&…

强化学习之Passive learning求解 (1)

在MDP系列博客中&#xff0c;我们以一个Agent在4*3网格中寻找终点最优的路径策略为例&#xff0c;论述了MDP问题的原理和求解。有了MDP讲解作为基础之后&#xff0c;我们就可以正式的切入到“强化学习”的学习中来了。强化学习的目的是通过观测到的reward来为当前环境学习一个&…

【重要!!】passive优化页面性能

在js中给dom元素添加监听事件&#xff1a; let dom1document.getElementById("box1"); function box(that){console.log(that); } dom1.addEventListener("click",function(){box(1)});一般都是这样&#xff0c;但是还是有第三个参数&#xff0c;Boolean类…

Passive Event Listener

起源 最近打开项目随便点点&#xff0c;控制台就开始报警&#xff1a; Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive 可以看到警告信息是element-ui和echa…