ターボとドット絵を描くもん! part2

  • 1二次元好きの匿名さん22/03/07(月) 21:40:42

    ターボがドット絵の描き方教えるスレの続きだもん!

  • 2二次元好きの匿名さん22/03/07(月) 21:40:55
  • 3二次元好きの匿名さん22/03/07(月) 21:41:04

    Exellent!

  • 4二次元好きの匿名さん22/03/07(月) 21:41:14

    アニバで忙しくてどうせ何も進まなかったら、前スレは保守ミスした後そのままに放置してたもん!
    今週の金曜夜に透過付きの全身ドットの描き方説明上げるもん!
    存在を思い出して貰うために早めに立てて周知するもん!
    実はまだ説明文の準備が終わってないのもあるもん!

  • 5二次元好きの匿名さん22/03/07(月) 21:41:56

    あとこのスレが終わった後は総合スレが出来てたから合流するもん!

    こっちは1レスしたら3日スレが持つもん!

    ターボウマ娘カテから外出したの始めてで知らなかったもん! すごいもん!

    ドット絵部総合スレッド|あにまん掲示板時折立っては落ちるドット絵部の総合スレッドです作品自慢、相談、添削希望、ドット絵に関する話題ならなんでもOKです!<関連スレッド>https://bbs.animanch.com/board/1884…bbs.animanch.com
  • 6二次元好きの匿名さん22/03/07(月) 21:44:10

    予告画像だもん!
    金曜夜の部では、最後にアニメーション作りも説明するもん!
    こんなの作れる様になるもん!

    GIF(Animated) / 63KB / 1200ms

  • 7二次元好きの匿名さん22/03/07(月) 21:53:13
  • 8二次元好きの匿名さん22/03/07(月) 21:53:39

    あんまり最初から出すと、純粋にドットに興味あるだけの人に引かれるかと思って言い出し難かったもん
    今回の宣伝は前面に押し出して行くもん!
    こいつはやる気アップスイーツ・ターボだもん!
    下描きに色付けただけで進んでないもん!!!!????

  • 9二次元好きの匿名さん22/03/07(月) 22:01:04

    やってる間にウマ娘カテ動画部が落ちたもん……
    今回のアニバの波では幾つものスレを保守し損なったもん……
    すげー高波だったもん……

  • 10二次元好きの匿名さん22/03/07(月) 22:02:44

    小刻みにして来たけど、これで10レス確保だもん!
    やりたいことがあり過ぎてヒマが無いのは幸せなことだもん!
    みんな、よろしくだもーん!

  • 11二次元好きの匿名さん22/03/08(火) 08:54:38

    保守

  • 12二次元好きの匿名さん22/03/08(火) 08:54:39

    保守

  • 13二次元好きの匿名さん22/03/08(火) 12:45:20

    せやった告知上げ

  • 14二次元好きの匿名さん22/03/08(火) 19:12:14

    ネイチャさんが保守しちゃいますよー

  • 15二次元好きの匿名さん22/03/08(火) 23:08:46

    >>14

    かわいいもん!

    通常のイラストではデフォの方が楽だったりするけど、ドット絵では逆にデフォの方が難しい気がするもん

    あんまり凹凸を細かく表現できないもん

  • 16二次元好きの匿名さん22/03/09(水) 09:21:37

    忘れるような気がするもん 保守るもん

  • 17二次元好きの匿名さん22/03/09(水) 19:41:25

    そろそろ上げるもん

  • 18二次元好きの匿名さん22/03/10(木) 05:08:03

    は、宣伝上げ忘れてたもん ま、まあ保守ヨシだもん

  • 19二次元好きの匿名さん22/03/10(木) 15:03:44

    保守

  • 20二次元好きの匿名さん22/03/11(金) 00:36:03

    >>15

    デフォルメは小さいサイズでドット絵を打つときには抑えておきたい表現方式やな

    単純化と強調の技法やから、少ないドットで表現するんには適しとるんや

  • 21二次元好きの匿名さん22/03/11(金) 12:20:59

    うおーし保守兼上げ兼宣伝だもーん!
    今日の夜に第2部やるもーん!
    待ってて欲しいもーん!

  • 22二次元好きの匿名さん22/03/11(金) 19:35:44

    画像アップロード作業中につき、もうしばしお待ち下さいもん

  • 23二次元好きの匿名さん22/03/11(金) 19:53:18

    第2部はじめますもん!


    前回はアタリ取り、下絵がそんなに簡単じゃないというご意見がありましたもん

    仕上げて行く過程で無視するから、ホント目安でしか無いとは言ってきたものの、

    初めてではなかなかその無視も難しかったのかもん?

    と思ったので、今回はドットを描く前に、ちょっとドットの範疇を外れて、

    線画を簡単に作る方法からやっていくもん

    取り出しましたるは Inkscape というフリーソフトもん

    ダウンロードここもん↓

    Draw Freely | InkscapeInkscape is professional quality vector graphics software which runs on Linux, Mac OS X and Windows desktop computers.inkscape.org

    Adobe のイラストレーターというソフトに似ているらしいもん

    ターボはフォトショップは触ったことあるけどイラストレーターは触ってないから、

    どこまで似てるかはホントは知らないもん


    起動したら最初は設定画面が出ると思うけど、特に触ることは無いので新規ドキュメントを押すもん

    ジャマなら毎回表示するオプションを外してもいいけど、

    いざ触りたくなった時にオプション設定から項目探しに行くの面倒臭いので、こういうのターボは出しっ放しにしといてるもん

  • 24二次元好きの匿名さん22/03/11(金) 19:53:45

    起動したらまずメニューのファイルから矢印の所を開いてキャンパスサイズを操作するもん

    今回は単位をpx(ピクセル)にして、1280 × 1280 にしとくもん

    後で作るドット 128 × 128 の十倍もん(やり過ぎたもん)

    小さ過ぎても操作し難いからだもん 実は正方形なら幾らでもいいもん


    矢印のツールでテキトーに2つクリックしたら Enter で線が描けるもん

    この時下のパレットを触ると線の色が変えられるもん


    線の途中をダブルクリックでノードと呼ばれる点が増やせるもん

    増やしたらドラッグ操作でこの通りグリン、もん

  • 25二次元好きの匿名さん22/03/11(金) 19:54:05

    同じ要領でノードを増やして、動かしていくもん

    最初の線を引いた端2つもノードもん 動かせるのでテキトーに星型にしていくもん


    ドラッグや Ctrl+A で全ノードを選択するもん

    そしたら上の矢印の所でノードの種類を変えるもん


    これがノードの種類もん

    初期状態のシャープノードは<みたいな鋭角を作れるノード

    スムーズノードは図みたいな曲線、

    対称ノードはこの後出てくるハンドルというのが左右同じ長さで固定されるもの、

    赤矢印の自動スムーズノードはハンドルをイジらなくても位置で一番自然な曲線を勝手に設定してくれるノードもん

    とりあえず最初は面倒臭いから自動スムーズがオススメもん

    これは自分でハンドルを操作すると解除されるから気を付けるもん

  • 26二次元好きの匿名さん22/03/11(金) 19:54:27

    頭の所で開いてた最初の直線の頂点2つを選んで矢印のボタンで結合させたもん


    この時点で何をどうすればキレイな線画が作れるか、もうみんな解ったと思うもん

    この機能は他のツールでも、パスやフリーフォームペンなんて別名で備わっていたりするもん

    スマホで出来るアプリはターボは分からないもん

    知ってる人がいたらここのレスにアンカ付けて教えて欲しいもん

    アイビスペイントではベジエ曲線という、この曲げれる線ツール自体は確認しているもん

    Inkscape の良いところは1回描いたキリで終わらず、

    このまま .svg って形式で保存できることもん

    1月後でも1年後でも気に入るまで、引き直すことなく、何度でも角度や位置を操作できるもん


    どんどんダブルクリックノードを増やして操作していくもん

    これはハンドルを操作している例だもん

  • 27二次元好きの匿名さん22/03/11(金) 19:54:50

    これは右脚のヒザになる2つのノードを選んでシャープノードに戻してキュッと引き締めてるとこもん

    最終的には自動スムーズにしちゃったから繁栄されてないのは内緒もん


    左脚もん だいぶできたもん?

    これをやるのも難しい! って最初はきっと思うもん

    こればっかりは何か参考資料持ってきてトレスしてもいいと思うもん

    元の絵に合わせた曲線操作の練習になるもん


    メニューのファイルからインポートを選ぶことで他の画像を読み込んで、

    同じくメニューのオブジェクトから矢印のをさらに選ぶことでレイヤーを表示させて、

    並び替えれば後ろに見本として設置できるもん

    レイヤーの説明は前スレ参照もん

  • 28二次元好きの匿名さん22/03/11(金) 19:55:13

    全体を見たもん 左脚ちっちゃっ! もん


    脚全体のノードを選んで、拡大・移動して整えるもん


    選択した後にノードをクリックする毎に拡縮と回転モードが切り替わるもん

    片面だけちょっと動かして太さ自体を変えたい時とか、

    矩形選択では難しいときは Shift 推しながらで複数ノード選択ができるもん

  • 29二次元好きの匿名さん22/03/11(金) 19:55:33

    で、いろいろやってこんなところもん

    前スレでドットは普通のイラストよりも、線の角度とかのやり直しが簡単だから初心者向けと言った気がするけど、

    このパス描きも同じことが言えるもん 覚えてしまえばめちゃめちゃ簡単に歪みの無いキレイな線画が描けるもん


    メニューのファイルから .png ファイルへエクスポートを選ぶもん

    ここで直接のサイズを入力しているもん ターボは 128 にしてるけど、幾つでも大丈夫もん

    このパスだけのはベクトル画像といって、線の形だけのファイルで、

    ここのエクスポートで始めて普通の画像に変わるもん

    なので幾つにしても滲んだりしないキレイな線で出力されるもん これもパスのいい所だもん

  • 30二次元好きの匿名さん22/03/11(金) 19:55:58

    ターボは自分で作った色で塗ろうと思ってるからここで描き出したけど、

    Inkscape でもバケツやグラデといった機能を使って下地を塗っておく事もできるもん


    今回はアタリ取りに体だけ作ったけど、新しい線を作ったり、レイヤーを使ったりして、

    もちろん服や髪、顔のパーツもこんな風にノードで作れるもん

    (なおこっちは普段使いのSAIという別のツールで作った画像で、

     有料ソフトだから今回の講座には使わなかったもん……)


    もっと使い込みたい人は、詳しい使い方や便利な機能の解説は以下のリンクとか、

    『Inkscape 使い方』とかで検索して欲しいもん

    上記の通りターボもこれだけ言って普段使いしてないから、実は大して詳しくないんもん

    ごめんもん

    inkscapeの使い方(最小限)ネットマニアテンプレートwww1.gifu-u.ac.jp

    最後にもうひとつ紹介するのは矢印の『選択オブジェクトのストロークをパスに変換』もん

    これをすると今まで1本の線だったパスが図の様に2つのパスに囲まれたものになるもん

    前スレでも触れたけど、特にイラストを描く時の線画では、

    ほっぺや肩、二の腕とか光が強くあたる所は細く薄く、

    脇や顎の下とかの暗がりになる所の線は太く濃くすると立体感が増すもん

    上の坊主でやってる様なことがInkscapeでもできるもん

  • 31二次元好きの匿名さん22/03/11(金) 19:56:24

    さーて、いよいよドット絵を打ってくもーん

    開くと流石に10分の1に縮小されて線がうっすいもん もちょっとパスは実寸に近い方がよかったかもん?

    まあいざとなったらパスを丸々縮小して出し直してくるから、これやってる時は気にせず進めたもん

    同じ色の範囲を一気に選択してくれる、矢印のマジックワンドツールで、

    Shift を押すとさらに領域が選択できるので、これで内と外をあわせて選択して、


    編集メニューの下の方にある『選択領域の反転』を使って、

    さらに同じく編集メニューの中程にある塗り潰しを使って、薄い輪郭線をまずは黒1色で塗り潰したもん

    ピンクのレイヤは背景が透けてるのを確認してるもん


    ここで今度は全フレームメニューから色数を選択したもん

    Inkscape から出力した .png ファイルははじめ 32bitカラーになっているもん

    これを256色にしないとこの先不便なので、まずこの機能で減色したもん

  • 32二次元好きの匿名さん22/03/11(金) 19:56:57

    前スレで RGBそれぞれ 256段階全部使えるのが24bit と言ったけど、

    今さっき出たそれより多い 32bitは不透明度を表すアルファチャンネルというのが、

    もう1つ 256段階増えてるカラーもん

    8bitの 256色とアルファ付き32bit でできることの違いを簡単に見せるととこうだもん


    256色には透明にすると決めた1色だけを見せなくする下の様みたいにする機能しか無いもん

    アプリの機能で 256色にもアルファを付けれるけど、その場合は自動的に 32bit化されるもん

    今回は最終的に上のを作れる様にするもん


    んで、パレットに前のヤツを読み込んできて、同じ要領で色を置き直してるもん

    出力する時に色付けといて良かったもん 手際が悪いもん……

    この塗り直しの最中、アルファチャンネルが悪さしだしたから一旦、

    画像メニューのアルファチャンネルの削除から Inkscape が付けてくれたアルファは始末したもん

    何度手間かしてる気がするもん……

  • 33二次元好きの匿名さん22/03/11(金) 19:57:24

    前は肌塗りを一気に進めたので今度は多少丁寧にスクショ取ってもん

    まずは1影目、左上に光源を置くとテキトーに決めたもん

    なので上や右になる半分は明るく、逆は暗くと輪郭を描いてバケツで埋めてと、ポンポン塗っていくもん


    影を付けるには身体の凹凸を知っていないといけないけれど、

    イラストほどそこが目立つことも無いので、ターボのヤツを真似してくれたら大体おっけーだと思うもん

  • 34二次元好きの匿名さん22/03/11(金) 19:57:47

    3段階目の影もん

    この辺から漸く輪郭とかをしっかり目に意識し始めてるもん ここまでテキトーだったもん

    ヘソや胸を描いたり、胸は胸筋部分の絵を崩して失敗したくなかったので一旦別レイヤもん

    満足したら統合させるもん


    指(っぽい雰囲気に)描いたり、目鼻口を影で現しておいて見たり

  • 35二次元好きの匿名さん22/03/11(金) 19:58:07

    あとはハイライトで逆に明るい側を塗っていくもん


    影塗りのポイントを、またこの坊主を使って説明するもん

    プロジェクト保存し忘れて、パス描き見本のスクショしか残ってなかった残念なヤツの肌だけ塗ったものもん

    左から伸びてる矢印の箇所は、丸みを帯びているので少しずつ影が掛かるのを、ボヤケさせた影で表現しているもん

    右から伸びてる矢印の箇所は、鼻や唇、顎といった物体によってくっきりはっきり掛かるのを、ボヤけさせない影でパリッと表現してるもん


    このボヤけた方をドットのしかも 256色でやろうとするとすごく大変もん

    そこで登場するテクニックがタイルパターンという技法もん

    この通り、2色のドットをちょっとずつ混ざる量を増やすことで、滑らかにグラデーションしている様に見せることができるもん!

  • 36二次元好きの匿名さん22/03/11(金) 19:58:38

    ……と、本来ならターボがここで実践してみせるべき所なんもんけど、

    上手くできる気がしないから、参考に上手い人のものを紹介するもん

    タイルパターンは二倍で見るのが綺麗だと思う | とらねこさんの家RPGツクールの素材・ゲーム作成他、好き勝手書くブログですmiyanami.blog40.fc2.com

    タイルパターンは2色だけでその中間をたくさん表現できるから色数の節約にもなるもん

    見事、センスに開眼しそうな人はぜひチャレンジして欲しいもん

    ターボは草葉の陰から応援するもん……


    さあここからはまた本筋じゃないので急ピッチでぶっ飛ばすもん!

    下描きもん!


    後髪レイヤー


    前髪レイヤー


    装飾品レイヤー


    衣装レイヤー

  • 37二次元好きの匿名さん22/03/11(金) 19:59:04

    顔レイヤーはそのまま仕上げもん!


    装飾品や髪の塗りはこんな感じもん ちっちゃいからいつもに増してテキトーもん


    塗り終わり全体図


    そしてあとは絵に似合うように前スレ同様色を調整して完了、だもん!!

  • 38二次元好きの匿名さん22/03/11(金) 19:59:37

    さて出来上がった所で、前回説明がめちゃめちゃ遅くなったので、
    もう1回しっかり伝えておくもん!
    ファイルの保存は GraphicGale の専用形式、.gal で行うもん!
    そうしないとレイヤ情報などが失われてしまうもん!
    前回はレイヤを分けずにがんばってた人もいたみたいもん! ホントにすまんもん!
    今回は後の作業で絶対必要なので、必ず .gal ファイルを残しておいて欲しいもん!

    閲覧可能な画像ファイルの描き出しには、ファイルメニューのエクスポートを使って
    .png で出すのがオススメもん
    矢印のオプションでアルファチャンネルにチェックを入れておいて欲しいもん
    普通の名前を付けての方でも .png で保存することができるけど、
    1回やって .gal に戻すのを忘れてると、ずっと .png 保存しててアプリを落とした時にアーッ!ってコトになるもん!
    今なったもん! エクスポートの説明しようと色々いじっていたら! アーッ! もん!

  • 39二次元好きの匿名さん22/03/11(金) 20:02:38

    ……ということで、最後の最後にやらかした保存ミスがちょっと挽回しきれなかったので、
    本題のアルファチャンネルは明日なんだもん……もん……

    とりあえず復習回ということで、今からも新規でも前スレの顔グラでも投稿して欲しいもん
    みんなのドット絵みたいもん

    次の説明用画像だけおまけに貼っておくもん

  • 40二次元好きの匿名さん22/03/12(土) 05:50:28

    保守

  • 41二次元好きの匿名さん22/03/12(土) 12:02:42

    あげるもん

  • 42二次元好きの匿名さん22/03/12(土) 20:33:42

    需要があるのかどうか一気に不安になってきたこの頃、アルファチャンネルの説明をやっていくもん

  • 43二次元好きの匿名さん22/03/12(土) 20:33:56

    出力した .png をもう一度Galeで開くと、矢印の通り、24bitフルカラー化してるのが分かると思うもん

    Gale自体とか対応しているソフトではアルファ無しでも、透過色指定されている色を抜いてくれるけど、

    どっちにしろ単色しか抜けないから、アルファの使えない256色のままではある問題が起こるもん


    ゲームとかで拡縮されて表示した時に、こんな感じに1ドットの粒子がめちゃめちゃ目立つもん

    このギザギザ感をジャギーと言って、目立ってる様子をジャギってると言ったりするもん

    ドットの中ではグラデさせてたりする分、あまり目立たないけど異なる繋がりの無い背景に載せだすとかなり目立つもん


    アルファチャンネル最大の目的はこのジャギーを抑えることにあるもん

    これをGaleで操作していくもん

    メニューの画像から『アルファチャンネルを複製』を選んでみると、この様に今付いてるアルファを白黒画像として別のキャンパスに書き出すことができるもん


    アルファは真っ黒 RGB(0,0,0) を完全な透明、真っ白 RGB(255,255,255) を完全な不透明としているもん

    ここではまず白を全部マジックハンドで選択して、一旦全部 灰色RGB(128,128,128) で塗り、

    もう一度灰色を選択したら、編集メニューの『選択領域を変更』→『選択領域の縮小』で1px 縮めて真っ白を塗り直したもん

    これで輪郭 1px がちょうど半分だけ透ける様になったもん

  • 44二次元好きの匿名さん22/03/12(土) 20:34:22

    さらにもうちょっと黒側に同じ要領で 濃い灰色RGB(64,64,64) を、

    白にももう1回同じ処理で 薄い灰色RGB(192,192,192) を入れて、3段階に透明度が変化する様にしたもん


    続けてこちら元画像のアルファチャンネルを一旦削除して、白かった背景を真っ黒に塗ったもん

    黒側を1段階凹ませた分、全体の周りに薄くこの背景の色が乗るので黒輪郭にしたかったためだもん

    256色のままなら色変えるだけで良かったもん しくじったもん


    そして画像メニューから『アルファチャンネルの作成』を選ぶとこのウィンドウが出るもん

    アルファを生成する元画像をさっき弄った複製アルファに指定して、実行するもん


    できあがったのが、うおっ、まぶしっ!

    ってフチが白くなって光ってるみたいになったマベちんもん

  • 45二次元好きの匿名さん22/03/12(土) 20:34:47

    最初の単色抜きとアルファで段階透過させたマベちんの比較だもん

    透明になった分、背景の色が混ざって自然にグラデする事でよく馴染んでるのが分かると思うもん


    Gale では先程の複製や再作成の手順を踏む他にも、

    カラーバーの所の矢印の通り、透明度を指定して色を塗ることや、

    ペイントモードの操作で直接透明度だけを塗ることもできるもん

    ウインドウを縮めているとターボのみたいにボタンが隠れるので、

    赤丸の所を押して鉛筆マークを、矢印の様な透明パターンマークにして操作するもん


    こちらテキトーに『半透明』を塗ったマベちんを浜に置いたものもん

    作成中にアルファを利用すると、うっすら肌が透けた服とかいろいろなものが描きやすくなったりもするもん

    上手いこと活用して欲しいもん

  • 46二次元好きの匿名さん22/03/12(土) 21:14:24

    続いてアニメーションGIFの作り方の説明も説明するもん

    素材を作り残ったので、サンプルに出したのの出涸らしになるもん 許して欲しいもん

    まず用意した画像を並べたものがこちらもん


    これが全部表示してる時の作業画面もん

    作り方としては片側を作って上のを見て貰えれば解る通り、

    シルエットをそのままコピーして反対側で影色を塗り直しただけだもん

    頭と枠区切り枠の黒だけを背景ってレイヤにまとめて置いてるけど、頭は独立させて一番上に置いた方が自然だもん

    お陰で見やすいように拡大してジャギったのをアニメにした最終形では首と身体の間に白線が出てるもん


    ここでは今まで触らなかったフレームというのを使うもん ターボの画面では左下にあったヤツもん

    矢印の所からフレームメニューを選んで、複製の複製を行うもん

    表示状態も複製されるので、まず共通レイヤー以外を一旦非表示にしておくとやりやすいもん

  • 47二次元好きの匿名さん22/03/12(土) 21:15:14

    それぞれのフレームで表示するレイヤーを可視状態にして準備完了もん

    左上のミニルーペでは、もう表示してるものと様子が変わっていて、

    アニメーション再生が行われているのが解ると思うもん ワクワクもん

    ではファイルメニューからエクスポートを選んで出力もん

    特に何も設定しなくても1フレームずつ全て描き出してくれるもん

    まあ、Gale単体では結局アニメーションGIFは作れないので、

    フレームの機能は使わずに1フレで、1枚1枚レイヤーを切り替えて出力しても変わらないと言えば変わらないもん

    ルーペで動作が見れるから、今回みたいな連続動作ではなく爆発のエフェクトとかを作る時にはこれで確認しながらの方が便利だもん

    上手く使って欲しいもん


    GIF作成にはこのフリーソフトを使うもん

    Giam - k本的に無料ソフト・フリーソフト複数の画像ファイルを元に、GIF / MNG アニメ、AVI 動画 を作成することができるソフト「Giam」。www.gigafree.net

    作った 6枚 を読み込ませた所もん

    右上矢印の再生ボタンでアニメーションが確認できるもん

    早過ぎる遅過ぎるというのがあったら、左下矢印の所の全部一括や場合に応じて個別に、

    右下矢印のウェイト操作で待ち時間を調節するもん

    後は名前を付けて保存するだけで、見事アニメーションGIFの完成だもん >>6

  • 48二次元好きの匿名さん22/03/12(土) 21:41:29

    むむん…… あげてみるもん

    質問あればどうぞですもん

    後はみんなここや >>5 へ作品ぜひどうぞだもん

    質問とか無ければあとここは自然に身を任せるもん

  • 49二次元好きの匿名さん22/03/13(日) 09:32:37

    もうちょい見たいもん

  • 50二次元好きの匿名さん22/03/13(日) 21:32:21

    保守

オススメ

このスレッドは過去ログ倉庫に格納されています