【初心者向け画像解説付き】photoshopのテキスト文字を縁取りにする方法

Photoshop
この記事は約2分で読めます。

今回は、Webデザインや広告などで頻繁に使う、文字の縁取り方法について解説します。

こんなお悩みの方へ

・背景画像と文字が同系色で文字が埋もれてしまって、どうして良いか分からない。
・テキスト文字をくっきりと表示させたい。


▲オンラインで学ぶWebデザイン講座
【2021年12月01日発売】 ADOBE アドビ Photoshop Elements 2022 日本語版 MLP 通常版 [Win・Mac用]
created by Rinker
スポンサーリンク

Photoshopのテキスト文字を縁取りする方法

今回は例として、桜の画像の上に書かれた「さくら」の文字を縁取りし視認性を高めてみましょう。

文字レイヤーを選択

まずは、「さくら」の文字を選択します。

レイヤースタイル

レイヤー > レイヤースタイル > 境界線をクリックします。

ここでは、このように設定しました。必要に応じて数値を変更して下さい。

サイズ:20px
位置:外側
描画モード:通常
不透明度:100%
塗りつぶしタイプ:カラー
カラー:#000000

光彩を追加する

さらに視認性を高めるため、縁取りの外側に光彩を追加します。

ここでは、このように設定しました。必要に応じて数値を変更して下さい。

描画モード:通常
不透明度:100%
ノイズ:0
カラー:#ffffff
テクニック:さらにソフトに
スプレッド:50%
サイズ:70px

完成!

OKをクリックし、「境界線」と「光彩(外側)」の設定を確定することで縁取りが出来ました。

バナーや広告はもちろん、Youtubeのサムネイルにもよく使われている、この文字の縁取り。この基礎の方法さえ覚えてしまえば、応用も可能になってきます。ぜひ取り入れてみてくださいね!

mina

30代女性 / 複業家
▼主な複業
①ECサイト運営
②WEBデザイナー
③ブログ運営
④飲食店プロデュース・店長

このブログでは、日々の悩みを解消できる知識を、自身の経験と、専門的な本に基づき発信しています。このブログを通じ、あなたの人生を変える本に出会うきっかけになれば幸いです。

minaをフォローする
Photoshop


本ブログの記事が参考になったという方は、下のシェアボタンよりTwitterで記事を紹介して頂けると嬉しいです。
『本記事のリンク』と@29books_minaをメンションしてツイートしてくだされば、RTさせて頂きます!
シェアする
29-books

コメント

タイトルとURLをコピーしました