CSS布局基础（五）（网页图片 & 切图）

网页图片

图片格式

• jpg/jpeg 高清图
• gif 小动画，支持透明背景
• png 结合jpg 和 gif 支持透明背景，高清
• psd ps专属格式，常用于设计稿，里面的素材，文字等可以直接提取

切图

直接从 psd 图层导出

• 对于完整图层：
  选中图层，右键，导出即可。
• 多个小图层组合的图层
  不能直接导出了，直接导出会得到多张零碎的图片；
  需要先合并图层， 再导出。
  按住 ctrl ，选择要合并的图层
  右键，合并图层 / 图层菜单，合并图层 / 快捷键 ctrl + e
  导出那个合并后的图层

切片工具切图

• 使用 ps 切片工具，切片然后导出切片，这种方式的本质就是截图
• 要得到透明背景的图，需将图层拉到最下面，取消背景后再导出切图，即可得到透明背景的图片，注意格式就不能是 jpg 了

插件切图

• 为ps ，下载 cutterman 切图插件

其他设计工具

蓝湖，像素大厨等