网页切图的技巧及经验总结
来源:互联网 发布:州立大学 知乎 编辑:程序博客网 时间:2024/06/10 20:33
工具
这里使用Photoshop ,当然你可以用firework这些,就是操作有些区别;
技巧一,直接复制新建裁切
这种适合用于有单独图层的图片,可以很快的生成切图出来的效果;
技巧二,参考图+切图工具
这种就是各位小伙伴基本都用的,先划好参考线,再用切图工具切,然后导出;这里选择部分区域来演示
这种技巧比较强大,可以更加细致的定制
- 先用参考下圈出你要切图的区域
- 然后用选区工具建立选区,防止切出外面
- 若是需要编辑链接什么,可以直接编辑切片【以前常用,现在很少】,都是前端拿图片自己写
- 导出图片有几种格式,若是透明的考虑PNG,半透GIF,常规图JPG,至于大小压缩,根据需求来调整,不要因为大小而导致失真严重,那就不是要的效果了
- 可以单纯导出图片或者图片加生成的静态页面!!看需求了
技巧三:不规则图形切图
这个怎么说,需要一定的PS基础;
简单的来说,就是抠图;工具不限,选区,魔棒,橡皮擦,印章,修复等
因为CSDN图片限制在2M,GIF录制不了太长,演示不了,,,就单纯文字介绍了;
针对水印
有时候需要自己去找素材的!!而网上的素材有些有水印,第一步就是清除水印了;
颜色对比强烈的水印–这个好办,直接通道加深这块区域,然后选区,删除就行了。。
半透明的水印 – 这个最快的方法是查看附近区域,若是背景是纹理,可以选择用修复工具,取附近的纹理来填充。
坑爹的嵌套水印【水印和图形混合的】,这个没有快速技巧,只能放大,借助各种工具来慢慢抹除;
针对一些常用的水印,也可以使用滤镜来加快处理【算法虽好,但不是万能的】,部分区域还是自己折腾
图形条理分明的图
- 用钢笔画路径,生成选区
- 或者用魔棒【若是颜色对比不强烈,不大适用,愣是要用就需要自己去增强对比了】
颜色对比强烈的图
比如动漫!黑色背景+人物。。。这种魔棒一圈就出来了
总结
- 对于需要缩放的图片,应该都转为智能对象,减小缩小放大失真严重的情况
- 对于前端来说,切图分两种情况考虑,低级浏览器【ie9-】和高级浏览器【chrome】,针对低级浏览器可以切出一切所有需要的图片;而对于高级浏览器来说,能用CSS3实现的,就不应该切出来了【比如搜索框!从维护和性能上考虑】,还有一些要考虑适配多种浏览器的复杂图片,应该考虑SVG,减少功能工作量;不然就要出现一张图片,2倍图,4倍图,来适应retina显示器这些
- 切图不是前端开发的必备技能,但是会总比不会好;
0 0
- 网页切图的技巧及经验总结
- EMC设计技巧及经验总结2:设计的基本原则
- EMC设计技巧及经验总结3:TVS的使用
- WindowsXP日常应用技巧及经验总结
- windowsXP日常应用技巧及经验总结
- windowsXP日常应用技巧及经验总结
- 精美网页专题页面设计的经验总结
- 我的面试及经验总结
- CSS制作网页编写的提醒及小技巧整理
- CSS制作网页编写的提醒及小技巧整理
- 经验总结:css的一些书写技巧
- windowsXP日常应用技巧及经验总结(转载)【实用】
- EMC设计技巧及经验总结1:常用元件
- 网页设计的技巧
- 常用的网页技巧
- 有用的网页技巧
- 网页设计的技巧
- js 使用技巧 - [近几年工作中的经验总结的技巧]
- UVA572 Oil Deposits dfs
- 3DMAX 合并镜像物体
- hdu5563解题报告(计算几何)
- 数组中的逆序对
- Android SharedPreferences存储数据的使用方法
- 网页切图的技巧及经验总结
- java解惑--谜题12:ABC
- 【Java基础提高】深入分析IntHashMap(三)
- 【人月神话】读书笔记第7章 为什么巴比伦塔会失败
- 两个链表的第一个公共结点
- shell变量数学运算
- tableView 详细使用方法
- MFC-SetWindowPos-位图按钮-扩展对话框-更改Logo
- 读书笔记 -- 004_数据预处理_数据规范化