Photoshopで背景画像を切り抜く

2867 ワード
CSS 速動改善 photoshop background CSS テキストリンク

問題点：PSDのデザインは最大の画面サイズではありません。 したがって、PSDからバックグラウンド全体をカットすると、バックグラウンドは繰り返されますが、破損します。

ベストプラクティス：元の画像パターンのみをカットします（利点：小さな画像サイズの結果、ページの読み込み時間が短くなります）

①背景画像カッティングプロセス

STEP 1. PhotoshopでオリジナルのPSDを開く (例：元の背景画像のサイズ→ 1000 x 700 px)

背景画像のパターンコピーする手順

STEP 1. クリックPattern Overlay(2) > クリックPattern Overlay > (3) クリックcopy pattern (4)

STEP 2. コピーしたパターンにマウスを合わせて元のパターンサイズ（283 × 283 px）を確認し、サイズを覚えておいてください。

STEP 3. 背景レイヤーを新しいページに複製します。

STEP 4. 背景の矩形形状（1000 x 700 px → 283 x 283 px）のサイズを変更し、Radius（半径）を15px → 0）を削除します。 背景（bg-charm.png）イメージをトリムして保存します。


元と背景画像：(1000 x 700px)

repeat外した背景画像：(283 x 283px)

②PC / SP用のビューポート互換コーディング(CSS):

PCの場合:

CSS
.charm-bg {
  background: url('img/charm/bg-charm.png') repeat top left;
}

SPの場合:

CSS
.charm-bg { 
  background: url('img/charm/bg-charm.png') repeat top left;
  background-size: 50%;
}