終了

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

参加者 ,
Mar 12, 2025 Mar 12, 2025

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

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

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

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

 

 

fannrei_1-1741769297376.pngexpand image

 

キーワード
Windows
132
翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines

correct answers 1 件の正解

Community Expert , Mar 18, 2025 Mar 18, 2025

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

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

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

 

Ps_Underline_Sample.pngexpand image

翻訳
Community Expert ,
Mar 18, 2025 Mar 18, 2025

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

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

翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
参加者 ,
Mar 18, 2025 Mar 18, 2025

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

翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Expert ,
Mar 18, 2025 Mar 18, 2025

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

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

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

 

Ps_Underline_Sample.pngexpand image

翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
参加者 ,
Mar 18, 2025 Mar 18, 2025

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

翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Expert ,
Mar 19, 2025 Mar 19, 2025
最新

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

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

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

翻訳
レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines