2016年11月16日水曜日

ドット絵における三要素

スケッチや、解像度無限大の絵と違って、ドット絵は制約が多いです。
ベタ塗りしかできないし、四角いし。

そんなドット絵の世界にスケッチやjpg屋さんと違うスキルが求められているのは当然なわけで。
でもコツってあると思うんです。

そこでTakamaroがオススメするドット絵のスキル要素を3つほど

①アンチエイリアス
言わずもがな、ぼかしの技術は必須かと。
セルの角が非常に目立つ場面が多いので、これがないと四角い絵しか描けなくなります。
でもかけすぎると、見栄えが崩れていきがちです。

うまいこと中間を取るのが非常にムズカシイし、人によって基準もまちまちです。
逆にこれをしないでうまく特徴出してる作者さんも多数いらっしゅるのですが、
基本的には使えるものだと思ってます。

②エッジの強調
アンチエイリアスの対極を行く技術です。角を立てることで陰影やコントラストを上げて
絵にメリハリをもたせることができます。
でもかけすぎると形がわからなくなったり、気持ち悪いくらいカクカクに。

アンチエイリアスかけながらこれもかけるとって矛盾しているようですが、
ようは使い分けだと思ってます。

③正規化
デフォルメとも。ようはセルの形に「うまく色が収まる」ように変形させる作業です。
こればっかりはコンピュータで処理できないと言っても過言ではない。
きちんと解説をまだしていませんが、イメージとしては
これ(100x100px)を12x12pxに圧縮してくださいと言われたときに、
こう描けるかという問題です。(画像小さくてすみません)
この問についても解説書きたいなと思ってますので、
気長にお待ち下さいませ。

以上、3つ紹介させていただきましたがいかがでしょうか?
私が考えている3要素なので、もしかすると先達の皆さんには「ちげえよ」とか言われそうで(汗)
でも基本は抑えているつもりです。

私も技術を磨いている最中なので、また変わるかもしれませんが、
今はこれでブログ進めていきたいと思ってます。

また少しスキルアップして帰ってきました。

ご無沙汰しております。Takamaroです。

ちょっと技術的に停滞期に入っていましたが、
少し思いついたことがあって、やってみたら結構良い感じになってました。
サンプルを置いておくと、こんな感じ。

少し影の付け方が変わっているのと、
今まで影の処理しかできなかったのが、光沢表現が追加されてます。
というか今までの影の付け方が一番明るいところと一番暗いところをグラデーションする、
だったんですが、それよりももっといい方法があったみたいです。

このあたりのこと、書ければいいなと思ってマス。
もうちょっと今の波に乗ってスキル上げられたらいいなぁと高望みする日々。

ブログの更新までしばらくかかりそうですが、
気長に待っていただけると本当に喜びます。

見てくださってるみなさん、これからもよろしくお願いしますね。

2016年7月1日金曜日

65536色におけるグラデーション

そもそもフルカラーが使える時点で、ありがたいと思わなければおかしいのです。
というのは、シムトランスでの「減色」のお話。

シムトランスでは、pakファイルに用いる画像は、24bitのpng画像と決められています。
これは皆さんご存知だと思いますが、そもそも24bitのpngって何って話から。

実は24という数字、8+8+8ビットの足し算なんです。
赤8bit、緑8bit、青8bit、それぞれが0~255の強さの値を取れることを意味します。
これをフルカラーと呼び、約167万色を表現することができます。

人間の目が認識できる色数は10万色と言われているので、167万色あれば十分というわけです。

では、pakファイルは何色ですか?と言われると、これ実は16bitカラーでの表現になっているのです。
つまりは65536色、人間の識別できる色よりも少ないですね。
実はコンパイルするとき、内部で減色の処理が行われています。

ですから、減色を加味したpngを作らないと、特に大きなグラデーション面では大きな影響が出てしまいます。微妙な色合いや、弱いコントラストの画像はベタ塗りの原因となる場面が多いので気をつけましょう。

ではどう対策するのか。

対策は比較的簡単です。
・グラデーションを作るとき、グラデーションの両端になる色の差をきちんと考えましょう。
 明度差で約10%は確保したいものです。
・絶妙な色合いはフルカラーだと美しく映りますが、できるだけコントラストや彩度をあげ、
 有効な色となるように調節しましょう。彩度は20%以上が目安になります。
・色相を変えられるようなら、彩度をいじるよりも有効な場面があります。
 特にマジョーラを再現するときなど、これも頭の片隅に入れておくと吉です。
・色を替えるのが面倒にならないよう、インデックスカラーのpngを使うのも有効です。
 EDGE2ではこれを簡単に取り扱えますので、導入をおすすめします。

こんなところでしょうか。
また要望があれば詳しく触れたいと思います。

アンチエイリアスの逆の発想~エッジの強調~その1

いきなりですが、こんな状態に陥ったことはありませんか?

なんか境界線潰れちゃってるんですが....

それなりに描いていれば、こんな状況は日常茶飯事でしょう。
というわけで今回はエッジの強調です。
このテクニックはアンチエイリアスの対極にあたる手法で、
強引に境目を目立たせる作業です。

どうするかというと明らかに明度や色相の異なる色を配置します。
黒なら白、赤なら臙脂やピンク等の色を隣に配置します。

上を例にしてやってみましょう。

そもそも上の絵は絵として正しいのか怪しいと考えるのが妥当です。
何故かと言うと、箱の内部が外側と同じ明るさだからです。
厳密な意味では光は1点から当たっているわけではないので
側面から受ける光の量は当然箱の外のほうが中よりも多くなります。

というわけで、箱の内側になる部分を暗くします。

少し立体感出ましたね。外側と内側の壁の境界もなんとなくですが認識できます。
このままでもいいのですが、ちょっと不自然なので、次は内側の上辺と下辺の光の
あたり具合について考えてみます。

上辺とは赤い線の部分、下辺とは青い線の部分です。
青い辺と赤い辺、どちらが多く光が当たる確率が高いでしょうか?
当然上の方が壁に遮られていないぶん、多く当たりますね。

ということはここの上辺は明るく(むしろ手前の壁並みに明るく)、
青い辺はもっと暗くなるはずです。やってみましょう。

明るい色と暗い色が混在するとカクカクとなってしまうのでグラデーションにしました。

なんか自然な箱っぽくなりましたね。
エッジの強調とは、このような形で、となりに置く色を工夫することで、不自然な「同一面」になってしまう部分を回避する方法です。

次は応用行ってみますね。では。

2016年6月21日火曜日

アンチエイリアスを考える~その4~gimp編

しばらく間が空いてしまいましたが、とりあえずシリーズ完結編です。

今度はgimpでアンチエイリアスしてみます。
まずは下の画像を用意しましたので、各自ダウンロードして、読みながら弄ってみてください。

アンチエイリアスは計算で求めても三者三様になるようなあやふやなものです。
(グラボの癖だったり、性能だったり)

人間の目が一番きれいにアンチエイリアスできるので頑張ってみてください。
とむねこさんの実況が一番参考になるかもしれません。機会があったら30分くらいぼーっと眺めることをおすすめします。

さて、本題に入りましょう。

今回のお題は583系中間車です。すでに、屋上は良さそうな状況に見えています。
(手を入れられると考えれば、それはあなたの目が良いという証拠です。いじってみてください。)

まずgimpの場合は、パレット機能が乏しいので色を事前に作って溜める方式はあまり向きません。
またpictbearの時のようにグラデーション機能が応用できるというのも難しいです。

で、どうするかというと、「レイヤー」を使います。
まずはアンチエイリアス前の画像をみてください。

で、ここに色を加えていくのではなく、油画の要領で重ね塗りしていきます。

まずは背景レイヤーの上に、標準レイヤー(背景色は透過)を2つ作成します。
そして、レイヤーの不透明度をそれぞれ33%、67%まで下げます。

レイヤーは33%で描画していきます。
紺色のところの色を拾って、角を取りたい肌色のところを点描で1ドットずつ落としていきます(赤色の部分)。

続いて、肌色のところを拾って、紺色のところを点描で(緑色の部分)....の繰り返しです。

もっと角をとって丸めたいのであればレイヤーの不透明を上げましょう。

肌色→紺色にするにしても3箇所あるので、それぞれレイヤーにわければもっと細かい調節が可能です。
この辺りのレイヤーの使い方はえびさんあたりに特集して欲しいなーっておもってます。

このような感じに2か所修正するだけでも、だいぶ印象が変わります。
アンチエイリアス前
アンチエイリアス後

アンチエイリアスをかけるところはまだまだありますので、レイヤーを重ねたり、隣どうしの色を落としてもっと丸めてもいいと思います。

以上、駆け足でしたがアンチエイリアスについて考える、
1年越しで完結です。

まるっと1年放置して

前回投稿から1年が経過しました。
間違ってこのページに辿り着いた人も含めて
7000超の方にご覧頂き誠に感謝です。

最初はどれくらい見てくれるのか不安でしたが。

そろそろいろいろ書きたいなーと思っているので、
不定期に更新していきたいと思います。

またときどき覗いていただければ幸いです。

2015年6月17日水曜日

Pictbearでのパレットの作り方

EDGE2を使い始めて久しいので、結構忘れがちになっていた「色の管理」の方法ですが、
私がPictbear+WindowsPaint時代はこんなことやってましたよっていう紹介です。

正直なところEDGE2に変えてから、作る速度も品質も大きく向上したので、
個人的にはEDGE2推し、というのは変わりません。

フリーのツールにも良さはあるので使ってみてからでも遅くないです。

では本題。

私の古い作業ファイルは横が9タイル分だったりします。
それは何を隠そう「色を保存」していたからです。
というのは、こんな感じに

パレット風味なのをpakで影響のない範囲に置いておいてたんです。

で、これはこれで別途ファイルを用意して
というファイルを作ってから”乗算レイヤー”を使って色を増やしてました。
あ、このテンプレ、転載・改造自由ですよ。

で、これをどうするかというとですね
pictbearで開いて、レイヤーを上に追加してレイヤーの設定開いて

モードを乗算に倒し、

とりあえず目的の方向の色を乗せて、透明度を弄って欲しい色を作ってました。
で、できた色を作成中のpngファイルに埋め込み、
使うときに使う色だけ、描くもののそばにコピペして、使ってました。

作業イメージでこんな感じ
で、作った色は後で使えるように端っこに保存して、の繰り返しです。

EDGE2だと、このマニュアルでやってたパレットの管理が不要なうえ、
彩度落とすのもスライダーバーで自在....という事情がありますので、
経験者ほど、EDGE2使ってみてほしいです。

お試しでも色の調節機能をお試しすることは可能なので
クリック、クリックですよ♪
http://takabosoft.com/edge2

とりあえず、今日はここまで。