Adobe「Photoshop CS3」の利用方法 【手順2.バナー画像の作成】

 本ページは情報が古いです。最新の対応方法のページはこちら
1.バナー画像作成の準備  2.バナー画像の作成  3.文字の入力

1.バナー画像作成の準備

全体のレイアウトを決める
  まず作成するバナーとメニューの大きさ、位置を決めます。その際に、「ガイド」を利用すると便利です。
  ガイドとはPhotoshopでの作業を補助する為の線で、ガイドが表示されていてもガイドは自体は印刷されません。
  ガイドを使用するには、画面上に定規が表示されていなければならないので、まず定規を表示させます。

1.ビュー>定規を選択
  

2.表示された定規目盛りの部分からドラッグするとガイドが出てきます。
  ・横線のガイドは上の定規からドラッグし、縦線のガイドは横の定規からドラッグします。(今回は横線のガイドのみ使用)
  ・不要なガイドを消す場合には、任意のガイドを定規目盛りの中へドラッグします。
  ・全てのガイドを隠す場合には「ビュー」から「エクストラ」のチェックを外します。
  注)「ビュー」>「ガイドを消去」を選択すると、全てのガイドが消えます。
  

  以下はガイドを配置した状態です。(最初は基本的なレイアウトだけにしておきます)
  

3.次にバナーの範囲をチャンネルとして保存する作業を行いますが、その前に以下の2点に
  チェックが入っているか確認しておきます。
  ・ビュー>スナップ
  ・ビュー>スナップ先>ガイド
  ※チェックはその項目を選択することにより、チェックのON/OFFが切り替わります。
  

4.確認を終えたらツールパレットからを選択し、作成したガイドの一番外側のラインに沿わせた選択範囲を作成します。
  ・選択範囲の作成に失敗した場合は選択範囲>選択を解除
  

5.選択範囲ができている状態でパレットのチャンネルのタブをクリックし、の「選択範囲をチャンネルとして保存」を
  クリックします。
  以下の右側がアルファチャンネルが作成された状態です。(これで、いつでも保存した選択範囲を呼び出すことが出来ます)
  

2.バナー画像の作成

1.バナー並びにメニューの位置と大きさが決まったら、画像を配置し合成していきます。
  (使用する画像はあらかじめ用意しておきます)
  

  (1)配置する画像をPhotoshopで開きます。ファイル>開くを選択し、任意の画像を選択。
  (2)画像が開いたら、「選択範囲」>「すべてを選択」し、「編集」>「コピー」を選択。
  (3)次にガイドを配置したファイルを選択し、のチャンネルのタブをクリック。
  (4)先ほど作成したアルファチャンネルを、 の「チャンネルを選択範囲として読み込む」ところへドラッグします。
  

2.選択範囲が呼び出されたので画像を貼り付けます。
  ・編集>選択範囲内へペーストを選択
  

  以下は画像を張り付けた状態です。
  レイヤーのタブをクリックして確認します。レイヤーマスク(黒い部分)が作成されていることがわかります。
  これで、画像を拡大しても位置を動かしても、この画像がマスクの外へはみ出して表示されることはありません。
  

3.上記と同じ要領で必要な画像を貼り付けます。
  (画像をコピー>チャンネルから選択範囲を読み込む>選択範囲内へペースト)
  以下は画像を貼り付け並び替え、レイヤーの重なりも変更した状態です。
  (レイヤーの重なりを変更するには、レイヤーパレットから任意のレイヤーを
   左クリックでつかみ任意の場所へドラッグします)
   
  ※「選択範囲内へペースト」がグレー表示で選択出来ない場合には、レイヤータブの中から、
  いずれかのレイヤーを選択してからやって下さい。(選択したレイヤーの上に、貼り付けられた状態の
  レイヤーが作成されます)

4.貼りつけた画像を加工します。
 <拡大・縮小>
  (1)拡大する場合は、ポインタを画像の四隅のいずれかの□に持ってくるとポインタの形が変わります。→
  (2)ポインタがの形に変わったら、「Shift」キーを押しながら対角線上にドラッグします。
  (3)サイズが決まったら「Enter」キーを押すと確定されます。(拡大も縮小も要領は同じです)
  注)「Shift」キーを押しながらドラッグしないと、縦横の比率が保てません。
 <回転>
  (1)回転させる場合は、ポインタを画像の四隅のいずれかの□の外側に持ってくるとポインタの形が変わります。→
  (2)ポインタがの形に変わったら、回転させたい方向へドラッグします。
  (3) 位置が決まったら「Enter」キーを押すと確定されます。
  

  以下は拡大・縮小、回転させ配置を調整した状態です。
  
  しかし、このままでは文字を配置しても、文字が目立たななくなるのでもう少し手を加えます。

5.次に一番上に新規レイヤーを作成します。
  ・一番上のレイヤーを選択>レイヤーパレットの右下「新規レイヤーを作成」のボタンをクリック。
  

6.新規に作成したレイヤーに塗りつぶす範囲を設定します。
  多少変化を持たせるために、選択範囲を少し小さくします。(上下少し内側のガイドに沿わせる)
  

7.範囲選択が出来たら塗りつぶす色を設定します。
  (1)ツールパレットの下の「描画色を設定」をクリック>
  (2)カラーピッカーから任意の色を選択>
  (3)「OK」をクリック>
  (4)「レイヤー1」が選択されていることを確認しておきます


8.塗りつぶしの実行とレイヤーの不透明度の変更を行います。
  (1)ツールパレットから「塗りつぶしツール」を選択>
  (2)点滅している選択内をクリック>
  (3)レイヤーパレット右上の「不透明度」のをクリックし、スライダーを動かし不透明度を変更(数値入力可)し、
    色が決まったら確定する為に「Enter」キーを押します。>
  (4)選択範囲から「選択範囲を解除」を選択。
  

  以下は不透明度を変更した状態です。
  

3.文字の入力

1.文字を入力します。
  (1)レイヤーパレットから一番上のレイヤーを選択
  (2)ツールパレットから描画色を設定
  (3)ツールパレットから「横書き文字ツール」を選択し、文字を配置したい場所でクリック
  (4)カーソルが点滅するので任意の文字を入力
  ※文字を各レイヤーに分けたい場合は、文字を入力後、ツールパレットから移動ツールなどを選択し、
   一旦文字入力を解除し再度「横書き文字ツール」を選択し文字を入力して下さい。
  

  以下は、文字の編集配置を終えた状態です。
  
  ※文字の拡大・縮小、回転も「バウンディングボックス」で行えます。

 <文字色を入力後に変更したい場合>
  (1)変更したい文字を「横書き文字ツール」などを使用して選択
  (2)ツールオプションバーのカラーをクリック
  (3)カラーピッカーで任意の色を選択しOKをクリック

  次はメニューを作成します。メニューの作成方法はこちらです。