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

我的学习 ：参考连接：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版本可经过脚本执行全自动切图，这样彻底解放了切图人员的双手。

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

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

传统切图