ロゴの背景を透明にしたい

質問

どのアプリを使ってよいのかもよく分からず困っています。
アルファベット６文字のロゴがあります。
一つ一つのアルファベットにグラデーションがかかっています。
元々デザイナーさんからは.pdfで送られてきて、それを変形させたりするために、再度.aiで送り直してもらいました。
PhotoshopやPhotoImpact等で加工して、大きさもバラバラな物(.psd / .eps / .ai / .gif)があります。
ＨＰで使用するため、これらを使ってアニメーションを作りたいのですが、
背景が白になっているため貼り付けると四角い枠ができてしまいます。
背景を透明にしてどこに貼り付けてもＯＫにしたいのです。
またできれば、６つのアルファベットを一つ一つバラバラにして
あちこちに飛ばしたりしたいのですが、今現在は６つまとめてでないと使えません。
Photoshop/PhotoImpact/Dreamweaver/Flash(トライアル版）があります。

うまく質問もできませんが、どなたか教えていただけませんか？

回答No.2

0011Allen · ベストアンサー

>PhotoshopやPhotoImpact等で加工して、
との事ですが、どの様になさったのが分からないのですが、勝手に解釈しますが・・

まず、背景を透明にするにはGifファイルにする必要があります。

Photoshop で[新規]で適当なサイズを指定する。
[ファイル]-->[配置]でaiファイルを選択し、適当なサイズと位置にドラッグして[Enter]。
レイヤーの[背景]を捨てる。
[ファイル]-->[データ書き出し]--[Gif90a書き出し]とすれば背景が透明なGifができます。

気になったのはグラデーションがかかっているとのことですが、Gifファイルではグラデーションが綺麗に見えないことが多く、その場合にはJpgにしてFlashでMovieかな。

お礼

ご回答ありがとうございます。
早速やってみていますが、どうもうまくいきません。
〔配置〕したあと、レイヤーに〔背景〕がありません。
レイヤーは１枚「.ai」のみです。
この「.ai」ファイルはちょっと信用なりません。
色々扱っているうちに違うものに変わってしまった恐れがあります。
そこで「.eps」で試してみましたが、そちらもダメでした。
グラデーションは１つ１つの文字にかかっているので、
Photoshop等の自動選択ツールが使えません。
すみませんが、もう少し教えていただけませんか？

回答No.5

0011Allen

こんにちわ、#2の0011Allenです。

>アニメーションを作りたいのですが
↑これってGifアニメーションにするのかと思ってました。

>次の問題にぶち当たってしまいました

Flashにするのが目的なら、なにもGIFファイルにする必要なかったのに・・・。
ただ、イラストレーターが必要です。

イラストレーター上でaiファイルを開けて、１文字づつの図を選択(背景は選択しないようにして)してコピーしたものをFlashの上にペーストすれば綺麗な図ができます。(複雑なデザインの時にはラインが少し欠けたりしますが)
でも、Gifファイルを入れたようなギザギザにはなりません。

デザイナーさんにお願いしてflashにペーストしてflaファイルで受け取るなんて出来ないんでしょうか。見栄えがだいぶ違うと思いますよ。

ご参考まで。

お礼

何度もありがとうございました。
イラストレータがないのですぐにはできませんが、トライアル版をインストールして試してみます。
ありがとうございました。

回答No.4

syunpei

背景を透明にする場合は、Photoshopを使ってgifで、保存する必要があります。ただ、背景が白で、文字が書かれて、その背景の白を透明化に指定して
透明にみせかけるわけですが、文字の曲面や影などに滑らかに見せるためにアンチエイリアスがかかっていると、拡大するとわかるのですが、背景色の白に近い色がのこって、文字の周りが白く見えることがあり、白いページに張った場合、は問題ありませんが、黒いページに張った場合、白いふちが見えることがあります。これをなくすには、最近のPhotoshopでは、透明化させる色を何色か指定できるようになっているので、ふちがきれいになるまで何色か指定することです。また、ロゴの透明化する背景の色も、ページが白でも黒でも、または、ほかのいろでも残っていても目立たないような
背景色にしておくこともひとつの方法です

お礼

ご丁寧にありがとうございます。
皆さんのおかげで、背景を透明化するところまでは何とかできるようになりました。
とても苦労していたので本当に「やったー」という感じです。
背景がブルーの所に貼り付けても、縁取りがそのままなじむようになりました。

しかし、またしても次の問題にぶち当たってしまいました。
.gif/.pngで保存した後Flashに取り込み再生すると縁取りも綺麗に出るのですが、
これを.swfで保存してDreamweaverに埋め込んでブラウザでプレビューすると、
背景は白(何箇所かに貼り付けて使用している）なのにロゴがギザギザになります。
保存の時にファイル形式を色々試してみたのですがダメでした。
syunpeiさんがおっしゃる、透明化させる色を何色か指定するということが今ひとつ理解できていないのかもしれません。
アドバイスいただけないでしょうか。

回答No.3

timber

> 上記のHTML？SCRIPT?JAVA？（何と言うのですか？）
HTMLの中のイメージマップという機能です。

<MAP NAME="image1">
「image1」がマップの名前になります。

<AREA SHAPE="POLYGON" COORDS="189, 230, 204, 238, 202, 264" HREF="./xxx.html" ALT="xxxの説明">
<AREA SHAPE="POLYGON" COORDS="239, 292, 238, 311, 220, 319" HREF="./yyy.html" ALT="yyyの説明">
「./xxx.html」「./yyy.html」がリンク先になります。
「xxxの説明」「yyyの説明」はマウスを置いたときにでる説明文になります。
COORDSの後の数字はすべて画像の座標値です。
SHAPE="RECT"の場合は順に、左上のｘ座標、ｙ座標、右下のｘ座標、Ｙ座標
SHAPE="CIRCLE"の場合は順に、中心点のｚ座標、ｙ座標、半径
SHAPE="POLYGON"の場合は２つずつ組みで１つの点のｘ座標、ｙ座標を表し、
並んだ順に点を結んだ多角形が選択エリアになります。

<IMG SRC="./image1.gif" BORDER="0" USEMAP="#image1">
「./image1.gif」で画像ファイルを指定します。
「#image1」で上でつけたマップの名前を指定します。

詳細は参考ＵＲＬをご覧ください。

参考URL：

http://www.htmlhelp.com/ja/reference/html40/special/map.html

お礼

今現在まだ出来ていない状態ですが、とりあえずがんばってみます。
参考のページも今後使わせていただきます。
ご丁寧にありがとうございました。

回答No.1

timber

> 背景を透明にしてどこに貼り付けてもＯＫにしたいのです。
保存時に透過ＧＩＦ形式を選べばできます。
Photoshop/PhotoImpact/Dreamweaver/Flashのどれも使ったことないので
使い方は分かりませんが、Photoshopであれば出来ないことはないでしょう。

> ６つのアルファベットを一つ一つバラバラにして
> あちこちに飛ばしたりしたい
ばらばらにしなくてもできます。
<MAP NAME="image1">
<AREA SHAPE="POLYGON" COORDS="189, 230, 204, 238, 202, 264" HREF="./xxx.html" ALT="xxxの説明">
<AREA SHAPE="POLYGON" COORDS="239, 292, 238, 311, 220, 319" HREF="./yyy.html" ALT="yyyの説明">
・・・
</MAP>
<IMG SRC="./image1.gif" BORDER="0" USEMAP="#image1">
こんなかんじです。
POLYGONは多角形のことですが、RECT（四角形）やCIRCLE（円形）でも可能です。
なお、私自身はメモ帳及びエディタでしかＨＰを作ったことがないので
このソフトではどうやりますかといった質問には答えられません。

お礼

早速のご回答ありがとうございます。
今取り組んでみていたのですがどうもうまくいかないので、
もう少し教えてください。
上記のHTML？SCRIPT?JAVA？（何と言うのですか？）の中で
置き換えるべきものは
「./image1.gif」のところだけでよいのでしょうか。
それとも「xxxの説明」「yyyの説明」のところに
何か入れるべきなのでしょうか。
どうぞお願いします。