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

巧技
QiaTia
2年前
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。

    还没人来评论哎,快来抢沙发吧