京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

photoshopで、イラストをトレースしてみよう

2015年02月18日前田
Pocket

おはようございます!

デザイナー1年生に、学校では教えてくれない、
でも、現場に出たら必要となる事をお伝えできたらと思います。

 

以前、Illustratorでのトレースの仕方を何回かご紹介しましたが、
本日は、photoshopでのトレース方法をお伝えしたいと思います。

photoshopでトレースしてみよう

まずは、イラストを取込もう

ラフスケッチを描いたら、まずスキャナーで取り込みましょう。

01

 

色を2階調化してみよう

今回は、取り込んだ線に直接着色していきたいので、色を塗りやすいよう加工していきましょう。
まず、[イメージ]→[色調補正]→[2階調化]を選択します。

02

 

しきい値を設定するダイアログボックスが表示されますので、プレビューを見ながら調整していきましょう。
03

 

白と黒の2色になりました。

05

 

色を塗りやすいよう調整しよう

後で色を塗りやすい様、ゴミを取り除き、線が離れている所などは塗り足しておきましょう。

06
07

 
2階調化によって、線ははっきりしましたが、少し線が粗くなってしまいましたので、少し修正しましょう。

[選択範囲]→[色域指定]を選択します。

08

 

色域指定のダイアログボックスが表示されますので、[ハイライト]を選択します。

09

 

[ハイライト]を選択すると、白い部分が選択されますが、
[選択範囲]→[選択範囲を反転]で選択範囲を反転させておきましょう。
黒い線の部分が選択されます。
([シャドウ]を選択して暗い部分をダイレクトに選ぶ方法もありますが、この方法の方が綺麗に選択ができます。)

10

 

[選択範囲]→[選択範囲を変更]→[滑らかに]を選択します。

11

 

新しいレイヤーを作成しましょう。

12

 

黒で塗りつぶします。

13

 

14

 

パーツごとに色を塗っていこう

次に、各パーツに色を塗っていきましょう。
頭の部分を[自動選択ツール]で選択しておきましょう。
新しいレイヤーを作成し、色を塗ります。

15
 

16

同じように、各パーツを塗っていきましょう。
パーツごとに、きちんとレイヤー分けするようにするのを忘れないようにしましょう。

 

さてさて、本日は仏像さんのできあがりです!

EPSON MFP image

 

上手くできましたでしょうか?
photoshopでトレースした場合、元々の線の雰囲気を残すことができるのが特徴です。

是非、一度チャレンジしてみてくださいね!

 

おわりに

2014年11月19日に私たちの今までの制作活動を凝縮した書籍
「Webディレクションの教科書」を、SBクリエイティブ出版社から発売し、
ますます、たくさんの方に知っていただく機会を得ています。

書籍についての詳細は、以下URLをご覧ください。
・デザイナーのためのプロの制作術が身につく「Webディレクションの教科書」
http://marketing-designer.jp/

・amazonでも販売!!こちらからご購入いただけます。
http://goo.gl/MHu9la

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら