コンテンツのトップページへ 超初心者向け
フォトショップ・エレメンツ de ゴーゴー!
第13回 透過GIF、アニメGIFの作り方
GIFアニメの制作講座 2006/03/29
 
1.透過GIF(透明GIF)の作り方
2.アニメーションGIFの作り方

Clickで拡大

普通のGIF画像をホームページなどに配置すると四角い画像(上)として貼られます(背景ベタ塗りの例)。透過GIF(透明付きGIF)は、ウェブページの背景を透過してみせる画像のオプション(下)です。ロゴなどをカッコよく配置する時に便利です。

 
1.透過GIF(透明付きGIF)の作り方
ひとつ前のページに戻るこのページのトップへ
Clickで拡大

画像A
2つのレイアーに分かれている場合、「背景」を削除します。

Clickで拡大

画像B
削除された部分は格子状に表示され、透明の扱いになります。

Clickで拡大

画像C
レイアーがひとつの場合はまず背景レイアーをレイアー0に変更します。

Clickで拡大

画像D
カラーモードがRGBカラーでない場合は、RGBカラーを選択しましょう(画像Cの前に確認して下さい)。

Clickで拡大

画像E
透明化(削除)したい部分を「自動選択ツール」等を使って選択します。

Clickで拡大

画像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として保存されます。


2.アニメGIFの作り方
ひとつ前のページに戻るこのページのトップへ
Clickで拡大
アニメーションGIFとは、パラパラマンガの原理で画像を切り替えるGIFのオプションです。(藍海夏)

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

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

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

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

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

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

 

Clickで拡大

画像H
アニメーションにしたい画像を呼び出します。あらかじめサイズは統一しておきましょう

Clickで拡大

画像I
1番の画像をクリックして(1)、レイヤー欄の「詳細」をクリック(2)、「新規レイヤー」を選択(3)、新規レイヤーのウィンドウで「OK」をクリック(4)

画像J
レイヤーが2つになりました。

Clickで拡大

画像K
2番目の画像をクリック(1)、メニューバーから「範囲選択」(2)→「すべてを選択」をクリックして画像全体を範囲指定、メニューバーから「編集」→「コピー」をクリック(3)。

Clickで拡大

画像L
1番目の画像をクリック(1)、レイヤー1をクリック、メニューバーから「編集」→「ペースト」をクリック(3)。

Clickで拡大

画像M
レイヤーパレットをみると、1番目の画像が背景に、2番目の画像が「レイヤー1」に配置されています。

Clickで拡大

画像N
同様に3番目の画像を「レイヤー2」に配置。レイヤー1とレイヤー2はレイアーパレット内でドラッグして順番を入れ換えることができます。

画像O
「ファイル」→「Web用に保存」をクリック

Clickで拡大

画像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の完成です。

メールマガジンに登録しませんか
スタジオグラフィックス 人気記事ピックアップ
今更聞けないiPhoneのカメラ撮影術   いまさら聞けないiPhoneのカメラ撮影術
iPhone カメラ機能の基礎知識と撮影テクニック
デジカメユーザのためのスマートフォン活用講座。基本カメラアプリの操作方法をおさらい

ミラーレス一眼と一眼レフの違い   ミラーレス一眼の特徴としくみ (2)
ミラーレス一眼と一眼レフの違い 〜位相差AFとコントラストAFの違い
一眼レフの「位相差AF」とミラーレスの「コントラストAF」はどう違うの? どっちが優れもの?

萩原和幸のポートレート撮影術 〜女性の撮り方テクニック講座〜   萩原和幸のポートレート撮影術 〜女性の撮り方テクニック講座〜
モデルは谷内里早、佐山彩香、相楽樹、纐纈みさき、飯村未侑、疋田英美
グラビア撮影現場から撮影テクニックをグラビア編/解説編/テクニック編で説明

動物園での写真撮影の基本 〜オリの消し方と背景をボカすテクニック   動物園での写真撮影の基本 〜オリの消し方と背景をボカすテクニック
内山晟の「動物写真・撮影テクニック講座」
動物園での動物撮影で最初の課題は檻や金網。これを撮影時にドロンと消す方法。

オヤジがキスデジで撮る!初心者向けスナップ講座   オヤジがキスデジで撮る!初心者向けスナップ講座
ポートレートモードとストロボ攻略
左の2枚の写真はほぼ同じ時刻に同じ場所で、同じカメラで撮ったもの。なぜこんなに違う?

Adobe Photoshop CS6 レビュー   Adobe Photoshop CS6 レビュー
新機能と強化された機能
薮田織也のフォトショップ早わかり Photoshop Tips & Manual

Photoshop Elementsで、空を青く、芝生を緑に演出する方法   Photoshop Elementsで、空を青く、芝生を緑に演出する方法
(フォトショップ・エレメンツ de ゴーゴー!)
青い空、緑の芝生…記憶の色を取り戻す魔法のカラー補正術

逆光の失敗写真を明るく、青空をもっと青く補正するレタッチ術   逆光の失敗写真を明るく、青空をもっと青く補正するレタッチ術
Picasa3 徹底活用講座
思い出の写真を家族や友達とウェブで共有 無料アプリでここまでできる

荻窪圭の 写真で見る 三脚の使い方&選び方 三脚活用テクニック入門   荻窪圭の 写真で見る 三脚の使い方&選び方 三脚活用テクニック入門
三脚はなぜ必要? 三脚の役割とメリット
三脚&雲台 活用テクニック講座 入門スタート

夜景写真やイルミネーションをきれいに撮ろう   夜景写真やイルミネーションをきれいに撮ろう
デジタルカメラ時代の レンズフィルター初級講座
キラキラの夜景をみたままに近い写真に撮る方法

広角レンズレビュー 「TOKINA AT-X 17-35 F4 PRO FX」   萩原和幸の広角レンズレビュー 「TOKINA AT-X 17-35 F4 PRO FX」
F4.0 コンパクト広角ズームの実力
F2.8とF4.0ズームの特徴比較と使い分け

ウルトラの星輝く時ごちそうさまですの   ウルトラの星輝く時ごちそうさまですの ゆきぴゅーのタダでごはん
お父さんのための特撮講座〜ウルトラマンとウルトラマン商店街の巻〜
世田谷区に実在するというウルトラマン商店街とは?

オヤジ流デジカメ研究講座「デジカメPopeye」   オヤジ流デジカメ研究講座「デジカメPopeye」
撮像素子とCCD入門ヒストグラム入門RAWってなに?
JPEG研究序説
ヒストグラムを攻略して活用しよう。RAWデータも解説。

神子元島ダイビング ハンマーヘッドシャークをコンパクトデジカメ XZ-1 で撮る   神子元島ダイビング ハンマーヘッドシャークを XZ-1 で撮る
石垣島ダイビング マンタの乱舞をXZ-1 で撮る
コンパクトデジタルカメラでどこまで撮れるか!? マンタとハンマーヘッドの撮影に挑戦
 
※Photoshop等はアドビシステムズ社の商標です。
 
初出:2006/03/29
  このページのトップへ
 

     
 
 

     
 
Presented by
飛鳥のWEBサイトへ
Created by
サンタ・クローチェ
トライセック
リンクについて
著作権について
プライバシーポリシー