この文書は、Photoshop CS の基本的な使用方法を分かりやすく図解した内容となっています。

 

バナーとはホームページの宣伝用に作られた画像です。

 

静止画像や、アニメーション GIF のように動きにあるものまで複数の種類とサイズがあります。

バナーとは ...

 

 

バナーとは、ホームページの宣伝になるように作られた画像のことです。直訳すると、たれ幕、旗という意味があります。

バナーにはさまざまなサイズがあります。目的や、掲載できるスペースにあわせて、サイズを設定してからバナー作りをはじめましょう。

 

名称

サイズ

名称

サイズ

Full Banner

468×60

Wide Skyscraper

160×600

Half Banner

234×60

Skyscraper

120×600

Micro Bar

88×31

Half Page Ad

300×600

Button1

120×90

Medium Rectangle

300×250

Button2

120×60

Square Pop-up

250×250

Vertical Banner

120×240

Vertical Rectangle

240×400

Square Button

125×125

Large Rectangle

336×280

Leaderboard

728×90

Rectangle

180×150

 

 

Photoshop CS で、バナーに使用する素材を作成します。

※ ここでは例として、下図のようなハーフバナーと呼ばれる [234 pixel x 60 pixel] サイズのバナーを作成します。ファイル作成時、カンバスのサイズを、[234 pixel x 60 pixel] に設定し、4 つのレイヤーから構成されるファイルを作成します。

 

 

 

 

 

 

[ツールボックス] の [ImageReady で編集] をクリックします。

 

 

 

 

 

ImageReady が起動し、Photoshop CS で編集していた PSD ファイルが開きます。

 

 

 

 

[アニメーション] パレットメニューの [レイヤーからフレームを作成] をクリックします。

※ [アニメーション] パレットが表示されていない場合は、[ウィンドウ] メニューの [アニメーション] をクリックします。

 

 

 

 

 

レイヤーから新規フレームが作成されます。

※ 各フレームで表示/非表示にしたいレイヤーがある場合は、[レイヤー] パレットで変更することができます。

 

 

 

 

 

フレーム切り替え時の効果を設定します。

フレーム [1] をクリックし、[トゥイーン] をクリックします。

 

 

 

 

 

 

[トゥイーン]、[追加するフレーム]、[レイヤー]、[パラメータ] を設定し、[OK] をクリックします。

 

トゥイーン

選択したフレームと、どのフレームの間に効果を設定するか選択します。

追加するフレーム

フレーム間に挿入するフレーム数を入力します。

レイヤー

効果を設定するレイヤーを選択します。

パラメータ

位置 :

トゥイーンを設定するフレーム間で新規フレームのレイヤーの位置を均等に変化させます。

不透明度 :

トゥイーンを設定するフレーム間で新規フレームの不透明度を均等に変化させます。

効果 :

トゥイーンを設定するフレーム間でレイヤー効果のパラメータ設定を均等に変化させます。

 

※ここでは例として、下図のように設定します。

 

トゥイーンとは

レイヤーの位置、不透明度、効果のパラメータを均等に変化させ、動いているかのように見える効果を付けた一連のフレームを、2 つの既存フレームの間に自動的に追加することができる機能です。

 

この機能を使用すれば、フェードインやフェードアウト、またはフレーム間での画像の移動などのアニメーション効果の作成にかかる時間を大幅に短縮することができます。

 

 

 

 

選択したフレームと次のフレームの間に、トゥイーンの設定がされました。

 

その他に、切り替え時にトゥイーンを設定したいフレームがある場合は、Step 7 ~ Step 8 に従い効果を設定します。

 

 

 

 

 

 

各フレームの [0秒 ▼] をクリックし、それぞれ表示する秒数を設定します。

 

 

 

 

 

 

 

[無限 ▼] をクリックし、再生回数を設定します。

※ここでは例として、[無限] に設定します。

 

 

 

 

 

 

 

フレーム [1] をクリックして選択し、[アニメーションの再生 / 停止] をクリックして動作を確認します。

※ファイルの [元画像] タブでプレビューされます。

 

 

 

 

 

 

 

設定が完了したら、[ファイル] メニューの [最適化ファイルを保存] をクリックします。

 

 

 

 

 

 

[保存する場所] と [ファイル名] を任意で設定し、[保存] をクリックします。

 

 

 

 

 

 

 

GIF 形式でファイルが保存されました。ダブルクリックして確認してみましょう。

※ Photoshop CS でファイルが開かれ、動作を確認できない場合は、Internet Explorer などのブラウザにファイルを直接ドラッグ & ドロップしてみてください。

 

 

 

 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー