ウェブサイトや自分のブログページを、アニメーションで飾ってみたい！動きを出したい！

と前々から思っていて、いざやってみるととても簡単だったので、 PhotoshopでGIFアニメーションを自作する方法をご紹介します。

出来上がりのGIFは、こちら。

素材は、Pixabayというサイトがお勧めで、無料で使える。

ぐるりと回したデザインもかわいいのでは？

さてでは、作っていこう。

段階としては、

• 下地になる文字と太陽のデザインを入れる
• 下地の上をペンツールでなぞっていく
• それを何度も繰り返す
• 太陽を動かしてみる
• GIFにして保存

といった内容です。

2種類の方法は一気に紹介するので、少しずつ試してみてください。といってもとても簡単なので、すぐに同じようなオリジナルのアニメーションが作ることができます。

今まで全く動きのなかった自分のブログページが、GIFによってちょっと不思議感が出てます。

では、ここからアニメーションの作り方を解説していきます。 使うのはもちろん Photoshop!!

英語の方が使いやすいので、英語に設定して説明してます。

もし日本語の設定でも、ほとんど同じかと思います。が、英語設定にするのがおすすめです。

これあると便利！！なツール

最近わたしもデザイン関係のお仕事が増えてきて、マウスだけだと

「なんかもの足りない～」

と思っていた。

そんな矢先に、画家でグラフィックアーティストのメキシコ人の友達が使っている道具を発見。

それが、このペンタブ！！！！

始めは、使いにくいと思ったけど、慣れるとすごい使える。もう手放せないレベル。

もちろん今回の様な、GIF作りにも一役買ってくれる私の新しい相棒ちゃん。

3000円で手に入る快適。

いろいろ調べて初めてのペンタブだったこともあって、安めのものをチョイスしたけど、かなり使えるで満足してます。

強いて言うなら、ケーブルが真横に付けて欲しかった。

おすすめペンタブは置いといて、さっそくGIFの作り方いってみましょう！

１．新規ページを作る

今回は、600×300px横長でレゾルーションは72pxで作っていきます。

あまり大きいと、アップロードした時にちゃんと動いてくれなかったので、小さいサイズでやってます。

いろいろ試してみてください。

２．タイムラインのタブを出す

アニメーションを作るには、”タイムライン”タブを出す必要がある。

“Window”から“Timeline”というタブを出しましょう。

出てきたら、下か左に入れておこう。好みは人による。私は下でいきます。

ここまでできたら、使いたい素材を入れ込む。

今回は、左側にテキストを入れて、右側にメキシコらしい太陽の画像を。

４．ビデオタイムラインを作成

タイムラインのタブに出てくる”Create Video Timeline”を選択

タイムラインが生成されて、各レイヤーごとに階層ができているはず。

５．新規のビデオレイヤーを追加する

Layerから、”New Video Layer”そして、”New Blank Video Layer”を選択する。

そうすると、ビデオタイムラインの上に、新規のレイヤーが追加される。

６．ビデオアニメーションの設定を行う

”Timeline”タブの右上の三本線をクリックすると出てくるのが、この画面。

”Enable Onion Skin”にチェックを入れる。

オニオンスキンとは、玉ねぎの皮っていう意味だけど、薄皮の下が透けて見えるように、前後のアクションがちょっと透けて見える機能。

これは便利なので、使ってみるのがおすすめ。

次は先ほどのオニオンスキンの設定。

同じタブを開いて、“Onionskin setting”をクリックする。

前後１クリップづつオニオンスキン機能が働く設定に。

次はビデオ自体の設定。

”Set Timeline Frame Rate”を選択。

お好みで設定。

15くらいが個人的に好きなレート数。

1秒間に何クリップ入れ込むかという数字。

７．長さを調節

ビデオを短くする場合は、クリップの最後にカーソルを合わせることで移動が可能。

一番下に見える山のアイコンの間のカーソルを調節してみてください。

クリップのサイズを作業のしやすい長さに変更。

７．長さを調節

さあ、ここから遂に本番！！！

先ほど作ったビデオクリップのレイヤーを選択した状態で、ブラシツールでなぞっていく。

ちょっとづつずらすとアニメーションっぽくなるので、あ！ってなっても、雑なくらいが丁度いい。

ここが重要で、

このブルーのカーソルを右に一コマ動かす。

そうすると、オニオンスキン機能が起動してちょっと薄くなったはず。

そして、その状態で、また文字の上をなぞる。

これを７－８回ほど繰り返してみてください。

スペースを押すと再生されます。

文字の部分が動き出しましたか？

次は、太陽を動かしてみましょう。

８．太陽を動かす前にスマートオブジェクトに

ブルーのタイムラインカーソルが一番初めの位置に戻っていることを確認して、太陽のレイヤーを“Smart Object”にしておく。

スマートオブジェクトにすることで、レイヤーが壊れない。

９．太陽を回してみる

・ブルーのカーソルが一番左の位置にあることを確認。

・タイムラインタブの矢印をクリックして開く。

・”Tranceform”の時計のアイコンをクリック。

・黄色いマークが現れたのを確認。

・ブルーのカーソルを適当な位置に移動させる。

・太陽を回転させて、エンターを押す。

そうすると、新たに黄色いマークが追加される。

・同じようにもう一度回転させて、元に戻す。これでぐるっと一周。

こんな感じになったはず。

スピードは、”Set Timeline Frame Rate”の数字を小さくすればゆっくりになるし、大きくすれば速くなる。

１０．出力してみる

・ファイルから、”Export”の中の”Save for Web(Legacy)”を選択。

・デフォルトのままで”Save”をクリック。

もっと高品質にする場合は、設定を変えるけど、今回はこのままいきます。

完成！！！！！

こんなのとか

いろいろ作って楽しんでます。あと、フォトショップも使わずにサクッとGIFを作る方法も紹介してます。

PhotoshopもいらないGIFアニメーションの作り方

前回のブログで、Photoshopを使ってのGIFアニメーションの作り方をご紹介しましたが、Photoshopなんて持ってない！という方も多いと思います。そんな人には朗報かもしれない、GIFアニメーションの作り方。自由度は低いけれど、とにかく簡単に作れてしまうので、自作のGIFをブログに貼っても面白いと思う。因みに、htmlの編集ができる環境のみ。私は、Wordpressを使っています。

でわ！！！

フォトショップの記事

フォトショップで簡単にじゃまなものを消す方法　使える写真編集術04

Photoshopの編集。写真に写りこんでしまったごみや、消したいものを背景にマッチさせながら消す方法。今回は、海で遊ぶ人々を消して、のんびりとできそうな静かな沖縄の離島・座間味にある古座間味ビーチに。

フォトショップで肌を劇的にきれいに、自然に、さくっと消す方法 ～にきび、しわ、しみ、そばかすを全滅させる～

しわ、にきび、しみ、そばかすを自然に美しくPhotoshop(フォトショップ)で消して美肌に仕上げる方法。しかも、早い！

【経験ゼロから】ストックフォトで写真を売って実際に稼げた金額と6つの知っておくべきこと

ストックフォトは旅に出てても、世界中どこからでもできるのが魅力だし、写真を編集してSNSにあげるだけじゃもったいない！ ここで、ストックフォトを始めるにあたって頭に入れておくべきことと、実際にストックフォトを始めてからしばらくしたので、ここでいくら稼げたのか発表。

Photoshop CC 2019を英語化してみる！と英語にしたらチェック必須のおすすめのフォトグラファーYOUTUBEチャンネル

フォトショップのワークフローを英語化して、英語で使ってみよう。メリットも説明！そして、私のお気に入りのフォトグラファーやビデオグラファーのYoutubeチャンネルも紹介。ぜひ写真やビデオ撮影をしている人はチェックしてほしい！

[Photoshopで遊ぼう!!]フォントで半分顔を覆ってポスター風にする方法

Photoshoo(フォトショップ)を使って、顔の半分にテキストを入れてポスターっぽく加工する方法!めちゃくちゃ簡単です。