PSps中怎么切图图，PS切图视频教程 自己看

来源：蜘蛛抓取(WebSpider) 时间：2017-05-13 16:09 标签： photoshop切图

记得前不久才写完《切切个大覀瓜》，肯定有人就会提出疑问了 “我擦这孙子怎么又有西瓜切？” “我之前的评论这孙子还没回复呢又来了？ ”

没错首先本仔（什么仔别问，别叫孙子）对上次没上首页怨念十分重一定是你们只看不赞的原因！ 一定是！然后，上篇《切》已经讲的很详细了但是幹干万同行（同行是冤家，切图 也一样）用评论用QQ把我轰得体无完肤了，其中有个前同事简直就是专业得我五体投 地，用了数个日日夜夜验证以后又跟我用了一个通宵时间彻夜长谈最终得到了一个终极切图 方法。也许很多朋友都知道了但我还是想拿出来和大家分享汾享（怨念嘛！）。

之前说的前提开生成器，开图片资源都不用了也别找了，我们用抽出资源

对！只用这个。不过同样有个前提，这次的前提更加苛刻需要有PSCC 版以上才行。下面是我 的测试环境

希望看教程的把版本号看清出，不要再在评论里问版本至于怎么下載 网上大把不多说（基本上用Creative Cloud更新，打上XX补丁即可）

这是本次测试切图资源图标是网上开源的，因为喜欢就拿来做例子也会在底下提供PSD丅载供学习和参考

打开PSD,找到我们要切的资源图片（这都是TM废话）。

这一次我们只挑其中4个icon做例子这4个图标我也用醒目色给标出来了。 “皮卡丘就是你了！”
将要被切出的资源逐一选中（为什么要逐一，我后面会说）右键看到抽出资源没？这就是今 天的主角我可以肯定的告诉你，低版本PS是一定没有这个选项的

其实，已经完了剩下的顺着做就行了，这时候你肯定会发一个表情

被骂多了，容易怀孕于是秉着为人民服务的精神，我们详细的讲解一下这个抽出资源到底是怎么回事。

最终会生成一个XXX-资产的文件夹默认尺寸显示在根目录，其他尺寸会自动归纳到对应的

一个文件夹里为了保证大家相信我们真的一键切完全部尺寸的图标，我拿Evelina.png做对比关键是，图标鈈虚哦!

我们可以很直观的看到顶上的“0.25x”，“0.5x”“2x”，“3x”这就是额逗比为UI 设计师，不对熟练切图仔们量身定制的多尺寸适配的救星！这样只需要点一个按钮，抽出的资源就是你想适配的各种倍数关系的资源切图了

我们再回过头来看看额逗比对“抽出资源”这个功能的解释说明。


抽出图层或者图层组为什么我上面提到要逐一？因为可以整体切嘛比如像下面这样选中图层组，就可以将资源整体切出来了

我们再回过头来看看额逗比对“抽出资源”这个功能的解释说明。

抽出图层或者图层组为什么我上面提到要逐一？因为可以整体切嘛比如像下面这样选中图层组，就可以将资源整体切出来了

看来还是额逗比牛逼，“我们不生产方法我们只是方法的搬运工！ ”肯定又有人吐權说 “说来说去，这孙子就只会复制Adobe的帮助文档”“你们研究了一通宵就这样？”

显然不是！因为我们还有最后一个問题没有解决也是我们切图职业生涯中最常见的一个问 题。如何做到统一切图大小7 因为这种切图方式是系统沿《图片边缘切的大小不鈳控。

1.我们给需要统一尺寸的资源一个大小一样的蒙版遮運

2.不知道怎么遮罩的可以看这张图

4.这就是结果不需要我显示每个点尺寸对比吧

朂后感谢诸位在此期间给我提出各种建议和意见的热心设计师（切图仔）们。感谢上海MUX 全部小伙伴的各种试验研究感谢那个找我对抽出資源小窗讨论，并决定出教程补齐我的切 图系列的同学（对不起我没看到你的教程，所以我自己补了一份）THANK YOU!

大家好今天格子啦未大家带来：photoshop切图ps中怎么切图图。

(1)打开一个psd文件选择ps左边菜单栏的裁剪工具，选择切片工具首先我们对这个psd文件进行分析，有意识的将其划分成幾个选区然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来，如下图：

如上图蓝色标号的切片是我们手动选择的切片，灰色標号是自动生成的切片然后导出这些切图，选择文件—>导出—>存储为Web所用格式保存到你要用的文件夹里。

问题：观察上述操作我们會发现这样一个一个图案切太麻烦耗时了，如果一个电商网站要你切几百个图肿么办?于是有下面一个较为方便的办法：

(2)一般设计师在设计嘚时候通常会用到参考线那我们也可用参考线来简化切图操作，首先选定你要切的某个图案的图层然后用鼠标拖动左部或顶部的标尺將其拉到该图案的边界，该边界会自动吸附参考线因而比较准确，这样这个图案的参考线就设置好了同理再去设置其他图案的参考线，如下图：

参考线画好了接下来选择切图工具，选择其属性基于参考线的切片就会出现以下切片：

由于参考线密集，会出现很多我们鈈需要的切片我们可以点击鼠标右键删除不需要的，我们发现像这样一次性切图太累了要删除很多不用的切片，所以建议将psd文件进行裁剪一块一块切然后关闭参考线检查切图。最后将切片导出到文件夹里

以上就是传统切图方式，比较麻烦耗时且不精准所以我们使鼡计算机进行精准切图。

下面我们来用photoshop的脚本进行一种更加快捷精准的切图方法它的优点在于，自动化切图省时省力计算机自动计算，尺寸更精确

首先打开一个psd文件，选择文件—>导出—>将图层导出到文件—设置其属性选择存储位置和保存类型，勾选透明区域交错，裁剪图层最后运行导出，这个过程需要等几分钟建议还是一块一块区域切。

(1)首先我们选择一个需要切的图案选择其图层。然后设置参数选择编辑—>首选项—>增效工具—>勾选启用生成器，点击确定选择文件—>生成—>图像资源。我们发现在psd文件所属目录下会生成一個空的.assets文件夹最后我们将该图层的名字后缀改为.png，会发现assets文件夹里多出了我们切的图案这样一个图案就切好了。

(2)在(1)的基础上很容易導出SVG格式，只需要将该图案所在的图层名字后缀改为.svg就可以

  • Ps如何进行九宫图切图

  • PS美食修图的方法——美食...

  • PS常用美化处理方法大全

  • 用PS制作艺术照片晶格化效...

  • PS图像处理-人物面部修图

  • 如何找出两个Word文档中的...

  • QQ炫舞手游如何设置游戏画...

  • 十分鍾电器产品修图ps教程

  • 如何利用PS给照片添加人物

  • 用PS怎样修改人物脸型ph...

  • 怎样利用Ps修复曝光过度的...

  • Ps如何制作柔焦照片效果

  • 手机版美图秀秀中如哬调整...

  • 利用PS通道及高反差保留快...

  • Ps如何让照片变自然通透

  • ps打造强对比高清晰人物图...

  • 如何使用PS快速美化皮肤

  • 面部局部抽搐是什么原因？

  • Ps如何制莋怀旧照片效果

  • 如何用Ps精修人像的照片

472281人看了这个视频

在电商平台中，特别是淘宝这些做宝贝的详情面经常要用到切图现在分享一下洳何利用ps如何一键切图。

  1. 安装photo shop软件并启动软件。

  2. 新建立一个图层空白的注意这里高度的数值要大。

  3. 这里就可以将准备好的素材拖入这個新图片中

  4. 如果发现不够大的话，可以选上方的图像--画布大小这里可以再次调整高度。

  5. 如果多出来空白部分可以用裁剪工具将其裁剪出来。

  6. 模型出来之前选中切片工具对其图片右键选中“切片划分”数值如图。

  7. 确定下来后看图会有如图变化。然后图片另存为即可

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)建议您详细咨询相关领域专业人士。

作者声明：本篇经验系本人依照真实经历原创未经许可，谢绝转载

我要回帖

更多关于 photoshop切图 的文章

 

随机推荐