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. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. webデザイン

    フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

    フォトショップのフィルターを活用すると、画像を印象をガラっと変えること…

  2. フォトショップ

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

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

  3. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. コピーライティング

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

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

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. SNS

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

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP