初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Photoshop オリジナルヘッダー作成

ヘッダー製作工程

オリジナルのヘッダーを製作しました。下記に手順を記述します。

f:id:bellsmarket:20150123175127p:plain

  1. 写真を任意のサイズにトリミングします。(今回は800px×300px)
    トリミングしたい値を入力します。
    f:id:bellsmarket:20150123180513p:plain

    選択範囲を縮小・拡大しても入力した値が保たれます。

    f:id:bellsmarket:20150123175131p:plain
  2. トリミングした写真の全体を選択し、メニューから【フィルター】→【フィルターギャラリー】を選択し任意で加工します
    f:id:bellsmarket:20150123181828p:plain

    f:id:bellsmarket:20150123181832p:plain
  3. 文字ツールを選択しドラッグ。任意の文字を打ちます
    ※文字ツールを入力中【command ⌘】を押しながらドラッグで移動出来る
    f:id:bellsmarket:20150123175145p:plain
  4. 入力した文字を選択し、 【Alt】+←/→で字間、【Alt】+↑/↓で行間を適切に調整する。
  5. 文字レイヤーを選択。【fx】の【境界線】を選択し、縁取り文字にする
    f:id:bellsmarket:20150123180515p:plain
  6. 文字を読みやすくする為に文字の背面に背景色を付ける。背景レイヤーを選択し不透明度を調整

    f:id:bellsmarket:20150123183430p:plain

  7. 先日作ったイタリアのマップをドラッグ&ドロップで挿入し、大きさ・位置・不透明度を調整して完成です。
    f:id:bellsmarket:20150123175152p:plain
topへ戻る