拿 PSD 切图时，如何快速准确地知道各区域的大小？

[jmyz0455]

我一直都是拿 Photoshop 来切图的，比如说有个图片我想知道它的长宽，我就右键图层或组-复制-新建文件，然后在新文件里裁切透明部分，在查看画布大小，我就知道这个图片准确的大小了，但是这个方法效率很低，而且有很多空白间距都不能知道它的实际大小，我只能用选取工具把空白部分框住，这下选择框上就会有宽高的像素大小显示，但是这个方法效率依然很低，且不一定准确。

请问各位是如何快速准确地知道各图片、空白区域的大小、距离的呢？

[66beta]

这种类型的切图，现在都是用 sketch 自动化了

[designer]

如果是想确定单个 PNG 的大小。
可以选中图层--右击转为智能图层--再双击智能图层：它会新开跳到另外一个新窗口。
这些都需要你熟悉快捷键。

[jmyz0455]

@66beta 不好意思我是 Windows10 的，可以说说别的办法吗？

[buckyRRRR]

assistor 标你妹 parker

[jmyz0455]

@designer 跳出新窗口后哪里看大小？空白间隙呢？

[designer]

@jmyz0455
自己去 google 快捷键查看尺寸。
这个 png 透明空隙没有了多余的，紧贴着四周。

[herozzm]

切刀

[swift]

设计师 mm 都给标注

[yoa1q7y]

ps6 貌似在用选框工具的时候旁边就有当前的选择尺寸
另外，在信息面板里也可以看到尺寸

给你上几个图看看



-----

[honk]

我用 QQ 截图，不要打我

[jmyz0455]

@yoa1q7y 我一直都是这么做的，但是特别考眼神和操作，老是怕拉错，有工具当然是最好的

[buckyRRRR]

assistor 标你妹 parker 再推荐一次，被无视好伤心

[lwbjing]

qq 截图路过…

[immjun]

不需要拉动选取， Ctrl 加鼠标点选图层 然后按 F8 在信息面板查看尺寸

[moosoome]

CC 版本一般是把需要切出来的那个图层命名为 xxx.jpg 或者 xxx.png ，然后点生成图片，就可以切出来了。另外有些设计师给的 PSD 一团糟，没标注到处都是合并的图层，我通常是用选区工具然后看信息。

[tmplinshi]

http://graphicdesign.stackexchange.com/a/54370

[lijsh]

新公司设计师 gg 都给标注，电脑就没装 PS ……

[66beta]

@jmyz0455 设计师 sketch 切好给你，你不用装 sketch

[jmyz0455]

@buckyRRRR 不不不，你说的那三个我下了正在看看哪个好用，谢谢了啊

[jmyz0455]

@herozzm 怎么搜不到这个工具名？

[jmyz0455]

@swift 额，看来得跟设计师好好沟通一下啊

[jmyz0455]

@honk 经常这样很累的...

[jmyz0455]

@lwbjing 哈哈

[jmyz0455]

@immjun 那空白的地方呢？

[jmyz0455]

@moosoome 选取了之后按什么看信息

[jmyz0455]

@lijsh 你公司的 GG 真好

[jmyz0455]

@tmplinshi 上面推荐的几个工具更快~

[herozzm]

@jmyz0455 PS 自带的工具：切刀，据说专为网页切图准备

[scg16]

Assistor PS

[haiyon]

说下自己切图时的过程 （ PS 模式）

1. 移动工具下 右击 选择要切的图片（多个辅助 Shift 健，图层分组情况下会不好定位，注意下即可）然后 cmd ／ ctrl + e 合并。 碰见形状图层建立个空白层辅助合并
2. 合并完成后 cmd ／ ctrl ＋ a 全选，（不想新建文件的情况下在全选后按上下左右键（随便一个）蚂蚁线会包上合并的图）蚂蚁线会选中整个画板然后 cmd ／ ctrl ＋ C ， cmd ／ ctrl ＋ N ， cmd ／ ctrl ＋ V ，好了现在就是最终图片结果，想看尺寸 cmd ／ ctrl ＋ a 一下，在按下 F8 想要的信息都有了。

3. 最后看完想要的信息了， cmd ／ ctrl ＋ alt ＋ shift ＋ w 导出 web 格式。。。。

嗯，上面过程基本可以满足大部分的需求了
另：别觉得复杂哈，对 ps 熟悉的话这是很快的，嗯 自己这么认为

[newbieo0O]

点中要查看的图层， ctrl + t, 然后 F8

[xuelaistar]

1.面板里把信息面板调出来，如果图片是单一图层且标准的话， ctrl/command+T 选中信息面板就有宽高了
2.非单一图层量间距空白区域我用的类似你的方法，这个把图放大量的就比较准啊

[an168bang521]

- 如果是想知道图片的大小， ctrl+鼠标单击图层的图标； F8 调出信息面板就可以了；还有一种简单的就是打开智能参考线，鼠标移上去就可以了，还可以看到距离周边的像素；

- 如果是为了看尺寸， PS 基础不怎么好，把文件生成 jpg ， png 等都可以，然后用像素大厨或者别的软件，自己把想要的标好，然后根据自己标好的看一下就 OK 了；（比用智能参考线还省事）

- 如果你最终目的，还要把一个网页内所有图片切出来，那就更简单了，可以用 PSCC ，把想要的图片按照规范命名好，然后单击生成图片资源，所有的图片都自动切好， PS 会自动放在同层文件夹里了（ assets 结尾的文件夹）；

[jmyz0455]

@haiyon 快捷键不复杂，但是有些步骤我不是很懂：
[选择要切的图片（多个辅助 Shift 健，图层分组情况下会不好定位，注意下即可）] 这个 Shift 是什么意思怎么用的，我按着 Shift 然后点鼠标没有用呢？


我的是 Photoshop CC 2015.5 ， Windows10 里 ctrl ＋ alt ＋ shift ＋ w 是 [导出为] ，那跟 ctrl ＋ alt ＋ shift ＋ s 弹出来窗口左上角的标题写着 [存储为 Web 所用格式（ 100%）] 有什么区别？我想知其然知其所以然，谢谢

[jmyz0455]

@herozzm 你说的切刀是按 C 快捷键里的“切片工具”？

[jmyz0455]

@an168bang521 我找不到生成图片资源这个选项的？

[jmyz0455]

@immjun 信息面板里面没有宽高啊，倒是点击图层后按 Ctrl + T 才会有

[haiyon]

@jmyz0455 按住 Shift 键时配合鼠标右键会出来图层选择，主要作用是多选。存储为和导出 web 格式区别在于后者会往最小了压缩图片

[jmyz0455]

@haiyon 哦哦，明白，那我第二条问题呢

话说

[haiyon]

@jmyz0455 刚才手机码字，句号后面那句的意思是我刚才理解成存储为，和导出 web 格式，嗯，这句是纠正。。。
看你用的 PS 版本导出为和存储为 web 格式的区别是 前者可以生成不同尺寸，如：一个图标本来是 18 * 18 你可以在里面设置 在导出一份 36*36 的也就是 @2x ，这好像是 2015 新增的功能，请参考 Sketch 里的导出。后者是传统的导出 web 格式，区别就是一个可以多份，不用重复操作，一个需要一次一次导（可能还要涉及到改资源尺寸）

[jmyz0455]

@haiyon 完全明白，谢谢了！
看你对 PS 那么熟，还有两个关于 PS 的小问题可以问你吗？
一个是使用切片工具后，选框隔壁会出现三个小图标，一个是数字一个是像图片的图标一个是像“ 8 ”的，请问这些小图标是什么意思呢？
第二个轻移玉步： https:\/\/www.v2ex.com\/t\/304307#reply0

[jmyz0455]

@haiyon https://www.v2ex.com/t/304307#reply0

[haiyon]

@jmyz0455 切片基本没用过，数字是应该是切片编号，中间那个应该是针对导出 html 会输出图片模式，后面 8 那个就是个 8 不是像，这个应该是针对的颜色模式 8 位。另：此答仅为个人理解。