Photoshopで簡単にギザギザしたアイテムを作る方法

Photoshopで簡単にギザギザしたアイテムを作る方法

姐さん

姐さん

こんにちは。デザイナーの白浜です。
今回はPhotoshopでギザギザしたアイテムを作る方法をご紹介します。

ジグザグラインの作り方

まずはジグザグミシンで縫ったようなジグザグラインの作り方です。

01

ラインツールや長方形ツールで細長い線をひきます。

次に「フィルタ」→「変形」→「波形」ツールを使います。

※この時パスはラスタタイズ化されてしまうので注意。

02

波型のオプションを上記のように設定します。ポイントは波数を1にすることと、三角波にチェックを入れること。これで均等で角がとがったジグザグになります。

03

上の設定でできたジグザグはこんな感じです。

このツールの困った点は、ご覧のとおりプレビュー画面に拡大機能がないのでプレビューが意味をなしていないことです。(CS6使用。CCだとどうにかなってたりするかな?)
白色だとよりわかりづらいですね。

04

一部を新規レイヤーにコピーして、線だけにしてからフィルターを適用するといくらか大きく表示されます。・・・が、線が白だとやっぱり見づらいです;
ここ、なんとかしてほしい。CCはまだ見てないですが。

ギザギザ円形の作り方

円形のギザギザは多角形ツールで簡単に作れます。

多角形ツールを選択した状態でキャンバス上をクリックすると多角形ツールのオプションが開きます。

05

星にチェックを入れてOKを押すと・・・

06

上記の設定でこんな感じになりました。昔懐かしWeb2.0的な・・・

こちらも願わくばプレビュー機能がほしいところですね。Illustratorと同じ挙動だと確認しながら出来ていいのですが・・・。

ギザギザ長方形の作り方

次に長方形の一辺がギザギザしているアイテムの作り方です。

07

まずは長方形のシェイプを準備します。

08

次に好みのギザギザになるように調整した逆三角形のシェイプを作成します。

次に逆三角形のレイヤーを選択して、「レイヤーを複製」→「ドキュメント:新規」で新しいドキュメントを作ったら「イメージ」→「トリミング」→「透明ピクセル」にチェックを入れて三角形だけのドキュメントにします。

09

こんな感じになったら「編集」→「ブラシを定義」で逆三角形のブラシを作ります。

10

逆三角形のブラシができたら、あとは画像のように、ギザギザがいい感じになるように間隔を調整します。
これでギザギザが描けるブラシの出来上がり~。

と・・・ブラシだと解像度が変わった時不便だな~って思ったそこのあなた、こんないいものが公開されてました!!

ギザギザ波々のボーダーがカスタムシェイプになってる~!!
うわぁありがたい。カスタムシェイプなのでサイズ変更時も安心ですね。

他にももっと効率のいいやり方たくさんあると思うので、ぜひ教えていただきたいです。

それでは皆さん、よりよいギザギザライフを!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーの白浜です。ウェブデザイナーとして日々修行中。マンガと音楽とお米が好きです。よろしくお願いします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL