Photoshopで誰でも作れるシェイプを散らした背景テクニック

デザイナーの小貫です。
Web制作中に「こんな感じの素材が欲しいんだけど出来合いのものはちょっとイメージと違う…」と悩んだ時、頼りになるのが数々のPhotoshopの機能です。
うまく活用すれば自作で理想通りの素材をサクッと仕上げられます。
今回はそのうちの一つを使った画像作成法をご紹介します。

こんな背景画像、見たことありませんか？

シェイプがたくさん散ってるような背景画像です。

よく見かけはするけど、自分で作るのは手間がかかりそうで…と思いがちですが、Photoshopを使って簡単に作れます。

かといって手動でシェイプを配置するのは手間がかかる

１つ１つ配置して回転させて配置して…をしてたら日が暮れてしまいます。
そこで、Photoshopのブラシ設定を弄ってお手軽に作ってみます。

手順

用意するもの

• 散らしたいシェイプ
• あればペンタブレット（無くても良いです。今回は無しで）

1.シェイプをブラシとして登録する

今回はこの三つ葉を使います。

シェイプのみの新規画像（背景は透過）を作成して、「編集」> 「ブラシを定義」でブラシとして登録します。

2.ブラシ設定で一手間加える

ブラシツールに切り替えて、「ウィンドウ」>「ブラシ」でブラシの設定画面を開きます。

先程作ったブラシが選択されているのを確認した後、下記設定を行います。
この画面で出てくる「ジッタ―」というのは、「ブラシをどの程度ランダムに変化させるか」の度合いだと思ってもらえれば良いです。

• ブラシ先端のシェイプ > 間隔：150%
• シェイプ > サイズのジッタ―：50%
• シェイプ > 角度のジッタ―：50%
• 散布 > 散布：200%

数値は分かりやすい値にしてあるだけですので、イメージに合わせて変えます。
他にも様々な項目をランダムに変化させる事ができます。
また、ペンタブレットがあれば筆圧にも対応できます。
設定が終わったら、右下のアイコンからブラシを保存しておきます。

3.作ったブラシで塗ってみる

新規画像を作成して、レイヤーを追加。
レイヤー上でブラシを動かして線を引いてみます。
通常であればブラシのシェイプが連続して描画される＝線が描かれるはずですが、ジッタ―設定を行ったことでランダムにシェイプが散らばったかと思います。

あとは何度か塗ってみたり、レイヤースタイルなりで色や透明度を変更して、自分のイメージに近い画像に近づけていきます。
どうしてもイメージと違うという場合は再度ブラシ設定を弄ってみるのも手です。

4.応用編

奥行きのある背景にしたい場合、レイヤーを分けてぼかしと透明度を調整することでそれっぽくなります。 

今後も誰でも作れるPhotoshopの活用術をお送りしたいと思います。