Photoshopでデュオトーン画像を作成する方法
公開: 2021-10-07次のサイトのデザインに取り組んでいるときに、検討している可能性のある一般的なタイプの背景があります。それは写真です。 この傾向は必ずしもユニークではありませんが、シーンを設定し、ユーザーをサイトの環境に没頭させるのに効果的です。 「写真を使用する方法を探しているが、もう少しピザズがあれば、いつでもデュオトーン画像を試すことができます。どちらも見た目が良く、作成も簡単です。 」
Photoshopでデュオトーン画像を作成する方法を学ぶ前に、このデザイントレンドについてもう少し深く掘り下げてみましょう。
デュオトーン画像とは何ですか？
デュオトーンの核となるのは、2色で構成された単なる画像です。 Spotifyの2015年のレビューのようなキャンペーンでそれらを見たことがあるでしょう。
これは、特に代理店や小規模ブランドの間でますます人気が高まっています。 デュオトーン効果は、あなたの仕事とあなたのウェブサイト全体にあなたのブランドとその色を取り入れて強化するための素晴らしい方法です。 あなたに少しインスピレーションを与えるために、 LPKは、これを使用する方法のすばらしい例を示しています。
このテクニックを試すことに興味がある場合は、操作する写真を戦略的に操作する必要があります。 技術的にはどの写真にもデュオトーン効果を適用できますが、コントラストの強い画像では見栄えが良くなります。 また、背景が無地、できれば白の画像を使用することをお勧めします。これにより、探しているベースカラーを簡単に確立できます。
スタジオにアクセスでき、カスタム写真の撮影に興味がある場合は、シーンを設定するときにこれらのヒントを覚えておいてください。 既存のコンテンツを使用している場合は、いつでも最初に写真を操作して、コントラストを上げたり、背景色を変更したりできます。
- コースに参加して無料のPhotoshopリソースをダウンロードすることに興味がある場合は、このセクションにジャンプしてください。
- すでにコースに参加している場合は、ここをクリックしてテンプレートチュートリアルに直接ジャンプしてください。
チュートリアルの残りの部分では、Photoshopでデュオトーン画像を手動で作成するために使用できる2つの方法について説明します。 1つ目は組み込みのPhotoshopオプション（正常に動作しますが、私のお気に入りではありません）で、2つ目はグラデーションマップを使用します（もちろん、無料のアクションを使用している場合を除き、私の好みの方法です！）。
準備ができたら、画像をPhotoshopにロードして、写真の複製レイヤーを作成します。 （元の最下層の代わりに）複製を編集することにより、編集されていないバージョンの写真をいつでも利用できるようになります。
Photoshopでデュオトーン画像を作成する準備はできましたか？ 始めましょう。
デフォルトのPhotoshopデュオトーンオプションの使用方法
1.画像を8ビットグレースケールに変換します
Photoshopに組み込まれているデュオトーンオプションを使用するには、最初に画像を8ビットグレースケールに変換する必要があります。 写真のコピーを選択し、[画像]>[モード]>[グレースケール]に移動します。 また、同じモードメニューで8ビット/チャネルオプションが選択されていることを確認します。
このオプションを選択すると、いくつかの通知がポップアップ表示されます。 最初の質問では、カラーモードを変更する前に、画像を平坦化するか、レイヤーをマージするかを尋ねられます。 レイヤーが多い場合は、色の変化が表示方法に影響を与える可能性があります（この場合、フラット化は作業の保存に役立ちます）が、この場合、画像のフラット化について心配する必要はありません。 元のコピーが必要な場合は、レイヤーをマージしないでください。
次の通知では、色情報を破棄するかどうかを尋ねられます。 デフォルトのデュオトーンオプションを使用するには、これを行う必要があるため、先に進んで[破棄]をクリックします。
2.画像をデュオトーンに変換します
画像モードが8ビットグレースケールになったら、Photoshopのデフォルトのデュオトーンオプションを使用できます。 レイヤーを選択し、[画像]>[モード]>[デュオトーン]に移動します。
3.色を選択します
画像がデュオトーンモードになったら、色の選択を開始できます。 良い点は、新しい色を選択するとすぐに画像が更新されるため、（[プレビュー]チェックボックスがオンになっている限り）どのように見えるかを確認できることです。 それを超えて、プロセスは少し不格好になり始めます。 技術的には各色の曲線を調整できますが、画像はリアルタイムで更新されないため、何が起こっているのかを確認するのが少し難しくなり、前後に多くの結果が生じます。 目的の効果が見つかるまで、色と設定を試してみてください。
これらの設定を少し試してみることをお勧めしますが、準備ができたら、Photoshopでデュオトンを作成する2番目の方法に進みましょう。
グラデーションマップを使用してデュオトーンを作成する方法
1.グラデーションマップを適用します
この方法では、画像の変更や特定のカラーモードの選択について心配する必要はありません。 もちろん、何かを編集したい場合は、先に進んでください。ただし、写真はそのままで問題なく機能します。 準備ができたら、画像のコピーを選択し、[画像]>[調整]>[グラデーションマップ]に移動します。
デフォルト設定に応じて、この設定はグレースケールマッピングのグラデーションで画像をオーバーレイします。 デフォルトが白黒でない場合は、ドロップダウンをクリックしてそのオプションを選択します。 最初の方法を実行すると、デュオトーンの作成がすでに途中であることがわかります。
ヒント：[リバース]の横にあるチェックボックスを参照してください。 それをクリックすると、写真の色が反転します。 このチュートリアルでは、チェックを外したままにしますが、背景を被写体よりも暗くしたい場合は、そのオプションを使用すると、状況を切り替えることができます。
2.色を選択してください
グラデーションバーをクリックすると、新しいウィンドウでグラデーションエディタが開きます。 ここでは、色を選択して、画像上での表示方法を調整できます。
ご覧のとおり、最終的な画像は互いにかなり異なって見えますが、どちらも素晴らしいデュオトンになります。 グラデーションマップを使用するのが好きなのは、色の強度と暗い色調と明るい色調の行き先を制御するのが少し簡単だからですが、どちらの方法も使いやすいです。
2019 Web Design Trendsコースに参加して、無料のデュオトーンPhotoshopアクションを入手してください！
このトレンドを試すための迅速で簡単なリソースを探している場合は、事前に作成されたグラデーションマップオプションを使用したアクションを含む、このチュートリアルのファイルを入手できます。 以下のフォームにサインアップしてファイルをダウンロードするか、ここをクリックしてコースの詳細を確認してください。
[optin-monster-shortcode id =” dktout15rz4zcbcifnsl”]
デザイントレンドコースにご参加いただきありがとうございます。
まず、ここからPhotoshopアクションをダウンロードします。
デュオトナーの使い方
アクションをインストールします
アクションをダウンロードしたら、ファイルをダブルクリックしてインストールします。 Photoshopで使用する画像を開き、[アクション]ウィンドウを開きます。
[アクション]ウィンドウに移動するには、[ウィンドウ]> [アクション]を選択するか、 Shift+F9を押したままにします。
[アクション]ウィンドウを開いたら、デュオトーン効果を適用する画像レイヤーを選択します。
アクションを選択して再生します
「Flywheel–Glitch-a-tron」フォルダのドロップダウンをクリックします。 次に、「Glitch-a-tron – Select and hit play」を選択し、ウィンドウの下部にある三角形の再生ボタンを押します。
プレイを押すと、それぞれが異なるデュオトーンの配色で、たくさんのレイヤーが表示されます！ 切り替えるには、必要なレイヤーを表示するだけです。
注：複数のデュオトーンレイヤーが表示されている場合、色が混ざり合い、写真の細部が失われる可能性があります。 物事を鮮明に保つために、一度に1つのレイヤーのみが表示されるようにしてください（または、まったく異なる効果を得るためにデュオトンをレイヤー化して自由に実験してください！）。
ボーナス：画像を一瞬でリセット
バックトラックしたい場合に備えて、アクションは自動的にスクリーンショットを作成し、アクションが適用される前に画像に戻ることができます。
[ウィンドウ]>[履歴]を選択して、[履歴]ウィンドウに移動します。 一番上までスクロールして、[スナップショット]をクリックします。 これですべてがリセットされるので、準備は完了です。
デュオトンについてどう思いますか？ デザインのトレンドが強いと思いますか、それともフルカラーの画像が好きですか？ 以下であなたの考えを共有してください！
これらの無料のPhotoshopファイルをダウンロードする
以下のテンプレートを無料でダウンロードしてください！
次に何を読むべきかわからない？ このリストをチェックしてください：
- 2020年の13のウェブデザイントレンド
- ウェブ用に画像を最適化する方法：サイトのパフォーマンスを向上させるためのステップバイステップガイド
- CSSおよびSVGのクリッピングおよびマスキング技術の使用方法
- 粘着性のあるトップツートップボタンをWebサイトに追加する方法