「Photoshop 」简介

• 面板
• 视图
• 工具

---

前端常常从设计稿中切除网页的素材并在代码中引入图片 (复杂的图片或者解决兼容问题)，
所以经常利用Photoshop将设计稿 (.psd) -> 产出物 (png, *.jpg)。

面板

在全局设置下将单位修改为像素，因其在 CSS 中运用最广 (Preference -> Units & Rulers -> Units) 。设置工作区布局为切图及图片编辑做准备（所需窗口为信息窗口，图层窗口以及历史记录窗口）。

打开『信息窗口』、『图层窗口』、『历史纪录窗口』、『工具面板』、『选项』面板，可以通过 Window -> Workspace -> New WorkSpaces 保存工作区，以便下次打开。

photoshop-mainWindow.png

视图

在视图菜单下启动辅助视图

• 对齐，会启动靠近吸附功能
• 标尺，Command + R
• 参考线，Command + ;

photoshop-menu.png

切图常用工具

工具名	示意图	注释
移动工具	hwa_03.png
矩形选框工具	hwa_01.png	需将自动选择调至选择图层
魔棒工具	hwa_05.png	（容差 Tolerance 越小选择的范围就越小）消除锯齿可以让选择区域光滑
剪裁工具	hwa_06.png
切片工具	hwa_07.png	在裁剪工具分支下
缩放工具	hwa_34.png	Ctrl+加号与Ctrl+减号 或者 alt+鼠标滑轮
取色器	hwa_31.png

常用快捷键

放大缩小画布

• 放大到100%大小：Ctrl+数字1
• 放大：ctrl + 加号
• 缩小：ctrl + 减号
• alt + 滚轮

合并图层

• 合并图层：ctrl+E
• 合并可见图层：ctrl+shift+E

所有工具及快捷键如下

ToolsPanelOverview.png

图层（单层元素）与组（类似于文件夹）的区别