こうなってんですね!PCアニメ・目の描き方

wakei06.jpg
画像は、わけいのコラージュより

私は、小さいころからイラスト・マンガを描くのは苦手だったのですが、
クラスにはたいてい上手な子がいました、特に女の子が多かった気がします。

少女漫画の目の輝きは、すごいですね!
目のイラストをしみじみと眺めると、いろいろ工夫しているんですね。

そんなわけで、今回はPCアニメ・目の描き方の話題です。



1 アニメの目の描き方・はじめに

How to draw a single div anime eye

Step 1. Draw a circle

Step 2. Draw the rest of the eye

just kidding keep scrolling

円を描いて、残りを描いて、ハイ出来上がり!
冗談・・・下を見てね!





2 アニメの目の描き方・step1-2

Single div anime eye step by step 1

Step 1. Use a div and give it a bit more width than height

divを使い、高さよりも少し多めに

Step 2. shape it with border radius and add a white background color

border radiusで形を作り、白の背景色を追加


「div、border radius」は、HTML、CSS用語



3 アニメの目の描き方・step3-4

Single div anime eye step by step 2

Step 3. abuse box shadows to create the eyebrows

boxの影を多めにして眉を作る

Step 4. use ::before and shape it as the eyeball

:: beforeを使い、眼球の形にする


「box、:: before」は、HTML、CSS用語



4 アニメの目の描き方・step5-6

Single div anime eye step by step 3

Step 5. abuse background images to create the pupil

背景画像をうまく使って瞳孔を作る

Step 6. use ::after and background images to create reflections

::afterと背景画像を使い反射を作る


「背景画像、::after」は、HTML、CSS用語



5 アニメの目の描き方・step7-8

Single div anime eye step by step 4

Step 7. add details

細部を加える

Step 8. draw the rest of the character

残りのキャラクターを描く



さっと見て、通り過ぎてしまいますが、「目」の一つだけ取り出しても、
奥が深いことに気付きました。


オリジナルは、Oscar Salazar さんがCodePenで公開した作品です。
ブログ用に修正を加えました。
(https://codepen.io/raczo/pen/LYGvRop)


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 135

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • tor

    簡単そうに素敵なアニメ目が描かれましたが
    実際は大変なのでしょうね。
    なかなか良い感じの魅力的な目です。
    2020年07月29日 19:35
  • わけい

    torさんへ
    コメントどうもありがとうございます。

    「目」一つだけでも大変そうですが、それに合う「鼻」「口」が入ると難しいですね。
    さらに、「髪」「体」が入ると・・・

    イラストやアニメの制作者ってすごいんですね。
    「目」が一番インパクトがありそうですが。
    (マスクすると鼻と口は見えない)
    2020年07月29日 23:11
  • フラバーバ

    そういえば 昔 こんな 大きな目の女の子の絵を
    良く描いていました。
    目で その人の心の内が わかるので 大切な
    部分ですね。
    2020年07月30日 08:27
  • トトパパ

    こんにちは

    うちの娘も絵が好きで、よく書いてます。
    目はやはり重要で、なんか上手いこと書いてますね。
    言葉にできませんけど。。。
    2020年07月30日 09:01
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。

    フラバーバさんも、「クラスでイラストが上手な女の子」だったんですね。

    週間少女漫画雑誌の両目で顔の半分程度を占めた女の子のキラキラと輝く瞳、その瞳には心の内が描かれていたんですね。
    あ~、そこまでは気づきませんでした。
    それを知ってて見るのとでは、ストーリーの理解の程度に大きな差が付いたんでしょうね。
    奥が深いですね!勉強になります!


    2020年07月30日 11:32
  • わけい

    トトパパさんへ
    コメントどうもありがとうございます。

    トトパパさんの娘さんも、私が思っている「クラスでイラストが上手な女の子」だったんですね。
    きっと、ノートの余白には可愛い子のイラストがいっぱい書かれてたんでしょうね。
    娘さんにとってもいい思い出なんでしょうね。

    目でそのときの感情まで表現するのは、きっとすごいテクニックなんでしょうね。
    今まで、そんなところまで考えて見てなかったです。
    2020年07月30日 11:45