デザインの質を左右する！ 演出のアイデア2010

Webから紙メディアまで応用の幅は無限大！

いざデザインに取りかかろうと思っても、時間がなかったり、忙しかったりして、なかなか思うように形にできないという経験をした人は、少なくないのではないでしょうか。とはいえ、もちろんデザインのクオリティを下げるわけにはいきません。そこで今回の特集では、どんなに忙しく時間がない状況でも、クオリティをきちんと保つのに役立つデザインアイデアを、さまざまな切り口で紹介していきます。

制作・文 マルミヤン
url http://marumiyan.com/
使用ソフト Illustrator CS3、Photoshop CS3

手前から奥に向かってパースをつけた文字を、イベントフライヤーのタイトルに利用したデザイン例。文字にこうした立体的なパースをつけることで、迫力あるイメージを演出することが可能だ。さらに配色や文字の形状によって、見え方を大きく変えることもできる。

斜めに傾けた文字にダイナミックな立体感をつけた、タイポグラフィのデザインサンプル。文字のパースに変化をつけることで、よりグラフィカルなイメージに見せることができる。インパクトのあるロゴやグラフィックの主役として、デザインのさまざまな場面で利用可能だ。

▼基になるアイデアの制作方法
	奥行きのあるパースのついた立体的な文字。Illustratorのブレンド機能などを利用してベースとなる立体文字を作成し、Photoshop上でレイヤースタイルやブラシを使って質感を加え、パースをつけて仕上げている。

まず、Illustratorで新規ファイルを作成したら、ベースとなる文字を作成 1-1 。この文字をコピーしてcommand＋Bキーで背面にペーストしたら、サイズを縮小して位置を斜め上にずらす 1-2 。

1-1


1-2

次に、作成したふたつの文字の色を変えたら 2-1 、オブジェクトメニュー→“ブレンド”→“ブレンドオプション...”で［ステップ数：150］に設定。続けて、ふたつの文字を選択した状態で、オブジェクトメニュー→“ブレンド”→“作成”を実行し、文字を立体的に見せた 2-2 。

2-1


2-2

次に、工程2で作成した立体的な文字をコピーし、Photoshopの新規ファイル上にペーストして配置したら、“ベベルとエンボス...”で立体感をつけ、さらにレイヤーメニュー→“レイヤースタイル”→“グラデーションオーバーレイ”を 3-1 のような設定で実行。これにより、文字に深みのあるグラデーションをつけた 3-2 。

3-1


3-2

続いて、文字のレイヤーサムネールをクリックして選択範囲を作成したら、前面に新規レイヤーを作成。さらにぼけ足のついたブラシツールなどを使って、文字の下部を 4-1 のように白く塗る。このレイヤーを［描画モード：オーバーレイ］に設定し、光沢感を演出した 4-2 。

4-1


4-2

ここで背景以外の画像レイヤーを結合したら、編集メニュー→“変形”→“遠近法”を選択。表示されるバウンディングボックスの左上のコーナーポイントを上に向けてドラッグし、文字に立体的なパースをつけたら完成だ 5-1 。

5-1

▼

本記事は『MdN』2010年1月号（vol.189）からの転載です。

そのほかには下記のような記事が掲載されています。
（クリックすると画像が大きく表示されます。）

特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら！