Webから紙メディアまで応用の幅は無限大!
デザインの質を左右する! 演出のアイデア2010
いざデザインに取りかかろうと思っても、時間がなかったり、忙しかったりして、なかなか思うように形にできないという経験をした人は、少なくないのではないでしょうか。とはいえ、もちろんデザインのクオリティを下げるわけにはいきません。そこで今回の特集では、どんなに忙しく時間がない状況でも、クオリティをきちんと保つのに役立つデザインアイデアを、さまざまな切り口で紹介していきます。
パースのついた立体的な文字で迫力を演出 |
▼基になるアイデア
![p025-00-00](attach/images/2009december/mdn_vol189f/p025-00-00.jpg)
演出のポイント | |
迫力あるパースのついた立体的な文字は、グラフィックの主役として大きなインパクトを演出することができる。タイトル文字として大きく扱うほか、主張のあるロゴマークなどにも活用することができるだろう。 |
制作・文 マルミヤン
url http://marumiyan.com/
使用ソフト Illustrator CS3、Photoshop CS3
▼サンプル1 | 正面からパースをつけて迫力をアピール |
![p025-00-01](attach/images/2009december/mdn_vol189f/p025-00-01.jpg)
手前から奥に向かってパースをつけた文字を、イベントフライヤーのタイトルに利用したデザイン例。文字にこうした立体的なパースをつけることで、迫力あるイメージを演出することが可能だ。さらに配色や文字の形状によって、見え方を大きく変えることもできる。
▼サンプル2 | 文字を斜めに傾けてグラフィカルに演出 |
![p025-00-01](attach/images/2009december/mdn_vol189f/p025-00-02.jpg)
斜めに傾けた文字にダイナミックな立体感をつけた、タイポグラフィのデザインサンプル。文字のパースに変化をつけることで、よりグラフィカルなイメージに見せることができる。インパクトのあるロゴやグラフィックの主役として、デザインのさまざまな場面で利用可能だ。
▼基になるアイデアの制作方法 | |
![]() |
奥行きのあるパースのついた立体的な文字。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』掲載記事号の情報はこちら!