海を背景にフレームを持つ女性の手

WEB

Photoshopで簡単!!画像に枠線を作る方法

「画像に枠線を作りたい。だけど、どうやって作ればいいの?」

そんなあなたに、Photoshop を使ってできる簡単な方法をご紹介します。

枠線の作成方法

最初に完成図をお見せします

Crayon Syntax Highlighter

このように、画像の一部を赤枠で囲む作業をしていきたいと思います。

1. 新規レイヤーを作成する

使用する画像の上に新規レイヤーを作成します。

Photoshopの画面

2. 囲みたいところを長方形選択ツールで囲む

Photoshopの画面

3.『Command(Mac) / Ctrl(Win)+Delete』で塗りつぶす

後で削除するので、色は何色でも構いません。

Photoshopの画面

4. レイヤースタイルを開く

上の画像( )の水色の枠で囲んだ部分(黒く塗りつぶしたところ)をクリックします。そして、右クリックして『レイヤースタイル』を開きます。

Photoshopの画面

① の『境界線』に を入れ、② のカラーをクリックします。

5. カラーコードを入力する

Photoshopの画面

① に枠線で使用したいカラーコードを入力したら、② のOKをクリックします。

6. サイズ・位置を調整する

Photoshopの画面

① の『構造』のサイズ位置などをお好みに合わせて調整してください。プレビュー画面で確認し、良ければ ② のOKをクリックします。

7.『塗り』の数値を0%にする

Photoshopの画面

 

下の画像( )のように最初に塗りつぶした黒の部分が消えて、赤枠だけが残ります。

Photoshopの画面

8. サイズ・位置の最終調整をする

Photoshopの画面

移動ツールに持ち替えると、位置やサイズの調整ができます。

まとめ

ブログを書いていると、画像に枠線を書いて説明したい場面ってたくさんありますよね。そんな時に簡単に使える『 Photoshop で枠線を作る方法』をご紹介しました。

ぜひ、試してみてくださいね!!

なお、スクリーンショットで撮った画像を保存するときは、PNG-8 がオススメです。

関連記事

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

  2. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法

    WordPress 専用クラウド型レンタルサーバー『wpX Speed…

  3. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  4. local by flywheel

    WEB

    Local by Flywheel を使って、ローカル環境を構築してみよう

    『Local by Flywheel』は、簡単に WordPress …

  5. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?

    WordPress でブログを始めるには、レンタルサーバーとの契約、ド…

  6. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

    私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『M…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 段ボールを持つ女性
  2. ペンを持つ手
  3. ネットショッピング
  4. 空にかざした水晶
  5. ガッツポーズする男性
  6. wordpress,ワードプレス
  7. 広告
  8. 子猫をのせた乳母車を押す親猫
  9. local by flywheel
  10. Google Search Console

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not au…
  2. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の…
  3. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで…
  4. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方
  5. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法…
PAGE TOP