Photoshop 与 Web 切图

Photoshop 的功能太强大,太丰富,但是对于 Web 开发者来说用到的并不算多,切图就算一个。

作为前端工程师,懂得如何利用 Photoshop 从网页设计师提供的 psd 中获取网页开发中需要使用到的资源,比较节省时间和资源。

说明

本文所有操作均在 Photoshop CS 6 下进行。

Photoshop 界面设置

新建设置

网页设计中常用的默认尺寸参数和快捷键有如下几点。

  • Ctrl + N

新建图片。

  • 图片尺寸

“预设” 中选择自定义。Web 中宽是固定的而长是不定的,常用的配置是:1920 x 2000。

  • 分辨率:72 像素/英寸。

  • 颜色模式: RGB 颜色、8 位。

  • 背景内容:透明。

  • 单位改为像素

对于网页设计来说,图片的尺寸基本上都是按像素算,而平面设计采用厘米比较多,因为平面设计基本上需要打印成实物,而网页设计都在计算机中,计算机中就用像素作为单位。修改单位可以在新建图片的时候修改,也可以更改首选项: “编辑” -> “首选项” -> “单位与标尺”,然后将所有单位改为像素,屏幕分辨率改为 72 像素/英寸。

说明

可以将上述预设保存起来,当要进行网页设计的时候就采用该预设设置。

移动工具设置

移动工具主要是用于移动图层,进行视觉上的调整。如果图层较少的图片,可以直接按 V 选择移动工具进行移动。

而一般设计得比较精彩的网页图层都比较多,为了提高移动图层的效率和准确性,这里工具栏中不要选择 “自动选择”,同时后面选择 “图层”,然后使用快捷键:Ctrl/Command + 鼠标左键,注意按快捷键的同时要选中想要移动的图层,选中后,PS 会在所有图层中自动定位到该图层对应的名称。

视图设置

点击主菜单上的 “视图”,选择 “显示”,勾选 “智能参考线”;然后打开 标尺:Ctrl + R。

窗口设置

关于 Web 切图的窗口设置,总结起来主要就是 Photoshop 四大面板:信息、字符、图层、历史记录。其他功能对于前端工程师来说基本可以关闭。

打开主菜单中的 “窗口”,取消所有选择然后选择四大面板:”信息”、”字符”、”图层”、”历史记录”。然后将其摆放在 Photoshop 右边你喜欢的位置。我的效果如下:

Photoshop 四大面板

工作区

新建一个工作区是为了防止误回到基本功能,可以快速恢复熟悉的已经设置好的工具界面。新建步骤是:

“窗口” -> “工作区” -> “新建工作区” -> 输入工作区名字然后勾选下面的 “键盘快捷键” 和 “菜单”,最后保存即可。

Photoshop 基本操作

认识 Photoshop 软件的基本组成

Photoshop 软件的布局比较灵活,位置也可以自定义,以我上面那张图片来简单说明一下。

  • 最顶层:主菜单。

  • 最左边:工具栏。

如果工具栏右下方有三角形,则说明该工具还有附加选项,可以通过鼠标右键打开附加选项,然后根据需要选择。

同一个工具的不同扩展的菜单栏都是一样的。

  • 第二层:每种工具的菜单栏。

  • 中间:画布主体。

  • 最右边:已选择的窗口。

  • 最底部:图片的简要信息。

操作 Photoshop 主要就是操作工具栏中的某个工具对图片进行某种操作。所以需要学习常用的几个工具。

每选择一个工具后,单机鼠标右键都可以弹出属性设置。

移动工具 (V)

上面已经说过了。

选区工具 (M)

选区的结果一定是一块闭合的区域,无论是使用普通选取工具还是套手工具,以及快速选择工具。

选区有四种状态:基本、加、减、乘 ( 笛卡尔乘积 )。每种状态是什么效果实际操作一遍就知道了。

套手工具 (L)

相比只有矩形和椭圆的选取工具来说,套手工具可以做到精确选择不规则的区域。

  • 多边形套索工具 (L)

选择多边形选区,可以不手动结尾,而通过双击鼠标左键快速首尾相连。

  • 磁性套索工具 (L)

磁性套索工具可以根据颜色来进行某些判断,即尽量将套索选择在颜色的色差之间,从而更适合抠不规则图形。

配合 Shift 键,磁性套索工具可以针对某些不易选择的小面积区域进行更精确的调整。

快速选择工具 (W)

  • 魔棒工具

剪裁工具 (C)

从画布中剪裁部分需要的区域。有一个精确裁剪的技巧,即利用计算机自动选择。具体操作是:选中图层后在选择剪裁工具,识别出来后按 enter 裁剪。

  • 切片工具

吸管工具 (I)

获得前景色和背景色信息。

  • 颜色取样器工具

获得某个像素的 RGB 颜色组成。

污点修复画笔工具 (J)

  • 修复画笔工具

  • 修补工具

  • 红眼工具

画笔工具 (B)

  • 铅笔工具

仿制图章工具 (S)

  • 图案图章工具

历史纪录画笔工具 (Y)

可以在历史记录中每条记录的前面勾选上 “设置历史记录画笔的源”,然后回到正在编辑的画布使用该画笔,适合人脸”美容”。

  • 历史纪录艺术画笔工具

橡皮擦工具 (E)

  • 背景橡皮擦工具

  • 魔术橡皮擦工具

渐变工具 (G)

模糊工具

  • 锐化工具

  • 涂抹工具

减淡工具 (O)

  • 加深工具

  • 海绵工具

钢笔工具 (P)

  • 添加/删除锚点工具

横排/竖排文字工具 (T)

路径选择工具 (A)

形状选择工具 (U)

抓手工具 (H/R)

Photoshop 切图

  • 传统切图

传统切图中分为切图和切片,利用的就是裁剪工具的切片扩展一片片切,就算是借助参考线,但是总的来说效率很低,切出来的图片很多是不需要的,阴影也很难切出来。此外,不同的人切出来的图片可能不能保证完全一致,不过有时候还是会用传统切片。

参考线的确定就是从上端和左端参考线里面拖出来放到画布,参考线摆放结束后选择切片工具,然后从菜单栏中选择 “基于参考线的切片”,之后可以根据需要继续调整,调整结束后导出为图片。

可以先用参考线先切成一个个大片然后再从切出来的大切片继续切小切片,这样或许会更精确。

传统切图结束后,选择 “文件” -> “存储为 Web 所用格式”,然后选择存储路径。

  • 精准切图

利用 Photoshop 自动计算脚本来自动化切图,这样比人为切图更精确,同时保留阴影。

此外,会自动按图层名格式化命名所有导出图片,这样一来只要在制作网页的时候合理命名图层,那么到时候就可以不用更名就能得到正确的文件名。

具体操作是:”文件” -> “脚本” -> “将图层导出到文件” -> 选择保存的位置 -> 指定文件前缀 -> “文件类型” 选择 png,勾选 “透明区域”、”交错”、”裁切图层”,然后运行,等待脚本执行结束。

脚本执行过程中,每次切图都会不断删减其他多余图层,然后截取到文件。需要注意的就是必须要有多个图层才能运行该脚本。

扩展知识

  • 通过重命名图层得到图片

通过启用增效工具 ( Ctrl + K ):”编辑” -> “首选项” -> “增效工具”,然后启用生成器,保存确定后重启 Photoshop。( 不过 Photoshop CS 6 并无该功能 )

然后:”文件” -> “生成” -> 勾选”图像资源”。

之后可以通过直接在 Photoshop 中重命名图层的方式来导出图片。命名的格式可以根据需要合理优化,比如针对 Retina 显示屏,可以这么命名:

Retina 200%name @2x.png

这样一来,只要在制作图片的过程中通过指定合理的图片后缀就可以直接导出到实际需要的图片,这样非常方便。

也可以将图层保存为 svg 格式的图片,svg 格式的图片可以自适应大小,同时图片的大小很小,节约空间。不过具体的显示效果可能需要修改 svg 图片的代码,因为默认会填充一些或许不能正确显示的颜色。

  • 通过抽取资源

只适合 Photoshop CC 2014 后的版本。具体操作是:”文件” -> “抽出资源”,然后选择抽出资源的格式。

  • 复制 CSS

可以将某个图层的样式转换为 CSS 代码,并且实际的效果和图片一模一样,这个对于前端工程师来说真的非常方便。

具体操作是:”图层” -> “复制 CSS”。然后粘贴到编辑器中就可以看见 CSS 源码,可以看到类选择器的名字默认就是图层名字。

需要注意的是外部引用的智能对象不支持复制 CSS。

  • 图层管理

可以在很多图层中按不同方式查找某个图层。具体操作是在图层面板中选择搜索类型,然后输入关键字即可进行查找。

说明

Jpg 格式的图片可以直接在 Photoshop 中通过命名的方式来指定图片品质,比如 logo.jpg8,则会生成原品质的 80% 质量图片。

Photoshop 快捷键

快捷键的使用需要在自然状态下生效,即非编辑状态。

Shift 键的妙用

可以在选区的时候快速画出正圆、正方形。不过需要注意一定要先松开鼠标再松开 Shift 键才能最终成为正圆和正方形,否则仍然是普通圆和矩形。

按住 Shift 默认认为增加选区/放大图片。

Shift + 每种工具的快捷键可以在该 工具的所有扩展中切换。

Alt 键的妙用

可在选区时候固定圆心、矩形的中心,并且该中心就是开始选区时鼠标的位置。这可以和 Shift 搭配使用来画一个固定中心的正圆或正方形。

按住 Alt 默认认为删除选区/缩小图片。

组合键

  • Ctrl + +/-:放大和缩小图片。

  • Ctrl + D:删除选区。

tab

全屏显示/和取消全屏显示图片。

Photoshop 与 Web 切图总结

Photoshop 与 Web 切图

其他

本文最后修改时间: 2015年10月11日 22:37:28 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 嵌入式的一般思路

All The Best

下一篇 查找文件中的某个字符串