blog index

あひる小屋

日記ときどきお絵描き。
趣味で制作したイラストやゲーム素材を公開してます。
<< 【VX顔グラ】高校生セット2 7人目 金髪くん | main | 【VXアイコン】おかずパン追加 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | | - | - | pookmark |
【講座】顔グラ改変 表情追加編

さて、掲示板の方で講座をやってほしいというご意見をいただきましたので、
僭越ながら今回は、顔グラフィックに表情を追加する講座をやってみたいと思います。

とは言え、私自身もまだまだ勉強中の身ですので、
「こんな描き方してる人もいるんだな〜」ぐらいに参考にしてもらえたら嬉しいです。

今回は見本として、既に作成済みの顔グラフィックを使います。
描くまでの過程は省きますのでご了承ください。



また、使うツールはSAIのみでいきます。

SAIは体験版を以下のサイトから入手できます。
30日間は無料で利用できますが、それを超えると画像が保存できなくなります。
製品版は5000円くらいです。
ある程度絵を描く方でしたら、ペンタブレットと併せて購入しても損はしないと思います。
http://www.systemax.jp/ja/sai/

シンプルで使いやすいながらも、独特の描き味が好きで使ってます。
良かったらお試しあれ〜。




*VX規格 チュートリアル君顔グラフィック
中学生くらいでしょうか。いつもよりちょっとだけ少年漫画っぽい顔にしてみた。



*チュートリアル君顔グラフィック(原画)

 



この上三つのイラストは、いつも通りの素材として扱ってくださって構いません。
また、表情を変化させた顔グラを講座の最後に載せました。

利用規約はこちら↓
terms of use : http://momomohouse.jugem.jp/?eid=23




あと、私は文章を描くのがあんまり上手じゃないし、
「根性でなんとかする」描き方をするので、
わかりにくいとこもたくさん出てしまうんじゃないかと思います。

やっぱりせっかく描くんなら、わかりやすくしたいです。
なので、「ここわかりにくい」とかあれば、意見をいただけたら嬉しいです。
できる限り改訂はしていくつもりですし、今後があれば参考にさせていただきます。



それでは、かなり長い内容になってますが、
お付き合いいただける方は「続きを読む」から本編に進んでください。


*顔グラ改変 〜表情追加編〜*


■概要

 □素材規格
 RPGツクールVX規格(96*96ピクセル、8枚分で一つの素材)

 □使用ペイントツール
  SAI


■下準備

 _変する素材を準備しましょう

    □自分で描く場合
        ・描くキャラクターの性格を意識しながら描くと後々表情をつけやすいです。
        ・画像の画素数は完成品のを2倍か4倍にして描き始め、
            完成後に縮小するときれいに仕上がります。
              (3倍はオススメしません。2,4,8,16…というように2のn乗の数字のほうが
                  コンピュータにとっては都合の良い数字だからです。)
        ・顔のパーツや線と塗りでレイヤーを分けておくと後々便利でしょう。
         (レイヤーとは、透明な板のようなものです。後で作り方は説明します。)
    
    
    □既存の素材を改変する場合 
        *改変を禁止している素材屋さんもありますので、利用規約はよく読みましょう!
        ・ダウンロードの際、素材は.png形式で保存します。
            .bmpだと透明度の情報が失われてしまいます。
        ・改変を行う際に使うツールは、透明度の保存ができるものにしましょう。
          フリーだと、GIMPなどが有名です。
          ペイントなどで編集すると、透明度情報が失われてしまいます。



        .改変したい顔グラの部分だけを切り抜きます。
 
            「キャンバス」 → 「キャンバスのサイズ変更」を使うと、
            簡単に正確に切り取ることができます。

                

         
            

            サイズ変更時の単位はpixelと%から選ぶことができます。
            基準位置は、「どの場所をスタート地点としてサイズ変更するか」です。

            例えば、この図の設定なら、元の画像を
            「元画像の左上から数えて幅96ピクセル高さ96ピクセルの範囲を
            新しいキャンバスにする」ということになります。

        

        .「キャンバス」 → 「キャンバスの解像度変更」を使って解像度を2倍に上げます。

            96*96ピクセルのまま加工するより、192*192ピクセルで加工してから
            縮小した方が自然な仕上がりになります。

            幅、高さをそれぞれ192pixel(または200%)にしましょう。
            矢印は、どの場所をスタート地点としてサイズを変更するか、です。

        これで素材の準備は完了です。 


◆〇駑曾犬

    表情描くの得意!って方はとばしてください。

    人間の顔にはとてもたくさんの筋肉があり、
    それらの微妙な動きの差によっていろいろな表情が作られます。
    
    まずは鏡に向かっていろんな表情を作ってみましょう。
    できれば顔を触りながら筋肉と皮膚の動きを観察しておくと良いです。

    「なんか無理」という人は、人の顔や写真、画像検索などで資料を探しましょう。
    表情を特集したポーズ集なんかも販売されてます。
    感情表現のうまいアニメや漫画を参考にするのも良いと思います。
  (諸君!私はデ○ズニーアニメの表情が大好きだ!!)

    ちなみに、私はだいたいこんな風に顔のパーツを動かして表情を作っています。
    喜怒哀楽で紹介してみます。
    

    ◆喜
        ・口角が上がる                                    
        ・ほっぺたのお肉が上にあがる
        ・眉毛の角度がゆるくなる
        ・眉尻が下がる

        感情が表に出やすいキャラクターならば、
    口をにかっと開けてみたり、
        目を「 ^ ^ 」こんな風にするとわかりやすいです。

        微笑みの場合は眼は閉じに細く、
        まゆ毛や目の下の肉を上に上げると
        それっぽくできます。


    ◆怒               
        ・口が横に引っ張られる
        ・口角がちょっと下がる
        ・眉毛の角度が急になり、眉間にしわが寄る
        ・目の下の筋肉がちょっと上がる

        「もう、怒るよ〜」程度の怒りなら
        眉毛と口をいじるだけでも充分わかります。

        「震えが止まらない」ほどの怒り顔ならば、
        目を見開く、瞳を小さくする、髪を逆立てる、
        歯ぎしりする、などがわかりやすい表現だと思います。


        

   ◆哀
        ・眉毛の角度がゆるくなる。
            眉間にしわを寄せてもいいかも。
        ・眉尻がすごく下がる
        ・目の下の筋肉がちょっと上がる
        ・口角が下がる

        涙を追加すれば最高にわかりやすいです。
        眼の下にクマのような線を入れる表現もよく見ます。
        ”失意の哀”なら、口を力なく開けた方が、
          よりそれっぽく見えると思います。





    ◆楽
        ・眉毛が全体的に上に上がる
        ・目を見開く
        ・口角が上がる

        実はいつも、"喜"とどうやって差をつけるか
        悩んでます。
        こっちの方が目がらんらんと輝くイメージです。

        喜 → 「ありがとう!」
        楽 → 「オラなんだかワクワクしてきたぞ」

        そんな感じ?うまく言えなくてすみません。



    表情のパターンを増やしたいだけなら、これだけで結構なんとかなります。
    ただ、表情というのはとても多様で、人によって表現の仕方も様々です。

    例えば同じ「嬉しい」の表情でも、人の性格や状況によって表情は全く違います。
    以下のそれぞれのセリフに表情を付けて思い浮かべてみて下さい。

        「嬉しい」 「嬉しい!」 「嬉しい・・・!」

    ぜんぶ同じ”嬉しい”ですが、表情はそれぞれ微妙に違うものになるはずです。

    感情表現は「個性なので、そのキャラクターがどんな笑い方をするのか、
    せめて「感情を表に出すタイプかどうか」だけでも決めておくと、ぐっと描きやすくなります。


 表情つけ

    それでは、実際に表情をつけていきます。
    今回は、チュートリアル君を「喜怒哀楽」*「やんちゃな性格・おとなしい性格」
    の8パターンで作ってみたいと思います。

    ・,罵儖佞靴寝菫にあたりをつけます。
        線が見えやすいように「レイヤー」→ 新規レイヤー(カラー)を選んで、白で塗りつぶし、
        レイヤーの透明度を下げて半透明のレイヤーを作成します。

        ここを押すとレイヤーを作ることができます。
        (レイヤー:透明な板のようなイメージです。
            レイヤーを分けて描くことで、後の加工・修正が楽になります。)

            

        

        赤丸内の「不透明度」でレイヤーの透明度を調整することができます。

      ・さらに新規レイヤーを作成し、ここに線画を描いていきます。
        もし表情を楽に大量生産したいのであれば、目、眉、鼻、口、など、
        パーツごとにレイヤーを分けておくと、組み合わせでいろんな表情を作ることができます。
        今回は「元画像」「表情差分塗り」「表情差分線画」の3層に分けて作成します。

        
        表情差分の線画を描いてみたらそれぞれこんな感じになりました。
        ちなみに線画を描くときはブラシ濃度100、太さ1.0の鉛筆ツールを利用しています。


        

        

        線画のレイヤーの下に新しいレイヤーを作成し、色を塗っていきます。
        赤い矢印が新しいレイヤーです。
        後々調整するために、線画と塗りのレイヤーは分けておくと良いです。



     

    また、オレンジで囲ったアイコンを押すと、「レイヤーセット」を作成することができます。
    同じレイヤーセットの中に入れたレイヤーは、まとめて動かしたり、コピーすできます
    ので、表情ごとにレイヤーセットにまとめておくと便利です。



      ・元の画像の肌の部分の色をスポイトで取り、ざっと塗りつぶします。
        スポイトは、マウス:左クリック、ペンタブレット:ボタンを押すことでも使うことができます。

    
        

        ・なるべく元の画像から色をとりながら、影をつけたり、境目を目立たなく修正していきます。

        

        ・下の○部分のように、元画像がはみ出ている場合は、
        元画像の部分をを消しゴムで消してしまいましょう。

        



        ・ここまでで、表情ワンセット完成です。
        



       ・他の表情も同じ手順で、レイヤーやレイヤーセットを分けて作成していきます。

          


        一通り作成したら、ゴミがないかチェックしましょう。
        背景を一旦塗りつぶすことで、ゴミのチェックがしやすくなります。


ぁ〇転紊

       ・出来上がった画像を、インポートできる規格に修正します。
        まず、画面の解像度を下げます。(96*96ピクセル)

       ・次に、画像を並べます。
    ズレなく並べるための下準備として、各レイヤーセットの中に、
    一枚づつベタ塗りのレイヤーを仕込んでおきます。

    




       ・カンバスサイズを幅4倍、縦2倍に拡大し、画像を並べていきます。
    現時点ではこんな感じになっていると思います。

         



   ・レイヤーセットを選択し、赤丸のアイコンを押して画面をドラッグすると、
    レイヤーセットに入っている画像をまとめて動かすことができます。

    

    それぞれのレイヤーセットを隙間なく並べていきます。


        ・各表情のレイヤーを種類別に統合します
        (原画(線画・塗り)、表情差分線画、表情差分塗り)
         図の赤丸で囲んだアイコンを押すと、
     現在選択しているレイヤーとひとつ下のレイヤーを統合します。


            

        また、縮小するとどうしても輪郭線がぼんやりします。
        ぼんやり具合が気になる場合は、線画のレイヤーを複製し、
    透明度で濃さを調整して重ねると多少改善されます。
        (私はいつも透明度50%で重ねています。)

        

        すごく微妙な差ですが、左が線画の重ねなし、
    右が不透明度50%で重ねたものです。
    この辺は好みですが、やりすぎると不自然に輪郭がパキッとするので注意です。


        ・もう一度ゴミのチェックをします。
     地味な作業だけど、とても大事な作業です。


        ・レイヤーを統合して完了です。
          保存する時は、32bpp ARGB形式で保存しましょう。
     (24bpp にすると、透明度の情報が失われてしまいます。)




    やっとこさ、完成!
    こんな感じになりました。

    






ここまで読んで下さった方、お付き合いいただきありがとうございました。
初めての講座ということで、拙い点もたくさんあると思います。
(もしかしたら後でこっそり修正いれてしまうかも;)

こうして見ると素材作りって結構地味な作業ですよね・・・。
でも、その地味な作業に対して手を抜くと、やっぱり仕上がりが違ってきてしまうなー
と最近ひしひしと感じるわけです。

そこは作品への愛と根性!でなんとなる・・・はず!


ではでは、機会があればまた他の講座もやってみたいと思います。
それでは、本当にながーーーい記事を読んでくださってありがとう!

 

| よつば | 講座 | 23:31 | comments(1) | trackbacks(0) | pookmark |
スポンサーサイト
| スポンサードリンク | - | 23:31 | - | - | pookmark |
コメント
管理者の承認待ちコメントです。
| - | 2014/05/04 10:14 AM |
コメントする


この記事のトラックバックURL
http://momomohouse.jugem.jp/trackback/82
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

bolg index このページの先頭へ