什么是切图?用什么工具来切?

html-css019

什么是切图?用什么工具来切?,第1张

制作网页,很多的时候,首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片,不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材,这个过程就是切图。

在PS中,用切片工具切图,然后切换到Dreamweaver(中文是梦想编织者,网页设计软件)里用的。因为如果一个网页里大图太多,影响下载速度,所以不知道谁发明的,把PS出来的图中的纯色部分和其他部分分开,到DW以后再上颜色。其实就是把一个完整的图,切成几片而已(主意不是图层),就叫切片了。这样一来如果你想把某个部分{片}设个链接,貌似很方便。

切图的目的就是更加精确的进行网页布局。

photoshop、fireworks等软件都带有切片工具。

可以使用专门的ui切图软件,比如我用的摹客的插件,支持Sketch、PS和XD,在官网下载安装好对应的插件以后,在软件里标记好切图,点击上传,就可以在摹客快速下载了。而且基础功能都是免费的。支持:

1.自由选择iOS、Android、Web所需的所有倍率。

2.可以一键下载全部切图,也支持切图压缩,将下载的切图体积瘦身50%以上。

3.支持将切图一键换算不同平台尺寸,还可以自由设置任意切图尺寸。

4. 自动生成CSS代码,开发人员可以一键复制使用。

推荐一下我们团队在用的摹客iDoc。标注和切图都能解决,支持PS、XD和Sketch的设计稿,下载一个插件就可以用了,很方便。

切图:一键上传Sketch、PS、XD的设计稿,自动获取不同平台尺寸的切图,可以快速切换平台和选择倍率,也可以自定义设备尺寸。另外还支持切图压缩。

标注:标注应该是他们比较特色的一个功能,除了自动生成的标注信息,还可以手动快速补充文字、间距、区域、颜色等信息,非常全面。

这个工具我觉得最大的优点是用起来简单,可以试试。