
今回はこのようなお悩みを解決します!
・Photoshopでおしゃれな装飾を作る手順
Web/UIデザイナー兼フロントエンドエンジニアのかがみ(@cony_tas)です!
デザイナー歴は約10年。
ゲーム会社でアプリのUIデザインやバナーデザイン、Webサイト制作をやっています。
今回は、おしゃれな画像によく使われている、曲線を多用した装飾の簡単な作り方をご紹介します!
一見作るのは難しそうに感じますが、ベースとなるやり方を覚えれば意外とそれっぽく作れちゃいますよ♪
それでは、早速Photoshopを開いて一緒に作ってみましょう!
CONTENTS[ hide ]
Photoshopで飾り枠を簡単に作る方法!
今回は以下の環境で制作していきます。
- Windows10
- Photoshop CC
作る前の準備
最初にPhotoshopを開いて新規ドキュメントを開いてください。
そして、1のペンツールを選択して画像の2の部分が「パス」作成になっていることを確認します。

次に飾り素材を制作する際に分かりやすいように、縦に新規ガイドを作成しましょう。
定規を表示している場合は、マウスカーソルを定規の上からドラッグすることで新規ガイドを呼び出せるので、ドキュメントのセンターに縦の新規ガイドを置いてください。

ペンツールでパスを作成
準備ができたら、ペンツールで飾りの元になるパスを作成していきます。
下の画像のように、ペンツールで曲線を意識して、自由にパスを作成してみてください。

パスで曲線の模様を1つ作成できたら、「シェイプ」を押します。

するとレイヤーに「シェイプ1」が作成されて、ドキュメント上に、作成したパスの形をした模様が1つできました!
基本はこの模様をたくさん作って、飾りにしていきます。

下の画像は模様をいくつか作成して、組み合わせた状態になります。
コツとしては曲線の流れにそって模様を追加していくと綺麗な飾りが作れますよ♪

飾りを反転させて時短
良い感じに模様の組み合わせができてきたら、レイヤー上にある大量のシェイプを一旦グループでまとめます。
シェイプをすべて選択してください。

そしたら下記のように操作して、シェイプを複製しましょう。
- 1.シェイプをすべて選択してグループ化
- 2.グループを複製する
- 3.複製されたグループを選択する

選択したシェイプのグループをまるごと変形します。
変形の基点を画像のように移動させ、「水平方向に反転」をクリックしてください。

複製したグループのシェイプを反転すると、下のように綺麗な左右対称の飾りの原型ができあがります♪
左右対称に作成する場合、片側だけパスとシェイプを作成すればいいので、楽ですよね。

ちなみにですが、もとのシェイプグループと反転させたシェイプグループを両方選択⇒コピーして、「垂直方向に反転」を押すと、下の画像のように上下左右対称の飾りを作ることもできます。笑

レイヤースタイルを適用
最後にレイヤースタイルで簡単に見た目を装飾していくので、すべてのシェイプを選択して、「シェイプを結合」を選択して結合してください。

結合したシェイプを選択して「レイヤースタイル」をクリックします。
グラデーションや光彩などで、自由にシェイプにレイヤースタイルをほどこしてみましょう♪
適用するスタイルによって見た目はさまざまに変わるので、いろいろ試してみてくださいね!

飾り素材の完成
筆者は金色系が好きなので、レイヤースタイルを適用してこのような飾りにしてみました。
この飾りを枠に当てはめて飾り枠にしてもいいし、本記事のアイキャッチのように画像の一部分に飾りを置いてみてもいいですね!

最後に:Photoshopで飾り枠を簡単に作る方法!
今回は、簡単に飾り素材を作る方法をご紹介しました。
ペンツールの扱いに慣れない方は最初は難しいかもしれませんが、ペンツールはシェイプで形を作るときに欠かせない機能なので、この機会に一緒に練習してしまうのもありだとおもいます。
ぜひあなただけの素敵な装飾を作ってみてください♪
以上になります。また次の記事でお会いしましょう。

