WEBデザインをする際にPhotoShopでイメージを制作しています。この際に「お知らせ」部分など実際には画像ではない部分のフォントは何を使用すればよいのでしょうか?まったく同じでなくてもいいので、フリーもしくは低価格のものを教えていただけますでしょうか?

(MSゴシックでアンチエイリアス?を「なし」 or HTMLで出力したものをコピペといった方法のご紹介以外でお願いします。)

↓参考までにこちらの「詳しくはこちら」のフォントです。これ以上太さはNGです。
http://www.second-academy.com/common/images/top_img/kyoto.jpg

宜しくお願い致します。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:2008/08/21 10:41:00
  • 終了:2008/08/23 08:29:35

ベストアンサー

id:stripafe No.1

stripafe回答回数35ベストアンサー獲得回数62008/08/22 05:17:09

ポイント60pt

要するに Photoshop でテキストを入力/表示する際、アンチエイリアスを解除したいということですよね?

Photoshop の文字パレットにアンチエイリアスを「なし」にするオプションがあります。


それでは太すぎるというなら、レイヤースタイル「境界線」を利用して細く見せるとかどうでしょう。

あるいはアンチエイリアスありのままラスタライズ後、白地のレイヤーと結合して乗算ブレンド。そのレイヤーにレベル調整レイヤーをクリップすれば、文字の細さは自由にコントロールできそうな気がします。

テキストレイヤーのままじゃなくちゃだめなんだ!ということだったらすみません。


もっとも実際に webサイトを公開したら、その文字をどんなフォントやサイズ、アンチエイリアスの具合で閲覧されるかはやっぱり環境次第です。

余計なお世話かもしれませんが、モックアップの表示テキストは目安でしかないと予めクライアントに説明するべき(後々になってからクレームの種になる方が面倒じゃないでしょうか)という気もします。

http://q.hatena.ne.jp/

id:gelgelgel

ご回答ありがとうございます。

う~ん・・。分かりにくくてすみませんが、質問でもあるとおり「MSゴシックをアンチエイリアス”なし”」にしても、サンプルのようなフォントにはならないと思います。

>それでは太すぎるというなら、レイヤースタイル「境界線」を利用して細く見せるとかどうでしょう。

これもやりましたが近しい感じにはならないと思います。あとあまりにも手間がかかる方法はちょっとダメでございます。

>もっとも実際に webサイトを公開したら、その文字をどんなフォントやサイズ、アンチエイリアスの具合で閲覧されるかはやっぱり環境次第です。

それはそうなのですが、私の希望は「サンプルのフォントをPhotoShopで簡単に出力したい」ということですので・・。

クライアントに言えばいいのですが、やはり実際の画面に近い方で提示したいという私の希望なのです。

一般的にはデザイナー&クライアント共にあまり気になさらないのでしょうか?

2008/08/22 09:11:17
  • id:wizemperor
    MS Pゴシックでアンチエイリアスでいいんでは?
    意図がよくわからないですが、メイリオ使うならメイリオとか?
    実際と同じフォントにしたほうがいいと思います。
  • id:hokuraku
    画像ファイル中の文字のフォントをどのようにするのがいいか?ということでしょうか?
    ブラウザ上のテキストと同じフォントにしたい、ということであれば、閲覧者の環境に依存してしまうので一概には言えなそうですが…。
  • id:Marine-Blue
    うーん、「詳しくはこちら」が画像化されていないので画像化するってことなんですか?
    太さがMSゴシック並の非MSフォントってほとんどない気もしますが…。
    MSゴシックの使用に何か不都合があるのであればそれを説明して頂かないと回答側も答えづらいと思います。
  • id:gelgelgel
    皆様コメントありがとうございます。なんか自分の文章力のなさに軽くショックです・・。

    簡単に言いますとリンク画像内の「詳しくはこちら」と同じフォントをPhotoShopで出力したいということです。
    意図としてはお客様に見せるとき綺麗なフォントにしてしまうと、実際にWEBにしたときにアンチエイリアスのかかっていないフォントとの見た目のギャップによるトラブルをなくしたいと思っております。

    >wizemperor様
    MS Pゴシックだと画像の文字より太字になってしまうのでダメなのです

    >hokuraku様
    ブラウザ環境によって多少の違いはあるかと思いますが、画像の「詳しくはこちら」とフォントであれば結構です。

    >Marine-Blue様
    リンク先の「詳しくはこちら」は画像化されています。またMSゴシックに不具合があるわけでもございません。

    確かに見返すと何が言いたいのか分かりませんね・・。皆様宜しくお願い致します。
  • id:Mars
    MSゴシック(アンチエイリアス-off)で記入後、
    文字間隔を調整。で、同じものは作れるようです。

    http://f.hatena.ne.jp/images/fotolife/M/Mars/20080822/20080822143240.gif
    2行目の「詳しくはこちら」が私が加えたものです。
  • id:stripafe
    Mars様の画像を拝見した限り文字が太くなっているようには見えないのですが、ひょっとして Bold が on になっていたりしませんか?


    たぶん必要ないと思いつつも回答した方法の補足。
    ちょっと面倒そうに見えるかもしれませんが、アクションに記録してショートカットキーを設定してしまえば全然手間ではありませんよ。
    さらにテキストレイヤーを複製して表示を消すステップをアクションに含めておけば、後でテキストの内容を変更する場合も大して手間にはなりません。(ラスタレイヤーを捨てて、テキスト変更後アクション再生し直せばよい)


    それはそうと、デザイナー/クライアントが見た目を気にしないかどうかとは少し論旨が違います。


    > やはり実際の画面に近い方で提示したい


    上記回答の主旨は、その「実際の画面」が、環境次第で全然違うのだという話です。
    もちろんご承知でしょうが、あくまでそれは「そのお客様の実際の画面に近い」だけであって、後日そのお客様が別の環境でサイトをご覧になった際、「なにこの文字!?」とならないために、そういうこともあるよ、と一言お断りしておくと、トラブルの種が減るのではないかと思ったもので。
    つまり、努力はするけれど無駄(コスト的な意味も含め)になるかもしれないことは、お客様に予め納得して頂いた方が安全ではないかという意味です。
  • id:gelgelgel
    >Mars様、stripafe様

    ご回答ありがとうございます。

    >Mars様の画像を拝見した限り文字が太くなっているようには見えないのですが、ひょっとして Bold が on になっていたりしませんか?

    上記にあるように太字の設定になっておりました。デフォルトで太字だったのでそのような設定があるとは長い間、気がつきませんでした。恥ずかしい限りです。お陰様で無事同じフォントにすることができました。

    ご回答いただきましてありがとうございました。皆様の温かさに心より感謝いたします。



この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません