読者です 読者をやめる 読者になる 読者になる

面白ハンター

テツヤマモト。北海道出身の23歳。フリーライターしてます。退職を期に、家無し放浪生活中。11月は札幌→台湾→札幌→上砂川の予定。

滑らかなGIF画像の作り方!!photoshopでARuFa氏を目指す。

ブログ運営法 カメラ,画像処理

スポンサーリンク

GIF画像を作りたい…。

これは僕が半年前くらいから抱いていた夢でした。バーグハンバーグバーグのARuFaさんの記事を見たことがきっかけ。

f:id:omosiroxyz:20160420211112g:plain

出典:観光地にある「龍が剣に巻きついたキーホルダー」の魅力を聞いてくれ 

え?なにこれ!?

ブログ記事にこんな画像を貼れるの?なかなかのカルチャーショックを受けました。

出典記事でARuFaさんはGIF画像を連発していますが、いやーGIF画像って貼るだけで面白い。文章の中に突然動く画像出てくるだけで、ちょっと面白いですからね。

本日は僕が研究を重ねて発見した、ARuFaさんのような滑らかなGIF画像の作り方を紹介します。

以前書いたGIF画像の作り方の記事

本題に入っていく前に、僕は以前にもGIF画像の作り方について記事を書いているんですね。

この記事で紹介したGIF画像はこんな感じでした。

f:id:omosiroxyz:20160420211833g:plain

んーなかなかレベルが低いです。

なんか画質がやたら悪いし…。カクカクしてるし…。これはARuFaさんの滑らかなGIF画像にはほど遠すぎる…。

こちらのフリーツールを使っています。さすがにフリーツールなので出来栄えはこんなもんでしょう…。

 

高画質なGIF画像の作り方

それでは僕が研究を重ねた高画質なGIF画像の作り方をご紹介します。GIF画像を作りたいんだ~と思っていた方は必見ですよ!

 

①動画を撮影する

まずは動画を撮りましょう。写真ではありません、動画です。

f:id:omosiroxyz:20160420213242j:plain

GIFって画像を並べてつくる…とイメージしている人もいるかもしれませんが、滑らかなやつを作りたいなら、何よりも動画です。

画質は大事なので個々人良いカメラ使ってください…。僕はニコンのD5500という機種の一眼レフで撮影しております。

 

②photoshopを起動、動画を読み込む

動画を撮影して素材ができたら、Photoshopを開きます。

photoshop持ってない人、今回はごめんなさい…。フリーソフトでもキレイGIFは作れるかもしれないので探してみてください。でも、ptotoshopはGIF画像作りにも写真加工にも、アイコラ作りにも役立つのでインストールしておいて損はないと思いますよ!

photoshopを起動したら、「ファイル」→「読み込み」→「ビデオをレイヤーに読み込む」をクリック!

f:id:omosiroxyz:20160420214435p:plain

GIF画像の素材とする動画を選択した後に、GIF画像にする範囲を設定します。

「フレームアニメーションを作成」にチェックマークを忘れずに!

f:id:omosiroxyz:20160420214500p:plain

すると、下の画像のようにアニメーションが下部に作成されます。これで一旦準備完了!

f:id:omosiroxyz:20160420214813p:plain

 

③動画を反復再生させる

この状態のまま保存しても、ひとまずGIF画像はできます。

しかし、ここからの一工夫がとっても大事になってきます。

動画を反復再生させるのです。これによって、GIF画像が圧倒的に滑らかになって、面白さも増してきます。

f:id:omosiroxyz:20160420220522p:plain

ここからはわりと地味な作業になりますが、画像右側の矢印の場所をクリックして、フレームをコピーしていきます。そしてコピーしたら、反復再生になるようにフレームを組み替えます。わりと根気がいりますが、頑張りましょう。

個人的にフレーム数は40くらいまでがいいんじゃないかなと思います。フレームの枚数や再生速度を良い感じに編集して下さい。ついでに画像左側の矢印の場所をクリックして無限再生にするのを忘れないように。

 

④GIF画像として保存する

ここまで来たら、あとは簡単。

まず「ファイル」→「書き出し」→「Web用に保存」をクリック!

f:id:omosiroxyz:20160420220651p:plain

すると、以下のようなページが出てくると思います。

ここでまずは上部にあるファイルの種類に関するプルタブをクリック!「GIF」に変更しましょう。

さらに画像のサイズが大きすぎると、ファイルがかなり重くなるので適度に縮小させます。ブログで使うなら600pxくらいですかねぇ。

最後にGIF画像として大丈夫なのか、再生しながら確認しましょう。

f:id:omosiroxyz:20160420220955p:plain

 

⑤完成したGIF画像がこちら

完成したGIF画像がこちらです!

f:id:omosiroxyz:20160420221215g:plain

いやー、面白い!面白いとしか言えない!

今後もこのようなGIF画像を応用して使っていきまして、面白い記事を仕上げていきますよ~。ちなみに「ズボンを上げ下ろしする」というGIF画像を作った意味は特にありません。

 

GIF画像を作ろう!

ここまで書いてきた流れに関しては、youtubeで動画にもまとめられていました。英語版ですが、たぶん意味はわかると思います…。

GIF画像に関してはphotoshopを使う他にも、作成方法はあると思います。それでもPhotoshopで作る…というのが僕の知る最上級手段です。プロの人達も同じような方法で作ってるんじゃないかなぁ…。

GIF画像をウェブサイトに使うだけで、動きが出て一気に印象が変わりますからね!せっかくだから、あなたも文章や写真だけでは表現できないことやってみましょうよ!

ぜひとも参考にしてくださいね!

f:id:omosiroxyz:20160420223308g:plain

ちぇけ

www.yamamototetsu.com

www.yamamototetsu.com