calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法

デュオトーンを採用したアーティスティックなWebサイトも増えてきたことですし、今回は「写真全体をデュオトーンに加工するのではなく、人物と背景の透過度を変えてデュオトーン加工を施しおしゃれに見せる」方法を書きます。

PR
IT/WEB業界への転職なら
Sponsored Link

デュオトーンとは

デュオトーン(Duo Tone)は中間的な明るさを持つ色(グレースケール)と明るい色を重ね2色で表現します。使い方によっては、レトロでアーティスティックな外観を演出することができるし、白文字との相性もいいです。印刷用語では「ダブルトーン(double tone)」と呼ばれています。

デュオトーンを採用してあるサイトを色々見ていると、

1.写真全体をそのまま加工してあるタイプ

Home | Plant Chicago

Visitez nos bateaux, découvrez nos métiers

2.人物にマスクをかけ背景無しかベタ塗りに加工してあるタイプ

Finesse Design Atelier - Digital & Creative Studio

NewDealDesign

3.背景を消した上でグラデーションをかけてあるタイプ

Stinkdigital

などなどありますが、個人的な感覚としては、「3.背景を消した上でグラデーションをかけてあるタイプ」がテクニカルで、美しい感じがします。 今回はこのタイプを作ります。

CSS を使う方法

CSSを使って、どこまでできるのか実験。まずは画像をメインと背景に分割します(いずれにしてもPhotoshopは必要ですね)。マスクの方法は後述します。

2枚の画像を合成する:cross-fade()を使い、読み込みます。2枚目(背景)の写真を薄くしたいので透過度は10%に設定します。

<div class="mask-synth"></div>
.mask-synth {
  background: -webkit-cross-fade( url(メイン.png) ,url(背景.png) , 10% );
  background-size: cover;
  width: 100%;
  height: 450px;
}

その上にグラデーションのレイヤーを置きます。これで、CSSのみで様々な色のデュオトーンを作ることができます。

.mask-synth:before {
  content:"";
  position: absolute;
  background: linear-gradient(rgba(204, 51, 153, 0.8), rgba(255, 204, 102, 0.6));
  width: 100%;
  height: 450px;
}

しかし、IE/Firefoxが駄目。

Can I use

IE/Firefoxが未対応なのとpngを使うはめになるので、以下で紹介するPhotoshopを使う方法がいいかもです。

Photoshopを使う方法

こういった感じのデュオトーンを作っていきます。

ダブルトーン

超簡単にデュオトーンを作る方法。まずは、イメージ>モード>グレースケール。

次に、モード>ダブルトーン。

プリセットを選んで

しかしこれだと全体に同じ加工が施され、セピアの色を変えただけみたいでパッとしない。この方法はやめてグラデーションマップとマスクを使うことにしましょう。

グラデーションマップとマスク

ペンツールかクイック選択ツールでくり抜きたい部分を選択、くり抜きたくない部分はAltキーを押しながら消します。

下のマスクアイコンを押します。

境界線の調整などを行います。

下のアイコンからグラデーションマップを選択。

アイコンから、写真調を選択

色を選択

マスクの下に新規レイヤー(長方形)を置き、ベタ塗りの背景。

マスクを複製して下に配置し、反転を押すと背景ありのデュオトーン。

背景レイヤーの透明度を変更して背景を薄くします。これで背景だけが薄くなりました。

フォントを選んで

文字をのせて完成。人物と背景の透過度が違うデュオトーンができました。

グラデーションマップを複製して、エディタで変更してあげれば、パステル調に変えたり

「シンプル」を選択して、「逆方向」にすると、それっぽくなります。

明るめの背景なので白抜きではなく補色の文字を使ってみます。柔らかい雰囲気。

#0099ff/#ff0099の組み合わせ。ポップで若い雰囲気。

#ff0033/#333366の組み合わせ。力強いイメージ。

文字の存在感を高めたい場合、暗めの背景なら明るめの文字をのせて明度対比を高めます。ということで白抜き。

#cc0066/#ffcc33は活発な雰囲気。

全体に斜めのグラデーションを入れる

Stinkdigital - Year In Musicのような雰囲気を出したいので、全体にグラデーションを入れたいと思います。

チャンネルミキサーを使うパターン。

アイコンからプリセットをカスタム、モノクロにチェックを入れます。

さらに、#cc3399/#ffcc66の組み合わせでグラデーションとコントラストの調整をします。角度は-140くらい。

全体に斜めのグラデーションが入ったデュオトーン完成。「人物はっきり、背景見えない」のがポイント。

最初の写真と比べると、随分変わりました。

詳しくはこちらの動画をご覧ください。

以上、人物と背景の透過度を変えてデュオトーン加工をする方法でした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする