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

工具

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

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

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

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

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

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

先用参考下圈出你要切图的区域
然后用选区工具建立选区，防止切出外面
若是需要编辑链接什么，可以直接编辑切片【以前常用，现在很少】，都是前端拿图片自己写
导出图片有几种格式，若是透明的考虑PNG，半透GIF，常规图JPG，至于大小压缩，根据需求来调整，不要因为大小而导致失真严重，那就不是要的效果了
可以单纯导出图片或者图片加生成的静态页面！！看需求了

技巧三：不规则图形切图

这个怎么说，需要一定的PS基础；
简单的来说，就是抠图；工具不限，选区，魔棒，橡皮擦，印章，修复等

针对水印

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

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

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

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

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

图形条理分明的图

用钢笔画路径，生成选区
或者用魔棒【若是颜色对比不强烈，不大适用，愣是要用就需要自己去增强对比了】

颜色对比强烈的图

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

总结

对于需要缩放的图片，应该都转为智能对象，减小缩小放大失真严重的情况
对于前端来说，切图分两种情况考虑，低级浏览器【ie9-】和高级浏览器【chrome】，针对低级浏览器可以切出一切所有需要的图片；而对于高级浏览器来说，能用CSS3实现的，就不应该切出来了【比如搜索框！从维护和性能上考虑】，还有一些要考虑适配多种浏览器的复杂图片，应该考虑SVG，减少功能工作量；不然就要出现一张图片，2倍图，4倍图，来适应retina显示器这些
切图不是前端开发的必备技能，但是会总比不会好；

网页切图的技巧及经验总结相关推荐

DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
涨姿势！摹客切图小技巧
设计师在将设计稿交付给前端工程师之前必定会用到切图功能,但有时生成的切图却不符合前端的要求,怎么办呢? 今天就给大家分享关于切图的一些小技巧.切图往往存在两种形式:素材填满整个切图或者素材周围带空白区 ...
Photoshop——切图小技巧
准备工作把Photoshop功能面板设置成我们前端常用的并保存下来,这样就不用我们每次使用的时候都要花时间再去设置一次了. 1.设置标尺单位 --CSS里面用的最多的单位是像素(px),测量和读取的 ...
给前端工程师的快速切图小技巧 (切出jpg图标或png透明图)
部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 这就说明,现在人们对于前端都是有误区的.认 ...
Unity2D--关于2D游戏的切图小技巧
在Unity2D游戏中,在制作过程中有时会使用一些游戏素材来增加游戏的趣性但在一些裁剪游戏素材的过程中我们会发现,当我们裁剪完之后为他添后Animation后,游戏素材可能会出现上下浮动的现象.举个 ...
html中sprite标签,网页切图 CSS Sprites（CSS精灵）介绍和图文使用教程
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...
【Web前端】网页背景图设置技巧
问题一:如何设置背景图铺满整个屏幕 css代码: body {background-image: url("../img/bg.jpg");background-position: ...
PSD网页切图制作HTML全过程教程 1
http://www.uimaker.com/uimakerhtml/uistudy/2010/0430/3379.html
切图小贴士-手机Android平台“点九”的切图
用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实现.切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图.精准的位置可以最大限度的还原效果图的设计 ...
手机Android平台“点九”的切图方法
http://blog.sina.com.cn/s/blog_687bea510101g6dj.html 用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实 ...