会社ロゴをGIFを使って動かすには
pohotoshopでGIFアニメーションをつくる方法を試してみたので、共有します。
今回はAdobeの画像編集ソフトのPhotoShopでGIFアニメーションを作る方法について説明していきます。
GIFアニメーションと聞いて、ピンとこない人もいると思うので、GIFについて説明します。
GIFアニメーションは、複数枚の静止画を組み合わせて動きをつけた画像フォーマットのひとつです。ファイルの拡張子は「.gif」です。
パラパラ漫画のように、連続した静止画を順番に表示することで、動きを再現する仕組みとなっています。
特徴は、データ容量が小さいことで、再生デバイスや通信環境に依存せずに再生できるメリットがあります。
SNSやブログ記事、例えば、Twitterなどにも貼ることができるので、「動く画像」のようなイメージで、
ちょっとしたアクセントになるので、便利です。
まずは見てもらった方が分かりやすいと思うので、今回作成した動くロゴマークの画像をご覧ください。
GIFアニメーションの歴史
GIFアニメーションは、1987年にアメリカのコンピュサーブ社（CompuServe）によって最初の仕様が開発されたそうです。
当初は、株式市場の為替レート表示のために、シンプルなグラフィックとして開発しました。
実際は、GIFの方がWorld Wide Webより2年早く誕生しています。
そして、現在も広く使用されているのは、1990年代に改定されたバージョンだと言われています。
90年代中盤には画像連番による「GIFアニメ」がインターネット上の主要な動画形式として普及しました。
GIFは色数の制約がある（256色しか表現できない）ものの、アニメーション機能そのものがないJpegやpngと同じように、基本的には
動画ファイルではなく画像ファイルの拡張子となります。
そのため、動作やサポート状況は画像ファイルに準じています。GIFアニメーションは、静止画とは異なり、
短時間でも動く画像を表示できるため、さまざまな場面で活用されています。
GIFアニメーションの作成難易度が低いというのも今日まで普及している大きな要因といわれています。
GIF（グラフィック・インターフェース・フォーマット“Graphics Interface Format” ）の略称で、GIFはWebサイトやEメールで使われる
小さなグラフィックとして最適な画像と言われています。
インターネットで、アニメーション化された小さな画像を見つけたら、その多くはGIFを用いて表示されています。
GIFアニメーションが作成できるソフト
GIFアニメーションを作成するためのソフトウェアやアプリもいろいろ存在します。
以下にいくつかおすすめのものを紹介します。
PC向け
・Photoshop
・PhotoDirector
スマホ向け
・ImgPlay
・Movepic
次の項目からは、Adobe Photoshopを使ったGIFの作成工程を紹介していきます。
Photoshopを使ったGIFのつくり方 素材の準備
事前に、カンバスサイズを決め。白の背景を作成します。
今回は、noteの記事見出し用に1280×670の新規カンバスを作成し、ホワイトで塗りつぶしておきます。
つくり方（2枚の画像でのアニメーション）
アニメーション用の素材を2枚作る。
１．まずは、Photosopのアニメーションにしたいレイヤーに、PCから使いたい画像を選んで読み込んで、「複製」します。
（コピー元のレイヤー１枚目の画像をロゴ①という名称に変更するとわかりやすいです）
２.複製した2枚目のレイヤーの画像を選択して、ショートカット【Ctrl+A】で「すべてを選択」して、→操作画面上部のオプションバーから、
左右中央揃え、垂直方向中央揃えをクリックして、画面中央に配置します。
最初に見てもらったように、今回作成するアニメーションの場合のGIFは2枚の画像レイヤーで構成されています。
3.中央に配置した1枚目の画像に対して、2枚目の画像をつくりたいので、画像を選択して、右クリックからレイヤーの複製を選びます。
画像が複製されるので、複製されたレイヤーを選んで、操作画面上部のメニューバーから、「編集」→「変形」→「回転」を選びます。
画像を好きな角度に回転させます。今回は、左に「-15°」回転しました。
4.アニメーションの動きがわかりやすいように、1枚目の画像の背景色を黄色に変換します。
ツールパネルから、「スポイトツール」を選択して、文字の黄色の部分の色を抽出します。ツールパネルから「自動選択ツール」を選んで、
水色部分を選択します→操作画面上部のメニューバーから、「編集」→「塗りつぶし」→「描画色」をクリックし、先程選んだ黄色で
塗りつぶします。黄色と水色が重なった2枚目の画像が完成したので、2枚のレイヤーを2つとも選択して、右クリックから「レイヤーの統合」
を選択して、1枚の画像に統合します。
（ロゴ②という名称に書きかえます）
これで、アニメーションに使う2枚の画像の準備が出来ました。
GIFアニメーションをつくる
ここから、GIFアニメーションの動きをつけていきます。まず、作成した画像を配置する
タイムラインのモードに切り替えます。
1.操作画面上部のオプションバーから、タイムラインを選択してクリックします。
すると画面下にタイムラインが表示されます。
2.先程作成したロゴ②の表示をOFFにして、ロゴ①のみの表示にします。
3.タイムライン内の「ビデオタイムラインの作成」をクリックして、「フレームアニメーションを作成」を選択すると、
表示されているレイヤー(ロゴ①)の画像がタイムラインに追加されます。
4.タイムライン下の「+」ボタンをクリックっすると、ロゴ①が複製されます。このままだと、ロゴ①が2つ出来たことになるので、
ロゴ①のレイヤーをオフにして、ロゴ②のレイヤーをオンにします。そうすると、2枚目がロゴ②に切り替わります。
（Photoshopの画面に表示されている画像がタイムライン上に反映されます）
各画像の表示する秒数を設定する
続いて、それぞれの画像の表示される時間を設定していきます。
１．タイムラインのロゴ①の下の「0秒」と書かれた個所をクリックくして、表示される秒数を選択します。 今回は0.5秒にを設定していきます。
同じように、ロゴ②も0.5秒に設定します。
２．次にループの回数を設定します。秒数表記の下に「無限」と書かれた部分から、秒数を指定できます。クリックすると「一度」「3回」「無限」から
ループの回数を選ぶことが出来ます。今回は無限にします。
データの書き出し
最後にデータの 書き出しをします。
１．操作画面上部のオプションバーから、ファイル→保存→web用に保存をクリックします。
ファイル形式がGIFになっていることを確認して、保存をクリックすると画面が切り替わります。
完成したGIF動画
完成したGIF動画がこちらです。
まとめ
動画ファイルのGIF動画への書き出しを、AdobeExpressを使って、カンタンに変換できるという記事を前回書きました。
結論から言うと、（直接は）貼れなかったという記事です。
くわしくはこちら。
本日の学び
noteに直接、GIF動画を貼る時に、2枚の画像から出来たシンプルなGIF動画であれば、投稿・掲載が出来た
静止画が2つあれば、動画になるというシンプルさは原点にして、映像の基本なのでなかなか奥が深い
映像って何だろう、映る像と書くけど、日々、勉強だなぁ
最後までご覧いただき、ありがとうござうました。
その他、自社ＨＰのコラム記事の紹介です。
良かったらコメント、スキ、フォローお願い致します！
興味がある項目がありましたら、ぜひご覧ください。
心に残る映像を、より多くの皆様に。
千葉県松戸市のファインの動画はコチラから！
メインサイト
⇒https://fine-production.co.jp/
サブサイト
⇒https://peraichi.com/landing_pages/view/lp-fine-production
もし、サポートをいただいた場合は、現在進行形の制作や今後のチャレンジのために大切に使わせていただきます。 サポートや支援の代わりに、シェアかコメントをいただけると大変励みになります。！