SiGNテンプレートをカスタマイズしよう~流行のデュオトーンを試す

こんにちは!BiNDupテンプレートのデザインディレクターのオモトです。

今回は、「新SiGNのテンプレート」を使ったカスタマイズ編。2018年のトレンドである「デュオトーン」に挑戦したいと思います!3ステップでとっても簡単にできるのでぜひお試しを!

デュオトーンとは

デュオトーンとは、2色(Duo)の色合い(Tone)から構成されたデザインを指します。
なんとなく、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルという巨匠が描いたマリリン・モンローのポップアートを思い出す方も多いのではないでしょうか。新しい表現ではないのですが、音楽のサブスクリプションサービスである「Spotify」が使っていることで人気が再燃した表現方法ですね。色との組み合わせによっては、大胆で刺激的なデザインに仕上げることができます。

簡単デュオトーンのやり方BiNDのSiGNアレンジ完成イメージ

素材を用意する

加工する素材は、曖昧なグラデーションや明度の同じ色は単純化されてしまうので、青空と人だけのようなスッキリとした写真よりも、わりとごちゃっとした素材との相性が○。今回は、PIXTAとの提携により使いやすくリニューアルしたマテリアルズから、スポーティな黒人男性の写真をピックアップ。

簡単デュオトーンのやり方元の素材
キーワード:「走る 人 スポーツ」

簡単デュオトーンのやり方元にするSiGNテンプレート
テンプレートは、重ねる・ずらす表現が美しいこちらを使用。

1.写真を読み込み、モノクロ化

BiNDの画像をモノクロにする方法

画面左側のレイヤーパネルから、画像を選択し、画面右側の「画像ファイル」から、加工する画像を呼び出します。
「エフェクト」タブを選択しフィルターを使ってモノクロ化します。「雲透」や「月映」を選びましょう。お手本では「月映」を選択。

テンプレートはデフォルトで入っている写真にサイズや角度を合わせてあるので、加工する写真にあわせて調節します。
お手本では、サイズをW825px,H553px 位置 X249,Y-55 回転を4°に設定。

2.ベースとなるハイライトカラーをブレンドで重ねる

BiNDの画像を単色にする方法

シェイプレイヤーを新規作成し、整列パネルで、サイズ・位置・回転を同じ設定にします。
画面右側の塗りを黄色(#FFFC00)に設定し、全面に黄色を重ねたいのでブレンドを「乗算」にします。

3.シャドウカラーをブレンドで重ねる

BiNDの画像を単色にする方法インクを青に

2で作ったシェイプレイヤーを複製。塗りを(#000B5F)に設定し、影の部分に色を付けるためブレンドを「加算」にします。
するとネイビーが加わりました。

これで完成です!
いかがでしたでしょうか。ピタッと合う色の組み合わせを見つけるのがちょっと大変ですが、色合いを変えれば、こんな感じで雰囲気も印象もがらりと変わりますよ!

BiNDの画像をデュオトーンにする方法アレンジ例ピンク
全面に黄色(#FFFC00)を「乗算」し、その上に、影部分に色をつけるための、ピンク(#fb079a)を「加算」で重ねたパターン。

BiNDの画像をデュオトーンにする方法アレンジ例ゴールド
全面に水色(#9ad0ff)を「乗算」し、その上に、影部分に色をつけるための、ゴールド(#9a9868)を「スクリーン」で重ねたパターン。

2色を選ぶときのコツは、シックな雰囲気にしたいときは同系色でまとめたり、逆に派手な雰囲気にしたい時はそれぞれ補色を使うとイイカンジになりますよ。
ブレンドの種類でも印象が変わるので、いろいろ試してみてください!

とっても簡単なのでぜひ使ってみてくださいね。


今回作ったサンプルを試したい方は、サイトデータを後日ご用意しますので、新SiGNリリース後にぜひ試してみてくださいね!
※現在、新SiGNは安定した動作を目指すためバグFIX中・・リリースまでもう少々お待ちください!

SiGNのリニューアルに関する情報はこちらの記事にまとめてあります。

新SiGNの操作感、インターフェースについて読む


BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

今すぐ資料をダウンロード
  • POINT

  • モノクロフィルターとブレンドを使って簡単にデュオトーンが完成
  • テンプレートをベースに使えば、レイアウト構成はそのまま活かせる
  • デュオトーンの組み合わせは同系色でまとめるとシックな印象に

あわせて読みたい