こんにちは。
今週頑張れば4連休が待っています！
時間を無駄にしないように何をするか今のうちに考えておこうと思います笑
さて、では本題に入りますね＾＾
スプライトシートの作り方とGIFアニメーションについて
今日はスプライトシートの作り方について書こうと思います。
それにちなんでGIFアニメーションの特徴についても！
さて、皆さんWebサイトでアニメーション画像を見かけたことはないでしょうか？
文字や画像が動くやつです！
今まであれはどうやって作っているんだろうと思っていたら色んな方法があるようです。
まずはGIFの特徴について見ていきましょう！
GIFの特徴
「GIF」と書いて、ジフと読みます。ついギフと読んでしまいそうです。
小ネタですが、昔に著作権の問題で有料になってその代わりに専門家たちによって作られたのがPNGらしいですね。
今では無料で使えるので安心です＾＾
メリット
- データ容量がとても軽い
- 背景を透過できる
- イラストやロゴに向いている
- アニメーションに対応している
デメリット
- 256色しか表現できない
- GIFアニメーション画像を使用する場合、画像のフチがきたない（なので背景が単色の場所でしか使わない方が良い）
実際に既存サイトのGIFアニメーション画像を見たのですが、その画像の下にある背景色がフチに付いてしまっている感じでした。
逆を言えば画像位置が背景色2色の境目とかではなく、単色なら問題ないということですね^ ^
これらを踏まえて、アニメーションの他の方法を見てみましょう。
スプライトシートについて
これをみて下さっている方、「スプライトシート」ってご存知でしょうか？
実は私は知りませんでした(^^;
最近初めて実務で触れることがありまして、存在を知ったしだいです。
スプライトシートとは
スプライトシートとはアニメーションのひとコマひとコマをひとつにまとめた画像ファイルです。
パラパラ漫画みたいなものですね！
1枚にすることで読み込みも1回で済むのでデータ量は軽いです。
↑イメージとしてはこんな感じ（全部同じ画像ですが(^^;）
では作り方をみていきましょう！
CSS Sprite Generatorを使ってスプライトシートを作ろう
「CSS Sprite Generator」というサイトを使います。
サイトへとぶとこのような画面になります。
初期設定ですが、「Horizontal」にチェック。
paddingは0に。（好みで変えてもいいのかもしれません）
そして保存します。
次に画像を読み込みます。
「Open」をクリック。
そこで、アニメーションにしたい画像を全選択し、開きます。（ショートカットはcommand+A）
サイトに戻り、しばらく画像が読み込まれるのを待ちます。
ダウンロード画面で「Spritesheet」をクリック。
これで、スプライトシートがダウンロードフォルダに保存されると思います！
以上になります。
まとめ
いかがだったでしょうか？
今日はよく見かけるアニメーションについて書いてみました。
敷居が高かったアニメーションですが少し知識が増えてとっつきやすくなりました！
では今日はここまで〜〜
コメント