- 1二次元好きの匿名さん22/03/07(月) 21:40:42
- 2二次元好きの匿名さん22/03/07(月) 21:40:55
ターボがドット絵の中で一番カンタンなジャンルだと思ってる、
顔グラの描き方を説明した前スレだもん!
前スレに貼れなかった作品は、このスレにドンドン貼って欲しいもん!
ターボとドット絵を描くもん!|あにまん掲示板ターボがドット絵の描き方教えるもん! そんなに上手くないけど、がんばるもん!絵心無いって思ってる人でもできるもん ドット絵はセンスより根気もん!根気があんまり無くても平気もん 根気が続くとこまでのちっ…bbs.animanch.com - 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
- 7二次元好きの匿名さん22/03/07(月) 21:53:13
あと結局前スレでは宣伝できなかったけど、
このスレはここの企画を応援するのにドット描きチャンレンジしてくれる人が増えたらいいなと思って始めたもん
ウマ娘RPGでのウマ娘たちの性能を妄想して教えてほしい part3|あにまん掲示板https://bbs.animanch.com/board/331499/?res=197スレ主がRPGをツクールで本当に作るスレです。ネタを拾って作っていきます画像はオグリのドット絵(多分作りかけ…bbs.animanch.com - 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
- 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
- 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.orgAdobe のイラストレーターというソフトに似ているらしいもん
ターボはフォトショップは触ったことあるけどイラストレーターは触ってないから、
どこまで似てるかはホントは知らないもん
起動したら最初は設定画面が出ると思うけど、特に触ることは無いので新規ドキュメントを押すもん
ジャマなら毎回表示するオプションを外してもいいけど、
いざ触りたくなった時にオプション設定から項目探しに行くの面倒臭いので、こういうのターボは出しっ放しにしといてるもん
- 24二次元好きの匿名さん22/03/11(金) 19:53:45
- 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
- 28二次元好きの匿名さん22/03/11(金) 19:55:13
- 29二次元好きの匿名さん22/03/11(金) 19:55:33
- 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
- 34二次元好きの匿名さん22/03/11(金) 19:57:47
- 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
- 49二次元好きの匿名さん22/03/13(日) 09:32:37
もうちょい見たいもん
- 50二次元好きの匿名さん22/03/13(日) 21:32:21
保守