画像A 2つのレイアーに分かれている場合、「背景」を削除します。 画像B 削除された部分は格子状に表示され、透明の扱いになります。 画像C レイアーがひとつの場合はまず背景レイアーをレイアー0に変更します。 画像D カラーモードがRGBカラーでない場合は、RGBカラーを選択しましょう(画像Cの前に確認して下さい)。 画像E 透明化(削除)したい部分を「自動選択ツール」等を使って選択します。 画像F 選択した部分を削除します。 画像G 「Web用に保存」GIFを選択し、「透明部分」をチェックして画像を保存します。

●透過GIF(透明GIF)とは

　GIF形式にはいくつかオプションがあり、「透過GIF」もそのひとつです。Photoshop風に言うと透明ピクセル付きGIFです。画像そのものの使い方は、ウェブページなどに表示する際、画像の背景部分を透明にして抜き、ホームページの背景を活かしたい場合に用います(冒頭の画像参照)。ロゴ画像などに活用されます。

　透過GIFを作るフリーウェアなどは数多く用意されていて、普通は指定したカラーが透明に加工されて保存される、という方式が一般的なのですが、Photoshopシリーズではそうではなくて、透明な部分を透明のまま保存する、という考え方をとっています。つまり、Photoshop Elementsであらかじめ透明な部分を作っておき、それを透明部分に設定して保存する手順です。

●透明部分の作り方

　画像Aのように、元々、背景とロゴの部分が2つのレイアーに分かれて作られた画像であれば、背景レイアーを右クリックして「レイアー削除」を選択すると背景が削除されます。削除されると画像Bのように格子状に表示され、これはすなわちカラーのない、透明な部分ということになります。

次に画像Cのようにレイアーがひとつの場合、下記の手順で作業します。

1. 画像のカラーモードはインデックスモードではなくRGBカラーを選択して下さい。(画像D)
   
   
2. レイアーの背景をダブルクリックし、新規レイアー画面で「OK」をクリックします。(画像C)背景レイアーが「レイアー0」変わります。
   
   
3. 「自動選択ツール」(画面左の赤枠)などを使って、透明にしたい部分を選択し(画像E)、「Delete」(削除)キーを押します(画像F)。
   
   
4. メニューバーから「ファイル」→「Web用に保存」を選択し、GIFを選択し、「透明部分」をチェックして保存します(画像G)。

これで透過GIFとして保存されます。

アニメーションGIFとは、パラパラマンガの原理で画像を切り替えるGIFのオプションです。(藍海夏)

●アニメーションGIFの原理はパラパラマンガ

　アニメGIF、アニメーションGIFとはGIF画像のオプションのひとつで、右の画像例のように指定の画像を指定した時間に順序よく表示する形式です。右のようにまったく異なる写真を次々に切り替わるもののほか、一定時間毎に製品ロゴがキラリと光ったり、郵便ポストに手紙を投函するイラストがヒョコヒョコと動いたり、パラパラマンガのように少しずつ違ったイラストや写真を連続で表示すれば動きのある楽しいビジュアルが作れます。
　きっと、そんなウェブページを既にみなさん目にしたことがあるとは思いますが、そんな使い方です。

　繰り返しになりますが、GFI画像の原理はパラパラマンガと同じで、基本は変わっていく画像全体を用意し、それを指定した時間で切り替えていく、というものです。足と手を交互に振って走っているイラストを用意したとすると、早く切り替えれば全力疾走で、ゆっくり切り替えれば長距離走のように見えるでしょう。

　また、Photoshop Elementsではなく、アニメGIF制作ツールを使うと、コマごとに切り替える時間を変更したり、画像の一部分だけを切り替えることもできます。

フリーウェアでもできるツールがあるようです。例えば、元の画像は顔全体ですが、パラパラマンガとして用意したコマは閉じていく「目の部分だけ」、切り替えて表示することでまばたきをしているように見せる、といった方法です

Photoshop Elementsである程度の手法を学んだら、アニメGIF制作ツールをインターネットの検索などで探してみるのもいいかもしれませんね。

画像H アニメーションにしたい画像を呼び出します。あらかじめサイズは統一しておきましょう。 画像I 1番の画像をクリックして(1)、レイヤー欄の「詳細」をクリック(2)、「新規レイヤー」を選択(3)、新規レイヤーのウィンドウで「OK」をクリック(4)。 画像J レイヤーが2つになりました。 画像K 2番目の画像をクリック(1)、メニューバーから「範囲選択」(2)→「すべてを選択」をクリックして画像全体を範囲指定、メニューバーから「編集」→「コピー」をクリック(3)。 画像L 1番目の画像をクリック(1)、レイヤー1をクリック、メニューバーから「編集」→「ペースト」をクリック(3)。 画像M レイヤーパレットをみると、1番目の画像が背景に、2番目の画像が「レイヤー1」に配置されています。 画像N 同様に3番目の画像を「レイヤー2」に配置。レイヤー1とレイヤー2はレイアーパレット内でドラッグして順番を入れ換えることができます。 画像O 「ファイル」→「Web用に保存」をクリック 画像P (1).形式は「GIF」を選びます (2).色数を選びます。 　　写真なら256がベスト。 (3).「アニメーション」をチェック(重要) (4).アニメーションの設定 　　・ループはアニメの繰り返し 　　　はすずと1回のアニメで停止 　　・フレームディレイ 　　　画像の切り替え時間の設定 　　　画像例は「2.0」秒に変更。

●アニメーションGIFのコマはレイヤーで

　さて、具体的にアニメーションGIFをどのように作るかというと、Photoshop Elementsでは、アニメーションGIFのコマ画像をレイヤーで管理することになっています。すなわち、変化する画像をレイヤーに積み重ねて配置しておき、保存する際に「Web用に保存」→「GIF」で選択→「アニメーション」にチェック、を行って保存することで、レイヤーに置いた画像が切り替わるアニメーションGIFとして保存されるのです。

　レイヤーとはアニメーション制作などで用いられる透明なセルのようなものです。元になる背景画像にレイヤー(透明なセル)に置いた画像を重ねて表示することで合成されます。「フォトショップ早わかり Photoshop Manual - レイヤーの基本　−　レイヤーの合成」 などで詳しく解説していますので、ちょっとそちらを覗いてみて下さい。

　レイヤーのしくみがよく解らなくても次の手順で操作すれば、アニメーションGIFは簡単に作れます。先程の画像例(画面)を元にアニメーションGIFの作り方を解説します。

1. アニメーションGIFにしたい画像を用意します(画像H)。例では、海夏の3つ画像を用意しました。画像のサイズ(縦×横、解像度)はすべて統一しておきましょう。レイヤーの機能を使うにはレイヤーパレットを表示させておきます。レイヤーパレットはメニューバーの「ウィンドウ」→「レイヤー」をチェックすると表示されます。
   
   
2. 1番の画像をクリックして(1)、新規にレイヤーを作ります。最初は画像が背景になっていますので、レイヤー欄の「詳細」をクリック(2)し、「新規レイヤー」を選択(3)します。新規レイヤーのウィンドウが表示されますが、名前等はそのままで「OK」をクリック(4)します(画像I)。
   
   
3. 「背景」に新しいレイヤー(レイヤー1)が追加されます(画像J)。
   
   
4. 2番目の画像をクリックして選択(1)し、メニューバーから「範囲選択」(2)→「すべてを選択」をクリックして画像全体を指定した後、メニューバーから「編集」→「コピー」をクリック(3)します。(コピー実行による変化は見えませんが、2番目の画像がパソコンのクリップボードにコピーされています)。(画像K)
   
   
5. 1番の画像を再びクリックして選択し、レイアーパレットで「レイヤー1」が選択されていることを確認したら、メニューバーから「編集」→「ペースト」を選択します(画像L)。
   
   
6. レイヤーパレットをみると、1番目の画像が背景に、2番目の画像が「レイヤー1」に配置されていることを確認します(画像M)。
   
   
7. この作業(2〜4)を繰り返し、3番目の画像が「レイヤー2」に配置して下さい。レイヤー1とレイヤー2はレイアーパレット内でドラッグして順番を入れ換えることができます。
   
   
8. レイアーでパラパラマンガが構成された画像を、アニメーションGIFとして保存します。メニューバーから「ファイル」→「Web用に保存」をクリックします。
   
   
9. Web用に保存ウィンドウが表示します。チェックポイントは画像の赤印を付けた部分です。
   　(1).形式は「GIF」を選びます
   　(2).色数を選びます。
   　　　写真なら256がベスト。
   　(3).「アニメーション」をチェック(重要)
   　(4).アニメーションの設定
   　　　・ループはアニメの繰り返し
   　　　　はすずと1回のアニメで停止
   　　　・フレームディレイ
   　　　　画像の切り替え時間の設定
   　　　　画像例は「2.0」秒に変更

以上を確認したら画面上部の「OK」をクリックして画像ファイルを保存します。

これでアニメーションGIFの完成です。