WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： スーザン
カテゴリー： マークアップ >テクニック

コーディング時に使用するパターン背景で、単純なデザインだとリピートしている場所がわかりやすいのですが、複雑なデザインはリピートの場所や書き出すサイズが一目ではわからないことがあります。
今回は、簡単にパターンのリピート部分を調べてスライスパーツを作成する方法をご紹介していきます。

Photoshopファイルを開く

まずは、対象のPhotoshopファイルを開きます。
今回は細かい花柄を背景としました。

レイヤーパネルの背景レイヤーを選択して
効果の「パターンオーバーレイ」をダブルクリックします。

レイヤースタイルパネルが出てくるので、
画像のようにパターンサムネイルが出ている部分にカーソルを合わせてhoverします。

その時、黄色い四角になっている部分に文字がでてきます。
「壁紙系07（480×640ピクセル、RGBモード）」の部分です。

この「480×640ピクセル」というのが元となるパターンのサイズとなります。

背景用のパターンパーツ

コーディングの時に必要な、背景画像を作成します。

新規で「480×640px」のファイルを作成します。

背景レイヤーをダブルクリックしてレイヤー0にします。
（480×640pxのシェイプレイヤーを作成してもOKです。）

レイヤー0をさらにダブルクリックし、先程調べたパターン効果を同じようにつけます。

完成したらこのままのサイズで書き出しをすれば、背景用パーツの出来上がりです。

まとめ

こちらの方法を使用するとスライスずれが起きず、きれいなパーツ画像を作成することができます。
スライス画像だけでなく、以前ご紹介したPhotoshopのパターンを使ってみようも是非試してみてください。