アクセシビリティ
アドビ
サインイン プライバシー My Adobe

Illustrator、Photoshop のマニュアル本が大集結 - マイナビ Illustrator デザインの教科書

Adobe Design Magazine 「Illustrator、Photoshopのマニュアル本が大集結」では、書籍のご紹介と共に、エキスパートの声をご紹介しています。
HOME 入門ガイド 活用ガイド 電子書籍 お役立ち情報 ユーザー事例

関連情報 Photoshopで写真をコミックのように仕立てる!

ブラシを使った地図


イメージイラスト的な要素の強い、簡略化した地図を制作します。毛筆タッチの[アートブラシ]を適用したパスで道路や線路を表現すると、手描きイラストのような地図になります。

サンプルダウンロード 操作動画のダウンロード Photoshop体験版ダウンロード Illustrator体験版ダウンロード

【サンプルデーターについて】本データーのご利用は非営利目的の個人使用に限らせていただきます。 著作権は各著者に帰属し、第三者に販売、配布、貸与、譲渡することはできません


ビフォーアフター


Illustratorデザインの教科書

Illustratorデザインの教科書
瀧上園枝 著
株式会社マイナビ 発行(2011年5月)
定価:2,604円 ISBN 978-4-8399-3876-5

ご購入はこちら


 

STEP1 地図の基本的な構成を描く

最初に、道路や線路など地図の中の基準となる事物を描きます。要素ごとにレイヤーを分けて用意しておくと、描画作業を効率よく行えます。

地図を描くときは、Illustratorでの作業に入る前に、地図の構成をスケッチしておきましょう(図1)。 最寄り駅からの道路の構成やそれぞれの道幅、ランドマークとして挿入する建物の位置を確認しておきます。描いたラフスケッチは、スキャナーなどで読み込んでおきます。

地図を描くときは、Illustratorでの作業に入る前に、地図の構成をスケッチしておきましょう(図1)。 最寄り駅からの道路の構成やそれぞれの道幅、ランドマークとして挿入する建物の位置を確認しておきます。描いたラフスケッチは、スキャナーなどで読み込んでおきます。


新規ドキュメントを用意して、[ファイル→配置]メニューで地図のラフスケッチ画像を配置します(図2)。[配置]ダイアログでは[リンク]オプションのチェックを外し、画像が埋め込まれて配置されるように設定します(図3)。また[テンプレート]オプションをチェックして、画像が下絵レイヤーとして表示されるようにします。

新規ドキュメントを用意して、[ファイル→配置]メニューで地図のラフスケッチ画像を配置します(図2)。[配置]ダイアログでは[リンク]オプションのチェックを外し、画像が埋め込まれて配置されるように設定します(図3)。また[テンプレート]オプションをチェックして、画像が下絵レイヤーとして表示されるようにします。

[レイヤー]パネルを確認すると、[テンプレート]オプションをチェックして読み込んだ画像は、テンプレートレイヤーとして設定されています(図4)。テンプレートレイヤーはロックされた状態で画像の表示濃度が50%に設定され、トレースがしやすい状態です。 作業を効率よく行うために、地図の各要素をレイアウトするためのレイヤーを作成しておきましょう。「道路」「線路」「ランドマーク」の3レイヤーを作成しておきます(図5)

[レイヤー]パネルを確認すると、[テンプレート]オプションをチェックして読み込んだ画像は、テンプレートレイヤーとして設定されています(図4)。テンプレートレイヤーはロックされた状態で画像の表示濃度が50%に設定され、トレースがしやすい状態です。 作業を効率よく行うために、地図の各要素をレイアウトするためのレイヤーを作成しておきましょう。「道路」「線路」「ランドマーク」の3レイヤーを作成しておきます(図5)。


下絵の線を参考に、「道路」レイヤーに[ペンツール]で道路を描きます(図6、7)。それぞれの道路を1本のパスとして表現し、道幅は無視した状態でかまいません。下絵の線と差別化するために、[塗り:なし、線:M100%Y100%]などの設定で描くと良いでしょう。

下絵の線を参考に、「道路」レイヤーに[ペンツール]で道路を描きます(図6、7)。それぞれの道路を1本のパスとして表現し、道幅は無視した状態でかまいません。下絵の線と差別化するために、[塗り:なし、線:M100%Y100%]などの設定で描くと良いでしょう。


道路と同様に、「線路」レイヤーに鉄道の路線を示す直線パスを描き加えます。道路のパスと差別化するために、[塗り:なし、線の設定:C100%M50%]などの設定で描くと良いでしょう。

道路と同様に、「線路」レイヤーに鉄道の路線を示す直線パスを描き加えます。道路のパスと差別化するために、[塗り:なし、線の設定:C100%M50%]などの設定で描くと良いでしょう。


 

STEP2 道路のパスに「アートブラシ」を適用する

道路として描いたパスに、アートブラシを適用します。筆で描いたようなタッチで道路を表現します。

道路に適用するための[ブラシライブラリ]を開きます。[ウインドウ→ブラシライブラリ→アート→アート_木炭・鉛筆]を選びます。[アート_木炭・鉛筆]パネルが開いたら、[道路]レイヤー上のパスをすべて選択して、[木炭(ソフト)]をクリックして選びます(図10)。選択していたパスの外観が、筆で描いたようなかすれた輪郭に変わります(図11)。

道路に適用するための[ブラシライブラリ]を開きます。[ウインドウ→ブラシライブラリ→アート→アート_木炭・鉛筆]を選びます。[アート_木炭・鉛筆]パネルが開いたら、[道路]レイヤー上のパスをすべて選択して、[木炭(ソフト)]をクリックして選びます(図10)。選択していたパスの外観が、筆で描いたようなかすれた輪郭に変わります(図11)。

【ワンポイント】
[ブラシ]パネルのパネルメニューで[リスト表示]を選ぶと、ブラシ名が表示されます


選択しているパスのカラーを、[線の設定:K20%]に変更します。テンプレートレイヤーを非表示にして作業を進めると、「道路」レイヤーの輪郭が確認しやすくなります。

選択しているパスのカラーを、[線の設定:K20%]に変更します。テンプレートレイヤーを非表示にして作業を進めると、「道路」レイヤーの輪郭が確認しやすくなります。


道路の幅の違いを、線の太さの違いで表現します。道幅が広い道路を示すパスを選択して、[線]パネルで[線幅]を[3〜5pt]程度に変更します。

道路の幅の違いを、線の太さの違いで表現します。道幅が広い道路を示すパスを選択して、[線]パネルで[線幅]を[3〜5pt]程度に変更します。

【ワンポイント】
地図全体のサイズによって、適している[線幅]は変わります。


初期設定の状態では、アートブラシはパスに対して始点から終点方向へ適用されます。線にバリエーションを出すため、外観の方向を反転させます。調整したいパスを選択し、[ブラシ]パネルのメニューから[選択中のオブジェクトのオプション]を選びます。[ストロークオプション(アートブラシ)]ダイアログで[反転:軸にそって反転]オプションをチェックすると(図16)、アートブラシの方向が反転されます(図17)。

初期設定の状態では、アートブラシはパスに対して始点から終点方向へ適用されます。線にバリエーションを出すため、外観の方向を反転させます。調整したいパスを選択し、[ブラシ]パネルのメニューから[選択中のオブジェクトのオプション]を選びます。[ストロークオプション(アートブラシ)]ダイアログで[反転:軸にそって反転]オプションをチェックすると(図16)、アートブラシの方向が反転されます(図17)。

 

STEP3 「線の設定」を重ね合わせて線路を表現する

道路と同様に、線路を示すパスにもアートブラシを適用します。線の設定を重ね合わせて、1本のパスで線路のような外観を表現します。

「線路」レイヤー上のパスを選択し、「道路」レイヤーのパスと同じ[木炭(ソフト)]アートブラシを適用します。[線]のカラーを[C50%M25%]に変更します。

「線路」レイヤー上のパスを選択し、「道路」レイヤーのパスと同じ[木炭(ソフト)]アートブラシを適用します。[線]のカラーを[C50%M25%]に変更します。

[アピアランス]パネルで、[線]項目を選択して[選択した項目を複製]ボタンへドラッグ&ドロップして複製します。

[アピアランス]パネルで、[線]項目を選択して[選択した項目を複製]ボタンへドラッグ&ドロップして複製します。


前面の[線]項目を選択し、[線]パネルで[線幅:2pt]に変更し、[破線]オプションをチェックして[線分:5pt]と入力します(図21)。選択していたパスが鉄道の路線を示すような外観に変わります(図22)。

前面の[線]項目を選択し、[線]パネルで[線幅:2pt]に変更し、[破線]オプションをチェックして[線分:5pt]と入力します(図21)。選択していたパスが鉄道の路線を示すような外観に変わります(図22)。


 

STEP4 ランドマークを追加する

駅や目印の建物などランドマークを追加して地図を仕上げます。

読み込んだ[アート_木炭・鉛筆]パネルで、[チョーク(太)]を選択します(図23)。[レイヤー]パネルで[テンプレート]レイヤーを表示する状態に戻し(図24)、[ランドマーク]レイヤーにブラシツールでパスを描いて、駅の輪郭を表現します(図25)。

読み込んだ[アート_木炭・鉛筆]パネルで、[チョーク(太)]を選択します(図23)。[レイヤー]パネルで[テンプレート]レイヤーを表示する状態に戻し(図24)、[ランドマーク]レイヤーにブラシツールでパスを描いて、駅の輪郭を表現します(図25)。

目的地や目印となる建物は、[楕円形ツール]で正円を描いて表現します。目印は[塗り][線]とも[K20%]、目的地は[塗り][線]とも[C30%M100%Y100%]とします(図26)。正円の[線]に[木炭(ソフト)]を適用します。道路やランドマークを描き終えたら、テンプレートレイヤーは削除しておきます(図27)。

目的地や目印となる建物は、[楕円形ツール]で正円を描いて表現します。目印は[塗り][線]とも[K20%]、目的地は[塗り][線]とも[C30%M100%Y100%]とします(図26)。正円の[線]に[木炭(ソフト)]を適用します。道路やランドマークを描き終えたら、テンプレートレイヤーは削除しておきます(図27)。


最寄り駅名やランドマークとなる建物の名称を入力し、文字のサイズやフォントを調整します(図28)。目的地が目立つように、目的地の名称は引き出し罫を追加して描画します。引き出し罫のパスにも[木炭(ソフト)]アートブラシを適用して、その他の線と違和感がないように構成します(図29)。

最寄り駅名やランドマークとなる建物の名称を入力し、文字のサイズやフォントを調整します(図28)。目的地が目立つように、目的地の名称は引き出し罫を追加して描画します。引き出し罫のパスにも[木炭(ソフト)]アートブラシを適用して、その他の線と違和感がないように構成します(図29)。


 

書籍情報 Illustrator デザインの教科書

Illustrator デザインの教科書

編集者 伊佐 知子

編集者のオススメポイント
本書は、総論、知識編、演習編の3部構成で、作例を作る手ごたえを感じながら学びたい方は演習編から、ソフトの機能を網羅的に学びたい方は知識編から読み始めることができます。

解説はきめ細かく丁寧で、初心者の方でも理解しやすい作りになっています。基本知識のみにとどまらない部分までフォローしていますので、初級のスキルを身につけた後も長く使うことができます。作例の完成度が高く、見ているだけでも楽しくなる一冊です。


目次を見る(PDF)ご購入はこちら

著者プロフィール

瀧上園枝(たきがみ そのえ)

瀧上園枝(たきがみ そのえ)
グラフィックデザイナー。有限会社シアン代表取締役。印刷物やウェブサイトなどグラフィックデザインワーク全般を担当。
http://www.cyan.co.jp/
http://www.facebook.com/sonoe.takigami

書籍中面スクリーンショット


関連書籍

Photoshopデザインの教科書

Photoshopデザインの教科書
すたれない知識と、プロの仕上がりを手に入れろ!

「さっと調べる」にも「しっかり理解」にも使いやすい、Photoshopの教科書です。デザイン制作の基礎、Photoshopの機能と使い方の習得、実制作の3ステップカリキュラムで、長く使える基礎力が身につけられます。CS~CS5(CS5.1)対応。

>>詳細はこちら

よくわかる写真処理・補正の教科書 Photoshop Lightroom 3/Photoshop CS5対応

よくわかる写真処理・補正の教科書
Photoshop Lightroom 3/Photoshop CS5対応

デジタル写真をもう1歩、魅力的に仕上げよう!

Photoshop Lightroom 3およびPhotoshop CS5に対応した、デジタル写真の処理、補正、レタッチの活用書です。本書ではRAW現像テクニックを中心に、デジタル写真を扱うために必要な知識とノウハウ、テクニックを集めています。

>>詳細はこちら


Photoshop手描き風テクニック

Photoshop手描き風テクニック
デッサンができなくても描ける!

Photoshopを使って、写真を元に絵やイラストを描くテクニックを紹介します。デッサンが苦手な人でも、仕事にも使えるクオリティの絵やイラスト、手描き素材を作れるようになります。油彩風、水彩風の絵画表現から、イラスト風、ハッチング風など様々なバリエーションを用意。

>>詳細はこちら

Webを彩る グラフィックパーツのアイデア帖

Webを彩る グラフィックパーツのアイデア帖
Webサイトの印象を左右するイメージパーツを、ちょっとの工夫で印象アップ!

デザイナーでない人でも、心に残る、オリジナル性の高いグラフィックを作れるアイデアを詰め込みました。高品質な写真や、高度なテクニックは必要ありません。必要なのは、本書のアイデアと少しの工夫、基本的なソフトの操作だけです。

>>詳細はこちら