前端实战系列之---快速切图的方法

个人学习 ：参考链接：https://www.cnblogs.com/w-wanglei/p/5579270.html

慕课网的切图教程 http://www.imooc.com/learn/506

切图方法分类

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

    总体来说，切图方法分为：传统切图（手动切图、参考线切图）、精准切图。

PS之前的准备工作

   1.关闭不必要的窗口。打开PhotoShop，在开始P图或者切图之前，通常我们需要关闭不必要的窗口，仅仅保留在切图过程中用到的窗口。窗口的打开或关闭都可通过“窗口”菜单控制。一般网页设计需要用到的几个窗口是：信息、字符、图层、历史记录。

2.设置面板信息。有些时候我们在移动鼠标或者选择区域时，想知道鼠标位置或者选择区域的大小。选中“信息”窗口，打开“面板选项…”。

  设置面板的第一颜色信息、第二颜色信息的模式为“RGB”颜色，设置鼠标坐标的标尺单位为“像素”，勾选“文档尺寸”，这些设置后面都会用到。设置完成后，我们用“选择工具”在工作区选择一个区域，信息窗口中就显示了鼠标的坐标、区域的长和宽、以及RGB颜色

  3.设置单位与标尺。选择菜单“编辑”->“首选项”->“单位与标尺”，把标尺、文字单位都改为像素。

 

  4.智能参考线和标尺。打开“视图”->“显示” 菜单，勾选“智能参考线”。选中“视图”菜单，勾选“标尺”(ctr+R)。

    5.保存工作区。界面菜单设置后，我们肯定不希望第二次打开还得重新设置。打开菜单”窗口“->”工作区“->”新建工作区“，新建一个工作区域。下次再设计切图时可直接使用新建的工作区。

 

 

常用工具

移动工具(快捷键v)

 

1.选择工具(快捷键M)。在工具栏中选中“选择工具”，在图层上选择一个区域，然后右键点击选中区域，选择”填充…“,弹出填充窗口，我们可以使用前景色、背景色或者其他颜色填充选择区域

选择工具包含有矩形、椭圆、单行、单列选取工具。选择了“选择区域”工具后，上面菜单多了几个按钮，分别表示区域叠加、减消、区域交集。这几个按钮实现不同的选取功能，都可以使用快捷键Shift(叠加)和Alt键(减消)。如果是画椭圆和矩形，按住shift键时可画正方形和圆。但必须先放开鼠标左键，再放shift键才能画成功。

2.裁剪工具。裁剪工具用于剪切出仅仅我们需要的内容。在使用其他的区域选择工具后，把菜单切换到裁剪工具，可直接裁剪之前选择的区域。

 

切图方法分类

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

    总体来说，切图方法分为：传统切图（手动切图、参考线切图）、精准切图。

其实剪切工具里边一共为我们提供了四个工具。分别为“裁剪工具”、“透视裁剪工具”、“切片工具”、“切片选择工具”。

传统切图