宰相府:技族院

アクセスカウンタ

zoom RSS アポロさんの授業内容

<<   作成日時 : 2007/03/22 23:49   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

<フォトショップ色塗り講座>


「フォトショップ色塗り講座の教師のアポロと申します。どうぞよろしく〜
今回は、線画をアナログで描いてスキャンしたものにフォトショップで色を塗る方法をご紹介いたします。」


「他にも沢山の塗り方があるかと思われますが、こちらの一連の作業の中から
皆さんの欲しい情報を選んで利用していただけると嬉しいですね!」


「まず、フォトショップとは。
Adobeから発売されている写真加工用ソフトです。
もともとイラスト専用のソフトではありませんが、これを使用してイラストに色を塗る事ができます。
持っていない方は公式サイトに無償体験版もありますので、試しに動かしてみるのも良いかもしれません。」


「今回の作業はAdobe Photoshop 7.0を使用しています。
ペンタブレットはWACOMのFAVO(CTE-440)です。全体の大きさはA5。作業面はB6です。
おそらく一番か二番に安いタイプです」


(……貧乏だったのか!?)
「い、言い訳ではありませんが、ペンタブレットに関しては
製品自体の機能より慣れが大切だと思いますので
最初に購入するのはあまり高いものでなくても大丈夫だと思います!」


「では、実際にイラストを描いてみましょうー!」



今回の作業の流れ
1.スキャナでイラスト線画取り込み
2.主線の補正、ゴミ取り
3.背景画像中の主線の取り出し
4.パーツ毎のレイヤー分け
5.顔、髪の色塗り
6.服、体、小物の陰影付け
7.出来たイラストをWEB用に加工する.



1.スキャナでイラスト線画取り込み

「まず、アナログで描いた線画をスキャナで取り込みます。」
画像


・WEB上で使う画像の場合は大体解像度100〜360dpiで白黒原稿(グレースケール)として取り込みます。
・最終的に、ブラウザの解像度と同じ72dpiまで落とすことになります。
画像


2.主線の補正、ゴミ取り

「取り込んだ画像はゴミがついていたり、全体的に灰色がかっていたりするので
きれいにしましょう」

上のタブから
画像

・イメージ→色調補正→自動補正
の、後
・イメージ→色調補正→レベル補正(入力レベルの白い三角を山の根元までもってくるくらいで)→OK
画像

これで、線画がクリアになります。

3.背景画像中の主線の取り出し

「取り込んだ直後は、背景画像に線画がある状態になっています。
ここから、線だけ取り出して別レイヤーにすることで、後の作業を進めやすくします。」


「デジイラストを描き始めた方から、よく質問をいただく所なので少し詳しく説明しましょうー」


「ここでは、アルファチャンネル等を使わない、基本的な方法をご紹介いたします。」

まず、この時点で確実に画像のモードがグレースケールであることを確認してから
(確認は上のタブからイメージ→モード→グレースケールで)
画像

背景レイヤーの上に新規レイヤーを一つ作り
画像

上のタブから
・選択範囲→選択範囲を読み込む→チャンネルを背景/グレーにして反転のチェックボックスにチェックを入れる→OK
画像

画像

で、背景画像の黒い部分を選択範囲として読み込みます。
さらに上のタブから
・イメージ→モード→RGBカラー
画像

で、グレースケールからRGBカラーにし
(要するに、白黒のデータからカラーを扱えるデータに移行するのです)
先ほど読み込んだ主線の選択範囲を主線に使いたい色で塗りつぶします(この場合は茶色です)
画像

この後、好みで主線レイヤーの効果や不透明度を変更します。
(私の場合は主線レイヤーの効果を乗算に、さらに不透明度を25%程度にしたのち
そのレイヤーをコピーして3〜4pxぼかして重ねます。ぼかしは・フィルタ→ぼかし→ぼかし(ガウス)で行います。
こうする事によってアナログで塗った時のような線画のにじみを表現できるのです。)


「これで主線が取り出せましたー!あとはやりたい放題です!」

4.パーツ毎のレイヤー分け

「パーツの色毎にレイヤーを作り、塗りつぶします。」
画像


5.顔、髪の色塗り

「では、パーツごとに仕上げていきましょう。まず、肌と顔の色塗りをしていきます。」

「この時、ブラシを水彩の筆の様に使えるように調節をしています。」
画像

画像

画像


このぐらいの調節で、↓のようなブラシタッチを出す事ができます。
画像



「また、レイヤーの透明部分にロックをかけるとあらかじめ塗りつぶした場所以外に色を塗ることはできません。
これを利用するとはみ出さずに色を塗ることができます。」
画像

画像

画像


6.服、体、小物の陰影付け

「服や小物はは一気に影を入れていきまーす。」

服や小物のレイヤーの上に影用のレイヤーを一つ作り、レイヤーの効果を乗算にし、影色を塗っていきます。
画像


影1段階目(濃い目の色で粗く影をいれる)
(影のみ)
画像

(乗算で重ねたところ)
画像


影2段階目(中間色を入れる)
(影のみ)
画像

(乗算で重ねたところ)
画像


最後に影を整えて影の色塗り終わり
(影のみ)
画像

(乗算で重ねたところ)
画像


その後、目にハイライトを入れ、必要であれば細かい修正を行ってイラスト完成です。
画像


※全ての工程のスクリーンショットはこちらに
http://academic.meganebu.com/~gosyuyu/tejun1.html

7.出来たイラストをWEB用に加工する

「アイドレスでは、WEB上に載せることを考慮してイラストを作らなければなりません。
ここでは、私がWEB用のイラストを作る際に注意していることを参考までにご紹介いたします。」

・ブラウザの解像度に合わせてイラストの解像度も72dpiに落とします。
・画像サイズ縦550px横800px以内に収めるとスクロールせずにイラスト全体を見ることができます。
・画像容量も100KB以内にすると読み込みに支障が無く良いでしょう。
(携帯対応にするときはもっと落とす必要があります)
・画像を小さくする際にイラストがぼやけた場合、
フィルタ→シャープ→シャープの処理で境界線がはっきりして見やすくなることがあります。
・WEBで表示される画像の保存形式(jpg、gif、png、bmp)で保存します。
おおまかに分けてグラデーション部分の多いイラストにはjpg、
アニメ塗りやドット絵のような平坦な塗りのイラストにはgifが向いています。

画像
「gif画像は背景を透過にできたり、gifアニメにすることもできますね。こんなかんじ!」


「こちらが画像サイズを調節して、シャープをかける処理を施してWEB用に加工した画像です。
これで、出来上がり〜」
画像




さいごに

「画像処理に慣れた方には当たり前すぎる授業内容だったかとは思いますが、
何かのお役に立てれば幸いです。
自分も見る人も満足のいくような素敵なイラストを発表出来るといいですね!頑張りましょうー!」

職員室へ

廊下へ

月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
アポロさんの授業内容 宰相府:技族院/BIGLOBEウェブリブログ
文字サイズ:       閉じる