ソーシャルゲームのイラストを描く依頼を受けまして、自分絵かきでもないのにそんな事できないよ！とか思いつつ、なんとかこなしました。
その時活用した、絵心のない人間でもそれなりのドット絵がかける方法をいくつか上げていきます。
PNGによるアニメーションの作り方も掲載します。
ドット絵作り方
例としてイラストACより適当なイラスト素材をダウンロードしてきました。
PSで開いて幅を極端に小さくする。ポイントはニアレストネイバー法を選択すること。
解像度ボロボロの画像が出来上がります。
ブラシは四角形ブラシを選択します。鉛筆ツールを1pxにすることでブロック状のドットを打てるようになります。。
消しゴムを使う場合もどっとになるよう、ブロックモードにします。
ざざっと壊れた線を整えます。
ポイントは斜め線の表現。
このようにカットしてあげると、繊細な表現が可能になります。
GIFでのアニメーション
タイムラインパレットの「フレームアニメーションを作成」を押します。
するとレイヤー1が1こまめになります。
もう一コマ作りたいので新規コマアイコンをクリックします。更に現在のレイヤーをコピーします。
目を瞑らせたり、手を動かしたりした絵にします。
特定のコマで表示したいレイヤーを選択します。
画像では1コマ目のときレイヤー3を、2コマ目のときレイヤー2を表示するようにしています。
保存形式はこのように。ニアレストネイバー法なら、いくら拡大してもアンチエイリアスはかからず、ドットの絵になります。
これでGifアニメが完成しました。
PNGでのアニメーション
次はPNGアニメを作成します。APNGといいます。比較的新しいブラウザのみ動作します。
APNGならアルファチャンネルやより多くの色を使うことができます。
先程作ったPSDのレイヤーをPNGにします。
そののちAdobeAnimateCCをおもむろに開きます。
好きなようにモーションをつけます。
ファイル>書き出し>ムービーの書き出しを選択します。
PNGシーケンスを選択して保存します。
アプリでこのPNGを連結させます。
以下のURLからアニメ画像に変換する君をインストール。
https://itunes.apple.com/jp/app/anime-hua-xiangni-bian-huansuru/id1127676902?mt=12
このように設定して、ウィンドウ内に先程の大量PNGをドロップします。
3ファイル保存するかダイアログが表示されるので、三回とも保存します。単体で使う場合は最初のPNGだけ保存すればいいでしょう。
ほらできたAPNG。対応していないブラウザではアニメーションしません。
というかWordPressで画像圧縮プラグイン使ってるからアニメーションPNGではなくなってしまい、見れなくなっちゃうでやんの〜。