网页切图的技巧及经验总结

工具

这里使用Photoshop ,当然你可以用firework这些，就是操作有些区别；

技巧一，直接复制新建裁切

这种适合用于有单独图层的图片，可以很快的生成切图出来的效果；

技巧二，参考图+切图工具

这种就是各位小伙伴基本都用的，先划好参考线，再用切图工具切，然后导出；这里选择部分区域来演示

这种技巧比较强大，可以更加细致的定制

先用参考下圈出你要切图的区域

然后用选区工具建立选区，防止切出外面

若是需要编辑链接什么，可以直接编辑切片【以前常用，现在很少】，都是前端拿图片自己写

导出图片有几种格式，若是透明的考虑PNG，半透GIF，常规图JPG，至于大小压缩，根据需求来调整，不要因为大小而导致失真严重，那就不是要的效果了

可以单纯导出图片或者图片加生成的静态页面！！看需求了



技巧三：不规则图形切图

这个怎么说，需要一定的PS基础；

简单的来说，就是抠图；工具不限，选区，魔棒，橡皮擦，印章，修复等

因为CSDN图片限制在2M，GIF录制不了太长，演示不了，，，就单纯文字介绍了；

针对水印

有时候需要自己去找素材的！！而网上的素材有些有水印，第一步就是清除水印了；

颜色对比强烈的水印–这个好办，直接通道加深这块区域，然后选区，删除就行了。。

半透明的水印 – 这个最快的方法是查看附近区域，若是背景是纹理，可以选择用修复工具，取附近的纹理来填充。

坑爹的嵌套水印【水印和图形混合的】，这个没有快速技巧，只能放大，借助各种工具来慢慢抹除；

针对一些常用的水印，也可以使用滤镜来加快处理【算法虽好，但不是万能的】，部分区域还是自己折腾

图形条理分明的图

用钢笔画路径，生成选区

或者用魔棒【若是颜色对比不强烈，不大适用，愣是要用就需要自己去增强对比了】

颜色对比强烈的图

比如动漫！黑色背景+人物。。。这种魔棒一圈就出来了

总结

对于需要缩放的图片，应该都转为智能对象，减小缩小放大失真严重的情况

对于前端来说，切图分两种情况考虑，低级浏览器【ie9-】和高级浏览器【chrome】，针对低级浏览器可以切出一切所有需要的图片；而对于高级浏览器来说，能用CSS3实现的，就不应该切出来了【比如搜索框！从维护和性能上考虑】，还有一些要考虑适配多种浏览器的复杂图片，应该考虑SVG，减少功能工作量；不然就要出现一张图片，2倍图，4倍图，来适应retina显示器这些

切图不是前端开发的必备技能，但是会总比不会好；