adobe Animate Photoshop web技術 ツール

GifアニメPNGアニメの作り方

ソーシャルゲームのイラストを描く依頼を受けまして、自分絵かきでもないのにそんな事できないよ!とか思いつつ、なんとかこなしました。
その時活用した、絵心のない人間でもそれなりのドット絵がかける方法をいくつか上げていきます。
PNGによるアニメーションの作り方も掲載します。

ドット絵作り方


例としてイラストACより適当なイラスト素材をダウンロードしてきました。


PSで開いて幅を極端に小さくする。ポイントはニアレストネイバー法を選択すること。

ボロホロの画像
解像度ボロボロの画像が出来上がります。

ブラシの選択
ブラシは四角形ブラシを選択します。鉛筆ツールを1pxにすることでブロック状のドットを打てるようになります。。
消しゴムを使う場合もどっとになるよう、ブロックモードにします。

斜め線
ざざっと壊れた線を整えます。

斜め線
ポイントは斜め線の表現。

カット
このようにカットしてあげると、繊細な表現が可能になります。

GIFでのアニメーション

アニメーションさせます。
タイムラインパレットの「フレームアニメーションを作成」を押します。
するとレイヤー1が1こまめになります。

GIF
もう一コマ作りたいので新規コマアイコンをクリックします。更に現在のレイヤーをコピーします。
目を瞑らせたり、手を動かしたりした絵にします。

01GIF
GIF02
特定のコマで表示したいレイヤーを選択します。
画像では1コマ目のときレイヤー3を、2コマ目のときレイヤー2を表示するようにしています。

GIF保存形式
保存形式はこのように。ニアレストネイバー法なら、いくら拡大してもアンチエイリアスはかからず、ドットの絵になります。


これでGifアニメが完成しました。

PNGでのアニメーション

次はPNGアニメを作成します。APNGといいます。比較的新しいブラウザのみ動作します。
APNGならアルファチャンネルやより多くの色を使うことができます。

APNG
先程作ったPSDのレイヤーをPNGにします。
そののちAdobeAnimateCCをおもむろに開きます。

AdobeAnimateCC
好きなようにモーションをつけます。

ムービーの書き出し
ファイル>書き出し>ムービーの書き出しを選択します。

保存形式
PNGシーケンスを選択して保存します。

大量のPNGが保存されました。

アプリでこのPNGを連結させます。
以下のURLからアニメ画像に変換する君をインストール。
https://itunes.apple.com/jp/app/anime-hua-xiangni-bian-huansuru/id1127676902?mt=12

アニメ画像に変換する君
このように設定して、ウィンドウ内に先程の大量PNGをドロップします。

APNG
3ファイル保存するかダイアログが表示されるので、三回とも保存します。単体で使う場合は最初のPNGだけ保存すればいいでしょう。


ほらできたAPNG。対応していないブラウザではアニメーションしません。
というかWordPressで画像圧縮プラグイン使ってるからアニメーションPNGではなくなってしまい、見れなくなっちゃうでやんの〜。

-adobe, Animate, Photoshop, web技術, ツール