gifAnime

【Photoshop初心者必見】超簡単20分!!レイヤーGIFアニメの作り方。

執筆:Daily GIF89a編集部(あさぎり)

この記事を読んで理解できること。(文章量:5分)

・Photoshopを初めて触る方でも作業時間20分でGIFアニメを制作することができる。

・アニメ制作を通してPhotoshopの基本的な使い方を理解することができる。

 

今回制作したGIFアニメ

gifAnime
ぐるぐるします

クリエィティブと言えばと言うほど安易なイメージだろうか。モンスターを倒したらドロップしそうである。

 

使用した素材

素材画像
素材画像

引用元URL:【■http://kage-design.com/wp/?p=1334■】

お借りした素材にハートマークの歯形をあしらえ、かわいくキュートに加工をした。

 

制作手順

1.新規作成

手順①.画面右上ファイル→新規で新規画像の生成
手順①

本記事はPhotoshopを初めて触る方でも制作できるように執筆をする。先ずは左上の「ファイル」から「新規作成メニュー」をクリック。画像を生成する。

画像サイズはお好みで。筆者はgifアニメと言うと正方形なイメージがあるので、正方形に近い形を作成した。

手順②.画像サイズを決めます。
手順②

上の画像のように、値を設定していきます。よくわからなければ上の画像通りに設定すると良いだろう。

新規作成をした後の画面です
新規作成

新規作成ができると上記のような画面になる。さて、ここからが本番勝負の始まりである。

 

2.素材画像配置

素材画像はご用意いただけただろうか。手書きでも、ネットで拾った素材でも構わない。今回は難しい事を考えず、とりあえず動かしてみよう。

素材配置はファイル→配置で行います
素材配置
素材画像を表示しています
素材画像

素材画像を置く。今回はこれを加工していく。

(今回は、画像丸々一枚使うことを想定していますが、もし画像の一部を使いたい、などであれば、点線四角のアイコンのツール『長方形選択ツール』などで切り取りたい範囲を指定し、編集→カット、コピーなどで、特定の範囲のみを使うことができる。使うときは、レイヤーを新しく用意して、貼り付けを行う)

 

3.画像加工

画像加工を施す。今回は簡単な画像加工を利用して、とりあえず素材を動かしてみて感動を味わっていただきたい。

 

自由変形はイメージ→変形→自由変形から行えます
自由変形

もっともポピュラーで簡単な変形方法である。サイズ変更、移動、回転ができる。

自由変形の解説です
自由変形

回転・移動・サイズ変更の方法。マウスでやる時は上記のように変形対象レイヤーをクリックで選択後、上記画像の方法で変形後、Enterキーを押すか、チェックマークで確定させる。

自由変形の解説です
自由変形2
自由変形の解説です
自由変形3

値での変形は固定値(pxやmmなど)、%での変形が可能。縦横比固定などもできるので、便利。

自由変形の解説です
自由変形4

今回筆者は使っていないが、「回転」では選択しているレイヤーの絵を回転することができる。上図の場合りんごのレイヤーを選択して回転させている。選択されていないレイヤーの絵(ハート–レイヤー3)は一緒に回転はしない。

 

4.レイヤー操作

Photoshopでは三つの方法で、アニメーションを創ることができる。

  • トウィーン
  • フレーム
  • レイヤー

一番簡単なのはトゥイーン、次はフレーム、最後にレイヤーである。トゥイーンやフレームはレイヤーを動かしてアニメーションを制作する方法である。今回はレイヤーでアニメーションを制作する。

レイヤー操作についての説明
レイヤー操作
レイヤー操作についての説明2
レイヤー操作2

レイヤーはレイヤーウィンドウを表示することで操作ができる。筆者はオリジナルのリンゴをコピー→変形、を繰り返して、リンゴの形を少しずつ一定の速度で変化するというアニメーションを表現している。

今回のアニメーションのように、同じ動きの繰り返し、終わりと始まりの連結、などをするときはレイヤーの複製が大活躍する。

5.アニメーション操作

制作作業は残り10分ほどである。一気にGIFアニメに仕上げていく。

アニメーション操作1
アニメーション操作1
アニメーション操作2
アニメーション操作2
アニメーション操作3
アニメーション操作3

レイヤーを一気に挿入&選択していく。

アニメーション操作4
アニメーション操作4

フレームを表示する時間は0.2秒以上がよい。

 

6.保存

PCによっては少し時間がかかることがある。なお、「Webおよびデバイス用に保存」は非常に処理能力を必要とするので、Photoshopが強制停止することがあるだろう。必ずpsd形式での保存をしてから行う。

保存1
保存1
保存2
保存2

保存を押した直後の画面。

保存2
保存3

GIFアニメにするには設定を変更する。設定画像形式がデフォルトでJPEGになっているので、それだけGIFに直す。他の設定項目は、後々意味が分かった時に変更していくと良いだろう。

保存4
保存4

最後に好きな名前を付けて保存をする。

さて、あなたの思い通りに動いただろうか。

完成したGIFアニメ

gifAnime
ぐるぐるします

 

制作を終えて

今回は、Photoshop未経験者でも作れるGIFアニメーション制作、というのをコンセプトに執筆した。ここまで読んでいただいた皆様には是非、Photoshopの様々な機能に触れて、自分で心から「面白い」と思えるアニメーションを創っていただければと思う。GIFアニメーションは手軽で、汎用性にも優れている。Photoshopは奥が深く、興味深い世界だ。皆様、よきGIFアニメライフを!

次回は、応用編、今回触れなかったトゥイーン・フレームでのアニメーション制作について解説する。2 つのフレームを補間するフレームが1クリックで自動的に生成する機能である。もちろん、初めてPhotoshopに触る方でも、創れるような解説で。

ではまた次回もご期待いただきたい。

執筆:Daily GIF89a編集部(あさぎり)

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine

GIFMAGAZINE