用PS进行切片,网页设计通常是做整张网页图,但是不能直接用整张的图片放上去,因为太大很容易打不开,或是需要一张大图需要切成多个小版块用于添加不同的链接或者方便更换。cc版本有个自动切图的功能:

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

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

图片的所有资源都放在一个叫做“Address”的图层分组下。现在把分组名称重新改为“。然后我们到psd文件目录下,psd文件名字为“Artica - One Page PSD Template“,可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。然后打开”Artica - One Page PSD Template-assets“文件夹,看到有一个叫做的文件,正好是我们图层分组的名字,并且图片背景是透明的。

自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件,还支持生成svg文件。现在我想把下面的图标保存为svg格式,我们仅需要把图层文件名字改为“。打开”Artica - One Page PSD Template-assets“文件夹,可看到生成了文件。

用文本编辑器打开文件看看生成了什么内容。文件中包含了width和height以及css样式,正是一个比较常见的svg文件。我们通过修改css样式就可以改变图片的颜色了。然后保存文件。用浏览器打开,可看到图片颜色变了。