シルエットを大胆にレイアウトして強く印象づける | デザインってオモシロイ -MdN Design Interactive-

シルエットを大胆にレイアウトして強く印象づける

2024.5.20 MON

【サイトリニューアル!】新サイトはこちらMdNについて

あなたのデザイン、ちゃんと人の目にとまってる? 注目させるデザインの掟、大解剖!


 注目させるデザインの掟
 シルエットを大胆にレイアウトして強く印象づける

シルエットを大胆にレイアウトして強く印象づける


 Design  デザインで押さえておくべきこと
 シルエットの配置を工夫し印象的に

色面としても映えるシルエットを大きく配置することで、全体の印象を強く見せることができる。ここでは、シルエットの配置を工夫したり、色を変えたりしてメインビジュアルに奥行きが感じられるような処理を行っている。

 POINT 1 
人物の形のシルエットを配置してタイトルを重ねることで、その部分に受け手の注意を集めることができる。ここでは、より強い印象を与えるため色や配置を工夫している

 POINT 2 
最前面のシルエットと同形のシルエットを背面に配置。ふたつのシルエットの対比でデザイン全体に奥行きが感じられるような演出を行っている



 Making  制作工程で押さえておくべきこと
 切り抜いた画像を利用してシルエットを作成する

できるだけ自然な輪郭にするため、写真素材をペンツールなどで切り抜き、それをベースにしてシルエットを作成している。また、背景はブラシツールなど使って彩色。シルエットの色とのバランスが考えられている点も、大きなポイントだ。

 制作・文   伊藤敦志(AIRS)
 URL   http://www.on-airs.com/
 使用ソフト   Photoshop 6.0/CS2、Illustrator 9.0/CS2


1まずは、Photoshopで人物の写真素材を複数用意する。それぞれグレースケールに変更したら、ペンツールで人物を切り抜く。その際に、パスを保存しておくと後工程で効率的だ。画像は、イメージメニュー→“色調補正”→“明るさ・コントラスト...”で階調を上げておく。ここでパスを選択範囲に変換したら、新規ファイル上にコピー&ペーストで 1-1 のように配置する。さらに、新規レイヤーを作成し、ブラシツールなどで彩色して 1-2 のようなビジュアルに仕上げていく。

1-1
 1-1 

1-2
 1-2 

2切り抜いた人物画像のレイヤーのうち、任意のひとつを選んで、レイヤーサムネールをCommandキー+クリック。人物の形に選択範囲を作成する 2-1  。ここでこのレイヤーを非表示にし、新規レイヤーを作成して選択範囲選択範囲内を白で塗りつぶす 2-2 

2-1
 2-1 

2-2
 2-2 


3画像をIllustratorの新規ファイルに配置し、不要部分をトリミングしておく。ここでは、長方形ツールで作成した[塗り:白]、[線:なし]の矩形オブジェクトを前面に重ねて隠した 3-1  。ここで切り抜き時に作成したシルエットのパスをコピー&ペーストで配置し、[塗り]をオレンジに変更する 3-2 

3-1
 3-1 

3-2
 3-2 


4オレンジのシルエットを拡大・縮小ツールなどで拡大し、写真と余白の境界線をシルエットの一部で隠すように配置し直す 4-1  。あとは、このシルエットに重なるようにタイトル文字を配置して目立たせ、ほかの文字要素をレイアウトすれば完成だ 4-2 

4-1
 4-1 

4-2
 4-2 



MdN 2008年5月号(vol.169)

本記事は『MdN』2008年5月号(vol.169)からの転載です。
特集のすべての記事は誌面でお読みになれます。

月刊『MdN』掲載記事号の情報はこちら!
楽天ブックスで買う
amazon.co.jpで買うalt



twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在