Adobe(アドビ)でアニメーションを動かそうとするとアフターエフェクトが思いつくと思います。
この動画はアフターエフェクト、イラストレーター、プレミアをつかってやっとの思いで動画にしたものです。
そんな方に朗報!Photoshopなら簡単にイラストを動かすことができます!
今回はPhotoshopのフレームアニメーション機能を使ってGIF動画をつくります。
Contents
Photoshopでイラストを回転させる方法
新規作成
ファイルを開きます。今回は1000×1000ピクセルでアニメーションを作成します。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop1-1024x726.png)
レイヤーを複製します。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop2-1024x637.png)
イラストをPhotoshopに取り込む
使いたいイラストのフォルダを開きます。イラストをレイヤーにドラッグアンドドロップします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop3-1024x628.png)
レイヤーにイラストを取り込むことができました。
キャンパスサイズに合うようにイラストを拡大します。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop4-1024x960.png)
レイヤーを複製します。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop5-1024x593.png)
レイヤーの複製を11個つくります。わかりやすいようにレイヤー名前を1、2、3~11としました。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop6-1024x544.png)
レイヤー2を回転させます。
Ctrl+Tをクリックします。回転できる矢印が出てくるのでその矢印をクリックし任意の場所で止めます。エンターキーを押すと固定できます。
同じ要領でレイヤー2~11までイラストを回転させていきます。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop7-1024x524.png)
フレームアニメーションを作成する
ウィンドウ→タイムライン→フレームアニメーションを作成をクリックします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop8-1024x541.png)
タイムラインにイラストが表示されました。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop9-1024x646.png)
0.2秒に1回イラストを表示させる設定をします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop10-1024x688.png)
複製ボタンをクリックします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop11-1024x691.png)
複製ボタンをクリックし11個つくります。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop12-1024x867.png)
- タイムラインに表示されている1つめのイラストをクリックします。
- レイヤーに表示されている1つめのイラストの目玉ボタンをクリックします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop13-1024x625.png)
同じ要領で、
- タイムラインに表示されている2つめのイラストをクリックします。
- レイヤーに表示されている2つめのイラストの目玉ボタンをクリックします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop14-1024x604.png)
同じ要領で、
- タイムラインに表示されている3つめのイラストをクリックします。
- レイヤーに表示されている3つめのイラストの目玉ボタンをクリックします。
この作業を11つまでします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop15-1024x609.png)
再生ボタンをクリックするとイラストが回転します♪
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop16-1024x714.png)
保存方法
書き出し→Web用に保存をクリックします。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop17-1024x686.png)
GIF、無限を選択し保存します。
![](https://yuzuusagi.com/wp-content/uploads/2018/09/photoshop18-1024x761.png)
GIFアニメーション完成♪
![](https://yuzuusagi.com/wp-content/uploads/2018/09/aa780e230b84bf7b4d808825f4a2d090.gif)
今回はかなり簡単な方法を解説しました。
Adobeはできることがもっともっともーーーっとあります。
可能性は無限大(‘ω’)ノ
あなたもAdobeライフはじめましょう♪♪♪