第144天:PS切图方法总结

飞来科技  发布时间:2018-01-14 04:53:31

本文关键词:ps 存储为web所用格式

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

总体来说,切图方法分为:传统切图(手动切图、参考线切图)、精准切图。

技术分享图片

图中的“切片工具”、“切片选择工具”是我们切图需要用到的两个工具。“切片工具”和“选择工具”有点相似,都是选择一个区域,不同的是切片工具选择了区域后会标记为一个切图。例如下图中我使用了切片工具切了一个小片,左上角的03表示切片的名字。

技术分享图片

如果我们使用切片工具切了十几张图,现在觉得某些需要调整或者删除,这个时候我们就可以使用“切片选择工具”,顾名思义可以用来选择我们之前切出的图。然后右键选择的图弹出菜单,菜单有包括“删除”操作。

技术分享图片

不管是传统切图或者精准切图的方法介绍,我都使用下面的图片作为例子。图片设计比较简单,包含的内容比较少,便于介绍。

技术分享图片

(1) 手动切图需要切图人员完全手动的使用“切片工具”一个一个的去切割图片。首选,选择“切片工具”,然后在需要切图的图标上使用“切片工具”选择一个包含了图标区域。例如下图的ADDRESS文字上方的图标就使用了“切片工具”选中。继续切其他图标,从图中也可看出每个切图左上角都有一个数字,这个数字就是切图的编号,表示当且切图时第几个切图。

技术分享图片

(2)上面的切图也暴露除了几个疑问,我先把上图的底部放大一点,能看清楚些。图片的右下角有一个区域,区域左上角有一个数字为30的编号,这个区域也是一个切图,30是我们看到的最大数字,这说明了其实我们一共切了30个图。明明我们只切了8个图片,为什么一下子又变成了30个切图?

技术分享图片

(3) 这是因为我们在切图的时候,PS自动的添加了一些切图。我们就拿07号切图来说,当我们手动切割了电话图标,在07好切图的右边(08)和下边(10)都会自动生成一个切图。随着切图越来越多,自动生成的切图也会越来越多,最终一共包含了30个切图。而且这些自动生成的切图我们是不能删除的。

技术分享图片

(4)有时候看着这么多切图觉得挺烦,那可不可以只显示我们自己切的图?答案是肯定的。我们先把工具切换到“切片选择工具”,上面的菜单栏多了一个“隐藏自动切图”按钮。

技术分享图片

(5)点击“隐藏自动切片”按钮,然后我们再看看切图一个就只有8个切图了,这8个切图真是我们自己切的。但细心一点的同学看到最后一个切图的编号是29,“隐藏自动切片”只是隐藏了自动生成的切片,而不是删除切片。

技术分享图片

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

技术分享图片

在介绍参考线切图之前,我们需要搞清楚什么是参考线。先讨论一个问题,假如我们需要使用PS设置一个网页,在网页内容居中显示,左右两边都流出200像素的宽度。如果两边都有一条参考线做参考,这样是不是就很方便了。

参考线的添加有两种方式:

第一种:

(1)打开菜单“视图”->“新建参考线”,弹出“新建参考线”。参考包括“取向”(水平或垂直)、“位置”。例如画布宽度为1200,那么在垂直方向需要在位置分别为200和1000像素添加两条垂直方向的参考线。

本文来自互联网,由机器人自动采编,文章内容不代表本站观点,请读者自行辨别信息真伪,如有发现不适内容,请及时联系站长处理。

相关阅读