前端切图,前端切图和UI设计区别是啥( 二 ) _代码质量

想了解关于WEB前端切图方面的具体步骤

文章插图
一般都用Photoshop的切片工具，百度一下，你就会用。
至于切的好不好，并不是图片本身好不好，而是一种在页面中使用组合起来的最优方案，结合需求考虑兼容性、加载性能和扩展性。
Photoshop中的哪些知识点是用来前端切图的

文章插图
1).基本信息：
以图层为主要的编辑对象，通过不同层细节的编辑，使整体效果更为绚丽或多变。
以工具为主要的编辑手段，通过多个工具的结合，满足大部分编辑要求。
通过滤镜的组合，呈现很多不错的效果，达到平民人士也能参与互联网炒作的大军中不能自拨，在当下PS已经由有一个名词转为一个动词了。
对前端来说切图时注意：优化切图流程，提升切图效率，增加岗位竞争优势
具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，侧面提升工作效率。从而扩展，可以修改其它软件的快捷键，整体提升工作效率，增加就业资本或信心。
图片格式那些事儿
一般新手不太注意页面的性能问题，而性能容易出现在图片上面，如何在一个大页面中处理好图片是一个前端必备的技能之一。
一般应用比较多的格式有：gif,png-8,png-24,jpg 。而新手经常混淆png-8,png-24的区别。
按我经验4k以下gif,png-8差别不大，4k-100k: png-8,gif占优势，大于100k果断是jpg 。
png-8不支持alpha透明，在IE6下需要一个JS或透明滤镜来处理。
图片格式与设计那点事儿
Web性能优化：图片优化
2). 提高切图效率思路之扩展：
从客观上来讲，提高效率的基础在于丰富的实战经验或长年的填坑经历，本质上软件的操作差别不是特别大。一个五年经验或一年经验的开发人员，使用同样的工具，主要差别还是一个熟练度。这里只分享我个人积累的一些经验：
在上一点提到的修改快捷键，分享一下我修改的几个快捷键（修改这个快捷键，有个缺点，换台电脑可能就不能使用，除非能够熟悉的记得两套快捷键，即修改过的，或原始的）：
新建图层: F1
使用频率比较强，所以放在一个容易的地方。
新建文件：F2
仅次于新建文件，也是使用使用频率比较高的一个键。由于切图是会从原始图层上多次的分离图层，所以这个快捷捷由原来的按两键，变为一键。并且有效的分离左右手操作的特点，尽量让使用频率高的键从左侧起步。以下的几个快捷键，都是按照这个思路来进行优化或设置的。
按屏幕大小：F3
按画布大小：F4
这两个键操作思路主要借鉴于CorelDraw，CorelDraw是一款优秀的平面广告设计软件，多用于名片，包装设计。这是由加拿大Corel产品，他们公司另外一个比较著名的绘画类软件是Painter 。
存储为web格式：F5
由原来的5键优化为一键，还有一个流程是通过Ctrl+Shift+S来存储图片，很明显这个流程步骤过于繁多，很浪费时间。有兴趣的可以做一个对比。
裁剪命令：F6
由原来的3键优化为一键，另外一个是裁剪工具(C)，裁剪工具对整个画面的破坏力比较大，且不易控制，尤其在PS的版本升级中对这个工具进行了优化。而这个命令相对更为轻量或方便。
F7,F8,F9保持不变
转换为RGB模式：ctrl+=
因为Gif是索引模式，颜色信息较少，如果要进行编辑，首先得转换成RGB模式。
从图层建立组：ctrl+,
由于刚入行的设计师没有经验，一个设计稿是没有分图层组。其实合理的图层组可以有效的引导前端，所以这个快捷键主要是解决这个问题。