• LIGの広告成功事例
WEB

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

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

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

ジグザグラインの作り方

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

01

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

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

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

02

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

03

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

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

04

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

ギザギザ円形の作り方

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

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

05

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

06

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

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

ギザギザ長方形の作り方

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

07

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

08

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

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

09

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

10

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

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

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

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

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

この記事を書いた人

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