ターボとドット絵を描くもん！ 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]

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

こっちは１レスしたら３日スレが持つもん！

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

ドット絵部総合スレッド｜あにまん掲示板

[6 二次元好きの匿名さん 22/03/07(月) 21:44:10]

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

GIF(Animated) / 63KB / 1200ms

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

あと結局前スレでは宣伝できなかったけど、

このスレはここの企画を応援するのにドット描きチャンレンジしてくれる人が増えたらいいなと思って始めたもん

ウマ娘RPGでのウマ娘たちの性能を妄想して教えてほしい　part3｜あにまん掲示板

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

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

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

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

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

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

[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]

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

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

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

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

第２部はじめますもん！

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

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

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

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

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

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

ダウンロードここもん↓

Draw Freely | Inkscape

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これがノードの種類もん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[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の使い方(最小限)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

３段階目の影もん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タイルパターンは二倍で見るのが綺麗だと思う ｜ とらねこさんの家

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

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

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

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

下描きもん！

後髪レイヤー

前髪レイヤー

装飾品レイヤー

衣装レイヤー

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

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

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

塗り終わり全体図

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

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

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

閲覧可能な画像ファイルの描き出しには、ファイルメニューのエクスポートを使って
.png で出すのがオススメもん
矢印のオプションでアルファチャンネルにチェックを入れておいて欲しいもん
普通の名前を付けての方でも .png で保存することができるけど、
１回やって .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色のままではある問題が起こるもん

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

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

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

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

これを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) を、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上手く使って欲しいもん

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

Giam - ｋ本的に無料ソフト・フリーソフト

作った 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]

保守