文章目录
- 一、常见的图片格式 - jpeg、gif、png、psd
- 二、PhotoShop 切片工具
- 1、导入素材
- 2、选择切片工具
- 3、选择切片工具样式
- 4、改变切片大小
- 5、改变切片位置
一、常见的图片格式 - jpeg、gif、png、psd
常见的图片格式 :
- jpeg : 支持丰富的颜色
- gif : 颜色只有 256 色 , 只能存储简单图片 , 可 设置透明背景 和 动画 ;
- png : 结合了 gif 和 jpeg , 颜色丰富 , 可以设置透明背景 ;
- psd : Photoshop 软件的专用格式 , 其中 包含了 图层 , 通道 等信息 , 可以进行切图 ;
各种格式的图片使用场景 :
- 不需要透明背景的高质量图片 就是用 jpeg 格式图片 ;
- 需要透明背景的图片 就使用 png 格式 ;
- 如果 需要动画效果 使用 gif 格式图片 ;
- 美工使用 PhotoShop 设计的切图搞 , 就是 psd 格式 , 可以用于 测量布局以及切图 ;
二、PhotoShop 切片工具
1、导入素材
将素材 拖动到 PhotoShop 中打开 ,
2、选择切片工具
在 Photoshop 左侧的工具栏中 , 选择切片工具 ,
3、选择切片工具样式
切片工具选择后 , 在工具栏中 , 有三种样式 :
- 正常 : 使用鼠标任意拖动可随意改变矩形框大小 ;
- 固定长宽比 : 使用鼠标拖动 , 只能切出固定长宽比的图片 ;
- 固定大小 : 鼠标左键点击 , 即可生成一个固定大小的切片区域 ;
4、改变切片大小
使用 切片工具 框选一个矩形框后 ,
可以拖动 矩形框 上下左右 中间位置的小方块 ,
改变矩形框的尺寸 ;
5、改变切片位置
如果切片大小合适 , 但是切片位置不对 ,
可以 使用 上下左右 箭头按键 , 移动整体切片位置 ,
移动效果如下 ;
选择完切片后 , 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " 选项 ;
在弹出的 对话框 中 , 在右上角 选择 导出格式 JPEG 格式 , 然后 点击 右下角 的 存储按钮 ;
在弹出的对话框中 的 切片 选项中 ,默认为 所有切片 ;
设置完成后 , 点击 " 保存 " 按钮 ;
弹出下面的对话框 , 确定即可 ;
查看切图图片 , 在选择的目录中 , 生成了 images 目录 ,
进入 images 目录 , 可以看到根据 切片工具 矩形选区 导出的图片 ;
