如何在 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 剪輯和遮罩技術
  • 如何在您的網站上添加粘性返回頂部按鈕