記事一覧

★★★★このブログの主な目次★★★★





無料でインストールなしでも作れる!LINEスタンプAPNGアニメーションの作り方とリジェクトにならない方法

gamen.png

ついに販売が開始されたアニメーションLINEスタンプ!
でも、PNGアニメってどうやって作るの??
特別なアニメーションソフトがいるのかな??と思っている方が多いかもしれません。

でも、安心してください!
Mac環境でも、GIFアニメが作れる環境があれば簡単に自作できます!


これから作り方の手順をご紹介いたします☆


psd.jpg

PhotoshopではPNGアニメの制作は不可!
でもGIFアニメなら作れます!



まずはGIFアニメを作ってください。


作り方としてはまず、Photoshopを開き、
以下の手順でタイムラインのウィンドウを開きます。
タイムライン タイムライン2

「フレームアニメーションを作成」をクリックすると、
フレームレイヤーが出てきて、パラパラ漫画のようにアニメーションを作ることができます。

ゴキタイムライン

私の場合はこんな感じで作りました。
1コマの秒数も、フレームの数も決められるので、
制作マニュアルのガイドラインに記載されている


「最大再生時間は4秒です。単位は1、2、3、4秒のいずれかとなり、端数(1.5秒)単位は設定できません。」

「1つのAPNGあたりのPNGフレーム数:イラストは最低5~最大20フレームです。」

「1APNGの最大再生時間は4秒です。」


はクリアできます!



■Photoshopのソフトなんて持っていない!無料でGIFアニメを作るにはどうしたらいいの?■


GIFアニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト
下記のサイトで、無料でさらにインストールも不要でGIFアニメが作れます
http://www.bannerkoubou.com/anime/


続いて、一番大事な

APNG作成ツールは各自でご用意ください。

についてですが、

下記サイトでAPNGに変換できます。
http://animizer.net/

apng.jpg

作成したGIFアニメファイルを選択します。

すると以下の画面が表示されます。

apng2_201606091317014e9.jpg

ピンクで囲っている部分を選択、サイズ調整をします。



ガイドラインにあるもう一つの問題。
3.再生時間に合わせてループの数を指定します。
- 再生秒数×ループ数の合計は4秒以内に収めてください。
- 4秒を超過する場合にはループの数を減らしてください。


これも以下の内容で解決します!

apng3.jpg

(Advanced settings «)でloop回数を設定、
(Modify frame settings)で1フレームあたりの秒数の設定ができます!

(Generate animation)で右にプレビューが表示されます。

特に問題がなければ(Download)をクリックすると保存が完了です!


gamen.png
これで、LINEスタンプ仕様のAPNGアニメーションの完成です!



ちなみに、この方法で作るとガイドラインに記載されている
画像は1個 300KB以下で制作してください。26個すべての画像を1つのZIPファイル形式でアップロードする場合、ZIPファイルは20MB以下で作成してください。
を、オーバーしてしまう危険性があります。

実際制作した結果、この方法の場合は、少ない色数で5フレームで収めておけば、
ほぼ300KB以内をクリアー出来ます。

色数を落とすにはカラーのところを64〜128色くらいにする感じです。
私の場合は、茶色、黒、ベージュくらいしか使っていない画像がほとんどでしたので、
16色まで落としてもさほどおかしくなかったです。


また、どうしても色数を落としたくない!多いフレームで作りたいという場合は、
今回私がご紹介した方法では難しいです。

PNGシーケンスを圧縮してAPNGにするのが一番かと思います。
オーサリングツールを使えばなんとでもなると思います


ちなみに、私は申請して、リジェクトを食らってしまいました
名称未設定 1
圧縮した際に※背景の透過漏れで白い点状の取り残しができてしまいました
圧縮されす際は一度背景を黒くしてゴミが出てこないかチェックされる事をオススメします。


また、ガイドラインにも新たに注意点が書き加えられていますが、
静止画として表示される1フレーム目の調整も大切です。

静止画として表示される1フレーム目に、そのスタンプで伝えたい感情がわかるイラストが配置されていないため、リジェクトとなるケースが多く見られます。

私も、これでリジェクトを食らってしまいました(ノ_<)
もし1フレーム目では分かりづらい内容のアニメーションになる場合は、
最初の1フレーム目でほんの一瞬だけ0.1、2秒だけの短さでいいのでそのスタンプで伝えたい感情が何か、
分かる内容を入れた方がいいと思います。


名称未設定 1
無事、私のスタンプは承認がおり、販売開始となりました!
「ゴキブリのゴキチルちゃんず」をどうぞ宜しくお願い致します☆
https://store.line.me/stickershop/product/1292662






■こんなサイトもオススメです!

PhotoshopでGIFアニメ軽くする

ウェブ用アニメーションを劣化なく保存できる画像形式APNGの作り方
LINEのアニメーションスタンプはこう作る! APNGファイルの作り方を徹底解説
「PNGのシーケンスファイルを減量してからAPNGへ変換する」ということが書かれています。










なおちるのイラストの閲覧や最新イベント情報を見るならコチラ!

イラストレーターなおちるのホームページ→
Facebookぺーじもあります→イラストレーターなおちる つぶやいています♪Twitter twitter
スポンサーサイト

コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: No title

> はじめまして、お忙しいところ失礼します。
> こちらの記事大変参考になりました。
> 先ほど記載の http://animizer.net/ サイトで
> GIFファイルを選択して進もうとしますと
> 英語のエラーみたいなものがページ上部に羅列され
> 動きません...私と、同僚のPCでも同じでした。
>
> なおちる様の環境で正しく表示されるのであれば
> こちらの環境に問題あるので対策を考えるのですが...
> このサイトさんのエラーなんでしょうか?
> もし可能であればご確認お願い致します。

コメントありがとうございます。
他のGIFデータも同様のエラーが出ますでしょうか?
私も何度かエラーが出たことがありました。
時間を置いたり、違うデータで試したら改善したことがありました。

コメントの投稿

非公開コメント

プロフィール

ママイラストレーターなおちる

Author:ママイラストレーターなおちる
なおちるのポートフォリオサイト

1985年11月8日生まれ 大阪府東大阪市在住
高槻を愛して止まない高槻市出身

手書きタッチのあたたかいイラストやコラージュのイラスト、漫画を制作するフリーランスイラストレーターです。

人妻&一児の母。
「愛情に満ち溢れた毎日を作る」ために活動中。

【緩募】 イラストレーターになりたい人、結婚、妊娠、出産、育児の相談を、
リクエストで受け付けます。
お悩みをイラストエッセイ付きでお答え&ブログ・SNSで公開していこうと思います!
お気軽にメール又はブログや各SNSにコメントください☆

イラストに関するすべてのお問い合わせは
naochil1108★yahoo.co.jp(★を@に変えてください。)
までお願いいたします。

イラストレーターの交流会を開催中!
詳細はこちら



詳しいプロフィールはこちら

Twitter

 

バナー