webアイコンで、ぼやけない文字の作りかた。

質問

イラストレーター9（OS-WINDOWS）で、
ホームページのアイコンを制作してるのですが、
ＷＥＢ用に（ＧＩＦ、ＪＰＧ）書き出しすると、
文字がぼやけたようになってしまいます。
小さなアイコンを作りたいので、文字がはっきりした
アイコンをつくりたいです。

ドットで書かれたような、
（今表示されているこの文字みたいな）
はっきりとした文字のアイコンは
どうすれば作れるのでしょうか？

教えてください。
よろしくお願します。

（フォトショップ7も使用可能です。）

回答No.4

fukkyse · ベストアンサー

#1です。
Illustratorから、PhotoShopに書き出してはいかがですか？このときのポイントとしては、Web用なので72dpi（または96dpi）とする。アンチエイリアス・レイヤー保持には、チェックを。
「テキスト編集を可能にする」にチェック！（アウトラインとなっていないのが条件です）
以降はPhotoShopで開き、テキストを＃１回答の手順にて。

テキスト部分をラスタライズした状態でアンチエイリアスをかけないということが条件ですので（表現が変なのは、お許しを）。私個人の意見ですが、PhotoShopのほうがWeb用には有利な気がします（状態の確認ができますし）。パスのみはIllustratorで作成などを含めてです。

PhotoShopは苦手ということなので、補足をいただければ分かる範囲内で回答させていただきます。

がんばってください。

補足

fukkyseさま

『Illustratorから、PhotoShopに書き出し』
ということができるんですね！
早速試しました。ばっちりです。

それと私、PhotoShopが苦手ということで、逃げていました。＃１で教えていただいた方法がWebアイコンには最適のようですね。

背景さえIllustratorで作ってしまえば、
私の苦手PhotoShopでも、なんら問題ありません。

また補足いただけるとのお言葉ありがとうございました。気持ちが楽になったのか気楽にPhotoShopと向き合えました。
ありがとうございました。

回答No.7

ki_no_ko

Illustratorの文字にはアンチエイリアスがかけられますね。

私はNo.1さんのやり方でやってます。一番シンプルだと思いますが？
Photoshopでは文字にアンチエイリアスをかけない設定が出来ます。
文字入力ツールを選択している時にそういった感じのオプションが出ますので試してみてください。
（私もIllustratorでアンチエイリアスなしの文字が打てないんだろうか…と思ってたんですが、打てないようですねぇ…）

Illustratorオブジェクトと合わせたいときは、
Illustratorでコピー→Photoshhopにペーストでよいでしょう。

ＷＥＢ用にはこの方が読みやすいですもんね。

ムリヤリなものとしては、ブラウザで文字を入力して
プリントスクリーンして使う、という方法もなくはないですけど。

補足

ki_no_koさま

おっしゃるとおり、いろいろ試したところ、
No.1さんのやり方が、シンプルなようでした。
私のPhotoshopの苦手が、邪魔をしていたようです。

＞Illustratorオブジェクトと合わせたいときは、
＞Illustratorでコピー→Photoshhopにペーストでよい＞でしょう。
コピペができるんですね。大変便利です！！

ありがとうございました。

回答No.6

chirashizushi

Photoshopでの作業です。

[イメージ]→[色調補正]→[ポスタリゼーション]を選んでください、数値を２５６以下（2,4,8,16,32,64,126,256)などにしてみてください

数値を下げれば下げるほど（少なくするほど）カクカクした文字になります(^^;

上の数値の間の数値でもいいですよ、１７とか４１とか

補足

chirashizushiさま

皆さまから教えていただいた手法を
いろいろ試しています。
＞[イメージ]→[色調補正]→[ポスタリゼーション]
このやり方は書き出したり
貼り付けたりがないので仕事が早いですね。

ありがとうございました。

回答No.5

TESSILI

掲示されたURLの画像はイラストレーターよりフォトショップのが向いていると思います。

地味ですけど、たぶん鉛筆ツールで1個1個ドットを塗りつぶしているんじゃないかなと推測します。

ハッキリ見えるのは背景が白で輪郭が黒系だからだと思います。

フォトショップでのすごい単純なやり方ですが、
打ち出した文字をラスタライズして、自動選択ツールを使います。
許容値を０にして、アンチエイリアスと隣接のチェックを外します。
打ち出した文字の黒の部分、もしくは文字以外の部分を選択します。
選択範囲を反転させます。
黒を選択した場合はデリートで消します。
白を選択した場合は選択範囲内を塗りつぶします。
これで輪郭がドット状の文字の完成です。

ちなみに変形すると輪郭はぼけます。
環境設定の一般で画像補間方式をニアレストネイバーにすればぼけません。
しかし、作業するなら最初から小さいサイズでやったほうがいいかもしれませんね。

回答No.3

345itati

jpg圧縮する場合は、作成する画像サイズを、８の倍数のピクセルサイズ(原寸)でドット打ちして作ると、色の減色を喰らうくらいで輪郭がぼけることなく圧縮出来ると思います。
(フォトショップ使用の話です。

恐らく参考に挙げられたurlのアイコンは、実際に１ピクセルずつドット打ちして作成されたものかと。
(自分もやって目が痛くなった経験者

補足

345itatiさま

１ピクセルずつドット打ちして作成・・
urlのアイコンは皆さんの労作なんですね。
僕にはできそうにありません・・（＾＾；

情報ありがとうございました。

回答No.2

maho-maho

イラストレータで書いたものをフォトショップに取り込んでファイル→ウェブ用に保存で、高画質を選ぶとかなりはっきりした文字になると思います。

補足

maho-mahoさま

回答ありがとうございます。
早速、
イラレでアイコン制作
↓
フォトショップに配置
↓
ウェブ用に保存（JPEG高画質と、GIFの256色ディザなし）
を試しました。

残念ながらイラストレーターからウェブ用に保存と
代わり映えしないアイコンとなってしまいました（；。；）

私の思っているアイコンの文字のイメージですが、
例えば下記URLのファミコンのアイコンみたいな
ドットで書かれたものです。（文字ではありませんが）
これだと小さくてもはっきりしてますよね！？

http://www.ix.sakura.ne.jp/~yoshi/icon/game/index.htm

回答No.1

fukkyse

PhotoShop使用可能ならばそちらのほうが良いような気がします。

テキストのオプションにて、「アンチエイリアスのレベル設定」→「なし」でご希望のものが作成できると思います。文字サイズについては、Px表示のほうが作成しやすいと思います。

作成したものは、ズーム→ピクセル等倍として確認すればよいと思います。

補足

fukkyseさま

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

・・フォトショップの使用可能と追記してしまいましたが、
実は操作は得意じゃありません。いや、苦手なんです。

イラストレーターで制作が可能であれば、
そちらでの制作方法をご伝授ください。

大変恐縮です。ごめんなさい、お願いたします。