忙しい現代人の腰&肩のお悩み対策!

イラストレーター9(OS-WINDOWS)で、
ホームページのアイコンを制作してるのですが、
WEB用に(GIF、JPG)書き出しすると、
文字がぼやけたようになってしまいます。
小さなアイコンを作りたいので、文字がはっきりした
アイコンをつくりたいです。

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (7件)

#1です。


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

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

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

がんばってください。

この回答への補足

fukkyseさま

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

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

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

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

補足日時:2006/07/28 19:54
    • good
    • 1

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



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

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

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


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

この回答への補足

ki_no_koさま

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

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

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

補足日時:2006/07/28 20:01
    • good
    • 0

Photoshopでの作業です。



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

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

上の数値の間の数値でもいいですよ、17とか41とか

この回答への補足

chirashizushiさま

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

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

補足日時:2006/07/28 19:43
    • good
    • 0

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



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

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

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

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

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


(フォトショップ使用の話です。

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

この回答への補足

345itatiさま

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

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

補足日時:2006/07/28 18:47
    • good
    • 0

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

この回答への補足

maho-mahoさま

回答ありがとうございます。
早速、
イラレでアイコン制作

フォトショップに配置

ウェブ用に保存(JPEG高画質と、GIFの256色ディザなし)
を試しました。

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

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

http://www.ix.sakura.ne.jp/~yoshi/icon/game/inde …

補足日時:2006/07/27 17:28
    • good
    • 1

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



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

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

この回答への補足

fukkyseさま

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

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

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

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

補足日時:2006/07/27 13:40
    • good
    • 1

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QWEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちら

WEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちらが良いでしょうか?
いつもお世話になります。
イラストレーターCSを使ってホームページの見出し部分を作成していますが、実際にWEB上に表示させると、文字が若干滲んだようになってしまい、綺麗に表示されていない気がします。
同様にフォトショップで出力してみても大差はありませんでした。

一般的にはフォトショップもイラストレーターもDTP目的で使うと思いますので、WEB用に使うのが間違っているのかもしれませんが、できればFireworksではなく、上記どちらかのソフトで作成したいと考えております。

もしイラストレーター、もしくはフォトショップから画像に落とし込んだ際に文字を綺麗に(くっきり)出力させる方法があればご教授いただけないでしょうか?
もしくは、上記以外のフリーのソフト等でオススメがあれば是非教えてください。

初心者質問で恐縮ですが、宜しくお願いいたします。

Aベストアンサー

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(アドビ版のドリームウィーバー)でwebしましょうって感じだったんですよ。
なのでフォトショで全然問題ないです。

実際現場でもフォトショ使う人も多いし、もちろんファイヤーワークス使う人も多いです。

イラレは…webってピクセル単位で気を使うというか、ドット絵的な作業もあるので、
正直向いてないと思います。(ベクターやラスターで調べてください)

まぁ、逆に印刷ものつくるならイラレベースじゃないとできませんね。
(画像処理だけフォトショ→イラレに貼り付け)

それと、ロゴなどを作る場合は、イラレで作ってフォトショに貼り付けて微調整しますね。
フォトショのパスツールやシェイプはヘボイので。。

まぁ・・今はフォトショのが素材とかも多いし、高機能だしやりやすいかもしれません。
ただ、ファイヤーワークスのが簡単につくれます。

あとフォトショで作るときに注意する点は、シェイプを使うときにオプションの「ピクセルにスナップ」にチェックしましょう。
じゃないと稜線がぼけます。

さらに、ぼけずに作っても大きさを変更するとまたぼけるので注意です。

フォトショ素材等
http://weblibrary.s224.xrea.com/weblog/photoshop/photoshop_2.html

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(ア...続きを読む

Qイラストレーターで小さい文字がぼやけます

イラストレーター9.0を使用しています。

web用に画像を作成しているのですが、
フォントサイズ8~10ptのものをgif化すると、
文字がぼやけて出来上がります。

はっきりとした感じに仕上げるには、
何をしたらよいでしょうか?

宜しくお願い致します!

Aベストアンサー

Photoshopがあるなら,下記の方法(No.3さんの方法)で試してみて下さい.

1)イラストレータで画像を作成.文字のところは空欄にしておく.
2)これをgifで保存.
3)これをPhotoshopで開く.
4)イメージ→モードをRGBにする.
5)文字を入力(アンチエイリアスをオンにした方がいいと思います).
6)レイヤーを統合する.
7)イメージ→モードで,インデックスカラーにする.このとき,256色を使わないとダメですね.
8)GIF形式で保存する.

この操作でダメな場合,文字の部分をうんと拡大して,ピクセルごとに修正するしかないと思います.(あまり改善しないと思います)

QPhotoShopで作成した文字がぼやけます。

いつもお世話になってます。
PhotoShop5.0でのことです。

文字ツールで文字を書いているのですが、何度やっても文字がボヤけます。「web用に保存」をして減色する前の段階で(編集段階)で結構ボヤけてしまってるのです。

文字のサイズは12pxとか16pxとかです。アンチエリアスを「無し」にすると見られたものではないし、その辺の修正では変わりませんでした。フォントの種類も標準でついているものについてはイロイロ試しましたがどれも汚かったです。

ココ数年画像編集を仕事にしてきまして、今までは別に気になら無かったのですがWEB上で文字が綺麗に表示されているサイトがあり、気になるようになりました。

思考錯誤を繰り返しましたが変わりませんでした。結論としては「フォントが悪い」ということになりました。有料のフォントなら、綺麗に表示されるものでしょうか?もしこれがフォントのせいであり、他に綺麗に出るフォントがありましたら購入も考えてます。

分かる方、どうか教えてください。

Aベストアンサー

こんにちは、
私は目的がWeb用保存だとすると、大きな文字を使用する場合や拡大縮小をしない限り
Illustratorを使っても綺麗に出力されるとは思わないのですが・・・

サイズ800*600px程度の白い背景に黒い12pxの文字で「綺麗な文字」といろいろな場所に打ってみてください。
(レイヤーの複製はだめです)
拡大して比較してみると、同じ文字を打ったにもかかわらず、アンチエイリアスのかかり具合が若干違うと思います。
これを利用して綺麗に出力された文字を使うというのはどうでしょう?
(Photoshop6以降は文字レイヤーを決定する前に移動することで同様の変化を得られます。
 また、基本設定として文字自体のアンチエイリアスの強さを「なし」「鮮明」「強く」「なめらかに」と変更可能です)

後は、アンシャープマスクを微調整するとか、

アンチエイリアスをかけた文字とかけていない文字をレイヤーでぴったり重ねる。
次に、アンチエイリアスのかかっている文字のレイヤーの不透明度を下げてやるなんてのはどうでしょう?

さらに少々面倒ですが効果のあるものとして、
新規画像で白の背景に黒で文字を書きレイヤーを統合
統合された背景レイヤーをダブルクリックでラスタレイヤーに変更。
レイヤーオプション(Ver6以降はレイヤースタイル)のブレンド条件で
「このレイヤー」と「下になっているレイヤー」という二つの白黒グラデーションがあると思います。
「このレイヤー」のグラデーションの白側にある三角をAltキーを押しながら黒い方に少しずつドラッグしていけば、
明るさの高い方からグラデーションを保ったまま透過していけます。(Altキーを押さないと三角が2つに分かれません)
つまりアンチエイリアスのかかり具合を細かく調整できます。
後は好きな色に変えてやればOKですね。

全然違った観点からいえば、
ディスプレイのリフレッシュレートが高いのが原因かもしれません。70~60Hzとかにしたら綺麗になったりして・・・
画像編集を仕事になさっているので知っておられたら申し訳ないのですが、
リフレッシュレートを上げすぎると、ちらつきを押さえる反面、画像や文字のぼけが現れます。

こんにちは、
私は目的がWeb用保存だとすると、大きな文字を使用する場合や拡大縮小をしない限り
Illustratorを使っても綺麗に出力されるとは思わないのですが・・・

サイズ800*600px程度の白い背景に黒い12pxの文字で「綺麗な文字」といろいろな場所に打ってみてください。
(レイヤーの複製はだめです)
拡大して比較してみると、同じ文字を打ったにもかかわらず、アンチエイリアスのかかり具合が若干違うと思います。
これを利用して綺麗に出力された文字を使うというのはどうでしょう?
(Photoshop6...続きを読む

QHPに画像をアップすると粗くなりぼやける。

お世話になります。
HP作成初心者です。

【使用ソフトなど】
イラストレーターVer9・フォトショップVer6・Win XP

【手順】
イラストレーターで絵を描いて、
文字等を入れ(アウトラインやアンチエイリアス加工をしています)
完成した画像をフォトショップで解像度を調節してから
「WEB用で保存(jpg/高画質)」を選択して保存し画像をアップ
しています。

HTMLでの画像サイズのタグは、小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)、画像がぼやけたり粗くなってしまいます。

初心者で、このサイトを見て色んな保存形式に変えてみました。
png形式でもダメでした。

手順は間違っているでしょうか?
宜しくお願いします。

Aベストアンサー

> 「WEB用で保存(jpg/高画質)」を選択して保存し
この時点ではぼけとかは気にならないですか?
Jpegは最高画質で保存しても少しはぼけます。
色数が少ない、ハッキリしたものならGIFで保存。
写真のような色数多いのはJpegで。

> 小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)
ブラウザにもよるけど、本来のサイズ以外で表示すると汚くなります。
小さいのを大きく見せるのはもちろん、逆に大きいのを小さくしてもです。
1/2や2倍のようなきっちりとしたサイズではなく、中途半端な拡大/縮小では特に顕著です。

Photoshopの画像解像度の【バイキュービック法】での拡大縮小するような高度な処理は行われていません。
ブラウザでは【ニアレストネイバー法】のような単純な方式で行われます。


面倒でも適切なサイズの画像を用意することをお勧めします。

Qweb制作 画像がぼやける

初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが…
さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。

web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…?
ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。

HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!

初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまう...続きを読む

Aベストアンサー

勝手に減色されるために起きている
と推測されます。
Web用PNGで保存すると
使用色数は256色に抑えられます。

そのためそれ以上の色数を使っていると
勝手に色数が減らされるのでこの現象が発生しているはずです。

ではどうすればいいか
・最初から256色の画像を用意すればいい
のです。

http://help.adobe.com/ja_JP/Illustrator/14.0/WSEFB85FE0-1C50-4b02-8392-D30DF1962EF5.html
このへんの
・GIF および PNG-8 最適化オプション
・GIF および PNG-8 画像のカラーテーブルのカスタマイズ
辺りを参考にしてください。

Qphotoshopで作成した画像文字(jpg)がぼやける

photoshop初心者です。
ウェブ上で表示している文字画像があり、それを修正する必要が出たため、photoshopでjpg画像を開き、前の文字を消して上書きし、再度、web用に保存しました。

しかし、保存した画像を見ると色が若干変わり、文字もぼやけたようになり、きれいに表示されません。
フォントは同じものを使用しており、保存する前はきれいに見えます。

背景は透過処理されており、文字は1色です。

ちょっとした修正、のはずが実現できず困っています。
ご存知の方いらっしゃいましたら、よろしくお願いいたします。

Aベストアンサー

#,2,3です。

保存の際はweb用に保存を選択していますか?
この際の設定がちゃんとなっているか確認してみましょう。

あと、元画像がgifだったということで…
その画像を開いたとき、インデックスカラーになっていると色が限定されてしまいます。
画像を開いたらRGBカラーになっているかチェックしましょう。
なっていなかったら上のメニューからイメージのモードを選択してください。

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

Qイラストレーターのアウトライン化の解除方法??

ウィンドウズのイラストレーターの機能についての質問です。
アウトライン化がすでに実行されている文字の修正をする場合に、アウトライン化の解除はどうようにすれば出来るのでしょうか??
いろいろな本をみると、一度アウトライン化を実行すると、解除ができないと記載されていました。
ご指導頂きたくお願い申し上げます。

Aベストアンサー

それらの本に書かれている通り、一度アウトライン化をすると元には戻せません。

ただし、Ctrl+zやコマンド+zなどで作業を一つ前に戻すなどが出来るので
間違えたり、やり直したかった場合はそれで対処するしかないですね。

アウトライン化したデータを保存してしまった場合はどうやっても解除できないので
アウトライン化したデータを作った場合はアウトラインする前のデータも
別名保存などで残すのが一般的です。

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。


このカテゴリの人気Q&Aランキング