【Photoshop編】手書き風のラフでランダムなかわいい点線・破線を作る方法

 2017.10.04  2017.12.15

Photoshopの点線・破線サンプル

Photoshopを使った点線・破線の作り方をおさらいします。私がWebサイトを作り始めた頃はPhotoshopで破線を作るのは面倒だった記憶があるのですが(どれだけ昔…)、シェイプツールの機能が大分進化してきたので、今は簡単に作ることができます。
※画像をクリックすると、拡大画像がポップアップで表示されます。

Illustratorでの点線・破線の作り方は以下のページで説明しています!

点線・破線の基本的な作り方

ペンツール・シェイプツールを使う方法

以下の画像のような破線をペンツールやシェイプツールで作成します。ペンツールやシェイプツールはパスで図形が作られるので、Illustratorのベクターのようにサイズを拡大・縮小しても画像が荒れません。レスポンシブサイトでサイズの違う画像を作成する時などにもオススメです。

Photoshopの点線・破線サンプル

左のツールパレットで「ペンツール」を選び、ウィンドウ上部のオプションバーで「シェイプ」、塗りは「なし」に設定します。適当な太さで一本線を引きます。画像では太さを2pxに設定しました。

点線・破線説明画像

「線オプション」をクリックすると、既に登録されている破線が出てきます。この中から選んで調整してもよし、自分で0から作るのもよし。
「線オプション」パネル下部にある「詳細オプション」をクリックすると、破線の長さや間隔を設定することができます。この辺りはIllustratorと同じですね。

点線・破線説明画像

自作した線は保存して再利用できます。歯車アイコンをクリックするとメニューが出てきます。

点線・破線説明画像

点線・破線説明画像

上記はオプションバーから作成しましたが、左図の「属性パネル」からも作成可能です。

ブラシを使う方法

Photoshopのブラシを使うと、丸い点線のみならず、様々な形や色の変化を加えた罫線を作ることができます。

Photoshopの点線・破線サンプル

点線・破線説明画像

「ハード円ブラシ」を選択します。サンプルでは直径12pxに設定しました。「間隔」を100%以上に設定するとブラシが点状になり、間隔が開くようになります。ブラシの形状やサイズを変えれば、様々なデザインの罫線が作れます。

パスを作成して、パスのパネルから「パスの境界線を描く」で選択中のブラシを指定すれば、図形の線にも適用可能です。

手書き風のランダムな形の点線の作成方法

上記のブラシでの破線の作成方法を応用して、手書き風のちょっと動きのあるかわいい罫線を作ってみます。

Photoshopの点線・破線サンプル

点線・破線説明画像

「ブラシ先端のシェイプ」の設定

  • 真円率:25%
    →ここで縦の潰れ具合を指定
  • 間隔:600%

点線・破線説明画像

「シェイプ」の設定

  • サイズのジッター:0%、コントロール:オフ
  • 角度のジッター:1%、コントロール:進行方向
  • 最小の真円率:90%

点線・破線説明画像

「散布」の設定

  • 「両軸」にチェック
  • 散布:11%
    →上下の散らばり方を指定
  • 数:1

点線・破線説明画像

「カラー」の設定

  • 「描点ごとに適用」にチェック
  • 明るさのジッター:20%

「カラー」の「色相のジッター」で簡単に色を変えることができます。ブラシの直径で太さを変えたり、「散布」でより動きのある配置にしたりと、色々試してみると面白いです。

Photoshopの点線・破線サンプル

作ったブラシを登録する

作ったブラシを別のファイルでも再び使えるように、ブラシプリセットとして登録しておくと便利です。

ブラシパネルの右上のメニュー(画像①)をクリックして「新規ブラシプリセット…」を選択し、名前を付けて保存します。

ブラシパネル下部にあるアイコン(②)をクリックするとプリセットマネジャーが開くので、保存したいブラシを選択して「セットを保存」(③)すると、.abrファイルが書き出されます。ブラシを使いたい時にこの.abrファイルを読み込めば、いつでもブラシを使えます!

点線・破線説明画像

ブラシを見やすく、使いやすく管理してくれるプラグインもおすすめです。私もこのプラグイン使っていますが、ブラシ管理がとても楽になりました。

参考書籍

上記の作例は以下の本を参考にさせていただきました。点線・破線以外にも、手書き/手描き風のデザインの作り方がたくさん載っています。これ一冊でデザインの幅が広がります。