くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Photoshop]見出し画像・バナー画像のつくり方

Photoshopの練習に、見出し画像を2種類作りました。

日比谷花壇さんのサイトがお手本です。
言葉や配置構成など一部はそのまま使用させて頂きました。(画像は無料画像を利用)

 

f:id:pleasure10501:20150421195816p:plain

備忘録の為のポイントとつくり方のメモです。

  • 画像は切り抜いた後、フチをガウスぼかしで処理
    ①長方形ツールで範囲を選択し、②選択範囲を変更 ③境界をぼかす ④ぼかしの半径数を入力 →長方形の角が丸くなる ⑤Ctrl+Shift+Iで選択範囲を反転 ⑥フィルターのガウスぼかしメニューを選択 ⑦半径数値を入力

 

  • メッセージ文字は白い縁取りをつける。
    レイヤー効果の「境界線」メニューから。色は白、位置は外側。サイズは控えめに(2px)。

    f:id:pleasure10501:20150421201007p:plain

 

  • 「ギフト一覧はこちら」のピンクの背景は、不透明度を80%にして透け感を出す

 

f:id:pleasure10501:20150421202524p:plain

  •  「FLORIGE PLANT」はドロップシャドウをつける。かすかに影が見えるくらいのサイズ。
  • 「観葉植物」は黒の正方形のレイヤーの上に文字レイヤーを重ねる
  • 背景画像の右側部分は、白から透明のグラデーションを何度かかけて、徐々に不透明にする