SNSランキング   リアルタイム更新情報   新しいSNSを作成(無料)

はじめてのウディタSNS


How to Material
PNGの知識。GIFアニメについて。ゲーム素材について
■■■■■ドット絵製作において
知識PNGのおさらい
知識・技術GIFアニメについて
GIFの色について
ソフトについて
実製作について(準備中)
■■■■■2DCG製作において
知識塗りについて
※2.ここに説明を入力できます。
PNGのおさらい
===============================================================
PNG8/PNG24/(PNG32)について
===============================================================
PNGにはこの3種類があります。
ゲーム素材でもっともポピュラーなのがPNG8です。
GIFと同様の仕様になります。ゆえにGIFと色互換性(後述)があります。
PNG24はweb素材に多く見られます。その代わりファイル容量が増加します。
640x480にも使われているのではないでしょうか(未確認)

PNG8の仕様
使える色数:256色
透明指定数:1色
圧縮形式 :可逆圧縮(後述)
PNG24の仕様
使える色数:1677万色=フルカラー(後述)
透明指定数:アルファチャンネル(後述)
圧縮形式 :可逆圧縮
PNG32の仕様
省略
===============================================================
PNG24のほうが優れているのか?
===============================================================
たくさん色が使えたら優れているように思える。が、そうとも限らない。
PNG24の欠点
・GIFとの色互換性がない(後述)
・色数が多いためPNG8に比べ容量が増加。
特に容量の増加はゲーム素材にとって致命的といえる。
DLに時間がかかったり、処理速度に影響したりする。

===============================================================
用語解説
===============================================================
可逆圧縮
非(不)可逆圧縮(代表的なJPG)と可逆圧縮があります。
拡大倍率を150%にしたとしましょう。
JPGもPNGも同様に150%に拡大されました。次に100%に戻しましょう。
JPGは画質が落ちます(劣化する)。PNGは150%にする前の状態に戻ります。
手を加えた後元に戻れるか。戻れないかはこれらの圧縮形式で決まります。
PNGは後者の可逆圧縮をとるため性質上容量が重くなるのです。
色互換性
PNG24で製作されたものをGIFにすると、正しく色が表示されない。
それは互換性による問題。
PNG24で表現できる圧倒的な色数をGIF仕様の256色で表現できないからである。
PNG8はGIFと仕様が同じなため互換性があると言える。
フルカラー
8bit(256色)×8bit(256色))×8bit(256色)=1677万色 のことである。
アルファチャンネル
素材を作る際PNG24の力を借りると思う。
アルファチャンネルは複数の色を透明化指定できるというもの。
詳しくは下記を参考「アルファPNGの作り方」

GIFアニメについて
===============================================================
仕組みは簡単。故に、奥深いGIFアニメの世界
===============================================================
GIFアニメの世界を知る。
製作者:しょさ
わたしの百花(コマ画像、pixiv)
わたしの百花(製作者ブログ)
GIFでここまでできるのかと思わされる。キャラクターのしぐさ。
ブログには背景舞台の同アニメがみれます。
ドットでここまで出来るんだ。と思い知らされます。
GIFは256色と透明色です。フルカラーの1677万色には遠く及びません。
アニメの仕組みもパラパラマンガと同様で非常にシンプル。
しかし、このアニメを見ると底知れない奥深さを感じ取ってもらえたと思います。
===============================================================
GIFの色について
===============================================================
GIFの仕様は256色と透明色です。ですが使える色は違います。

使える色数は215色
一色は透明カラーとして使うため255色になります。
次にmacでもwinでも見れる共通の色でなければなりません。
そのため、実質使える色数は216(215)色となります。
これを考慮しない場合は256(225)色使うことができます。
配色について
RGB色相とHSL色相が良く見られると思います。
理由は多々あるのですが、これらはとても色が選びにくい。
かっこいい配色をしようにもスライダーと数値しかありません。
色をイメージで直感的に選ぶには配色イメージチャートが最も実用的です。
これはデザインの分野だととてもありがたい代物です。
大体のイメージをここから拾って色に置き換え、最後は自分の感覚で微調整します。
これで色選び(配色)に困ることは減ると思われます。
色味について
配色が決まっても影は自分で色を選ばなくてはならないことが多いです。
影は補色を少々混ぜます。どうやって補色を選ぶのかは後述します。
補色とは色相上において選択した色の向かいにある色です。
赤なら緑、青なら橙、黄なら紫といった具合です。
真っ向から補色をぶつける方法もありますが実際は少しずらしたり、
反映色などが作用して完全な補色を選ぶことは少ないです。
最後はこれだ! という色がふさわしい色味といえます。
数字や理論はそこへ到達する手段にすぎません。過信は禁物です。
===============================================================
ソフトについて
===============================================================
GIFアニメに求められる機能とは
・215色を的確に選べること。
・色のグラデーションを作りやすいこと
・ドット絵が描きやすいこと
・GIFアニメに対応してること
これらをすべて網羅しているソフトはありません。
ドットを描くツールGraphicsGaleかEDGEになるでしょう。
問題は215色を的確に選ぶ方法です。私はPhotoshopをお勧めします。
(後ほど画像を用意します)
私の分かる範囲でフォトショのバージョンCS以降で
タブ[ウィンドウ]>カラーを選択。
右上の×の下にカラーパネルの設定が開けるアイコンがあります。クリック。
Webカラースライダー、RGBスペクトル、Webカラーセーフランプを作成を選びます。
これで215色を選べるようになりました。
より直感的な色を選べるようになるようにプラグインを導入するのも良いと思います。
ほかにもいくつか紹介されています。
ブラシは鉛筆にします。ブラシはアンチエイリアスで描写してしまうからです。
すでに色を決めて置き換えたい場合は選択範囲>色域指定を使います。
スウォッチ(色パレット)もweb色相にすることで216色表示できます。

それぞれの設定の説明です。
webカラースライダー
webで使える色味しかスライダーで選べなくする設定です。
web素材を製作する際に使われます。これで色数を216色に制限します。
配色イメージチャートを使う場合は設定をRGBスライダーで数値入力してください。
RGBスペクトル
色を構成する3つの柱を赤、緑、青とします。
光によって投影されるモニタ、プロジェクターはRGBカラーを設定します。
紙に出力するときはCMYK(シアン、マゼンタ、イエロー、ブラック)です。
webカラーセーフランプ作成
万が一、webで使えない色を選択した場合(カラーサークルで選んだ色)
それがwebで使えるか使えないかを判断し警告。修正できます。
カラーウィンドウにアイコンが出るのですぐに分かると思います。
スウォッチ
フォトショップにおける色パレットのことですが、99%使いません。
今回は256(216)色と少ないので、色見本としてスウォッチを設定しました。


2DCG製作において
===============================================================
2DCG製作において
===============================================================
上から順に読み進めてくださっているものとして書きます。
ドット絵から2DCGになると表現の幅やソフトの複雑性が増します。
用語についてはwiki末にあとでまとめようとおもいます。
(窓を2つだしてCtrl+Fで検索しながら使ってもらえるような感じです)

2DCGは主に、立ち絵・敵グラフィック、顔グラなどに使われます。
ソフトの扱いはもとより下に行くほど(習得が)難しくなっていきます。

===============================================================
拡張子PSDとSAIについて
===============================================================
Photoshop(以後、Ps)はPSD。SAIはSAIという拡張子で保存されます。
そんなこと知ってるよ。と思うかもしれませんが、大切なことなので触れておきます。
PSDはphotoshop dataの略称です。
PSDは幅広いソフトウェアで使われます。
SAIはSAI専用の拡張子で、PSDとの互換性はありません。
この互換性ないとは、
ペン入れレイヤーはPSDでは使えないということです。
私はこれを知らず、苦い経験をしたことがあります。

PSDは様々な拡張子への保存が利くのも特徴です。
ファイルの劣化も最小で済みます。
ですから最終的にSAIであってもPSDに変換。
そして、GIFやPNGに変換してゲーム素材としていくのが常道です。
(この変換については後述します)

===============================================================
PsとSAIの仕様について
===============================================================
PsとSAIは2Dイラストを描こうとおもった人間が必ず進められるソフトの二強です。
SAIは綺麗な線が引けると評判のソフト。主に線画に使います。
Psは色補正にも強く、ペンツールが使えます。万能ソフトウェアです。

私の場合。SAIで線引いたり、ペンツールだったり、ブラシだったり。
結果的にどこでどれを使ったらベストか。というのは経験です。
ペンタブに対する抵抗感などから使いやすいツールも変わってきます。
色はSAIで当たりをつけて、Psで補正します。

ソフトにおいて、これじゃないといけない。というのはありません。
ですが、ソフト統一が複数人による素材製作において重要です。
例えば、Aさんが線画。Bさんは塗り、Cさんは背景だとしましょう。
AさんはSAIを使い。BさんはPs。Cさんがペインターだったとします。
それぞれにPSD形式の保存はありますが、特殊なレイヤーや効果を使った場合。
互換性の問題から正しく効果を発揮しない場合があります。
そして、最悪最初からやり直すなどということにもなりかねません。

===============================================================
フリーソフトについて
===============================================================
フリーソフトがいくつかありますが、私は使いにくくてどうしようもなかったです。
ソフトは最終的には慣れですが、せめてSAIとGIMP2による色補正といった所です。
Psは高価ですから、この手の分野を極めるぞ! というぐらいの人向けです。
そうでなかったらPS3を買ったほうがいいかもしれません。…楽しいですし(笑)
塗りについて
=====================
塗りについて
=====================
(妙なところにフォトが表示されるのは仕様です)
何を書こうか直前まで悩んだんですが・・・
アニメ塗り、ギャルゲ(ゲーム)塗り、
その他(厚塗り、薄塗り)を紹介します。
これもソフトと同じで良し悪しがあります。
達成すべき目標に応じて使い分けれることが望ましい。
そういう私は使い分けれません。
説得力なくてすみません。

アニメ塗りの特徴は陰影がはっきりしています。
塗る作業そのものはそれほど難しくない反面、
どこに影を置くかは勉強しないとすぐにはおけません。
参考画像は一影、ハイライト、ライトぼかし、頬に赤み。
光源が多少分かりにくいですが
立体感を重視してハイライトを起きました。
二影まで使えると光源は明確になると考えられます。
ギャルゲ塗りとの比較ため二影は使いませんでした。
ギャルゲ(ゲーム)塗りの基本はアニメ塗り+ぼかしです。
その他にも反射光や明部を描いたりします。
塗りにも幅が出てくるのでアニメ塗りよりもあれば、
厚塗りや薄塗りより、エフェクトを生かしたものなど
派生は多岐にわたるような気がします。

一影+ぼかし、明部を1層作り、段階を作ってます。
ハイライトは微調整して流用。二影を部分的に利用。
厚塗りとの比較であんまり手を加えませんでしたが、
これだけだと何とも寂しい塗っただけ感が半端ないです。
その他(厚塗り、薄塗り)は定義があいまいですが、
この塗り確実に言えることは情報量が多いことです。
これはスーパーマンガデッサンには次のようにあります
入れ物が大きいと、入れるもの多くなる。
リアル寄りか、デフォルメよりかで違いますね。
頭身で言うと6頭身とか、頭身が高いほうが
情報量が多くなりますし。

アニメ塗りは物体を捉え方をデフォルメしたもの。
ゲーム塗りはアニメに比べ手数が増え、
陰影がアニメに比べ克明です。
厚塗りや薄塗りはこれらより影がリアルになります。
という風に塗りに含まれる情報量が増えます。
(諸都合により、薄塗り・厚塗りの更新は未定です)

厚塗り
アニメ塗りからギャルゲ塗りをそのままもってくると
塗り方にピントをしぼっているのでどうしても色が硬い・・・orz
(ほんとはもっと色味を加えて超たのしい感じなんですが)
それはさておき、厚塗りです。
色味を加え、面をおっかけて厚塗りっぽいものを描きました。
実際厚塗りだと実線が消えます。
今回はややメリハリを抑えた印象にしてあります。
流行絵だともっとメリハリがある印象かと思います。
情報量が増えたことがわかってもらえれば問題ないかと思います。
[ 1 ] アニメ塗り参考
[ 2 ] ギャルゲ塗り
[ 3 ] 厚塗り