2019年版 Photoshopで長方形の枠線を描くには

Photoshopで枠線を描くのは難しい

WORDPRESSやWeb製作をされている方で、Phtoshopで枠線を描いたり、塗り潰ししたいと思ったことはありませんか?

こんな感じに。

強調したい文字列を表示したりするときです。

それと塗り潰し。

こんなやつです。自分のIDや、個人情報などを見せたくないときです。

最近ではスマホなんかでもこれくらいの画像のレタッチなら簡単になりましたよね。

でも実は私、WEBサイトを作ってるときに、これまでずっと苦労してたんです・・。

スポンサーリンク


今までは

私はスクリーンショットを取ったあと、

1.「Photoshop」を起動。
2.表示したい範囲を選択、切り抜く。
3.ちょっとした加工(他の画像を貼り付けたり文字入れたり)
4.Web用の解像度、横幅などを選択して、JPEGで保存。

をした後で

5.「ペイント」を起動。
6.強調したい部分(テキストや画像)を枠線で囲む
7.隠したい部分を長方形で塗り潰す

なんて2つの手順でやってました。

スポンサーリンク


でも面倒くさい

だって「Photoshop」だけで済ませられないのですから。

Photoshopで好きなように絵を描いたり効果入れたり、解像度変えたりしてても、

「長方形の枠線や塗り潰しができない」

ただそれだけの理由で、もう一工程「ペイント」使ってたんです。

やり方が、いくら調べてもわからなかったんです。

「Photoshopで枠線を描きたいんだよ」

「図形ツールが見つかりません」 だとか。

「ツールボックスがありません」 だとか、。

Photoshopにはずいぶんと苦労されてる方が多いみたいで、
そりゃあいろんなQ&AやHowToが見つかるのですが、

「枠線を引きたい!」

という、私の超難易度の高い(?)ニーズには、うちの「アレクサ君」も答えてくれませんでした。

スポンサーリンク


解決方法

でもやっと見つけたんですよ。解決方法。

さっそくご紹介します。

まず、結論。

「Photoshopの枠線は図形ツールを使わない」
(えええ!)

どうです、びっくりしたでしょう?

だって私も今まで「図形ツール」を必死で調べてましたよ。

ぐぐってもHitしないわけだ。

スポンサーリンク


バージョンにもよります

ただし「Photoshop」にはいろんなバージョンがあるんですよね。

「Elements (エレメンツ)」とか「CC」とか「CS」とか。

さらにその中でもそれぞれ「2017」とか「10」「16」 とかあったりします。

(だから調べるのにも苦労しました)

私たちも「Windows」や「Office」で慣れてはいますが、Photoshopの種類の複雑さは群を抜いています。

その中でも、私の使ってるのは「Photoshop Elements 10」です。

(古い?でも必要十分なんですよ)

だからもし「図形ツールあるよー」という方は、他あたってくださいねー(笑)

スポンサーリンク


Photoshopの枠線の引き方

それでは、Photoshopの枠線の引きかたを説明します。

1.「長方形選択ツール」を選びます。

(うまくスクショは取れませんでしたが、これなら必ずPhotoshopのツールボックスのどこかにあるはずです)

2.線を引きたいところを範囲選択します。
(下の画像の点線みたいに)

3.右クリックして「選択範囲の境界線を描く」を選びます。

3.「境界線」の「幅」を5px、カラーを赤にします
(ここはお好みで。次回からは覚えてくれてます)

「OK」押したら、これでOK。

Photoshopの長方形塗り潰しの方法

長方形の塗り潰しです。(まあ上と同じですので、おわかりですよね)

1.「長方形選択ツール」を選びます。(枠線の引き方と同じ)

2.「選択範囲の塗りつぶし」を選びます。

3.あとは枠線と同じですので割愛します。

スポンサーリンク


おわりに

私の場合だけかも知れませんが、これでHP作成の一工程が減りました。

Photoshopを使い慣れてる方には当たり前のことなのかもしれませんが、プログラマーやSEから入られた方には盲点なのかも知れませんね。

サイトを作ってる方のご参考になれば幸いです。



私は賢威を使っています。