ＰｈｏｔｏｓｈｏｐでのＧＩＦアニメーションの作成

Photoshop GIF

まずはアニメーションにする画像を用意する。
Ｉｌｌｓｕｔｒａｔｏｒ、Ｐｈｏｔｏｓｈｏｐ、もしくは
Ｗｉｎｄｏｗｓの標準搭載されている「ペイント」でもよい。
（スタート→すべてのプログラム→アクセサリ→ペイント）
☆今回は２コマのアニメーションを作成する
　（あくまでも作成手順の一例）


手順１
図１

◇Ｉｌｌｓｕｔｒａｔｏｒ・Ｐｈｏｔｏｓｈｏｐ
　１コマ目と２コマ目の絵をレイヤーを分けて描く。
　（図１では①の絵と②の絵でレイヤーをわける。②は①の片目を変えただけ）


◇ペイント
　まず１コマ目の絵を描いて保存（保存形式はそのままＢＭＰ形式でよい）
　そして２コマ目を描いて保存する。


手順２（Ｉｌｌｓｕｔｒａｔｏｒ）
◇Ｉｌｌｓｕｔｒａｔｏｒ
　Ｐｈｏｔｏｓｈｏｐに書き出す
　（ファイル→書き出し→ファイルの種類：Ｐｈｏｔｏｓｈｏｐ（*.psd））

　※このとき、カラー：ＲＧＢ、解像度：スクリーン、レイヤー保持にすること
　これでＯＫボタンを押す。


手順３（Ｉｌｌｓｕｔｒａｔｏｒ・ペイント）
◇Ｉｌｌｓｕｔｒａｔｏｒ
Ｐｈｏｔｏｓｈｏｐを起動して手順２で保存した画像を開く
レイヤーパレットを見ると図２のようにグループになっている
（レイヤーパレットの表示：ウィンドウ→レイヤー）
図２

まず、どちらかのレイヤーを選択して（図２では「レイヤー１の〜」と書いてあるところで
クリックする）
それから図２の赤丸がついているところを左クリック、「グループを結合」を選択する。
もうひとつのレイヤーも同じことをする。


◇ペイント
Ｐｈｏｔｏｓｈｏｐを起動し、
ファイル→スクリプト→ファイルをレイヤーとして読み込み
参照を押して手順１で保存したファイルを１つ選んで開くボタンを押す。
もう一度、参照を押してもう１つのファイルも選んで開くボタンを押す。

そしてＯＫにするとレイヤーとして読み込まれる。


手順４
アニメーションウィンドウを開く
（ウィンドウ→アニメーション）
図３

図３の赤丸のついているところを押し、「レイヤーからフレームを作成」を押す
これでレイヤーからフレームが作成される。


手順５
図４

図４の赤丸のついているところをクリックすると選択されている画像の
表示時間を選択できるので表示時間を選択する。
（「その他」で自分で指定できます。再生速度の最速表示時間は見るブラウザ
によって異なります。ブラウザの最速表示時間より速い再生速度にすると設定
した速度よりも遅く再生されます。ブラウザでみたら動きが違うなどとなった
ときはこれが原因の場合もあります。）
※赤丸の下、「無限」の横の下向き黒三角を押すとアニメーションを再生する回数が
選べます。（そのほか、タイムラインにするなどありますがここでは省きます）
再生ボタンを押してみましょう！
（図４の２フレーム目の右斜め下の横向き三角が再生ボタン）


◇Ｗｅｂ用に保存する
作成したアニメーションを保存します。
ファイル→Ｗｅｂおよびデバイス用に保存
Ｗｅｂ用に最適化して保存します。
カラーなど表現したいものを損なわないようにしつつ、なるべく
ファイルを軽くしましょう。
カラーは必要最低限の色数にしましょう。
（色数が多いとデータが重くなります。）



◇ホームページにのせる
ホームページのｂｏｄｙ部分にイメージ画像を入れる


＜ｂｏｄｙ＞
＜ｐ＞＜ｉｍｇ　ｓｒｃ＝”○○○.ｇｉｆ” ／＞＜／ｐ＞
＜／ｂｏｄｙ＞


※srcの中身””の中は保存した場所によって変わります。
上記はＸＨＴＭＬです。ＨＴＭＬならば


＜ｂｏｄｙ＞
＜ｐ＞＜ｉｍｇ　ｓｒｃ＝”○○○.ｇｉｆ”＞＜／ｐ＞
＜／ｂｏｄｙ＞
となります。
※＜ｐ＞がなくても表示されますが、インライン要素（ｉｍｇなど）は
　＜ｐ＞で囲むようにしましょう。
※ここではコメントタグがうまく入らなかったのでＨＴＭＬを
　全角で書いています。


※上記はＰｈｏｔｏｓｈｏｐＣＳ３でのやり方です。
Ｐｈｏｔｏｓｈｏｐ　ｖｅｒ.５．５以上に同梱されているＩｍａｇｅＲｅａｄｙでの
作成の場合、手順３からがＩｍａｇｅＲｅａｄｙでの作業になります。
（マークなど違いはありますが手順はだいたい同じです）
※ＩｍａｇｅＲｅａｄｙはＰｈｏｔｏｓｈｏｐではツールボックスの中、一番右下に
　あるマークをクリックすると立ち上がります。


◇はてなブログタイトル
　はてなのブログタイトルを作成したＧＩＦアニメにすることができます。
　管理→設定→タイトル画像
　で参照を押し、作成したＧＩＦアニメのファイルを設定します。
　しかし、タイトルを画像にしてしまうと検索されにくくなりますので
　要注意です。（このブログのようにもともと検索されないような
　言葉を使っている場合にはあまり関係ありませんけど）
　もちろん、フルでブログ名を入れれば検索されるとは思います。
　（よっぽど他にもありそうなタイトルでなければ）


◇Ｐｈｏｔｏｓｈｏｐがなくても
　ＯＳに搭載されているペイントソフトとＧＩＦアニメのフリーソフトでも
　作成することができます。（ネットで、「ＧＩＦアニメ フリーソフト」
　などと入力するといくつかでてきます。）