Photoshop 网页制作常用工具

我一直对 PS 心存畏惧，虽然也下过几次决心找本讲 PS 的书系统学习一下，但都因为种种原因半途而废了。最大原因可能是因为不知道书里讲的种种工具如何运用到实际工作中，因而抽象乏味，记不住。

最近碰巧得知 Udemy 上在做圣诞促销，就花 10 美刀买了一门叫 Learn Photoshop, Web Design & Profitable Freelancing （大意就是“学习 Photoshop、网页设计及如何通过兼职赚钱”）的课程。在美刀的逼迫下，已经跟随课程学习了 32% 的进度了。最大的收获是对 PS 终于摸到门了，发现制作网页（更准确的说是拼凑网页）需要用到的 PS 工具 和技巧并不多，熟练程度要求也不高，还是比较容易掌握的。当然，可能也是因为我刚入门，所以不知深浅。不过至少这说明入门也没有我以前想象的那样难。

下图是我跟随课程临摹的一个网页。让我们来看看制作这样一个网页需要哪些 PS 工具和技巧吧。

Section 6 Your First Website Design.jpg

这样一个网页上需要用到 PS 工具竟然只有以下这些工具和技巧。

工具

1. 矩形、圆角矩形

• 在图层列表里双击形状图层的图标可以改变其颜色
• 如果选中的图层时形状图层，有时再画新的形状会和已有的组合成一个图层。我还没搞清楚是为什么。

2. 线条：一个黑线、一个白线放在一起，改改透明度就是个凹槽了
3. Marquee：这个工具可是用处多多

• 从像素图中扣取矩形区域，或通过拉伸选区覆盖图片内容，例如按钮上的文字。
• 测量尺寸
• 作为对齐一个图层的参照
• 生成调整图层。例如黑白，使该选区覆盖的部分变成黑白的。

4. Move tool：也是无时无刻不在用的，比如所有的对齐都要在 move tool 里，所以养成好习惯，每次用完其它工具，就顺手按一下 v 回到 move tool。

• Cmdt^[1] 直接选择图层，包括分组内部的图层。所以如果你想对齐分组，就还是从图层列表里选吧。
• Opt-拖动：复制
• Shift-Cmd 追加选择图层，这个操作在对齐图层时超级常用。
• Shift-arrow：每次移动 10px。难怪很多设计里的间距都是 10px 呢，原来是因为在设计时得到 10px 的间距最容易。

5. Cmd-T 改变大小
6. 把常用颜色做成色块放在页面外侧，方便取色。
7. Opt-Cmd-G: 把当前图片 clip mask 到下面的图层（或图层组）上， 在做 thumbnail 时很有用。

技巧

• 用 color overlay fx 来修改导入的 icon 的颜色
• 画所有形状时都可以用到 Shift（画直线） 和 Op（画中心对称行）
• 最大化图层列表的高度，把大部分属性调整面板放在图层列表左侧的图标栏中。
• 一定要打开 View > Show > Smart Guides，对对齐很有用
• Cmd-; 打开关闭 Guides。Opt-Cmd-; 锁定 Guides。如果你设计网页时使用网格系统，这个快捷键会很常用。
• 缩放：Cmd-1：100%；Cmd-+：放大，z-拖动鼠标：缩放。
• 用 Satin 图层 fx 给图片增加两侧变暗的效果
• 每完成一个局部的设计，就把 fx 折叠起来，给图层命名并归入小组。养成好习惯。
• Cmd-J：复制图层，或从选区新建图层
• Add layer mask，然后在图层列表里选择 layer mask，就可以用渐变或 brush 等工具在 mask 上画，黑色时镂空的，白色是不透明的，可以有渐变。上图中题图里的黑色半透明块就是这样做出来的。

关于设计的一些感悟

• 白色背景加上一种强调色最容易给人清爽整齐的感觉
• 强调色要能与深色和白色背景都有足够的反差
• 强调色要慎用，主要应该用于品牌中，以及提示什么是可以点击的。

---

1. 本文的快捷键以苹果键盘为例，Opt ＝ PC 键盘上的 Alt 键；Cmd ＝ PC 键盘上的 Ctrl 键。 ↩