前端学习第一步----切图仔的诞生

　　刚刚学习了一下前端的入门课程，将设计师设计的logo等图片从PSD文件中切出来，并保存为PNG格式。PNG格式的主要优点就是背景色可以为空白，不同于普通格式的图片的白色。使用的工具是Photoshop

　　首先先了解下ps中的基础概念，图层，选区，图层的合并，图层的移动。

0.ps的基本操作，Alt+左键可以放大图片，空格+左键可以移动图片

1，如何选中一个图层，我们首先将鼠标移动到选择工具，然后移动到我们要选中的图层上按住Ctrl+左键，会自动在图层中找到该对应的图层，找到该图层后我们再在该图层的图标上按住Ctrl+左键，这样就选中了我们想要选中的图层。

2.选中多个图层，我们还是按照上述步骤找到每个图层对应在图层中的位置，然后使用Ctrl选中我们想要的图层按住Ctrl+G来将这些图层们组合为一个组，有了组之后我们可以将组变换为一个图层，这样我们就可以像选中一个图层一样进行操作了。

3.吸管工具的使用，这个功能很简单我们可以通过该工具来确定设计师设计的颜色的RGB值，便于我们后期使用。

4，字符界面的打开，我们还需要在窗口上打开字符，信息面板，这样我们就可以知道设计师设计稿中的字体类型和大小等信息。

5.现在就到了最重要的一步了，切图了我一共了解了三种切图方式，各自有优缺点。自己觉得哪种合适就选择哪种。

　　第一种，通过第2点教的选中多个图层的方法选中我们需要切的logo，然后通过选区工具来确定我们logo的具体大小，然后我们就可以新建一个图片大小和logo一样。我们可以直接通过手动拖拽来将该图层组移动到新的图片中，移动到新的图片中后我们要注意将移过来的图层居中放置。具体的居中方式如下：首先我们选中新图片的背景图层（这地方有可能他会上锁，你双击该图层后会出现一个面板，然后点击确定就可以解锁了）选中后我们在点击我们移动过来的图层在上方面板中会有一个上对齐，居中对齐等，选择自己想要的对齐方式。

　　第二种是通过切片工具来实现的，首先选中切片工具（如果没有找到请选择裁剪工具长按后会出现）然后按照需要切取的地方手动拉取药裁剪的地方，完成后选择文件->存储为Web所用格式

　　第三种就是通过新建参考线（首先Ctrl+R调出标尺，然后可以直接在标尺上拖出参考线）来将我们需要切取得部分分割出来，然后点击按照参考线切片。注意这里可以选择删除多余的切片，可以只留我们需要的部分进行切取。

转载于:https://www.cnblogs.com/strshun/p/strshun.html