Photoshop で回転するロゴを作成する方法

慎重に作成されたアニメーション ロゴは、Web サイトへの訪問者の注目を集め、ページの残りの部分を表示するように誘導します。 Photoshop のレイヤー パネル、変換ツール、およびタイムライン パネルが連携して、任意の Web ページに追加できるアニメーション GIF 画像を作成します。ロゴを時計回りまたは反時計回りに回転させることができます。

ステップ 1

ロゴの画像ファイルを開きます。任意のファイル形式を使用しますが、ファイルが多層 PSD の場合はレイヤーを結合します。

ステップ 2

回転させたいロゴが完全に収まる大きさのキャンバスを作成します。たとえば、ロゴが幅 300 ピクセル、高さ 200 ピクセルの場合、[ファイル]、[新規] の順にクリックし、画像の高さと幅を 300 ピクセルより大きくします。ロゴやウェブサイトに合う無地の背景を選択してください。たとえば、ロゴが白い背景にある場合は、[背景の内容] に [白] を選択します。

ステップ 3

新しいファイルの名前を入力し、[OK] をクリックして空白の画像キャンバスを追加します。

ステップ 4

[ウィンドウ] メニューをクリックし、ロゴを含むウィンドウを選択します。

ステップ 5

「Ctrl-A」を押して画像全体を選択し、「Ctrl-C」を押してクリップボードにコピーします。

ステップ 6

[ウィンドウ] メニューをクリックし、ロゴを保持するために作成した空白のキャンバスを含むウィンドウを選択します。

ステップ 7

「Ctrl-V」を押してロゴを空白のキャンバスに貼り付けます。

ステップ 8

「Ctrl-E」を押して、貼り付けた画像を背景画像にマージし、2 つではなく 1 つのレイヤーだけを残します。

ステップ 9

現在のレイヤーの複製を 3 つ作成します。 [レイヤー] メニュー、[レイヤーの複製]、[OK] の順にクリックして、元のマージされた画像のコピーを含む新しいレイヤーをそれぞれ作成します。 Photoshop がレイヤーに名前を付けます。

ステップ 10

レイヤー パネルの上部にあるリストから最初のレイヤーを選択し、[編集] メニュー、[変換]、[時計回りに 90 度回転] の順にクリックします。

ステップ 11

リストの 2 番目のレイヤーを選択し、[編集] メニュー、[変換]、[180 度回転] の順にクリックします。

ステップ 12

リストの 3 番目のレイヤーを選択し、[編集] メニュー、[変形]、[反時計回りに 90 度回転] の順にクリックします。作業を保存します。

ステップ 13

[ウィンドウ] メニュー、[タイムライン]、[ビデオ タイムラインの作成] ボタンの順にクリックして、タイムライン パネルをプロジェクトに追加します。タイムライン パネルには、ロゴの 4 つのレイヤーがすべて含まれています。レイヤーが 3 つしか表示されない場合は、元のレイヤーのロックを解除してください。

ステップ 14

継続時間を 5 フレームに設定して、各レイヤーの表示時間を短縮します。タイムラインの各レイヤーの右端をマウスでクリックしたままにして、「デュレーション」設定が「00.05」になるまで端を左にドラッグします。フレームが少ないほど、アニメーションが速く回転するように見えます。

ステップ 15

タイムラインの一番下のレイヤーはそのままにしておきます。タイムラインの一番下のレイヤーのすぐ上にあるレイヤーの中央をクリックしたまま、レイヤー全体を右にドラッグして、左側が一番下のレイヤーの右端に揃うようにします。レイヤーが移動ではなくサイズ変更される場合は、「Ctrl-Z」を押して再試行してください。

ステップ 16

タイムラインの一番下のレイヤーの上にある 2 番目のレイヤーをクリックしたままにして、レイヤーの左側がその下のレイヤーの右端と揃うまでレイヤーを右に移動します。

ステップ 17

タイムラインの一番上のレイヤーをクリックしたまま、レイヤーの左側がその下のレイヤーの右端に揃うまで、レイヤーを右にドラッグします。

ステップ 18

「再生」ボタンを押してアニメーションをプレビューします。

ステップ 19

[ファイル] をクリックしてから [Web 用に保存] をクリックします。

ステップ 20

[ループ オプション] ドロップダウン リストをクリックし、[永久] を選択して、回転が止まらないアニメーション ロゴを生成します。

ステップ 21

[保存] をクリックし、[最適化を名前を付けて保存] ダイアログ ボックスで [保存] をクリックします。アニメーションを表示するには、作成した GIF ファイルを Web ブラウザで開きます。

ヒント

画像間の増分変化が小さいレイヤーを追加して、ロゴが滑らかに回転するように見せます。

警告

この記事の情報は、Photoshop CC 14.2.1 に適用されます。 Photoshop の他のバージョンでは、多少または大幅に異なる場合があります。