如何在 Photoshop 中创建双色调图像

已发表: 2021-10-07

在您进行下一个网站设计时,您可能会考虑一种常见的背景类型:摄影。 虽然这种趋势不一定是独一无二的,但它确实可以有效地设置场景并使用户沉浸在站点环境中。 “如果你正在寻找一种使用摄影的方式,但又要多一点活力,你总是可以尝试双色调图像——它们既有趣又易于创作!

在我们学习如何在 Photoshop 中创建双色调图像之前,让我们更深入地了解一下这种设计趋势。

什么是双色调图像?

就其核心而言,双色调只是由两种颜色组成的图像。 您可能以前在 Spotify 的 2015 年回顾等活动中看到过它们。

这正变得越来越流行,尤其是在代理机构和较小的品牌中。 双色调效果是在您的作品和网站中整合和强化您的品牌及其颜色的好方法。 给你一点启发, LPK 展示了如何使用它的精彩示例。

如果您有兴趣尝试这种技术,您将希望在您选择操纵的照片中具有战略意义。 虽然从技术上讲,您可以将双色调效果应用于任何照片,但在具有大量对比度的图像上看起来会更好。 我还建议使用具有纯色背景的图像,最好是白色 - 这样可以更轻松地建立您正在寻找的基色!

如果您可以使用工作室并有兴趣拍摄自定义照片,请在设置场景时牢记这些提示。 如果您正在处理现有内容,则始终可以先处理照片以提高对比度或更改背景颜色。

注意:本教程是我们 2019 年网页设计趋势课程的一部分! 注册后,您将获得对自定义 Photoshop 操作(Duotoner!)的独家访问权限以及帮助您使用它的教程。
  • 如果您有兴趣加入课程并下载免费的 Photoshop 资源,请跳至本节!
  • 如果您已经加入了课程,请单击此处直接跳转到模板教程!

在本教程的其余部分,我将介绍两种可用于在 Photoshop 中手动创建双色调图像的方法。 第一个是内置的 Photoshop 选项(工作正常,但不是我最喜欢的),第二个使用渐变贴图(我的首选方法,除非你当然使用我们的自由动作!)。

准备好后,将图像加载到 Photoshop 中并创建照片的复制层。 通过编辑副本(而不是原始的底层),您将始终可以使用未经编辑的照片版本。

准备好在 Photoshop 中创建双色调图像了吗? 让我们开始吧。

如何使用默认的 Photoshop 双色调选项

1.将图像转换为8位灰度

为了使用 Photoshop 内置的双色调选项,首先您必须将图像转换为 8 位灰度。 选择照片的副本,然后前往图像 > 模式 > 灰度。 还要验证在同一模式菜单下选择了 8 位/通道选项。

飞轮双色调布局如何灰度

当您选择此选项时,将弹出几个通知。 第一个询问您是否要在更改颜色模式之前拼合图像或合并图层。 如果您有很多图层,颜色变化可能会影响事物的显示方式(在这种情况下,拼合可能有助于保存您的工作),但在这种情况下,不要担心拼合图像。 如果您想要原始副本,请不要合并您的图层。

飞轮双色调布局如何合并警告

下一个通知询问您是否要丢弃颜色信息。 您必须这样做才能使用默认的双色调选项,因此请继续并单击“放弃”。

飞轮双色调布局如何黑白警告

2.将图像转换为双色调

一旦您的图像模式为 8 位灰度,您就可以在 Photoshop 中使用默认的双色调选项。 选择图层,然后转到图像>模式>双色调。

飞轮双色调布局 如何选择双色调

3.选择你的颜色

一旦图像处于双色调模式,您就可以开始选择颜色。 好的部分是,一旦您选择了一种新颜色,图像就会更新,因此您可以看到事物的外观(只要选中了“预览”复选框)。 除此之外,这个过程开始变得有点笨拙。 从技术上讲,您可以调整每种颜色的曲线,但图像不会实时更新,因此很难看到正在发生的事情并导致很多来回。 使用颜色和设置,直到找到所需的效果。

飞轮双色调布局如何选择蓝紫色

我建议花一分钟来尝试一下这些设置,只是为了感受一下,但是一旦你准备好了,让我们继续讨论在 Photoshop 中创建双色调的第二种方法。

如何使用渐变映射创建双色调

1. 应用渐变映射

对于这种方法,您无需担心更改图像或选择特定的颜色模式。 当然,如果您确实想编辑任何内容,请继续,但照片会照原样正常工作。 准备好后,选择图像的副本,然后转到图像 > 调整 > 渐变映射。

飞轮双色调布局如何渐变地图选择

根据您的默认设置,此设置将使用渐变覆盖图像以进行灰度映射。 如果默认值不是黑白,请单击下拉菜单并选择该选项。 如果您按照第一种方法进行操作,您会发现我们已经完成了创建双色调的一半。

飞轮双色调布局如何渐变黑白

专业提示:查看“反向”旁边的复选框? 通过单击它,您将反转照片中的颜色。 对于本教程,我们将不选中它,但如果我们希望背景比主题更暗,该选项可以帮助您进行切换。

2.选择你的颜色

通过单击渐变栏,您将在新窗口中打开渐变编辑器。 在这里,您可以选择颜色并调整它们在图像上的显示方式。

飞轮双色调布局如何渐变编辑颜色选择

正如你所看到的,最终的图像看起来有很大的不同,但都产生了美妙的双色调。 我更喜欢使用渐变映射,因为它更容易控制颜色的强度以及暗色调和亮色调的去向,但这两种方法都易于使用。

专业提示:创建双色调后,请遵循这些图像优化最佳实践以获得最佳结果(和网站性能!)。

加入我们的 2019 年网页设计趋势课程,获得免费的双色调 Photoshop 操作!

如果您正在寻找快速简便的资源来尝试这一趋势,您可以获取本教程中的文件,包括带有预制渐变图选项的操作! 使用下面的表格注册以下载文件,或单击此处了解有关课程的更多详细信息。

[optin-monster-shortcode id=”dktout15rz4zcbcifnsl”]

感谢您加入我们的设计趋势课程!

首先,在这里下载 Photoshop 动作。

如何使用双色调器

安装动作

下载操作后,双击文件进行安装。 打开要在 Photoshop 中使用的图像,然后打开“操作”窗口。

要导航到“操作”窗口,请选择“窗口”>“操作”或按住Shift + F9

Photoshop双色调动作窗口

打开“动作”窗口后,选择要应用双色调效果的图像层。

选择并播放动作

单击“Flywheel – Glitch-a-tron”文件夹上的下拉菜单。 现在,选择“Glitch-a-tron - 选择并点击播放”,然后按窗口底部的三角形播放按钮。

双色调 Photoshop 动作游戏

一旦你点击播放,你会看到一大堆图层,每个图层都有不同的双色调配色方案! 要切换,您所要做的就是使您想要的图层可见。

Photoshop双色调动作选项

注意:如果您有多个可见的双色调图层,颜色将混合在一起,您可能会开始丢失照片的一些细节。 为了保持清晰,请确保一次只能看到一层(或者随意尝试通过将双色调分层以获得完全不同的效果!)。

奖励:快速重置您的图像

以防万一您想回溯,该操作会自动创建一个屏幕截图,允许您在应用该操作之前返回到您的图像。

通过选择Window > History导航到History窗口。 向上滚动到顶部,然后单击“快照”。 这会重置一切,所以你很高兴!

Photoshop双色调动作快照

你怎么看双色调? 你认为它们是一种强大的设计趋势,还是你更喜欢全彩色图像? 在下面分享您的想法!


下载这些免费的 Photoshop 文件

在下方免费下载模板!


不知道接下来要读什么? 查看此列表:

  • 2020 年 13 种网页设计趋势
  • 如何优化网络图像:提高网站性能的分步指南
  • 如何使用 CSS 和 SVG 剪辑和遮罩技术
  • 如何在您的网站上添加粘性返回顶部按钮