已经决定好好研究前端开发了。虽然在这一年半的工作中，已经接触html、css、js也有一年多了吧，但是都没有系统的学习过，只是会调试，会写一些简单的代码，实现简单的功能。但是离真正从事前端开发还需要很多精力去研究。不打算学设计，所以就先从切图开始吧。

今天上网查到了还不错的资料，总算是能入门点，即使小小的进步我也要记录下来。积少成多嘛，不然可能会被后面的学习给冲掉。

设计图如图-1（该图是我从论坛的教程中下载的），第一步要做的是对设计图进行分析，主要分析三点：

  1. 哪些是需要单独的。即直接抠出来，如logo。
  2. 哪些是需要平铺的。如单色的背景，可抠出1px，让其重复显示即可。

  3. 哪些图片是需要sprite（子图）的。如

  4. 标签前的小图标，可将这些小图标放在同一张图片上，引用时通过像素控制引用不同的sprite。

    图1

因为我几乎无PS基础，所以当终于要开始抠图的时候，我是如此的激动，一直都感觉那是件高大上的事情。怀揣着敬畏，我开始了抠图。

一、直接抠出图片：

  1. 如图-2，选择“矩形选框工具”，对要直接抠出的图片画框，选择【编辑】->【合并拷贝】(快捷键Ctrl+Shift+C)，这样选区内的图片所有可见像素都已经拷贝到了PS剪贴板。

    图2

  2. 【文件】->【新建】，由于PS可以监视剪贴板，所以大小不用更改。直接确定。如图-3

    图3

  3. 然后黏贴Ctrl+V，就出现了如图-4的效果

    图4

  4. 【文件】->【存储为Web和设备所用格式（快捷键Ctrl+Shift+Alt+S）】，选择PNG-24进行存储，如图-5，点存储后，如图-6，选择仅限图片。

    图5

    图6

经过以上几步，抠图就完成啦！啦啦啦……

二、切平铺图片

  1. 先用放大镜将要切的背景方法，方便准确切割。

  2. 选择【矩形选择工具】，切成一块高度为背景高度、宽度随意的矩形。如图-7

    图7

  3. 平铺的图像一般做成1px的宽度，所以，再一个叫【单列选框工具】的东西派上用场了。 右击【矩形选择工具】，选择【单列选框工具】，如图-8。再选择工具栏上的【与选区交叉】的按钮，如图-9

    图8

    图9

  4. 在第2步画好的选区内部单击鼠标，即可得到1px宽度、原来的高度的选区。如图-10

    图10

  5. 合并拷贝】，后面的步骤和一、中的抠图一样。

三、切sprite的图片

切sprite 图片之前，应该知道，总共有多少张小图，然后，最大的图片是多大，再来进行操作。比如，此例中，右上角有四张图片，再加上二级菜单的一个小方点总共就是5张图片，而最大的就是右上角，为12px*12px。后期建立文件大小应该为60px*12px。

  1. 新建一个大小为60px12px的透明文件。并每隔12px拉一条参考线。（当然，此例中本来可以不用参考线，但在其它例子中都是需要的。），如图-11所示。

    图11

  2. 选择矩形选框工具，在【工具选项栏】上设置为【固定大小】，并将宽高设置为12px，如图-12所示。

    图12

  3. 【矩形选择工具】，做如图-13所示的选择

    图13

  4. 放大效果图，使用矩形选框工具单击，【合并拷贝】，粘贴到第1步中创建的透明文件中，如图-14所示

    图14

  5. 依次将其他的也粘贴过来，如图-15

    图15

  6. 后面的步骤和一、中的抠图一样。

在sprite那里之所以全部都放在相同大小的格子里，是为了方便后期定位，只需要每次的数值是12的倍数就行了。

因为对于我，切图可以算作零基础，所以我感觉今天学到这些，还是蛮有收获的。哈哈。继续努力学习。