初心者の為のPhotoshopの解説サイトです。画像の切り抜きや合成の方法などを
写真付きでわかりやすく解説しています。
これからPhotoshopを勉強したい、復習したいと思っている方に役立つサイトです。 |
TOP >イチゴバナー |
イチゴバナー |
画面左上から「ファイル」→「新規」を選択しファイル名の欄に 「バナーの作り方」と入力し カンバスサイズの幅は640ピクセル、高さは300ピクセルに設定し OKボタンを押します。⇩ 横長のカンバスが新規作成されます。 ⇩ 画面左の描画色をクリックし描画色を「#e9a6a6」と好みの色に設定しOKボタンを 押します。次にキーボードの「Altキー」を押しながら「Deleteキー」を押します。 ⇩ 描画色で背景が塗りつぶされました。 ⇩ 次にバナーの中に画像(素材)を入れてみます。 イチゴの画像を開きます。 ⇩
画面上の「バナーの作り方」のタブの右横に新規画像のタブが開き
イチゴの画像が開いている
状態です。
⇩ メニューバーの「レイヤー」→「レイヤーを複製」をクリックします。 ⇩ 「レイヤーを複製」のダイアログボックスが出るので新規名称をイチゴ、 保存先を最初に作成した新規ファイルの「バナーの作り方」を選択してOKボタンを クリックします。 ⇩ レイヤー1の名前を「イチゴ」に変更します。 色が塗られた背景の上にイチゴのレイヤーがある状態になっています。 ⇩ 画面左上の移動ツールをクリックしバナーの左上にあるイチゴの画像 をキーボードの「Altキー」を押しながら右方向へドラッグすると 図のようにコピーできます。 ⇩ キーボードの「Shiftキー」を押しながら「イチゴ」のレイヤー名を クリックするとイチゴのレイヤーとイチゴのコピーのレイヤーが 両方選択された状態になります。 ⇩
上の図の長方形の中(イチゴの間)でキーボードの「Altキー」を押しながら下方向へドラッグすると
図のようにコピーでき4つのイチゴができました。
レイヤーの状態はコピーのレイヤーが3つ作成され計5つになっています。
⇩ 画面左の横書き文字ツールを選択し文字の色は白に設定します。 メニューバーの書体と文字のサイズも好みの色に設定して 文字を入力します。 ⇩ 画面上に○×ボタンがあるので○ボタンを押して文字入力を確定し 移動ツールで位置を中央に移動します。 ⇩ レイヤーパレットの下の「新規レイヤーを作成」をクリックし 「グラデーション」という名前に変更します。 ⇩ 画面左のグラデーションツールをクリックします。 メニューバー下のオプションツールバーで好みのグラデーションの種類を設定します。 ⇩ バナーの左上の辺りから右下に直線を引きます。 ⇩ バナーに設定したグラデーションが適用されます。 ⇩ このグラデーションを下のレイヤーの文字だけに適用します。 レイヤーパレットのグラデーションのレイヤーの上で「右クリック」 →「クリッピングマスクを作成」をクリックします。 ⇩ 文字だけにグラデーションが適用されバナーが出来ました。 ⇩ ホームページに120×60のサイズのバナーで掲載するとします。 メニューバーの「イメージ」→「画像解像度」をクリックします。 ⇩ 「画像解像度」で縦横比を固定のチェックを外して幅:120ピクセル、高さ60ピクセル、解像度72に設定し OKボタンを押します。 ⇩ 120ピクセル、高さ60ピクセルの大きさに変更されました。 ⇩ メニューバーの「ファイル」→「Web用に保存」をクリックします。 ⇩ 「Web用に保存」の画面が出るので下の保存ボタンをクリックします。 ⇩ 保存先は任意の場所を選びます。ファイル名は任意の半角英数字の名前を入力します。 フォーマットは「画像のみ」を選択して保存を押します。 ⇩ これで保存先にサイズ変更したバナーが完成しています。 ホームページにimgタグで画像を貼ると以下のように表示されます。
■ その他の項目・ ボタン |