PhotoshopマスターTOPページへ

初心者の為のPhotoshopの解説サイトです。画像の切り抜きや合成の方法などを 写真付きでわかりやすく解説しています。
これからPhotoshopを勉強したい、復習したいと思っている方に役立つサイトです。
TOP >イチゴバナー

イチゴバナー

画面左上から「ファイル」→「新規」を選択しファイル名の欄に 「バナーの作り方」と入力し カンバスサイズの幅は640ピクセル、高さは300ピクセルに設定し OKボタンを押します。

新規ファイル設定

横長のカンバスが新規作成されます。

新規カンバス

画面左の描画色をクリックし描画色を「#e9a6a6」と好みの色に設定しOKボタンを 押します。次にキーボードの「Altキー」を押しながら「Deleteキー」を押します。

描画色を設定

描画色で背景が塗りつぶされました。

#e9a6a6の色で塗りつぶし

次にバナーの中に画像(素材)を入れてみます。 イチゴの画像を開きます。

イチゴ画像を開く

画面上の「バナーの作り方」のタブの右横に新規画像のタブが開き イチゴの画像が開いている 状態です。
gif形式の画像を開いてレイヤー名が「インデックス」となっている場合は メニューバーの「イメージ」→「モード」→「RGBカラー」を選択しておきます。

イメージモードをインデックスからRGBカラーに。

メニューバーの「レイヤー」→「レイヤーを複製」をクリックします。

レイヤー複製を選択する

「レイヤーを複製」のダイアログボックスが出るので新規名称をイチゴ、 保存先を最初に作成した新規ファイルの「バナーの作り方」を選択してOKボタンを クリックします。

新規名称をイチゴ、ドキュメント一覧からバナーの作り方を選択

レイヤー1の名前を「イチゴ」に変更します。 色が塗られた背景の上にイチゴのレイヤーがある状態になっています。

背景レイヤー上にイチゴ

画面左上の移動ツールをクリックしバナーの左上にあるイチゴの画像 をキーボードの「Altキー」を押しながら右方向へドラッグすると 図のようにコピーできます。

イチゴを一つ複製

キーボードの「Shiftキー」を押しながら「イチゴ」のレイヤー名を クリックするとイチゴのレイヤーとイチゴのコピーのレイヤーが 両方選択された状態になります。

2つのレイヤーを選択

上の図の長方形の中(イチゴの間)でキーボードの「Altキー」を押しながら下方向へドラッグすると 図のようにコピーでき4つのイチゴができました。 レイヤーの状態はコピーのレイヤーが3つ作成され計5つになっています。
移動ツールを解除するにはレイヤーパレットの「背景」や画面左端の他のツールを1度クリックすると 解除できます。 これを背景の上の飾り付けとします。

背景レイヤー上に4つのイチゴ

画面左の横書き文字ツールを選択し文字の色は白に設定します。 メニューバーの書体と文字のサイズも好みの色に設定して 文字を入力します。

横書き文字ツールで文字を書く

画面上に○×ボタンがあるので○ボタンを押して文字入力を確定し 移動ツールで位置を中央に移動します。

文字の位置を中央に移動

レイヤーパレットの下の「新規レイヤーを作成」をクリックし 「グラデーション」という名前に変更します。

新規レイヤーを作成しグラデーションと名前をつける

画面左のグラデーションツールをクリックします。 メニューバー下のオプションツールバーで好みのグラデーションの種類を設定します。

グラデーションツールから種類を選択

バナーの左上の辺りから右下に直線を引きます。

バナー上に斜め線を引く

バナーに設定したグラデーションが適用されます。

グラデーションが適用

このグラデーションを下のレイヤーの文字だけに適用します。 レイヤーパレットのグラデーションのレイヤーの上で「右クリック」 →「クリッピングマスクを作成」をクリックします。

クリッピングマスクを作成をクリック

文字だけにグラデーションが適用されバナーが出来ました。

文字だけにグラデーションが適用される

ホームページに120×60のサイズのバナーで掲載するとします。 メニューバーの「イメージ」→「画像解像度」をクリックします。

画像解像度をクリック

「画像解像度」で縦横比を固定のチェックを外して幅:120ピクセル、高さ60ピクセル、解像度72に設定し OKボタンを押します。

幅120ピクセル、高さ60ピクセル、解像度72に設定

120ピクセル、高さ60ピクセルの大きさに変更されました。

120ピクセル、高さ60ピクセルにサイズ変更される

メニューバーの「ファイル」→「Web用に保存」をクリックします。

Web用に保存

「Web用に保存」の画面が出るので下の保存ボタンをクリックします。

保存ボタンをクリック

保存先は任意の場所を選びます。ファイル名は任意の半角英数字の名前を入力します。 フォーマットは「画像のみ」を選択して保存を押します。

ファイル名を入力しフォーマットを選ぶ

これで保存先にサイズ変更したバナーが完成しています。 ホームページにimgタグで画像を貼ると以下のように表示されます。

ホームページバナーの完成

このエントリーをはてなブックマークに追加

■ その他の項目

ボタン


TOP

Copyright (C) 2015-2017 Photoshopマスター All rights reserved.