photoshopで「手書き風」「ガタガタ」な境界線を作る2つの方法

photoshopで「手書き風」「ガタガタ」な境界線を作る2つの方法

こんにちは。6年目webデザイナーのさなです。

今回は、

webデザイナー

オブジェクトや画像、フォントの縁をナチュラルな雰囲気に変えたい!

こんな方におすすめの下記の2つの方法を解説していきます。

  1. ブラシを使う
  2. フィルターを使う

意外と簡単にできますので、ぜひやってみてくださいね。

Contents

ブラシを使う

画像の矢印部分の加工をしていきます。

手書き風の境界線の見本

  1. 長方形を作って好みの場所にレイアウトする。

※長方形の色は分かりやすいように色(黄色)をつけています。

長方形をレイアウトしたphotoshopの画面
  1. 長方形のレイヤーにレイヤーマスクを追加する。
レイヤーマスクを追加する場所
  1. レイヤーマスクを選択し、境界線をブラシで消す。

※使用したブラシ:ドライメディアブラシ→KYLE ボーナス 太い木炭(photoshop 2021にデフォルトに入っているブラシです)

※ブラシのサイズはお好みで調整してください。

※描画色は黒(#000000)、背景色は白(#ffffff)にしておきます。

境界線をブラシで消した状態
ブラシを選択したら、①をクリックしてブラシを置き、
shiftを押しながら②をクリックしました。
memo

ブラシの種類によって色々な境界線を表現できます。

下の画像はphotoshp 2021にデフォルトで入っているブラシです。

フリー素材でも色々なブラシを配布していますので、好みのものを探してみてください。

ウェットメディアブラシ
→Kyleの印象派ブレンド
ウェットメディアブラシ
→Kyleの印象派ブレンド
ドライメディアブラシ
→Kyleの究極のパステルパルーザ
ドライメディアブラシ
→Kyleの究極のパステルパルーザ
  1. 黄色の部分に画像をレイアウトしたい場合は、画像を配置してそのレイヤーを選択。そしてクリッピングマスクを作成して完成です。
クリッピングマスクを作成の説明
筆者

長方形を作らずに画像に直接レイヤーマスクをかけて境界線をブラシで消してもOKです。
やりやすい方で作成してみてください。

フィルターを使う

ピクセレート→水晶

ピクセレート→水晶で境界線を加工した見本

  1. 長方形のレイヤーの境界線で選択範囲を作る。(commandを押しながら右の図の赤枠部分をクリックする。)
選択範囲を作る方法
  1. クイックマスクモードにする。
クイックマスクモードを選択
  1. フィルター→ピクセレート→水晶を選択する
ピクセレート→水晶の選択画面
  1. 「セルの大きさ」の数値を変えてガタガタ具合を調整する
セルの大きさの数値調整画面
  1. クイックマスクモードを解除(①でクリックしたところをもう一度クリック)して、レイヤーマスクをかけて完成。
レイヤーマスクを選択
  1. 黄色の部分に画像をレイアウトしたい場合は、画像を配置してそのレイヤーを選択。そしてクリッピングマスクを作成します。
クリッピングマスクを作成の説明

フィルターギャラリー

フィルターギャラリーを使って加工した見本

  1. 「ピクセレート→水晶」の①②と同じ手順で長方形を選択しクイックマスクモードにします。
  1. フィルター→フィルターギャラリーを選択します。
フィルターギャラリーを選択
  1. 希望の境界線に近くなりそうなものを選び、数値とストロークの方向など、詳細を調整する。

※今回はストローク(スプレー)を選びました

ストローク(スプレー)を選択
  1. クイックマスクモードを解除(①でクリックしたところをもう一度クリック)して、レイヤーマスクをかけて完成。
レイヤーマスクを選択
  1. 黄色の部分に画像をレイアウトしたい場合は、画像を配置してそのレイヤーを選択。そしてクリッピングマスクを作成します。
クリッピングマスクを作成の説明
memo

ブラシの時と同様に、選ぶフィルターの種類によって色々な境界線を作れます。

フィルターギャラリー→アーティスティック→粗描き(テクスチャ:麻布)
フィルターギャラリー→アーティスティック→
粗描き(テクスチャ:麻布)
フィルターギャラリー→変形→
ガラス
フィルターギャラリー→変形→
ガラス

フォントの手書き風の加工にはフィルターがおすすめ

フォントは長方形などのオブジェクトに比べて細かい部分の調整が必要なので、ブラシで細かくやっていくよりもフィルターで調整する方が効率よくキレイに仕上がります。

手順は上の「フィルターギャラリー」と同じです。

フィルターギャラリー→スケッチ→
ぎざぎざのエッジ
フィルターギャラリー→スケッチ→
ぎざぎざのエッジ
フィルターギャラリー→ブラシストローク→
はね
フィルターギャラリー→ブラシストローク→
はね

さいごに

今回はブラシとフィルターを使って境界線を「手書き風」「ガタガタ」な境界線をつくる方法をご紹介しました。

色々なやり方があると思うので、また何か良さそうな方法があったら追記していきたいと思います。

最後まで読んでいただき、ありがとうございました。

Photoshopの使い方で困ったら

手軽に動画で学べるUmedyがおすすめです。

あと少しだけスキルアップしたいという時にちょうど良いサイト。

よくセールをしているので、良かったらチェックしてくださいね。

Umedy

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
Contents