网页设计师的 20 个 Photoshop 技巧

可能每个网页设计师都有自己最喜欢的一套 Photoshop 技巧。 有充分的理由。 Adobe 强大的图像编辑功能是网页设计领域的主要内容。 很少有程序可以与这款出色的软件及其广泛的功能相媲美。

然而，虽然大多数网页设计师都了解 Photoshop，但您总能学到更多。 毕竟，该程序不仅功能强大，而且还很复杂。 此外，还会定期通过更新添加新内容。

因此，继续探索您最喜欢的工具是个好主意。 为了帮助您做到这一点，在本文中，我们将介绍一些最好的 Photoshop 技巧。 可以改善您的工作流程，让工作和生活更轻松，节省时间并帮助您设计最佳网站的东西。

您准备好了解有关 Photoshop 的更多信息了吗？ 然后继续阅读。

Photoshop 技巧让您成为网页设计向导

以下提示范围从初级到更复杂的材料。 选择他们中的每一个都是为了帮助您成为最好的网页设计师。

1. 精简您的工作空间

让我们从基础开始。 要改进您的工作流程，首先要做的是以支持您使用它的方式的方式设置 Photoshop。 毕竟，使用更锋利的工具，工作会变得更轻松。

因此，我们的第一站是Window > Workspace > Graphic and Web 。 选择此选项会将可用工具更改为您最有可能用于网页设计的工具。

之后，转到Edit > Preferences 。 在这里，最重要的站点之一是Units & Rulers。 无论您在此处选择哪种度量（最有可能是像素），它将成为所有文档的默认值。

（快速提示：要更改单个文档的标尺，只需右键单击它们并选择所需的度量单位。）

之后，转到Preferences > Performance > History & Cache并单击Web / UI Design 。

这样做将更改缓存设置以支持具有大量图层的较小文件，这是您主要使用的内容。

在同一个地方，您还可以选择历史状态的数量。 如果您想撤消某些操作，您可以返回的步骤数。

最后，退出首选项，关闭所有文档并按键盘上的T按钮。 这将使字体菜单出现在屏幕顶部。 从那时起，您在此处设置的任何内容都将成为新文档的标准。 因为没有人真的那么喜欢 Myriad Pro。

2. 学习键盘快捷键

对于您经常使用的任何程序，学习键盘快捷键通常是一个很好的建议。

例如，我在写这篇文章时使用Ctrl+Alt+2/3创建 h2 和 h3 标题。 它比使用编辑器工具栏快得多，因为我不必将手从键盘上移开。

Photoshop 也是如此。 知道如何通过简单的按键来执行操作比点击菜单要快得多。

我们将在本文中提到一堆键盘快捷键。 但是，我也推荐这个备忘单，用于学习最常见的 Photoshop 操作的快捷方式。 除此之外，养成反复查看键盘快捷键的习惯也是一个好主意。

3. 分组和命名图层

使用 Photoshop 时，您将处理大量图层。 不仅让大多数元素拥有自己的图层，而且亮度/对比度等修改也作为图层添加。

因此，它很快就会变得混乱。 幸运的是，有很多选项可以减少这种情况，其中两个是对图层进行分组和命名的能力。

首先，通过双击任何图层，您可以将其名称更改为您喜欢的任何名称。

这样，您就可以轻松了解图层是否包含背景图像、菜单或侧边栏。

或者，您也可以一次选择多个图层，方法是按住Ctrl选择单个图层或按住 Shift标记一系列相邻图层。 Ctrl+G然后将它们变成一个组。

或者，右键单击图层并从那里选择组选项。 无论哪种方式，您的图层都会变得更有条理。 此外，您还可以命名分组图层！

4. 过滤层

命名和分组图层是一个好的开始。 但是，在处理数十个甚至数百个时，您仍然很容易感到困惑。

对于这些情况，您还可以选择过滤图层。 为此，只需使用“图层”菜单顶部的菜单按类型、名称、效果、颜色等进行过滤。

或者，使用移动工具直接选择图层，按住Ctrl并单击图层或对象。

5. 创建网格

图片来自 PureSolution/shutterstock.com。

网格是网页设计中最重要的原则之一。 它为设计带来秩序并帮助您放置对象。 因此，只有在 Photoshop 中创建网格才有意义。

为此，请使用View > New Guide Layout 。 或者，只需单击标尺并拖入文档即可创建水平和垂直参考线。 使用Ctrl移动现有参考线。

6. 导入色板

您可以将颜色样本从 HTML、CSS 或 SVG 文件直接加载到 Photoshop 中。 这样，在使用现有资产（例如徽标）时，您的配色方案就有了一个很好的起点。

要利用这个 Photoshop 技巧，只需打开“色板”面板，单击右上角的下拉菜单并选择“加载色板” 。 现在导航到有问题的文件并打开它以导入新的色板。

7. 保存自定义形状

尤其是在为同一个网站或具有相似设计的网站设计多个页面时，您会发现自己一遍又一遍地使用相同的对象和形状。 出于这个原因，将它们保存为自定义形状以便快速重用是有意义的。

为此，请使用路径选择工具（黑色箭头）右键单击相关形状。 然后，选择定义自定义形状。 完成此操作后，您可以通过自定义形状工具的顶部栏选项访问此形状。 只需单击显示形状的下拉菜单：然后选择您保存的形状。

8. 在背景色和前景色之间切换

两个在背景和前景色之间来回切换，无需点击图标，只需按键盘上的X。 另外，如果您希望颜色恢复为简单的黑白，您可以按D 来实现。

9. 通过键盘更改不透明度

另一个键盘快捷键：对于可以更改不透明度的任何工具，您只需通过键盘即可。 数字 1 到 0 将不透明度设置为 10% 到 100% 之间的任何值。 同样的事情也适用于图层的不透明度。

10.画直线

要使用任何工具绘制直线，只需按住Shift键即可。 之后，您可以绘制一条线（水平和垂直），该线将自动像钉子一样笔直。 或者，单击两个不同的点以在它们之间创建一条直线。

11. 样品颜色

在我们的 Photoshop 技巧包中，接下来是能够对任何颜色进行采样。 如果您需要任何对象的颜色，请按住Alt按钮并单击您想要的色调。 这适用于Brush 、 Pencil 、 Paint Bucket和任何其他使用颜色的工具。

12. 添加到选择或从选择中删除

您可以通过按住 shift 并选择要包含的部分来添加到现有选择。 要减去，请使用Alt按钮执行相同的操作。

13. 撤消不止一步

撤消上一个操作的经典方法是使用Ctrl+Z 。 但是，这仅适用于您所做的最后一件事。 要返回几个步骤，请使用Ctrl+Alt+Z 。

14. 动态改变你的画笔大小

要更改画笔大小，无需单击下拉菜单并将其拖动到正确的大小。 相反，只需按住Alt和鼠标右键，然后左右拖动即可减小和增大画笔的大小。

15. 保存为网页

使用Safe for Web功能至关重要，因为它可以确保图像尺寸尽可能小。 这对于提高网站速度非常重要。

在 Photoshop 中，您可以通过File > Export > Save for Web执行此操作。 但是，更快的方法是使用Ctrl+Alt+Shift+S 。 不客气！

16.以图层形式打开图像

有时需要一次将大量图像导入 Photoshop。 然而，当您简单地将它们拖到您的工作空间时，系统会要求您手动放置它们。

更实用的方法是File > Scripts > Load Files into Stack 。 浏览到有问题的图像，标记它们并点击确定两次。 现在，每个图像将自动导入到自己的图层中。

17. 直接从 Photoshop 中复制 CSS

对于网页设计师来说，最舒适的 Photoshop 技巧之一是该程序创建了可以导出的 CSS。 无需手动输入所有内容或使用反复试验来实现它。

要利用这一点，只需右键单击图层并选择Copy CSS 。 或者，使用图层菜单查找相同的选项。 现在您拥有了所有必要的样式，只需将其粘贴到您的样式表或您正在使用的任何其他程序中即可。

18. 同时设计多个设备和方向

如今，为 Web 设计意味着为大量不同的设备进行设计。 在移动设备使世界各地的台式计算机黯然失色的时代，必须实施移动设计。

资料来源：ComScore

幸运的是，Photoshop 具有画板和智能对象，可以非常轻松地将您的设计缩放为不同的格式。

我可以在这里详细描述两者，但是，Phlearn 对此做了一个出色的教程，它比我做的要好得多：

19. 对重复性任务使用自动处理

另一个很棒的 Photoshop 功能是自动处理。 这意味着您可以一遍又一遍地重复录制的任务，而无需手动执行它们。 这非常有用，例如，如果您需要为网络保存大量图像。

这是它的工作原理。 首先，打开您的文件。 然后，打开Actions ( Alt+F9 )，找到Create New Action并单击它。 提供名称，并可选择为其分配组合键和颜色。

要记录您的操作，请按Record 。 然后执行您要重复的操作。 就我而言，我从一个文件夹中打开一个图像并将其保存在另一个文件夹中以供网络使用。

完成后，停止录制。 现在您可以对所有其他图像重复使用此操作，从而节省大量时间。 有关可以在 Photoshop 中自动执行的操作的更多信息，请查看这篇文章。

20. 在设备上预览

最后，与 Photoshop 一起，Adobe 还提供了一个应用程序，可让您在多个 iOS 设备上预览您的作品。 最好的事情是：当您在计算机上进行更改时，您可以观察设备上的更改。

为此，请安装该应用程序并使用设备预览通过 USB 或 wifi 将 Photoshop 连接到外部设备。 您可以在Window > Device Preview下找到该选项。

你最喜欢的 Photoshop 技巧是什么？

Photoshop 是最常用的网页设计工具之一。 其强大的功能使其非常适合设计高质量的网站和资产。

然而，强大的功能也带​​来了巨大的复杂性，尤其是对于初学者来说，掌握软件可能需要一些时间。

为了缩短学习曲线，上面我们为网页设计师提供了许多有用的 Photoshop 技巧。 从一般工作流程到自动文件处理，它们使很多事情变得更容易。

全面了解 Photoshop 是对您的底线的一项重大投资。 当你能够更快地做事时，你可以承担更多的工作，从而产生更多的收入。 这永远不会是一件坏事。

你最喜欢的 Photoshop 技巧是什么？ 请在下面的评论部分告诉我们，这样我们就可以互相帮助。

Creative Stall/shutterstock.com 的文章缩略图