フォトショップの文字を使いたいのですが

質問

本当に基本的な質問ですいません、今ホームページを初めて作成中なんですが、adobeのGOLIVE!の５.０を使っています、テキスト文字だけでなく
プロっぽいきれいな文字をタイトル等に使いたいので、adobeのPhotoshopの
４.０で、文字を作ってみました、これって画像と同じようにgoliveの方に貼付ければいいのでしょうか？

今現在やっとできたのは、四角のテーブルの中に文字を書いて、画像と同じようにはりつけました、でもなぜか張り付ける前の方がきれいで、張り付けられたものはにじんでる感じです。これはなぜなんでしょう？

又フォトショップで作った「文字だけ」をサイトに張り付けるにはどうしたらよいんでしょうか？

初心者のマックユーザーです、小学生に教えるような感じで
どなたか教えていただけないでしょうか？

宜しくお願いします。

回答No.4

kumosuke · ベストアンサー

補足、読ませていただきました。
画像の背景を透明にすることとHTMLは、まったく関係がないのでご安心下さい。

背景が透明な画像を透過GIFといいます。
これを書き込んでいるのが、会社のため手元にフォトショップがないので定かではありませんが……
確かでGIF画像を作るには、プラグインがないとダメだったように記憶しています。

で、保存するときにツールバーの「ファイル」から、出力用プラグにあるGIFフォーマットのプラグインを指定して保存。

と、その前に。
背景色にする色を設定することを忘れないで下さい。

おそらく、これでできる、かと。
ではでは。

お礼

kumosukeさん！ありがとうございますっ！できました！
出力プラグにgifがあって、御指導の通りにやってみました
本当にありがとうございました。
又何か出てくるとは思うので、その時は又宜しくお願いします
うっうれしいですっ！

回答No.3

mat-21

こんばんは。さて、私はGOLIVEは使っていないので、どのようにHTML作成していくのかわかりませんが、タグ（画像を配置している場所）を見てみて下さい。<IMG SRC="～.gif" ～>もしくは<IMG SRC="～.jpg">となっているかと思います。いろいろな説明ははぶきますが、No.1の方の言われるようにPHOTOSHOPで作ったものをGIFで書き出しましょう（この場合）。
PHOTOSHOPでもできるのですが、PHOTOSHOPを持っておられるのでしたら、PHOTOSHOPのパッケージ内にImageReadyというアプリケーションが付いてきたと思います。そのソフトを使えばWEB用の画像作るときは便利です。WEB用画像作成ソフトと考えて下さい。解像度は自動的に72dpiで出力してくれます。っていうか72dpiしかつくれませんけど。
アドバイスですが、ImageReady上で直接文字を打ち込むと綺麗ですよ。Illustratorなどで作ったファイルをImageReadyで開いくと、文字がラスタライズされて、文字を直したしたくても図形化してしまっているので直せないし、少しぼけたような感じになります。
ImageLeadyで直接文字を打つ（ツールの「T」を選んで）打ち込んでね。画面上の部分にオプションバーが出てると思うけど、出てなかったら「ウインドウ」→「オプションの表示」をしてね。オプションバーで文字の種類や大きさなどできるよ。
完成したら、レイヤーを見てみよう。レイヤーのバーが出ていなかったら、「ウインドウ」→「レイヤーを表示」でレイヤーのバーを出してね。
レイヤーバーを見ると、一番下に「背景」てあると思うけど、もし、ウェブ上で背景がいらない場合は、そのレイヤーをレイヤーバーの下にあるゴミ箱にドラッグすると捨てられるよ。そうすると、この場合、文字（Ｔとあるレイヤー）意外はないよね。デザイン画面をみるとバックがチェックの柄になっていると思うんだ。このチェックの柄はバック透明ってことだよ。
とりあえずここまでできたら、このファイルを保存しておこう。保存の仕方は、普通に「ファイル」→「保存」もしくは「別名で保存」を選んでね。もちろん、保存したファイルは、PHOTOSHOPでも開くよ。PHOTOSHOPで開くと解るけど、解像度が72dpiになってるでしょ。拡張子（ファイル名）も「～～.psd」になってると思う。保存できたら、いよいよWEB用に書き出しだ！
書き出す前にやっておかなくていけないことがあるから注意してね。
まず、「ウインドウ」→「最適化を表示」させて、最適化バーの中に、「GIF」か「JPG」か「PNG-8」か「PNG-24」を選ぶところがあるから、「GIF」にして、メイン画面（デザインした画面）の上の部分に「元画像」「最適化」「以下省略～」の「最適化」をクリックして、最適化バーに「カラー」があるから、「256」から「128」って感じで数字を下げていってみてね。数字が減れば減るほど容量が軽くなるんだけど、画質は悪くなっていくからね。数字を下げていくとメイン画面の画像がどんどん変わっていくのがわかると思うんだけど、文字ぐらいだったらそんなにかわらないかもしれない。めんどくさいようだったら、256でいいよ。自動でやってくれるから。意図的に軽くしたい場合はこの方法でします。
そして、ここが肝心なところだけど、最適化バーの中に、「透明部分」てあるから、そこにチェックを入れて、マットの部分の色をウェブのバックの色に合わせてね。バックが白だったら「白」にするなど。そうすると、さっきレイヤーでチェックの柄の意味は透明だったから、透明になって、文字とバックの透明の接点部分をマットの色、この場合は白で補ってくれるんだ。便利でしょ。別に透明にしたくなかったら、さっきの背景をすてなくすればいいだけだよ。この場合「透明部分」のチェックがあろうとなかろうと関係ないんだ。書き出したときに四角い画像だからね。
さっ、書き出ししよう。書き出し方は、「ファイル」→「最適化ファイルを保存」もしくは「最適化ファイルを別名で保存」をしてみて。そうすると保存先のウインドウが出てきて、ファイル名が「～.gif」になってるでしょ。これで、GIFファイルができたね。
あとは、GOLIVEなどで配置すればOKだと思うよ。
ちなみ今の説明は、Adobe ImageReady3.0だから、PHOTOSHOP4.0に付いてるのは、Adobe ImageReady2.0だったと思うけど、操作的には似てるから頑張ってみてね。あと補足しておくと、今の作業はPHOTOSHOPでもできるよ。ただ、作る際、解像度に注意してね。じゃ～頑張ってね～。(^o^)/~~~

補足

詳しく回答していただきありがとうございました
プリントアウトして早速やってみましたが、検索でImageReadyをさがしてみたのですが、フォトショップの４.０にはどうもないみたいです、

でも文字を書く時に文字ツールの中の表示のフォントの所が×にしてなかった
のでしてみたら、なぜか、美しい文字が出るようになりました。

その後の背景をゴミ箱に捨てるのもやってみました、ちゃんと背景が
チェックになりましたが、複製を保存でJPEGの画像を作ったとたんに
背景が白くなりました、（GIFにはできないみたいです、形式の欄に
入ってませんでした）
それを、GOLIVEにポイントシュートしてみたら、やっぱり四角い大きな白い
物の中に文字が出てしまい、文字だけにはできませんでした....

ちなみに、GOLIVEは簡単にウエブページを作るソフトで
　html　は関係なくできるやつです。
私自身もHTMLの事わからないです、すいません...

このような状態で、何とか文字だけを載せる事はできるんでしょうか？
お手数おかけしてすいません、又お返事いただければ幸いです

回答No.2

kaname_s

こんばんは。

えっと、にじんでる感じのほうですが、それはたぶん画質が落ちているからではないでしょうか。
画像を制作している段階（制作画面）では、フォトショップ（psp）形式だとかbmp形式だとか、質の高い綺麗な画像なんです。
それをWeb上に公開するには、ｊpeg・gif・またはpngで保存しないといけないんです。
なので、たぶん「にじんでいる」をいうことであれば、jpeg形式なのではないでしょうか？
文字・ロゴはgifのほうが向いていると思いますので、保存の際にgifで保存してみてください。

色数は６４もあれば美しく仕上がるのではないかと…

「文字だけ」というのは、四角の白いテーブル（というか、画像）ではなく、それを張りつけても背景の色が文字以外出は透ける、ということでいいでしょうか？
その場合もgifで、文字に絶対に使っていない色を文字以外の背景に塗り、そこを「透過」にします。

簡単にですみません、詳しくは４，０ユーザーの方にお願いするとして、参考までに！

補足

ありがとうございます、4.0は透過できるのでしょうか？
さがしても、透明度とかしかなくて...これを１にしてみましたが、かわりません、どうしてでしょうか....
gif形式にもできないみたいです、pngにしたらもっとモザイク風になってしまいました、あとはjpegしかないみたいです

他に何か方法がありましたら宜しくお願いします。

回答No.1

kumosuke

そのソフトは使ったことがないので、どこをいじれば設定を変えられるのかは分かりません。
それを前提で説明させていただきます。

文字というのは、フォトショップで作成した画像ですね？
画像がにじんでしまう……外見上はそう見えますが、実際には画像の天地左右がソフトによって勝手に引き伸ばされて(あるいは縮小されて)しまっているからです。
たとえば。
元の画像の天地(上下のサイズのことです)が180。
左右が200だったとします。

この値が、それぞれ120%あたりで拡大されると、自分が作った画像が思うように表示されなかったりします。

さて。
通常のHTMLの場合、画像の指定は以下の感じで行います。
<img src="honyarara.gif" heigth="180" width="200">
パーセント指定では、以下です。
<img src="honyarara.jpg" heigth=100% width=100%>
こんな感じ。

src="honyarara.png"は画像の指定なので、この際無視するとして、問題のサイズについて。
heigth="180"あるいはheigth=100%というのは天地のサイズ指定です。
width="200"あるいはwidth=100%は、左右のサイズ指定。
この辺の数字が、aiko8080さんが作られた画像のサイズと違っていませんか？

adobeのGOLIVEがどういったものなのかは知りませんが、イラレとかと同じに考えるなら、この手の設定をする場所があるはずです。
貼り付けた画像が、作った画像のサイズとイコールかどうかを確認してみてください。

ではでは。

補足

ありがとうございます、サイズは１００％で、かわっていませんでした
とりあえず、文字は何とかハっきりしたんですが
まだバックが消えないんです

ちなみにhtmlの方は、全く知識がなく、やるのに時間かかりそうです
すぐにお返事できません、ごめんなさい...