已经决定好好研究前端开发了。虽然在这一年半的工作中,已经接触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的倍数就行了。

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