PhotoshopでのGIFアニメーションの作成
まずはアニメーションにする画像を用意する。
Illsutrator、Photoshop、もしくは
Windowsの標準搭載されている「ペイント」でもよい。
(スタート→すべてのプログラム→アクセサリ→ペイント)
☆今回は2コマのアニメーションを作成する
(あくまでも作成手順の一例)
手順1
図1
◇Illsutrator・Photoshop
1コマ目と2コマ目の絵をレイヤーを分けて描く。
(図1では①の絵と②の絵でレイヤーをわける。②は①の片目を変えただけ)
◇ペイント
まず1コマ目の絵を描いて保存(保存形式はそのままBMP形式でよい)
そして2コマ目を描いて保存する。
手順2(Illsutrator)
◇Illsutrator
Photoshopに書き出す
(ファイル→書き出し→ファイルの種類:Photoshop(*.psd))
※このとき、カラー:RGB、解像度:スクリーン、レイヤー保持にすること
これでOKボタンを押す。
手順3(Illsutrator・ペイント)
◇Illsutrator
Photoshopを起動して手順2で保存した画像を開く
レイヤーパレットを見ると図2のようにグループになっている
(レイヤーパレットの表示:ウィンドウ→レイヤー)
図2
まず、どちらかのレイヤーを選択して(図2では「レイヤー1の〜」と書いてあるところで
クリックする)
それから図2の赤丸がついているところを左クリック、「グループを結合」を選択する。
もうひとつのレイヤーも同じことをする。
◇ペイント
Photoshopを起動し、
ファイル→スクリプト→ファイルをレイヤーとして読み込み
参照を押して手順1で保存したファイルを1つ選んで開くボタンを押す。
もう一度、参照を押してもう1つのファイルも選んで開くボタンを押す。
そしてOKにするとレイヤーとして読み込まれる。
手順4
アニメーションウィンドウを開く
(ウィンドウ→アニメーション)
図3
図3の赤丸のついているところを押し、「レイヤーからフレームを作成」を押す
これでレイヤーからフレームが作成される。
手順5
図4
図4の赤丸のついているところをクリックすると選択されている画像の
表示時間を選択できるので表示時間を選択する。
(「その他」で自分で指定できます。再生速度の最速表示時間は見るブラウザ
によって異なります。ブラウザの最速表示時間より速い再生速度にすると設定
した速度よりも遅く再生されます。ブラウザでみたら動きが違うなどとなった
ときはこれが原因の場合もあります。)
※赤丸の下、「無限」の横の下向き黒三角を押すとアニメーションを再生する回数が
選べます。(そのほか、タイムラインにするなどありますがここでは省きます)
再生ボタンを押してみましょう!
(図4の2フレーム目の右斜め下の横向き三角が再生ボタン)
◇Web用に保存する
作成したアニメーションを保存します。
ファイル→Webおよびデバイス用に保存
Web用に最適化して保存します。
カラーなど表現したいものを損なわないようにしつつ、なるべく
ファイルを軽くしましょう。
カラーは必要最低限の色数にしましょう。
(色数が多いとデータが重くなります。)
◇ホームページにのせる
ホームページのbody部分にイメージ画像を入れる
<body>
<p><img src=”○○○.gif” /></p>
</body>
※srcの中身””の中は保存した場所によって変わります。
上記はXHTMLです。HTMLならば
<body>
<p><img src=”○○○.gif”></p>
</body>
となります。
※<p>がなくても表示されますが、インライン要素(imgなど)は
<p>で囲むようにしましょう。
※ここではコメントタグがうまく入らなかったのでHTMLを
全角で書いています。
※上記はPhotoshopCS3でのやり方です。
Photoshop ver.5.5以上に同梱されているImageReadyでの
作成の場合、手順3からがImageReadyでの作業になります。
(マークなど違いはありますが手順はだいたい同じです)
※ImageReadyはPhotoshopではツールボックスの中、一番右下に
あるマークをクリックすると立ち上がります。
◇はてなブログタイトル
はてなのブログタイトルを作成したGIFアニメにすることができます。
管理→設定→タイトル画像
で参照を押し、作成したGIFアニメのファイルを設定します。
しかし、タイトルを画像にしてしまうと検索されにくくなりますので
要注意です。(このブログのようにもともと検索されないような
言葉を使っている場合にはあまり関係ありませんけど)
もちろん、フルでブログ名を入れれば検索されるとは思います。
(よっぽど他にもありそうなタイトルでなければ)
◇Photoshopがなくても
OSに搭載されているペイントソフトとGIFアニメのフリーソフトでも
作成することができます。(ネットで、「GIFアニメ フリーソフト」
などと入力するといくつかでてきます。)