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. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. フォトショップ

    細部にこだわってポスターデザインを仕上げるためのディティールを詰めるコツ

    ディティールを詰める技術を覚える男性の怪しさが増すような画像を重ね…

  2. フォトショップ

    Photoshopの【色の置き換え】の使い方

    Photoshopで【色の置き換え】を使うと部分的に色を変えることがで…

  3. webデザイン

    ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

    HDRとはハイダイナミックレンジの略で最近ではiphoneカメラにも搭…

  4. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

  5. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

    Photoshopには写真を補正するだけではなく、デザインに必要とされ…

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

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

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. 3分の話

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

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. SNS

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