PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【Photoshop】 連続する背景画像を作る

Photoshopを使用して、連続する背景画像を作ります。

全方向に連続した画像を作る。

f:id:game-web-design:20140910112629p:plain

ページの背景に全方向に連続した背景画像を作ります。今回は雲の画像を作ります。

  1. 新規レイヤーを400*400pxで作ります
  2. カスタムシェイプツールから雲を選び、真ん中ぐらいに描きます。
  3. 水色っぽい色で塗ります。
  4. 雲のシェイプマスクをサムネールからCtrl+クリックで選びます。
  5. 新しいレイヤーを作り、その状態で同じ色で塗ります。
  6. フィルターメニュから、その他>スクロースを指定。
  7. 水平方向、垂直方向にそれぞれ200pxに指定します。

f:id:game-web-design:20140910122440p:plain




縦方向にラップアラウンドした画像を作る。

縦方向に連続した背景画像を作ります。今回は右側に山が連なって見える画像を作ります。

f:id:game-web-design:20140910120420p:plain

  1. 新規ファイルを160*34pxで作ります。
  2. 新規レイヤーを作ります。
  3. 楕円形選択ツールで、右端からシフト押しながらドラッグし、丸い領域を作ります。
  4. オレンジ色で塗ります。(Alt+BackSpace)
  5. 円の端の真ん中あたりからから上下を網羅し、長方形選択ツールで左端まで選択する。
  6. 円と同じオレンジ色で塗ります。
  7. 2~6で編集しているレイヤーを複製します。
  8. 7で複製したレイヤーを「透明ピクセルをロック」し、濃いオレンジ色を塗ります。
  9. 編集メニューかCtrl+tで、自由変形ツールで7の画像の幅を少し狭めます。
  10. 作った二つのレイヤーを結合します。
  11. フィルターメニュから、その他>スクロースを指定。
  12. 垂直方向に17pxを指定します。

f:id:game-web-design:20140910122508p:plain