【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・2

【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・2

WEBデザインに質感を出して豪華にできる「パターンオーバーレイ」用のパターンを自作する!

引き続き、「パターンオーバーレイ」の作成方法です。(前の生地→【Photoshop】WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法・1) この「パターンオーバーレイ」は、デフォルトでたくさんのパターンが登録されています。しかし、自分の好みのものは、ほとんどありませんでした。そこで、あらかじめ自作パターン登録して使用するようにしました。すると、簡単にデザインの幅が拡がるので、すごく重宝しています!

完全自作の場合は「送り(繰り返し・リピート)」のあるデザインを作成する

はよく見かける「木目」のテクスチャ・パターンを作成します。背景全体に木目を使用するときは、横目のほうがいいですね。素材は無料のものをダウンロードしました。

木目パターン素材の作り方

素材の明るさが一定ではなかったりするので、よい部分だけ切り出します。

木目パターン素材の作り方

明るさを均一にします。

木目パターン素材の作り方

横にコピーして、端をマスクでぼかします。

木目パターン素材の作り方

ぼかしたレイヤーを左にずらし重ねてなじませます。なじませたら、右端にガイドをおいておきます。そして、この2つのレイヤーをそのまま複製し、右にずらします。目印は、右側のガイドに、元の木目レイヤーの右端を合わせます。

木目パターン素材の作り方

このガイドの間がパターンになります。

木目パターン素材の作り方

木目のラインで切り取れば、縦方向へのリピートは合わせなくても自然になります。念のため、明るさが自然か確認し、調整します。

木目パターン素材の作り方

調整できたら(元のパターンサイズに戻し)これをパターン登録します。これで完成です。

木目パターン素材の作り方

実際にパターンを使用してみました。なんか不自然な部分もある気がしますが(笑)もう少し丁寧に作りこめば問題ないと思います!基本的にパターンは背景に使用するので、あまり気にならないと思います。

また、コルクなんかも同じように作成することができますね。今回の木目とコルクです。

木目パターン素材コルクパターン素材

手書きで「送り(繰り返し・リピート)」のあるデザインを作成する

クレヨンで書いたようなポップな背景を作成するなら、まずこのようにパターン化するエリア(紫線)からはみ出しながら、ブラシなどで好きなように描きます。

手書き

その描いたレイヤー全体を、左右・上下・斜め全方向にコピーします。アタリでラインを入れておけば、楽に位置取りできます。

はじめに決めたパターン化するエリアのみを切り取り、パターン登録します。

こんな感じになります。とても適当に作ったので、なんか色味が微妙ですが(笑)これも丁寧に作れば、オリジナルのパターンができますね!

パターンを作成するコツは、コーディングのことも考え、できるだけ小さいパターンにする

Photoshopで背景にパターンを使用してデザインを制作します。このときはデザイン「カンプ」状態ですね。そしてこれをWEBサイトとしてコーディングするときは、cssでbackgroundで指定して使うのが一般的です。(※bg.gifは仮名です)

background:url("images/bg.gif");

背景の横方向・縦方向に無限にリピートされるcssのコードです。このようにリピート画像は、できるだけ容量サイズが小さい方が、WEBサイトが重くならずに済みます。なので、パターンを作成する時は、コーディングのことも考え、できるだけ小さいパターンにするといいと思います。

作成したパターンは、Photoshopで「パターン登録」するとともに、元データも保管しておきましょう。サイトの背景に指定する際に、gifもしくはjpg画像を書き出さないといけませんよね。

以上が、WEBデザインで簡単に質感が出せる、便利な背景パターンの作成方法でした。テスト素材といえど、もっと丁寧に作成すればよかったですね!(反省)ぜひ、参考にしてみてくださいね。

あなたもフリーランスはじめませんか?

フリーランスのデザインのお仕事探しのお手伝いをしてくれるサイトです。専門のエージェントも!登録は無料なので、まずは気軽に登録してみてくださいね。
※デザインのお仕事を見てみる⇒レバテッククリエイター

この記事が参考になったら応援よろしくお願いします!

次におすすめな関連記事はこちら

コメントを残す

メールアドレスが公開されることはありません。