creatersnest116

Photoshopで上手なハーフトーンを表現する方法


ハーフトーンを利用する時は、活用する画像に何らかの動きや表現を求める場合が多いです。
画像をそのまま一枚全てをハーフトーンで表現しても宜しいですし、画像の一部のみハーフトーン効果を表現する事も良い効果になります。

ハーフトーンを表現する方法

最初にハーフトーンパターンを見てみます。
編集したい画像を開いた状態で行ってください。

こちら画像を利用します。
元画像
http://www.gatag.net/

ハーフトーンの着色について

ハーフトーンパターンの着色の方法について、すぐ反映されるのはツールバーで表示されている描写色と背景色です。
今回は二通りの着色方法を記載しますが、他にもパターンがありますので自分の合うやり方で行ってください。

1.ツールバーの背景色、描写色の色設定を行う
好きな色を指定できる

2.ハーフトーン処理後
同系色グラディエーション
イメージ→モード→グレースケール→そして再度色モード指定→イメージ→色調補正→チャンネルミキサーで好きな色に変更

00

 

 

ハーフトーンパターンの表現 その1

初めに画像を複製してください。
複製されたレイヤーにフィルターをかけます。

フィルター→スケッチ→ハーフトーンパターンを選択。
ハーフトーンパターンのパネルが表示されます。
はじめから設定されている効果になりますので、新たに設定を行ってください。

左下の赤丸では画像の倍率、右上の赤丸でハーフトーンのパターンを決めます。
02

パターンタイプをプルダウンしてください。
パターンタイプは円、点、線の3種類です。

トーンパターン

ここで線を選択します。

「OK」をクリックするとハーフトーンパターンのフィルターがかかるので、そのレイヤーを元画像に焼き込みます。
レイヤーウィンドウ→レイヤーの描写モードの設定→焼き込み(リニア)
出来上がった画像を保存します。

次に他の画像と合成します。

90 + 291216582_953f924a70_o→ sample3

http://www.gatag.net/

 

ハーフトーンパターンの表現 その2

こちらの画像を使用します。
背景などを柔らかい印象に替えます。
4470341664_f991f01d43_o
h
ttp://www,gatag,net/

画像を2枚複製します。

一番上にあるレイヤーにハーフトーンパターンをフィルターをかけます。
色は描写色と背景色で設定。
サイズは大きく、コントラストは強く、パターンタイプは点にする。
フィルターをかけたレイヤーを不透明度40%に設定。

複製したレイヤーのうち一番上にあるレイヤーを不可視/真ん中のレイヤーを指定→イメージ→色調補正→色彩・彩度→彩度を-100→明るさ・コントラストでコントラストを最大に強く

04 03 4470341664_f991f01d43_o

真ん中のレイヤーの白い部分を全て選択→選択範囲の反転→一番上のレイヤーを可視/レイヤーを選択→選択範囲を削除

真ん中のレイヤーを不可視にし、一番上のレイヤーと一番下のレイヤーのみで作業をする。
ツール→消しゴムツール→ブラシを設定し、色味が濃いめ・境界線などにフィルターがかかっているかのように不要な部分を消していく

sample2

ハーフトーンパターンの表現 その3

画像が寂しい時も、ハーフトーンパターンで柄をつけましょう。
2685983891_8ec00e8e5e
h
ttp://www.gatag.net/

新規レイヤーを追加→楕円形選択ツールで選択→グラディエーションで塗りつぶし
05
この様に柄を決めてからフィルターをかける→フィルター→スケッチ→ハーフトーンパターン→サイズ、コントラスト、パターンを選択
レイヤーの不透明度を調整をする。

sample1

まとめ

今回、画像にフィルターをかける前に元画像を見て表情、シチュエーション、色味の具合などを見て足りない部分や雰囲気を更に魅せる部分を決めます。
どう魅せたいかでフィルターをかける部分や掛け方が決まっていくので、イメージを膨らます事も大切です。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleワンランク上を目指そう!CSSでマウスオーバーをデザインするチュートリアルまとめ