CSS布局基础(五)(网页图片 & 切图)

网页图片

网页图片图片格式

切图直接从 psd 图层导出切片工具切图插件切图其他设计工具

网页图片

图片格式

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

切图

直接从 psd 图层导出

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

切片工具切图

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

插件切图

为ps ,下载 cutterman 切图插件

其他设计工具

蓝湖,像素大厨等