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

スーザン

2019/06/17

【Photoshop】パターン背景のスライスを簡単に作成する方法

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

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

Photoshopファイルを開く

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

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

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

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

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

背景用のパターンパーツ

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

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

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

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

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

まとめ

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

シームレスパターン&テクスチャ写真素材集
江見敏宏
マール社
売り上げランキング: 269,416

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ