切图技能.md

切图技能

---

切图

切片的方式

切图实例-雪碧图的制作

• 什么是雪碧图？
• 雪碧图生成工具：CSS Sprites Generator

蓝湖

交互设计师，UI设计师都一起使用。

Iconfont

使用步骤：

• 上传svg到项目（蓝湖里切好的svg）
• 查看在线链接（可以使用unicode，font-calss（使用多），stymbol使用）
• symbol支持多色，unicode，font-calss只支持单色

注意：类中"iconfont"必须要加

优点：

• 放大，矢量图不失真
• 支持样式改颜色，改大小

切图优化

1. 颜色代替图片（height：38px，width37px的图片切成height：38px width1px的图片，然后平铺出来效果就一样）
2. 雪碧图的制作
3. 字体图标的使用

切图辅助

1. Markman
2. TinyPNG
3. 前端自动化（glup webpack等等一键压缩图片）