Photoshopで1つのパターンからドットと斜線背景を作る方法をご紹介します。
webデザインをしていると背景をどうしようか迷う時がありますよね。無地ではつまらない。でもあまりパターンが主張しすぎるのは好ましくない。
そんな「背景にちょっとしたアクセントをつけたい」という方に最適なTipsです。さらにパターンを1つ作れば、比率を変えることでドットと斜線の印象の異なる背景を作ることができます。
まず、Photoshopを開き、カンバスサイズを100×100pxに設定しOKをクリックします。
長方形ツールで長方形を作成します。
今回は数値が決まっているので[長方形オプション]の[固定]を選択し、50×25pxに設定します。
カンバス上をクリックします。すると50×25pxに固定された長方形がカンバスに描画されます。
同様にカンバス上をクリックして長方形を上図のように配置します。塗りを薄いグレー(#ececec)に変更しておいて下さい。
Step02を参考に25×50px(縦長の長方形)と25×25px(正方形)を作成し、上図のように配置します。
カンバス内に長方形と正方形が隙間なく敷きつめられていることを確認してください。
作成したすべてのレイヤーを統合します。
レイヤーパネル(ウィンドウ→レイヤー)で背景以外のレイヤーを選択し、[右クリック→レイヤーを統合]をクリックします。
(レイヤーの基本操作に関してはPhotoshopのレイヤーの基本を説明をご覧ください。)
統合したレイヤーを選択し、[編集→パターンを定義]をクリックします。
ダイアログが表示されますので、任意のパターン名を入力します。
新規ファイルを作成します。
幅、高さを作りたいカンバスの大きさに設定して下さい。例では800×600pxに設定しました。
[レイヤー→新規塗りつぶしレイヤー→べた塗り]で適当な色に塗りつぶします。
[レイヤー→レイヤースタイル→パターンオーバーレイ]でパターン横の▾をクリックし、先ほど作成したパターンを選択します。
比率の割合を極端に落とします。
プレビューにチェックを入れ、変化を見ながら比率を変えていきます。800×600pxのカンバスでは1~10%ほどを目安に動かしてみて下さい。
比率によるパターンの違いです。拡大してじっくりと見てみて下さい。3%ではドットに、11%では斜線に見えます。数値を変化させることで細かな違いを表現できますね。
完成です!
いかがでしたか?1つのパターンからドットと斜線背景を作る方法をご紹介しました。webデザインなど「背景にちょっとしたアクセントを入れたい」時に適した方法です。
さらに、色調補正の色相を変えることで背景を好みの色に変えることも可能です。色々と応用可能なTipsですのでぜひお試しください。それではまた。
(関連記事:Photoshop パターンの作り方)
(関連記事:Photoshopでカラフルなドット背景を作る方法)