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

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

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not authenticate…

    『WP Mail SMTP』は、Gmailなどのメールサーバーを使って…

  2. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighter』

    「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができ…

  3. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します

    画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさず…

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

    WEB

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

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

  5. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールしてみよう

    エックスサーバーでサブドメインを設定して、WordPress をインス…

  6. 緑のドア

    WEB

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

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



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

wordpress

よく読まれている記事

  1. 腕を交差させる草原に座った男性
  2. ガネーシャ
  3. fontAwesome
  4. ブランコに乗る女の子
  5. チェーン
  6. mistake
  7. 404
  8. カレンダー
  9. 郵便受け
  10. カメラ

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

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

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

パソコンを覗き込む二人の女子
  1. ケーブル

    WEB

    『お名前.com』で取得したドメインを『エックスサーバー』に紐付けする方法
  2. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで…
  3. ネットショッピング

    WEB

    エックスサーバーで常時SSL化する方法について
  4. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方
  5. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で…
PAGE TOP