DesignTips > 背景・パターン > 1つのパターンからドットと斜線背景を作る方法(Photoshop)

1つのパターンからドットと斜線背景を作る方法(Photoshop)

1つのパターンからドットと斜線背景を作る方法(Photoshop)

Photoshopで1つのパターンからドットと斜線背景を作る方法をご紹介します。

webデザインをしていると背景をどうしようか迷う時がありますよね。無地ではつまらない。でもあまりパターンが主張しすぎるのは好ましくない。

そんな「背景にちょっとしたアクセントをつけたい」という方に最適なTipsです。さらにパターンを1つ作れば、比率を変えることでドットと斜線の印象の異なる背景を作ることができます。

Step01 Photoshop新規画面

Photoshop新規画面

まず、Photoshopを開き、カンバスサイズを100×100pxに設定しOKをクリックします。

Step02 長方形ツールを固定で描画

長方形ツールを固定で描画

長方形ツールで長方形を作成します。

今回は数値が決まっているので[長方形オプション]の[固定]を選択し、50×25pxに設定します。

Step03 長方形を配置

長方形を配置

カンバス上をクリックします。すると50×25pxに固定された長方形がカンバスに描画されます。

同様にカンバス上をクリックして長方形を上図のように配置します。塗りを薄いグレー(#ececec)に変更しておいて下さい。

Step04 長方形と正方形を配置

長方形と正方形を配置

Step02を参考に25×50px(縦長の長方形)と25×25px(正方形)を作成し、上図のように配置します。

カンバス内に長方形と正方形が隙間なく敷きつめられていることを確認してください。

Step05 レイヤーを統合

レイヤーを統合

作成したすべてのレイヤーを統合します。

レイヤーパネル(ウィンドウ→レイヤー)で背景以外のレイヤーを選択し、[右クリック→レイヤーを統合]をクリックします。

(レイヤーの基本操作に関してはPhotoshopのレイヤーの基本を説明をご覧ください。)

Step06 パターンを定義

パターンを定義

統合したレイヤーを選択し、[編集→パターンを定義]をクリックします。

ダイアログが表示されますので、任意のパターン名を入力します。

Step07 Photoshop 新規画面

Photoshop 新規画面

新規ファイルを作成します。

幅、高さを作りたいカンバスの大きさに設定して下さい。例では800×600pxに設定しました。

Step08 塗りつぶす

塗りつぶす

[レイヤー→新規塗りつぶしレイヤー→べた塗り]で適当な色に塗りつぶします。

Step09 パターンオーバーレイを適用

パターンオーバーレイを適用

[レイヤー→レイヤースタイル→パターンオーバーレイ]でパターン横の▾をクリックし、先ほど作成したパターンを選択します。

Step10 比率を変える

比率を変える

比率の割合を極端に落とします。

プレビューにチェックを入れ、変化を見ながら比率を変えていきます。800×600pxのカンバスでは1~10%ほどを目安に動かしてみて下さい。

比率によるパターンの違い

比率によるパターンの違いです。拡大してじっくりと見てみて下さい。3%ではドットに、11%では斜線に見えます。数値を変化させることで細かな違いを表現できますね。

出来上がり!

1つのパターンからドットと斜線背景を作る方法(完成)

完成です!

いかがでしたか?1つのパターンからドットと斜線背景を作る方法をご紹介しました。webデザインなど「背景にちょっとしたアクセントを入れたい」時に適した方法です。

さらに、色調補正の色相を変えることで背景を好みの色に変えることも可能です。色々と応用可能なTipsですのでぜひお試しください。それではまた。

関連記事:Photoshop パターンの作り方

関連記事:Photoshopでカラフルなドット背景を作る方法

Photoshopで作る凹凸ロゴとテクスチャ
ラベルテープ風パーツの作り方(Photoshop)
写真をポラロイド風に加工する方法(Photoshop)
シームレスなパターンの作り方(Photoshop)
ブロンズプレート風フレームの作り方
Photoshop パターンの作り方(ドット)
Photoshopでナチュラルなwebボタンを作る方法
ちょこっと凹んだ猫の足跡のデザイン(Photoshop)
黒板のイラストの作り方(Photoshop)