PxCook+photoshop实现傻瓜式切图(推荐小白使用)

文章地址 https://segmentfault.com/a/1190000013290433
确定需求
刚入门前端的小伙伴经过一个阶段的学习,已经准备小试牛刀了。但看到设计师给出的psd图,又头疼了,天啊撸,怎么办,我不会切图啊。今天我就带领小白学习傻瓜式切图。包学包会。( ̄▽ ̄)"

所需软件
PxCook
photoshop
PxCook(像素大厨):可以对设计图进行标注。从而可以更方便的进行开发。这里我们使用的是它的插件完成切图。

PxCook与ps连接
使用photoshop打开你的psd图,通过编辑->增效工具->开启远程连接的支持。勾选"启用远程连接",输入密码,点击确定。(记住这一步的密码,之后要用)
打开PxCook软件,点击右上角的切图图标。如下图所示。
在这里插入图片描述
会弹出弹窗,如下图所示。
连接界面
输入刚刚在ps界面输入的密码。点击开始使用。如果出现下面的界面,恭喜你,连接成功啦!这就表示你可以开始切图。
图片描述
切图步骤
选择你要切的图层,点击切所选图层按钮 在弹出层上面的路径上就可以找到所有切的图片。
纸上得来终觉浅,我们来实际操作下把~
使用ps打开一张psd文件,按照如下操作,稍等片刻,就可以在路径下找到切好的图了。
图片描述
小技巧:如果要把很多图层一起切,可以新建组,把要切的图层放到组里面,选中组,点击切所选图层按钮即可。

是不是很简单,学会了不妨点个赞。

Photoshop切图批处理脚本可以帮助您自动化切图的过程,提高工作效率。以下是一个简单的Photoshop切图批处理脚本示例: ``` #target photoshop // 获取当前文档对象 var docRef = app.activeDocument; // 切图尺寸 var sliceWidth = 200; var sliceHeight = 200; // 切图起始位置 var startX = 0; var startY = 0; // 切图数量 var numSlicesX = Math.ceil(docRef.width / sliceWidth); var numSlicesY = Math.ceil(docRef.height / sliceHeight); // 切图循环 for (var i = 0; i < numSlicesX; i++) { for (var j = 0; j < numSlicesY; j++) { // 计算切图位置 var sliceX = startX + i * sliceWidth; var sliceY = startY + j * sliceHeight; // 计算切图区域 var sliceBounds = [ sliceX, sliceY, sliceX + sliceWidth, sliceY + sliceHeight ]; // 创建切图 var sliceRef = docRef.artLayers.add(); sliceRef.name = "Slice_" + i + "_" + j; sliceRef.bounds = sliceBounds; // 导出切图 var sliceName = sliceRef.name + "_" + docRef.name + ".png"; var exportOptions = new ExportOptionsSaveForWeb(); exportOptions.format = SaveDocumentType.PNG; exportOptions.PNG8 = false; exportOptions.transparency = true; exportOptions.interlaced = false; exportOptions.includeProfile = false; exportOptions.optimized = true; docRef.exportDocument(new File(docRef.path + "/" + sliceName), ExportType.SAVEFORWEB, exportOptions); // 删除切图 sliceRef.remove(); } } // 完成 alert("切图完成!"); ``` 这个脚本将文档分成若干个指定大小的切片,并将每个切片导出为PNG文件。您可以根据需要修改切片大小和导出选项。要使用此脚本,请将代码复制到一个文本编辑器中,并将文件保存为.jsx格式。然后在Photoshop中打开您要切图的文档,并选择“文件”>“脚本”>“浏览”,然后选择您保存的脚本文件。脚本将自动运行,并生成切片。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值