イラレで名刺講座

イラストレーターで名刺を作ろう 第2回

前回に続いて「イラストレーター」の使い方をご紹介します!

私は雑貨デザインや、オンラインショップバナー等をデザインする時
「illustrator(イラストレーター)」や「Photoshop(フォトショップ)」を
毎日のように使用しています。

いずれもプロ用のソフトなので基本的に高額なのですが
現在ではPhotoshopなら月額で1000円~利用可能()で以前より手軽に使えるようになった事や
個人ではお持ちでなくても、会社PCにインストールされている、とか。
自分ではなく家族が持っている、とか。
Photoshopなら安価版のPhoshop Elementsを使っている、などなど
このソフトを使える環境にある方が増えて来ました。

その為
「プロにデザイン依頼する前に簡単なものなら自分で出来たらいいな…」
という方も増えたようです。

では、早速本題!

今回は名刺に使うメインビジュアルのイラストを「ペンツール」を使って描く行程をご紹介します。

ペンツールは「ベジェ曲線」というイラストレーターの最大の特長とも言えるツールを使用します。
扱いに独特のクセがあるので、慣れるまで経験が必要なので
難しいと思った方は無理に挑んではいけません。

ベジェ曲線に敷居の高さを感じたら
フリーハンド感覚で描ける「鉛筆ツール」「ブラシツール」を使用(第1回 で少し触れています)したり
もっとアナログな手段として「紙にイラストを描いてスキャニングする」等がオススメです!

*PCはMac OS X(10.9.4)、使用ソフトは「Adobe illustrator C.S 5.1」です。
お使いのバージョン、PCによってインターフェイスや用語が異なりますがご了承ください。

*前回はスクリーンショットによる写真付き解説でしたが
今回初めて動画にトライしてみましたー☆

 

4.ペンツールでベジェ曲線を描いてみよう!(色の設定)

(動画再生時間 約48秒)

前の行程で選択した「ペンツール」を使って、絵を描きます。
下絵となる写真が「レイヤー1」にありますので
その上にある「レイヤー2」に描いていきます。

「レイヤー2」を選択した状態(ブルーになります)を確認してください。

お能が趣味の方の名刺なので
下絵となるご本人がお能を舞っている写真をトレースしてイラスト化することにしました。

まず線のみ(線画)で絵を描いてゆき、後から色を塗って行きます。

色の設定には「塗り」「線」の2種類がありますので
概念として覚えておいてくださいね。

では「線」の色設定をします。

「カラー」パレットで「線」(正方形の窓になっている方)をClickしてアクティブにします。

色の設定は「線」マゼンタ(ピンク色)100%にします。
このマゼンタをあらわす「M」の数値を最大値の100を入力し、
「tab」キーを押します。

線:M100 です。

その他の覧(CYKの各覧)に0以外の数値が入っていた場合は0を入力して「tab」キーを押します。
※tabキーを押すのは、入力した数値を有効にする為に必要です。

なぜこのピンク色にするかというと、下絵の写真が黒っぽいので、例えば黒い線でイラストを描くと
下絵と判別しずらく作業効率が悪い為です。
(下絵となる画像の濃度を薄くするという方法もありますが、今回はピンクの線で描く場合をご紹介しますね)
このピンク色は後で好きな色に変更します。

下絵となる画像の色によって見やすい色を設定するのがポイント!

これで「線」の色の設定が終わりました。

「塗り」の設定は今回は何もしたくない、「線」のみで絵を描きたいので
「カラー」パレットで「塗り」(正方形が窓になっていない方)をClickしてアクティブにします。

白い四角に赤い斜線が「色なし」の意味です。
これをClickして「塗り」の設定を「無し」にします。

さあ、いよいよ「ベジェ曲線」を描く行程です!(ここまで長かったですね…)

 

 

5.ペンツールでベジェ曲線を描いてみよう!(下絵をトレース)


(動画再生時間 約1分16秒)

細部を描き込みたいので、ズームアウト(拡大)して作業します。
ズームアウトはこの「虫眼鏡」の形のツールです。

そして「ペンツール」を選びます。

下絵にしている写真の「髪の毛」を描いてみたいと思います。
髪型のアウトランをペンツールでトレース(なぞって)行きますよー。


*以下はイラストレーターの醍醐味であり、ビギナーさんにとっての「最難関」である
ペンツールを使った「ベジェ曲線」の描き方になります。
これは直観的に作業が出来ず、慣れるまで経験を要しますので
初めてペンツールを使われる時はきっとイライラするはずです!
ちょっと触ってみて「面白いかも!」と思われた方は
様々なものを下絵にトレースして、ベジェ曲線を描く事に慣れてください。
「コレは無理かも…」と感じられた方は無理せず
ベジェ曲線を使わない方法を取りましょう。
ペンツール(ベジェ曲線)を使わなくても、基本的な操作をマスターすると
表現の幅が広がりますよ!


 

まずどこでもいいので、描き始めたい場所をClickします。
ここが始点となります。

次に支点にしたい部分に移動させてClick&ドラッグします。
するとアンカーポイントと呼ばれる方向のガイドとなる補助的な線が現れます。
ドラッグの方向を狙いたい方向にして、狙いたいラインの所で離します。

・・・・文章で説明されても、訳がわかりませんよね^^;

ベジェ曲線の書き方をとても分かりやすく解説しているサイトがありましたので、引用させていただきます。
図入りで非常に分かりやすいので、ベジェ曲線にトライしてみたい方は
是非こちらを参考になさって練習してください。

Illustrator(Photoshop) のペンツールできれいなパス、ベジェ曲線を描くためのコツ(私流)​
http://webdesignrecipes.com/illustrator-and-photosho-pen-tool-tips/

この要領でイラストを線画でドンドントレースしてゆき、線画が完成したら、
塗り(着色)の設定をしていきます。
お疲れ様でした。今回はここまで!
初の試み「動画での説明」はいかがだったでしょうか?
実際に分かるように説明をすることってすごく難しいですね。

顔が出来たらカラダや衣装もトレースしてゆきます。
次回はイラストが既に完成した状態からスタートし、
名前や連絡先等の文字を入れる行程を紹介する予定です。

今回引用させていただいた髙橋のりさんの「WEBデザインレシピ」は
その名の通りWEBデザイナー向けですが、充実の内容で分かりやすくオススメです☆
気になった方は他の記事もチェックしてみてください!

引用元:
Webデザインレシピ(髙橋のり)
http://webdesignrecipes.com

最後までお付き合いいただきありがとうございましたー!
次回もお楽しみに!