Web前端工程师必备的PS技能之切图

Love The Way You Lie 2022-05-22 09:05 270阅读 0赞

1.        PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了？有个选项没有选择“菜单栏-视图-对齐”，勾选下，里面的选项你可以看着勾选。还有一点要注意，你想吸附到图层像素边缘的时候，需要你选中这个图层。

2.        按照设计师提供的设计稿，实现HTML页面，需要将设计稿切分成为最终在页面中呈现的一个个图片，我们一般称之为“切图”。

3.        新建ps文件设置：分辨率 72像素/英寸，背景内容透明，存储预设很方便。

4.        移动工具设置：右下角的图层选项选择，左上角勾选“自动选择”，选择“图层”。选择图层可以用Ctrl + 鼠标左键。

5.        视图设置：勾选“智能参考线”“标尺”。右侧四大面板：图层，历史记录，信息，字符。信息面板设置。都改为像素。

6.        简单工具操作：移动、选区（四种选法）（单行和单列都只是一个像素）、套索、快速选择、裁剪、取色器。

7.        shift键和alt键针对选区是通用的，shift键表示增加选区的一部分，alt键表示减少选区的一部分。

8.        我们可以把PhotoShop CS版本时的切图功能称为传统切图，而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图，传统切图又分为全手工切图和参考线切图；现在CC版本提出的精准切图，切图人员可以依赖计算机把图层对象精确的切割出来，这样切割出来的图层肯定比传统切图切出来的精准度高。另一方面，CC版本可通过脚本执行全自动切图，这样完全解放了切图人员的双手。

9.        我们先把工具切换到“切片选择工具”，上面的菜单栏多了一个“隐藏自动切图”按钮。点击“隐藏自动切片”按钮，然后我们再看看切图一个就只有8个切图了，这8个切图真是我们自己切的。但细心一点的同学看到最后一个切图的编号是29，“隐藏自动切片”只是隐藏了自动生成的切片，而不是删除切片。

10.    切图完成之后就可以执行导出了。打开“文件”->“导出”->“存储为Web所用格式”（老版本打开方式为“文件”->“存储为Web所用格式”），弹出“存储为Web所用格式”窗口。需要设置几个选项，右上角下拉列表选择“PNG-24”，勾选“透明度”和“交错”选项。最后点击“存储…”，选择我们存储的路径。到目前为止，手动切图工作基本上就完成了。

11.    精准切图：打开菜单“文件”->”导出"->“将图层到处到文件”，弹出导出窗口。上面窗口需要填写几个参数，“目标”即导出到哪个目录下，“文件名前缀”为所有导出图片文件名称的前缀，“仅限可见图层”只导出可见图层，“文件类型”为导出文件的类型（例如png、jpg等）。最后点击“运行”按钮开始执行自动切图。

12.    自动切图

l  选择菜单“编辑”->”首选项"->“增效工具”，弹出下面的窗口。勾选“启用生成器”。

l  勾选“文件”->“生成”->“图像资源”菜单。

l  现在把分组名称重新改为“Address.png”。然后我们到psd文件目录下，psd文件名字为“Artica- One Page PSD Template“，可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。

l  svg格式导出

l  WebP格式导出：文件->抽出资源

13.    自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件，还支持生成svg文件。

14.    参考线不会吸附到羽化的地方，而是实实在在的地方。

15.    传统切图可以剪裁后再切，事半功倍。

16.    Photoshop CC 自动生成CSS：右键->复制CSS。