Photoshop でダブルトーン画像を作成する方法

公開: 2023-02-12

次のサイトのデザインに取り組んでいるときに、検討する可能性のある一般的な種類の背景があります: 写真です。この傾向は必ずしも独特ではありませんが、シーンを設定し、ユーザーをサイトの環境に引き込むのに効果的であることは確かです。写真を使用する方法を探しているが、もう少し奇抜な方法を探している場合は、いつでもダブルトーン画像を試すことができます。これらは見て面白いだけでなく、簡単に作成することもできます!

Photoshop でダブルトーン画像を作成する方法を学ぶ前に、このデザイントレンドについてもう少し詳しく見ていきましょう。

ダブルトーン画像とは？

本質的に、デュオトーンは 2 つの色で構成された単純なイメージです。おそらく、Spotify の 2015 Year in Review などのキャンペーンでそれらを見たことがあるでしょう。

これは、特に代理店や小規模なブランドの間でますます人気が高まっています。ダブルトーン効果は、作品や Web サイト全体にブランドとその色を取り入れて強化する優れた方法です。少しでもインスピレーションを与えるために、 LPK は、これを使用する方法の素晴らしい例を示しています。

このテクニックを試すことに興味がある場合は、操作する写真を戦略的に選択する必要があります。技術的にはどの写真にもダブルトーン効果を適用できますが、コントラストの強い画像の方が見栄えがします。また、無地の背景、できれば白の画像を使用することをお勧めします。これにより、探している基本色を簡単に確立できます。

スタジオにアクセスでき、カスタム写真の撮影に興味がある場合は、シーンを設定する際にこれらのヒントを念頭に置いてください. 既存のコンテンツで作業している場合は、いつでも最初に写真を操作して、コントラストを上げたり、背景色を変更したりできます.

チュートリアルの残りの部分では、Photoshop でダブルトーン画像を手動で作成するために使用できる 2 つの方法について説明します。 1 つ目は組み込みの Photoshop オプション (問題なく動作しますが、私の好みではありません) で、2 つ目はグラデーションマップを使用します (もちろん、無料アクションを使用しない限り、私の好みの方法です!)。

準備ができたら、画像を Photoshop に読み込み、写真の複製レイヤーを作成します。複製を (元の最下層の代わりに) 編集することで、いつでも写真の未編集バージョンを元に戻すことができます。

Photoshop でダブルトーン画像を作成する準備はできましたか? 始めましょう。

デフォルトの Photoshop Duotone オプションの使用方法

1. 画像を 8 ビットグレースケールに変換する

Photoshop に組み込まれているダブルトーンオプションを使用するには、まず画像を 8 ビットグレースケールに変換する必要があります。写真のコピーを選択し、[イメージ] > [モード] > [グレースケール] に進みます。また、同じ [モード] メニューで [8 ビット/チャネル] オプションが選択されていることを確認します。

このオプションを選択すると、いくつかの通知がポップアップします。 1 つ目は、カラーモードを変更する前に、画像を統合するかレイヤーを結合するかを尋ねます。レイヤーが多い場合、色の変化が表示方法に影響を与える可能性があります (この場合、作業を保存するために平坦化が役立つ場合があります) が、この場合、画像の平坦化について心配する必要はありません。元のコピーが必要な場合は、レイヤーを結合しないでください。

次の通知では、色情報を破棄するかどうかを尋ねられます。デフォルトのデュオトーンオプションを使用するには、これを行う必要があるため、先に進んで [破棄] をクリックします。

2.画像をダブルトーンに変換する

画像モードが 8 ビットグレースケールになったら、Photoshop でデフォルトのデュオトーンオプションを使用できます。レイヤーを選択し、[イメージ] > [モード] > [デュオトーン] に移動します。

3. 色を選択

画像がダブルトーンモードになったら、色の選択を開始できます。良い点は、新しい色を選択するとすぐに画像が更新されるため、どのように見えるかを確認できることです ([プレビュー] チェックボックスがオンになっている場合)。それを超えると、プロセスは少しぎこちなくなり始めます。技術的には各色の曲線を調整できますが、画像はリアルタイムで更新されないため、何が起こっているのかを確認するのが少し難しくなり、多くの前後が発生します. 目的の効果が見つかるまで、色と設定を試してください。

雰囲気をつかむために、これらの設定を少し試してみることをお勧めしますが、準備が整ったら、Photoshop でデュオトーンを作成する 2 番目の方法に移りましょう。

グラデーションマップを使用してデュオトーンを作成する方法

1.グラデーションマップを適用する

この方法では、画像の変更や特定のカラーモードの選択について心配する必要はありません。もちろん、何かを編集したい場合は先に進みますが、写真はそのままで問題ありません。準備ができたら、画像のコピーを選択し、[画像] > [調整] > [グラデーションマップ] に移動します。

デフォルト設定に応じて、この設定はグレースケールマッピングのグラデーションで画像をオーバーレイします。デフォルトが白黒でない場合は、ドロップダウンをクリックしてそのオプションを選択します。最初の方法に従った場合は、デュオトーンの作成の半分がすでに終わっていることがわかります。

プロのヒント: [反転] の横にあるチェックボックスを参照してください。それをクリックすると、写真の色が反転します。このチュートリアルでは、チェックを外したままにしますが、背景を被写体よりも暗くしたい場合は、このオプションを使用すると状況を切り替えることができます.

2. 色を選ぶ

グラデーションバーをクリックすると、グラデーションエディターが新しいウィンドウで開きます。ここで色を選択し、画像上での表示方法を調整できます。

ご覧のとおり、最終的な画像は互いにかなり異なって見えますが、どちらも素晴らしいデュオトーンになります。色の強度と暗いトーンと明るいトーンの行き先を制御するのが少し簡単なため、私はグラデーションマップを使用することを好みますが、どちらの方法も使いやすいです。

ダブルトナーの使い方

アクションをインストールする

アクションをダウンロードしたら、ファイルをダブルクリックしてインストールします。 Photoshop で使用する画像を開き、[アクション] ウィンドウを開きます。

[アクション]ウィンドウに移動するには、 [ウィンドウ] > [アクション] を選択するか、 Shift + F9を押したままにします。

[アクション] ウィンドウを開いたら、ダブルトーン効果を適用するイメージレイヤーを選択します。

アクションを選択して再生する

「Flywheel – Glitch-a-tron」フォルダーのドロップダウンをクリックします。次に、「Glitch-a-tron – Select and hit play」を選択し、ウィンドウの下部にある三角形の再生ボタンを押します。

再生すると、それぞれが異なるデュオトーン配色のレイヤーがたくさん表示されます。切り替えるには、必要なレイヤーを表示するだけです。

注: 複数のダブルトーンレイヤーが表示されている場合、色が混ざり合い、写真の細部の一部が失われ始める可能性があります。物事を鮮明に保つために、一度に 1 つのレイヤーのみを表示するようにしてください (または、まったく異なる効果を得るためにデュオトーンをレイヤー化して自由に試してみてください!)。

おまけ: スナップでイメージをリセット

バックトラックしたい場合に備えて、アクションは自動的にスクリーンショットを作成し、アクションが適用される前の画像に戻ることができます.

[ウィンドウ] > [履歴]を選択して、 [履歴] ウィンドウに移動します。一番上までスクロールして、「スナップショット」をクリックします。これですべてがリセットされるので、準備完了です。

ダブルトーンについてどう思いますか？それらは強いデザイントレンドだと思いますか、それともフルカラー画像を好みますか?

WordPress で素晴らしいサイトを構築および設計するためのリソースをもっと知りたいですか? あらゆる技術スキルレベルの WordPress ユーザー向けに作成された、教育用ハウツーコンテンツの膨大なライブラリについては、WP Engine のリソースセンターにアクセスしてください。