webデザイン

Photoshopで自由に点線(直線・曲線・図形を囲む)を書きたいときの1番簡単な方法

Photoshopで点線を書く方法はいくつかありますが、直線や曲線、図形を囲ったり、ある程度自由な点線を書きたい場合にはシェイプの使い方を覚えておくだけで、さまざまな点線を書くことができるようになります。

ここではシェイプを使って、直線・曲線・図形を囲う点線の書き方を解説するので、用途に沿ったものを参考にしてみてください

直線の点線を書く方法

ペンツールを使って、ツールオプションバーのシェイプを選択しラインを引きます(Shiftを押しながらラインを引けば直線になります)

dotted-line10

ツールオプションバーの【塗り】をカラーなしに変更します。

dotted-line11

続いて、【ストローク】を任意のカラーに変更。

dotted-line12

ラインの太さを任意の数値に変更(ここでは1pt)して、ストロークオプションを選択すれば点線が完成します

dotted-line13

応用

作成した点線レイヤーを新規レイヤーにドロップして複製してみます。

dotted-line15

移動ツールで移動すれば2本の点線が完成しました。

dotted-line16

曲線の点線を書く方法

曲線の点線を書く際にはラインが見えている状態のほうが書きやすいので、あらかじめストロークには任意のカラーを設定してラインを引いてみます。

dotted-line20

ラインの太さやストロークオプションを選択して完成です。

dotted-line21

図形の点線を書く方法

図形を囲むように点線を書きたい場合には、長方形や楕円形ツール(もちろんカスタムシェイプツールも可)などを選択します。

dotted-line17

ここでは円の図形を書き、塗りを40%(※塗りを0%にすれば点線だけが残ります)にしてみました。

dotted-line18

ストロークを任意のカラーに変更し、ストロークオプションを選択して完成。

dotted-line19

「点線ではない普通のシェイプを作ろう」と思ったのに、毎回点線になってしまう時はこちらの記事を参考にしてください。⇒ シェイプが点線になってしまう時の対処法

スリームデザインの無料メールマガジン

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

  2. フォトショップ

    photoshopで肌の赤みをとる方法ならこれだっ!

    顔や肌の赤みを修正したい場合、1ヶ所1ヶ所修正していくと非常に時間がか…

  3. webデザイン

    【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。

    WEBデザイナーは技術はもちろん、手持ちのリソース(情報など)が多いほ…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 新規のWordPressブログをSSL化(http⇒http…
  3. 画像スライダーだけじゃない!WordPressのブログ記事が…

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP