ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > Illustratorでレトロなブックカバー風のデザインを作成する方法

Illustratorでレトロなブックカバー風のデザインを作成する方法

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

このチュートリアルではIllustratorとPhotoshopを使って、レトロなブックカバー風のデザインを作成する方法を紹介します。

Step1.はじめに

今回はペンギンブックスのような出版社の、古いブックカバー風のデザインを作ります。
カラーパレットでブックカバーの基本的な印刷方法を再現し、紙に日焼けやしわの質感を加えることによって、当時の雰囲気やレトロな見た目をデザインに与えます。
これが完成イメージです。

完成形



Step2.スーパーマンのベクター画像を作成する

まずは素材となるスーパーマンのベクター画像を作成します。

Adobe Illustratorを開き、新規ドキュメントを作成します。
楕円形ツール楕円形ツールと角丸長方形ツール角丸長方形ツールを使って、頭部と胸部を作成します。
整列パレットを使って中心を揃えるようにします。

頭部と胸部を作成する

角丸長方形ツール角丸長方形ツールで先ほどのシェイプと重なるように線を描き、腕と足を作成します。
シェイプを正確に整列するにはスマートガイド(Ctrl+U)をオンにします。

手足を作成する

このレイヤーにある全てのシェイプを選択し、パスファインダパレットの「形状エリアに追加」で結合します。

パーツを結合する



Step3.スーパーマンのベクター画像を調整する

角丸長方形ツール角丸長方形ツールを使い、腕や足の間の部分を描きます。
それらのシェイプを一つずつ、胴体部分と一緒に選択します。
パスファインダの「形状エリアから前面オブジェクトで型抜き」をクリックし、そのシェイプを切り抜きます。

腕や足の間を切り抜く



Step4.スーパーマンのベクター画像に色をつける

この人型の色を肌色に変えてコピーし(Ctrl+C)、前面にペースト(Ctrl+F)してください。
複製したものを青く塗ります。

スーツから手の部分を切り抜きます。
青く塗られた人型のレイヤーを選択し、両袖と重なるサイズの四角形のシェイプを作ります。
四角形のシェイプと青い人型のシェイプを一緒に選択し、パスファインダの「形状エリアから前面オブジェクトで型抜き」で切り抜きます。

手の部分を切り抜く

胴体の部分をもう一度コピー&ペーストし、赤で塗ります。
次に、脚の下半分を除いた身体全体を覆うように大きな四角形のシェイプを描きます。
赤いブーツが残るように、「形状エリアから前面オブジェクトで型抜き」で赤い人型を切り抜いてください。

ブーツの部分だけを残し切り抜く



Step5.スーパーマンのベクター画像を完成する

ペンツールペンツールを使って赤いパンツを描きます。

スマートガイドを使えば、身体の外側にポイントを簡単に重ねることができます。

パンツを描く

スーパーマンのエンブレムの輪郭の半分を描きます。
コピーしてペーストし、「オブジェクト」−「変形」−「リフレクト」を選択した後、これらの2つのシェイプをパスファインダパレットで結合します。

半分のエンブレムを鏡面複製して結合する

ペンツールペンツールを使って、マントの上の部分を描きます。ここでもスマートガイドを使えば、ポイントとパスを揃えられます。

マントの上の部分を描く

マントの残りを、先ほどのシェイプのポイントを始点ならびに終点として描きます。

マントの背面部分を描く

書き終わったら、シェイプを選択している状態で Ctrl + Shift + [ キーを押し、最背面に配置します。

マントを最背面に配置する

これでベクターのスーパーマンは完成しました。



Step6.ブックカバーの背景を作成する

ここからは、Photoshopでブックカバーを作っていきます。

Photoshopの新規ドキュメントを作成し、背景として紙のテクスチャをペーストします。
ここでは、LostandTaken紙のテクスチャを使います。

紙のテクスチャを配置する

別の紙のテクスチャを重ねます。今度はしわや折り目が少なく、粒子の粗いものを選びます。
色相/彩度を調整し、描画モードを焼き込み(リニア)に変えます。

色相・彩度を調整する

新規レイヤーを作成し、選択ツールを使ってデザインの上と下の部分を選択して青く塗ります。
描画モードを乗算に変えて、テクスチャが透けるようにします。

上と下の部分を青く塗る



Step7.ブックカバーを装飾する

ベクターのスーパーマンをIllustratorからPhotoshopへドラッグ&ドロップし、カバーデザインの真ん中に置きます。

ベクターのスーパーマンを配置する

ベクターのスーパーマンがあるレイヤーの描画モードを乗算にし、不透明度を35%に設定します。
そのレイヤーを複製し、今度は描画モードを焼き込み(リニア)、不透明度を50%にします。

レイヤーモードを変更して馴染ませる

タイトルを書き込みます。
テキストツールでHelveticaGill Sansなどの古典的な書体を選び、使用します。

タイトルを書き込む

カバーにレトロな値札シールを付けます。
chokingonstatic氏作成のprice tag brushes(値札シールブラシ)を使えば、簡単に付け加えることが出来ます。

表紙に値札シールをつける



Step8.完成

完成です。
ベーシックなデザインスタイルや限定した色使い、異なるテクスチャを組み合わせることによって、古い書籍のスタイルを再現することができます。
古い書籍を参考にしてみてください。

完成



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



スポンサードリンク

コメント

ランダム記事5件

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