ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeグラフィック講座 > Illustratorでレトロなタイポグラフィックポスターをデザインする方法.

Illustratorでレトロなタイポグラフィックポスターをデザインする方法.

投稿日:2011年11月04日   レベル:初心者    ソフトウェア:Illustrator PhotoShop

このチュートリアルではIllustratorでレトロなタイポグラフィックポスターをデザインする方法を紹介します。

Step1.はじめに

今回はIllustratorを使って、数字の「1」を使ったタイポグラフィックなレイアウトを作成し、Photoshopに切り替えてポスターデザインをします。
文字を編集してデザインをする時はベクター画像を使うと、後から自在に編集できて便利です。
ベクター画像を編集できるIllustratorを使い、メインとなるタイポグラフィーのレイアウトを作っていきます。
完成イメージは以下の図の通りです。

完成図



Step2.ガイドラインの作成

Illustratorを起動し、新規ドキュメントを作成します。
文字ツール文字ツールを選び、News Gothicフォントを選択して、数字の1を入力します。

数字の1を入力する

文字の色を薄いグレーに変更し、「Ctrl」+「2」キーを押してロックします。
これは、小さなオブジェクトを操作しているときに間違って選択してしまうことを避けるためです。

色をグレーに変更しロックする



Step3.テキストを敷き詰める

同じフォントを使い、「ONE」と入力します。
トラッキングを調整して文字間のスペースを詰めてください。
「Ctrl」+「Shift」+「O」キーで、テキストをアウトラインに変えます。

テキストをアウトライン化する

グレーの背景をガイドにして、まずは角の部分からテキストのオブジェクトを並べて行きます。

角の部分からテキストを敷き詰める

「Alt」キーを押しながらドラッグしてテキストを複製します。
複製したテキストを、大きさを変えたり回転させて、グレーの背景の中に敷き詰めていきます。
大きさを変えたり回転させる時は「Shift」キーを押しながら行い、サイズの比率を一定にします。

テキストのサイズや角度を変えながら敷き詰める

テキストを並べていくと、次第に他の文字の入るスペースが決まってきます。
良く注目して、そこに合うように文字を配置します。

文字の入るスペースに気をつける

複製をしながら上から下まで作業を続け、グレーのエリアを全て埋めていきます。

テキストでグレーのエリアを埋める

角にまず文字を置いて全体的な形の枠組みを作り、内部をコピーで埋めていきます。

角にまずテキストを置く

作業を続けて行くと以下の図のようなものができあがります。
少し遠目に見て、大きな文字が多すぎる部分や小さな文字が多すぎる部分など、しっくりとこない部分をチェックし修正します。

テキスト詰めの完成



Step4.背景の作成

高解像度の水彩のテクスチャをPhotoshopで開きます。
切り抜きツールを使って白い部分が入らないように背景を切り抜きます。

水彩テクスチャを背景にする

新規レイヤーを作成します。
「Ctrl」+「A」を押して画面全体を選択し、右クリックで「選択範囲を変形」を選びます。
選択範囲のサイズを少し小さくし、内部を明るい青色で塗ります。

キャンバスより一回り小さい青い四角形を作る

描画モードを乗算に変え、下地のテクスチャが透けて見えるようにします。



Step5.テキストをPhotoshopに移動させる

Illustratorに戻ります。
全てのオブジェクトが含まれるようにドラッグして選択し、Shiftを押しながらグレーの背景をクリックして、背景を選択から外します。
「編集」−「コピー」を選択します。

グレーの背景以外を選択する

Photoshopに戻ります。
「編集」−「ペースト」を選び、テキストを貼り付けます。
テキストの位置は右下部分に合わせます。

Photoshopにテキストを貼り付ける



Step6.青い四角形に効果をつける

テキストのレイヤーのサムネイルを「Ctrl」キーを押しながらクリックして、選択範囲を作成します。
そのまま青い四角形のあるレイヤーを選択し、「編集」−「消去」を選びます。
それからテキストのレイヤーを非表示にします。

テキストの形状で青い四角形をくり抜く

青い四角形のあるレイヤーを選択し、レイヤーパレットから「レイヤーマスクを追加」を選びます。
Photoshopのブラシから粗いものを選んで、青い四角形の端の部分を描いていくと、痛んだような効果がつきます。
端四面にブラシを使うため、ブラシパレットを開いて、ブラシの角度を調整します。

青い四角形の縁にダメージを与える

色んなブラシを使ってテクスチャに変化をつけます。

色々なテクスチャを使う

青い四角形に効果をつけていくと、このような完成図になります。

青い四角形完成図



Step7.テクスチャの適用

ポスター特有のくたびれた雰囲気をテクスチャで表現します。
折り曲げた紙のテクスチャを全レイヤーの上に貼り付け、描画モードをスクリーンに変えます。
不透明度を調整して、折り目の強さを抑えます。

テクスチャの準備



Step8.完成

これで完成です。

完成図



引用:Web Design Library 著者:Blog.SpoonGraphics 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング