Skip to main content
Inspiring
March 12, 2025
Answered

Photoshopで文字に下線を付けたい

  • March 12, 2025
  • 2 replies
  • 961 views

Photoshopで文字に下線を付けたいですが、文字パネルツールで下線を選ぶと、
文字と線の間に隙間ができていて、実際Codingで text-decoration: underline; の場合はこのようにならず、以下のようにもう少し線と文字がぴったりくっつきますが

例えばCodingで文字にunderlineをつけるとこうなります

Photoshopでこの隙間をなくすことはできますでしょうか。
実際デザインを見せた際に、線がズレていると思われていることが多くて・・対応したいのですが…やり方分からず‥

よろしくお願いいたします。

 

 

 

Correct answer assause

Photoshopの下線機能は設定として調整する仕組みはなかったはずで、その機能を使う限りは行えない、ということになるとは思います。

また、文字パネルの下線はフォントによっても異なる(確かフォント内に含まれる文字の最も高さのある文字などを元にしているはず)ので、フォントを変更するだけでも結構変わってしまいます。

いくつかサンプルとして作った画像を付けておきますが、もしPhotoshopで作った画像からCSSに落として処理ということだと、そこは変わることを前提にして考慮されるのがいいとは思います。 

 

2 replies

assause
Community Expert
assauseCommunity ExpertCorrect answer
Community Expert
March 18, 2025

Photoshopの下線機能は設定として調整する仕組みはなかったはずで、その機能を使う限りは行えない、ということになるとは思います。

また、文字パネルの下線はフォントによっても異なる(確かフォント内に含まれる文字の最も高さのある文字などを元にしているはず)ので、フォントを変更するだけでも結構変わってしまいます。

いくつかサンプルとして作った画像を付けておきますが、もしPhotoshopで作った画像からCSSに落として処理ということだと、そこは変わることを前提にして考慮されるのがいいとは思います。 

 

fannreiAuthor
Inspiring
March 19, 2025

フォントによって違うのですね。
理解できました!ありがとうございます!
隙間があるフォントでも、実際コーディングすると隙間がないので、その辺Photoshopどのように判断して計算しているんでしょうね。。
いずれ解決難しいことわかりました。
ありがとうございます。

assause
Community Expert
Community Expert
March 19, 2025

この辺りの処理はタイプエンジンなどでまるっきり変わったりするので、同じフォントでもタイプエンジン回りが違うと処理がまるで異なったりします。

Webブラウザですとそのブラウザのエンジンでも変わる可能性はありますし、厳格なことは求められない可能性はあります。

そのうえでPhotoshopが先述の通りなので、「あくまでも下線を引く指示を可視化している(ので、別処理で対応する場合、実際には異なる)」くらいで考えたほうがいいかもしれません。

shiomijun
Community Expert
Community Expert
March 18, 2025

文字の下にシェイプでお好みの距離感でアンダーライン入れるのもひとつかと思います

(めんどくさいですけど)

fannreiAuthor
Inspiring
March 19, 2025

ありがとうございます。
今までそうしてきましたが、文字修正すると下線も修正しないといけないですね…