WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はーちゃん
カテゴリー： デザイン >Photoshop

スイーツのバナーやカフェのポスターなどで、以下のように背景がフルーツやチョコなどで埋め尽くされているデザインを目にしたことはありませんか？

今回はPhotoshopのパターン機能を使って、背景を任意のモチーフで埋め尽くす方法をご紹介します。

埋め尽くしたいモチーフを用意する

まずは背景を埋め尽くしたいモチーフの切り抜き画像を用意します。
今回はいちごがいくつか並んでいる画像にしました。

パターンを定義する

モチーフを用意できたら、これをパターンとして登録していきます。
このままだと周りの余白が少し大きいため、ツールバーにある「長方形選択ツール」を使って、パターンとして登録したい範囲を囲んでいきます。

今回は以下の点線の範囲を選択しました。

選択範囲を登録するために、メニューバーから「編集 → パターンを定義」をクリックします。

以下のように、パターン名をつけることができるので、わかりやすい名前を入力して「OK」をクリックします。
今回は「いちご」にしました。

すると、以下のようにパターンパネルに「いちご」が登録されました。

「塗りつぶし」で背景をモチーフで埋め尽くす

ここから、先ほど登録した「いちご」のパターンを使って背景を埋め尽くしていきます。

まず、任意のサイズのキャンバスを用意します。

背景を作るために、レイヤーパネルから「新規レイヤーを作成」をクリックします。

いちごで埋め尽くすために、今追加したレイヤーを選択した状態のまま、メニューバーから「編集 → 塗りつぶし」をクリックします。

すると、「塗りつぶし」パネルが表示されるので、以下の内容を設定して「OK」をクリックします。
ここでは、パターンの中から先ほど登録した「いちご」をランダムに配置するように設定しています。

その次に、「ランダム塗り」パネルが表示されるので、以下の内容で設定をして「OK」をクリックします。
・密度：値が大きいほどモチーフで埋め尽くされ、値が小さいほどモチーフの数が少なくなるため、隙間ができます。
・最小/最大パターン比率：ランダムに配置されるモチーフのサイズの最小と最大を設定できます。今回は全て同じ大きさにしたかったので、どちらも同じ値に設定しています。
・パターン回転：チェックを入れると、いろいろな角度の「いちご」のモチーフで埋め尽くされます。
・カラー/明るさのランダム度：値を大きくするほど、ランダムに表示されるモチーフの色相/明るさの差が大きくなります。

上記の設定で、いちごで埋め尽くされた背景を作ることができました。
「ランダム塗り」パネルで設定した値は、使いたいモチーフやキャンバスのサイズによって変わるので、ぜひ皆さんのお好みの設定になるように調整してみてください。

今回はいちごソフトのポスター風になるように、レースのあしらいを追加したり、マスクをかけたりしてみました。
こちらで完成です！

まとめ

今回はPhotoshopのパターン機能を使って、背景を任意のモチーフで埋め尽くす方法をご紹介しました。
インパクトを与えたいときや、商品に使われている材料のこだわりを表現するときにおすすめの表現なので、ぜひ皆さん試してみてください！