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

article/2025/10/26 5:57:58

原文来自公众号：希音的设计笔记

获取方式 关注公众号：希音的设计笔记，后台回复 切图插件
👇👇
限时免费扫码进群，交流行业设计
在这里插入图片描述

添加小编微信一起见证彼此成长

最近有刚转战sketch的同学问到两个问题，其实这两个问题也可以归为一个来解决，sketch切图有很多种表现形式，根据需求，我们需要切出不同形式的切图，今天来实操一下如何批量切出固定大小的切图并保留透明部分？

在这里我们需要用到一个插件，不得不说真的超级好用，效率超高
在这里插入图片描述

确定一下切片大小，36*36px，每个图标都打个组，按规范命名
在这里插入图片描述

把图标选中，选择插件

在这里插入图片描述
在这里插入图片描述

已经切好了，直接导出就可以啦
在这里插入图片描述

我这篇文章比较简单，有的同学第一次用肯定会各种问题，其实都可以很好的解决，耐心多尝试，掌握了之后真的超级简单。


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

相关文章

利用Photoshop进行快速切图

利用Photoshop进行快速切图

概要 在UI设计中我们常常使用Ai来进行矢量图的绘制，然后导入Ps中进行设计、排版和导出。 在以前的版本中，切图一直是个很麻烦的事情，要么依托于脚本，要么手动一张张导出，很不方便，这种窘况在Photoshop CC…
阅读更多...
前端必备 PS三种切图方法 Cutterman最好用的切图工具

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

文章目录 1.常见的图片格式方法1. PS图层切图方法2. 切片切图方法3.Cutterman插件切图(最简单、最好用的切图工具) 准备工作：一个非绿色版的PS软件，如果还没安装好PS的，建议在微信搜“软件安装目录”小程序，里面有大多数办公和编程…
阅读更多...
图像处理：U-Net中的重叠-切片(Overlap-tile)

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

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

图像分割之（二）Graph Cut（图割）

图像分割之（二）Graph Cut（图割） zouxy09qq.com http://blog.csdn.net/zouxy09 上一文对主要的分割方法做了一个概述。那下面我们对其中几个比较感兴趣的算法做个学习。下面主要是Graph Cut，下一个博文我们再学习下Gr…
阅读更多...
【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）

【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）

PSD图像格式是Photoshop的专用格式，里面可以存放图层、通道、遮置等多种设计稿，对我们前端人员来说，最大的优点，我们可以直接从上面复制文字，获得图片，还可以测量大小和距离，我们开发需要的是一…
阅读更多...
vue中的.passive修饰符的作用以及应用场景

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

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

burp插件系列1 passive-scan-client

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

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”

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 Entering Extended Passive Mode

目录 原因 两种方法解决，哪个行用哪种 方法一 方法二 原因 FTP的连接建立有两种模式PORT
阅读更多...
ftp的passive模式

ftp的passive模式

昨天调试了半天的ftp passive模式&#xff0c;记录一下 今天在一台测试服务器上搭建ftp&#xff0c;折腾了许久。 主要是不了解ftp的passive模式和port模式的区别。这里记录一下。 和passive模式对应的叫做port模式&#xff0c;也叫做standard模式&#xff0c;也叫主动模式。 每…
阅读更多...
一篇文章彻底掌握 FTP 服务器的 ACTIVE 与 PASSIVE 工作模式

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

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

passive 的事件监听器

很久以前&#xff0c;addEventListener() 的参数约定是这样的&#xff1a; addEventListener(type, listener, useCapture) 后来&#xff0c;最后一个参数&#xff0c;也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数&#xff0c;变成了可选参数&…
阅读更多...
强化学习之Passive learning求解 (1)

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

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

【重要！！】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

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…
阅读更多...
passive的作用和原理

passive的作用和原理

passived到底有什么用&#xff1f; passived主要用于优化浏览器页面滚动的性能&#xff0c;让页面滚动更顺滑~~BetterScroll&#xff1a;可能是目前最好用的移动端滚动插件 passived产生的历史时间线 addEventListener()&#xff1a;大家都是认识的&#xff0c;为dom添加触发…
阅读更多...
Java并发编程—CompletableFuture的介绍和使用

Java并发编程—CompletableFuture的介绍和使用

在博主上一篇博客介绍中&#xff0c;Java并发编程—java异步Future的迭代过程_小魏快起床的博客-CSDN博客&#xff0c;这里面给大家分析了Future的使用过程和一些存在的问题&#xff0c;那么针对里面出现的阻塞问题&#xff0c;博主将在这一篇文章给大家介绍清楚 &#x1f34f…
阅读更多...
Java8 CompletableFuture runAsync等使用学习总结 submit() execute()等

Java8 CompletableFuture runAsync等使用学习总结 submit() execute()等

一般的 Executors 的 execute以及submit 并发包下 Executors 创建的线程存在 一个 execute()&#xff0c;以及三个 submit() 不同的是使用 execute() 执行的任务是没有返回值的&#xff0c;使用 submit() 则是存在返回值的&#xff0c;这与接下里要说的 CompletableFuture.run…
阅读更多...
实现异步编程，这个工具类你得掌握！

实现异步编程，这个工具类你得掌握！

前言 最近看公司代码&#xff0c;多线程编程用的比较多&#xff0c;其中有对CompletableFuture的使用&#xff0c;所以想写篇文章总结下 在日常的Java8项目开发中&#xff0c;CompletableFuture是很强大的并行开发工具&#xff0c;其语法贴近java8的语法风格&#xff0c;与st…
阅读更多...
推荐文章

Copyright @ 2022~2023