【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )

文章目录

• 一、常见的图片格式 - 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 目录 , 可以看到根据 切片工具 矩形选区 导出的图片 ;