画像に文字を入れる際のフォントが荒い

質問

写真や画像などに文字を入れる時に、その文字がどうしても荒くなってしまいます。
はっきりクッキリした文字を入れたいです。
例として
http://thumbnail.image.rakuten.co.jp/@0_mall/somu/cabinet/pendant/npn121_15a.jpg
この写真にあるローマ字位くっきりとさせたいですが、現状は添付画像にあるように、ギザギザしてしまいます。
どうしたらこのギザギザをなくして滑らかなフォントに出来るでしょうか？

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.21

torayoshi

torayoshiです。
「リサイズしてから文字を入れるとギザギザになる」
「リサイズ後の表示は原寸大」
あらら・・・これは読み抜けしたようです、失礼しました。
これは再現出来ません。

私は思うのですが、この問題は根本的にソフト依存なのではないかと思ってます。
JtrimもPhotoScapeも「レイヤー機能がない」という点に注目。
文字も画像も単一レイヤー内で処理するので、そのような問題が起きるのではないかなと。
レイヤー機能があるソフトなら文字と画像は独立してるので、このような問題は起きません。

レイヤー機能があるソフトでダメ元で試してみてはいかがでしょうか。

お礼

13番目の回答にてjtrimでもギザギザにならなかったとご回答頂いていたので、ソフト依存では無いということでは無いのでしょうか？

レイヤー機能のあるpixiaで新規レイヤーとして文字を貼り付けしてみましたが、ギザギザになってしまいました。

回答No.20

ORUKA1951

そのフォントのマニュアル読まれましたか？？？
　多分読まれてない・・
This kit is provided to you by Fonts2u.com – the largest online
repository of free fonts for Windows and Mac.

How to use this @font-face kit?

In order to embed the font into your web site, please, do the following:
1. Upload the four font files (.ttf,.woff,.eot,.svg) and the stylesheet.css to
your website using your hosting account control panel or via ftp. All
these files are available in the fontface .zip root directory.
2. Declare the chosen font by copying the generated CSS code provided in
@font-face kit and paste it into your main CSS file, or simply import
it as a separate CSS.
3. Link the embedded font with any element you like using standard CSS
syntax (f.e. h1 {font-family:'declared font name';}
4. Enjoy the new font on your web site.

　ウェブフォントとして使えば、悩む事は何もない・・・
<div id="prodactsList">
　<ol>
　　<li><span class="title">afdsghiik</span><!-- 画像に入れる文字列 -->
　　　　<img src="" width="" height="" alt="">
　　　　<!-- デフォルトの画像の表示サイズ -->
　　　　<!-- 実際の画像サイズはこの二倍程度が良い -->
　　　　<p>
　　　　　画像の説明文章
　　　　</p>
　　</li>

　あなたが使用したい画像のパスを含むファイル名とサイズを教えてください。

お礼

自分のパソコンの中にしかまだ無いので、画像のパスがありません。
そのような問題ではなく、他の回答者様では同じフォントでもちゃんと処理が出来ているようなのです。

回答No.19

noname#242220

＃２さんが書いている様にフォントには２種類有ります。
イラストレータは『PSフォント』と言うのを使います。
この場合『計算して』表示しますので、くっきり表示させる事が出来ます。
このPSフォントが使えない画像処理アプリは一定の解像度しか表示出来ないので、
拡大したフォントを縮小して表示させるしかないです。
滑らかなフォントと言うのは『アンチエイリアス化』と呼ばれる機能を使ってます。
PCの場合は『メイリオ』が『アンチエイリアス化』を付けていると思います。

＊PSフォントを使いこれを処理出来る画像処理アプリを使う。
尚：Macのフォントはすべて『アンチエイリアス化』が掛かってます。
なのでくっきり表示しないとお父さんは嫌うんです。

お礼

jtrimを使用しているのですが、このソフトでも他回答者様ではギザギザにならないようなので、ソフト依存では無いようです。

回答No.18

mmni

＞一つ疑問があるのですが、通常は文字を入れた後に、
＞リサイズするのが正しいのでしょうか？

No.16では
>> 実際にリサイズしないで画面上でパーセント縮小表示にして、
と書いてあります。

>> 文字を打ちOKで画像に反映させるとギザギザに
>> なってるように見えるだけです。
と書いてあります。

>> 実際は大きなままだから文字がギザギザに見えるだけなのです。
と書いてあります。

“縮小表示だから文字がギザギザに見えるだけなのです。”
と書いてあります。
つまり、原寸表示にすれば、ギザギザにはなっていないのではないか
と書いてあると思います。

でも原寸表示でもギザギザになっているのですよね。

＞通常は文字を入れた後にリサイズするのが正しいのでしょうか？

リサイズしたい大きさにしてから文字入れをするのが普通です。
- - - - - - - - - - - -
PhotoScape でも同じ現象のようなので、何かわかりませんがおかしいです。

お礼

仰る通りです。
原寸表示でもギザギザになっています。
原因が解明出来ず残念です。

回答No.17

torayoshi

torayoshiです。
>いつも文字を入れる時に画像を縮小させたものの上に文字を置いていました。
　これが原因でしょうか？？？
↑それが原因です。
#16で私が再現した添付画像の通りです。

「原因」というか、私はGIMPしか使ってませんが、
画像がどんな状態であろうと（拡大しようが縮小しようが）文字はいつもクリアなままです。
おそらく他のグラフィックソフトでも同様でしょう。
Jtrimがたまたまそういう仕様だったってことなだけです。

お礼

ありがとうございます。
原因が見えて良かったです。

一つ疑問があるのですが、通常は文字を入れた後にリサイズするのが正しいのでしょうか？
いつも画像をリサイズしてから文字を入れていました。

しかし、大きな画像であればリサイズ可能なので良いのですが、例えば、元から小さな画像に文字を入れたい場合は、リサイズ出来ないので、ギザギザの文字のままになってしまいますよね！？
そのあたりの対処法をお教え頂けたら有難いです。

回答No.16

torayoshi

torayoshiです。
再現出来ました。
なるほど、確かにギザギザになりますね。

実際にリサイズしないで画面上でパーセント縮小表示にして、
文字を打ちOKで画像に反映させるとギザギザに「なってるように見える」だけです。
文字を画像に反映させた時点で画像も文字も見た目上縮小されてるだけで、
実際は大きなままだから文字がギザギザに見えるだけなのです。
つまり、jtrimの仕様で一時的にそう見えるだけだったという見事なオチ（笑）。

お礼

いつも文字を入れる時に画像を縮小させたものの上に文字を置いていました。
これが原因でしょうか？？？

画像を縮小する前の状態に文字を入れて、それから縮小させると文字は綺麗に出ます。

回答No.15

mmni

Vista のパソコンでもアンチエイリアスのチェックをはずすと
ギザギザが目立ちますが、チェックを入ればギザギザは目立ちません。

お礼

ありがとうございます。
もしかしたら、上の17番の回答者さまの言っているような事が原因のような気がしています。
如何でしょうか？

補足

失礼しました。
16番の間違いです。

回答No.14

ORUKA1951

No.2,5,10です。
＞WEB上で使用したいと思っています。
　了解です。
印刷される可能性はないということでよいですか？？
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　だとしたら、まず称している画像がビットマップでないことだけは確認してください。
　フォントには画像と同様にアウトラインとビットマップがあります。
ファイル形式（または利用できるシステム）による分類( http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88#.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E5.BD.A2.E5.BC.8F.EF.BC.88.E3.81.BE.E3.81.9F.E3.81.AF.E5.88.A9.E7.94.A8.E3.81.A7.E3.81.8D.E3.82.8B.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0.EF.BC.89.E3.81.AB.E3.82.88.E3.82.8B.E5.88.86.E9.A1.9E )
　ビットマップのフォントはどんなに工夫しても、ジャギー( http://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A3%E3%82%AE%E3%83%BC )が出ます。小さくすると目立ちませんが・・
　例えばメモ帳にそのフォントを指定してサイズを大きくしてみてください。それで確認できます。

　もしフォントが原因でしたら、アウトライン/ベクター形式のフォントにしましょう。

お礼

フォントはliberate wideというフリーフォントです。
ダウンロードする際の見本のフォントはギザギザになっていないのですが、当方がダウンロードし、画像貼りつけしますと、添付画像のようになってしまうのです。
下記回答者様がこのフォントを試してくださったようなのですが、ギザギザにはならないとのこと・・・

補足

今のところ解決策としては、デジカメ画像を縮小せずに特大の状態に文字を入れ、その後縮小すると、ギザギザが消えます。
それでしか対応が出来ていません。

回答No.13

torayoshi

trayoshiです。
JTrim＋liberate wideでやってみましたが、ギザギザにはなりませんでした。

フォントを変えてもギザギザ、ソフトを変えてもギザギザってことは、
これはもうソフトウェア関連ではなく、
ディスプレイ表示関連のハードウェア依存の問題のようにも思うのですが。

お礼

当方だけの現象なのでしょうか。
vistaを使用しております。

回答No.12

mmni

＞PhotoScape 入れてみたのですが、やはりギザギザします。

私の場合は PhotoScape でアンチエイリアスのチェックをはずすと
ギザギザが目立ちますが、 チェックを入ればギザギザは目立ちません。

お礼

ありがとうございます。
何が原因でギザギザが出るのか解らない状態です。