【Photoshop】動くヘッダーを作成する方法-1

ブログのヘッダーにも使える↑こんなやつをPhotoshopで作成する方法を紹介します。

作成方法

まずは、最初に赤枠の「文字ツール」や「長方形ツール」で、基礎となるロゴを作成します(*この部分の作成過程ははしょります)。

 

 

さて、ではここからなんですが、

じつは非常に簡単。上部にある「ウィンドウ」の中にある「タイムライン」をクリックします。

 

すると、作業用パネルの下部に表示されるので「フレームアニメーションを作成」をクリックします。

 

 

そうすると、タイムラインに1つの画像ができるので、この画像をコピー(複製)していきます。

 

 

コピーの方法は、下の赤枠部分をクリックするだけです。

 


 

ここから、少しだけ面倒くさい作業が続きますが、あきらめずに。

複製した、2番目の画像の動かしたい部分(この場合赤い点)を少し右にずらします。

 

 

この際、動かしたい部分をレイヤーパネルで選択しておかないと、動かしたくない部分が動いてしまうのでちゃんと選択しておくこと。

 

 

あとは、この複製と移動を任意の動かしたい位置まで繰り返し行っていきます。

 

 

ここまでくれば、あと一息。頑張りましょう。

次に、表示速度(タイムラインの時間)を設定していきます。この場合は、0.1秒に設定しています。設定方法は下の赤枠部分の矢印をクリックすると、時間表示が開くのでそこから任意の時間を選びます。

 

 

その後、この一連のタイムラインを繰り返し表示されるようにするため、下の赤枠部分をクリックし、「無限」を選びます。これで永遠にループし表示されるようになります。

 

 

ここまでくれば、ほぼ完成。後は「gif」ファイルにし保存するだけ。

では、保存していきましょう。

 

 

上部にある「ファイル」を選択しその中にある「書き出し」を選択、さらにその中にある「Web用に保存(従来)」を選択します。選択すると下図の画面がポップアップされるので「保存」をすれば完成。ファイル名は任意でつければOKです。

 

どうも、お疲れ様でした。

【ナイトワークに専門レタッチ講座】

ネットや書籍では手に入らない!ナイトワークに特化したレタッチオンライン講座です。

【特典あり】

・練習用素材+その他素材

・デジタルメイクアクションデータ

・グラフィックデザイン基礎講座(全19項) *レタッチ以外に幅を広げたい方へ

・マーケティング基礎講座(全50項) *クリエイティブのみじゃなく運営/経営にも携わっていきたい方へ

買い切り19,800円が8月17日まで50%offの9,900円です!

もちろん、レタッチ講座内容が、今後追加更新されても追加料金なし!

最新情報をチェックしよう!
NO IMAGE

ナイトワーク専門レタッチ講座

ネットや書籍では手に入らない!ナイトワークに特化したレタッチオンライン講座です。【特典あり】/練習用素材+その他素材/デジタルメイクアクションデータ/グラフィックデザイン基礎講座(全19項) *レタッチ以外に幅を広げたい方へ/マーケティング基礎講座(全50項) *クリエイティブのみじゃなく運営/経営にも携わっていきたい方へ/買い切り19,800円が8月17日まで50%offの9,900円です!もちろん、レタッチ講座内容が、今後追加更新されても追加料金なし!

CTR IMG