Adobe Photoshop

【Photoshop】”(ダブルクォーテーション)の大きさやフォントの種類を調節して、テキストを見やすくする方法

投稿日:

使用ソフト:AdobePhotoshop テキストの見せ方「」”(ダブルクォーテーション)を工夫しよう編




この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。

テキストで使われる「”(ダブルクォーテーション)」の大きさやフォントの種類を調節して、テキストを見やすくする方法です。

 

”(ダブルクォーテーション)自体は、英語だと「引用」として使われるものですが、日本語ではよく中のフォントを強調するときに使われます。

LPのタイトルや画像のタイトルなど、”(ダブルクォーテーション)で囲まれたテキストを強調して見せることができます。

スポンサーリンク

完成イメージ

最初に完成イメージを見て下さい。

今回のフォントは游ゴシックを使っているのですが、Beforeだと”(ダブルクォーテーション)が角ばっているし、大きく見えてしまいます。

Afterだと”(ダブルクォーテーション)自体が小さく、丸みを帯びていますね。

”(ダブルクォーテーション)調整前と後の図

”(ダブルクォーテーション)調整前と後の図

 

テキストの調整方法

新規レイヤーを用意する

Photoshopの新規カンバスを開きます。まずはPhotoshopを開きましょう。開くサイズは特に気にしなくて大丈夫です。

 

 

 

 

 

”(ダブルクォーテーション)で囲んだ文字を入れる

続いて文字を入れていきます。

今回も使用しているフォントはWindowsでは8.1から導入されている「游ゴシック」というフォントです。

ご自分のパソコン内にあるフォントで大丈夫ですし、デザインの途中でこの記事にたどり着いた方は、そのデザインに合わせたフォントで大丈夫です。

ちなみにこのダブルクォーテーションですが、「Shiftキー+2」を2回押すと、開き・閉じのダブルクォーテーションまで連続で出ます。(游ゴシックの場合)

 

”(ダブルクォーテーション)を選択し、それだけ日本語の丸文字フォントに変えてみる

オプティカルに変更後、「”“」の 部分だけ、フォントを変更する次に、”(ダブルクォーテーション)のフォントだけを選択し、日本語で丸文字のフォントに変えてみましょう。

文字パレットは、”(ダブルクォーテーション)の部分がどうなっているかを表しています。もともとのフォントが游ゴシックだったのを、A-OTF UD新丸ゴシックというのに変えました。丸ゴシック、とつけば何でも大丈夫です。

 

”(ダブルクォーテーション)だけ不透明度を50%にすることで、より中のテキストを目立たせられる

「”“」とテキストにレイヤーを分け 不透明度50%に変更するさらにテキストを目立たせられるようにするため、”(ダブルクォーテーション)のみの不透明度を50%にしようと思います。

しかしその前に、「”しろまるパン”」という一文のどこか一部を不透明度50%にすることができないため、

「”しろまるパン”」→「”」「しろまるパン」「”」という、3つのレイヤーに分けます。

分けた上で、”(ダブルクォーテーション)の部分のみ、不透明度を50%にします。

 

 

 

 



この工夫を使ってテキストを調整する方法は、どんな風に見えるか?

今回のように”(ダブルクォーテーション)を使用して、強調を表すということは日本のWEBデザインではよく見られます。

なので、LPのメイン画像の上に載せるテキストやサイトのメイン画像でも中身のテキストを強調したいときに使うと良いでしょう。

ただ、あくまでも”(ダブルクォーテーション)は海外では「引用符」と認識されるため、多用し過ぎずに、場合によって使い分けてみると良いかも知れません。

 

かなり細かすぎる工夫ですが、この細かい工夫がユーザーさんの見やすさにつながると思います。

ぜひ使ってみて下さいね(*´ェ`*)

 

こんな記事も読まれています

使用ソフト:AdobePhotoshop テキストの見せ方「」(かぎかっこ)を工夫しよう編
【Photoshop】テキストの調整でできるデザイン!「」(かぎかっこ)を工夫して、中身のテキストが見やすいデザインにする

この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。 普段よく見る「」(かぎかっこ)を工夫して、中身のテキストが見やすい用に調節する方法で ...

続きを見る







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。

おすすめ記事はこちら

1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-Adobe Photoshop

Copyright© しろまるカフェ , 2018 All Rights Reserved.