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ライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。