前端的开端——切图
Contents
[NOTE] Updated January 19, 2015. This article may have outdated content or subject matter.
已经决定好好研究前端开发了。虽然在这一年半的工作中,已经接触html、css、js也有一年多了吧,但是都没有系统的学习过,只是会调试,会写一些简单的代码,实现简单的功能。但是离真正从事前端开发还需要很多精力去研究。不打算学设计,所以就先从切图开始吧。
今天上网查到了还不错的资料,总算是能入门点,即使小小的进步我也要记录下来。积少成多嘛,不然可能会被后面的学习给冲掉。
设计图如图-1(该图是我从论坛的教程中下载的),第一步要做的是对设计图进行分析,主要分析三点:
- 哪些是需要单独的。即直接抠出来,如logo。
- 哪些是需要平铺的。如单色的背景,可抠出1px,让其重复显示即可。
哪些图片是需要sprite(子图)的。如
- 标签前的小图标,可将这些小图标放在同一张图片上,引用时通过像素控制引用不同的sprite。
因为我几乎无PS基础,所以当终于要开始抠图的时候,我是如此的激动,一直都感觉那是件高大上的事情。怀揣着敬畏,我开始了抠图。
一、直接抠出图片:
如图-2,选择“矩形选框工具”,对要直接抠出的图片画框,选择【编辑】->【合并拷贝】(快捷键Ctrl+Shift+C),这样选区内的图片所有可见像素都已经拷贝到了PS剪贴板。
【文件】->【新建】,由于PS可以监视剪贴板,所以大小不用更改。直接确定。如图-3
然后黏贴Ctrl+V,就出现了如图-4的效果
【文件】->【存储为Web和设备所用格式(快捷键Ctrl+Shift+Alt+S)】,选择PNG-24进行存储,如图-5,点存储后,如图-6,选择仅限图片。
经过以上几步,抠图就完成啦!啦啦啦……
二、切平铺图片
- 先用放大镜将要切的背景方法,方便准确切割。
选择【矩形选择工具】,切成一块高度为背景高度、宽度随意的矩形。如图-7
平铺的图像一般做成1px的宽度,所以,再一个叫【单列选框工具】的东西派上用场了。 右击【矩形选择工具】,选择【单列选框工具】,如图-8。再选择工具栏上的【与选区交叉】的按钮,如图-9
在第2步画好的选区内部单击鼠标,即可得到1px宽度、原来的高度的选区。如图-10
合并拷贝】,后面的步骤和一、中的抠图一样。
三、切sprite的图片
切sprite 图片之前,应该知道,总共有多少张小图,然后,最大的图片是多大,再来进行操作。比如,此例中,右上角有四张图片,再加上二级菜单的一个小方点总共就是5张图片,而最大的就是右上角,为12px*12px。后期建立文件大小应该为60px*12px。
新建一个大小为60px12px的透明文件。并每隔12px拉一条参考线。(当然,此例中本来可以不用参考线,但在其它例子中都是需要的。),如图-11所示。
选择矩形选框工具,在【工具选项栏】上设置为【固定大小】,并将宽高设置为12px,如图-12所示。
【矩形选择工具】,做如图-13所示的选择
放大效果图,使用矩形选框工具单击,【合并拷贝】,粘贴到第1步中创建的透明文件中,如图-14所示
依次将其他的也粘贴过来,如图-15
后面的步骤和一、中的抠图一样。
在sprite那里之所以全部都放在相同大小的格子里,是为了方便后期定位,只需要每次的数值是12的倍数就行了。
因为对于我,切图可以算作零基础,所以我感觉今天学到这些,还是蛮有收获的。哈哈。继续努力学习。
Author beyondkmp
LastMod 2015-01-19