前端PS切图基础

  作为前端开发者，能够比较好的还原设计稿是一项不可或缺的技能。

  最近又接触到要使用 photoshop 打开 psd 设计稿进行页面还原，但遗憾的是我刚刚由 window 转到 mac，所以 window 上原有 的 photoshop 配置还得在 mac 上还原一下，因此在此做一下记录（以 PS2022 为例）。

  有兴趣的可以直接去看视频（前端必备的 PS 技能、告别 PS 的手动切图），我最早就是看的这个视频。

一、PS 基础

基础使用

• Space + 鼠标拖动 = 移动
• Option + 鼠标滚轮 = 缩放

切图必备

• 标尺工具（测量目标尺寸）

为了方便使用标尺工具 确保 视图 -> 标尺 为勾选状态

shift + 鼠标滑动 可实现水平或垂直测量尺寸

• 文字工具（查看文字信息）

确保 Photoshop -> 首选项 -> 单位和标尺 中的单位都为 像素

• 吸管工具（吸取目标颜色）

• 裁剪工具（切图或者裁剪）

自定义工具栏 ✨

  在最 ps 左侧中找到... -> 右键 -> 编辑工具栏

我们可以根据自己的习惯 自定义如下 工具集

二、PS 切图

  切图前，我们可以在 ps 右侧图层部分隐藏我们不想要的一些图层。

1、切片工具切图

使用

  先使用 切片工具 进行切片

• 可以使用 command 选择单个切片
• 可以使用 shift + command 选择多个切片
• 选择切片后 鼠标右键 可以删除切片
• 视图 -> 清除切片 可以清除所有切片

导出

  然后可以批量导出切片

文件 - 导出 - 存储为 Web 所有格式 - 存储 （然后就可以看到切片的导出选项了）

2、裁剪工具切图

使用

  先使用 裁剪工具 进行裁剪

导出

  然后可以导出单个图片即可

文件 - 导出 - 快速导出为 PNG