• ベストアンサー

mixiのロゴの制作方法

20010年3月現在のmixiのロゴですが、どんな背景デザインに 変更してもなじむ様な透過が施されてるように見受けます。 普通にgifで制作した透過画像だと、どうしてもジャギーになってしまうと 思うのですが、 このロゴの透過はどのようにして作られているのでしょうか? よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • osi_nari
  • ベストアンサー率43% (193/441)
回答No.3

確かに、どのマイミクさんのページに行っても、ソースを読むと 単一のロゴ画像(gif)のアドレスを指定しているように 見えるのですが、これが罠じゃないでしょうか。 実際にダウンロードしたgif画像(標準の白背景用)は、明るい 背景になじむように「文字色グレーで周囲を白くぼかし、背景を 透明に」処理されているようです。 一方、濃い色の背景を使っているマイミクさんのページを見ると、 透過処理云々以前に、ロゴの文字色が白になっているんですよね。 推測ですが、表示されるソースとは別に、背景によってそれに合った ロゴ画像を指定する処理が行われているのではないでしょうか。 (ひょっとするとソースの中にその処理を行うタグが含まれている のかも知れませんが、私の知識ではそこまでわかりませんでした) 試しにイラストレーターで背景一面にグラデーションのオブジェクトを 作り、その前面にダウンロードしたロゴ画像配置してみると、明るい色の 上ではきれいに馴染みますが暗い色の上ではやはりジャギーが出ます。 以上、参考まで。

shin1max
質問者

お礼

回答ありがとうございます。 おっしゃる通り、背景色によってロゴの色を変えてるのに 気付きました。 それで対応してるんですね。 参考の件もありがとうございます。

その他の回答 (3)

  • draft4
  • ベストアンサー率21% (1275/6017)
回答No.4

ふつーのGIFですよ  画像を拡大して見れば判りますが(判りやすいように黒背景にしてあるます、添付の画像)周辺は段階的なトーンになっていますから目立たないだけです。 画像のフリンジを1px削除してください

shin1max
質問者

お礼

回答のほかに画像までアップしてくださってありがとうございます。

  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.2

極普通の透過GIFで、濃い色の上に置けば白いジャギーが出ます。 http://img.mixi.jp/img/basic/common/mixi_logo_pc_large001.gif 背景に合わせて複数の画像を用意しているだけでしょう。 透過GIFは背景に合わせたマット処理してやれば、ジャギー目立たなくなります。 http://www.ne.jp/asahi/atelier/kimagure/monooki/gazoh/gazoh.html http://www1.linkclub.or.jp/~nobuki/tips/matcolor.html PNG-24ならば、アルファチャンネル扱えるから半透明も表現でき、どんな背景でもジャギーを目立たなく出来ます。 PNG-8はGIFと同じで1色のみしか透過できない。 ただ、古いIEはPNG-24のアルファチャンネル対応していないから透過できない。

shin1max
質問者

お礼

回答ありがとうございます。 >背景に合わせて複数の画像を用意しているだけでしょう。 言われて気付きました。 そういうことだったんですね。 おっしゃる通り、PNGはIE問題があるので使えないんですよね。

  • otaku37564
  • ベストアンサー率38% (1160/3007)
回答No.1

この程度のものならイラストレータで作ってPNG保存すれば ジャギなんて一切でません。

shin1max
質問者

お礼

回答ありがとうございます。参考になりました。

関連するQ&A

  • jpgロゴの色修正とバック透過方法

    FIREWORKSとIllustratorとPhotoShopもっています。 飾りにしたいのでロゴの色を変えて、バックを透過させたいのですが、 入手したロゴがjpgだからか、ロゴの色を白に変更をしても文字の枠線がのこっていて、白バックに枠に色があり塗りは白の状態で、gifにして透過したら、バックも塗りも透過されて枠のみ残りました。 私の希望は、枠なし白文字で背景を透過させたいです。 よろしくお願いいたします。

  • イラストレーターで作るgif透過画像について、色々調べてやってみたので

    イラストレーターで作るgif透過画像について、色々調べてやってみたのですが思うように出来ません。バージョンはcs4です。 たとえば「黒背景に浮かぶロゴ」のgif画像で、使うときは後ろの黒背景を表示させないようにするにはどうすればいいでしょうか?

  • mixi(ミクシィ)の、自分のホームの画面のデザイン(背景)について。

    mixi(ミクシィ)の、自分のホームの画面のデザイン(背景)について。 同じ質問を他のカテゴリでもさせていただいたのですが。 そちらではご回答を頂けなかったことと、こちらというふさわしいカテゴリを見つけたということで、こちらでも質問をさせていただきます。 まったく同じ質問を2度目にすることになってしまい、不快に思う方がいらっしゃいましたら申し訳ありません。 閑話休題、質問の本題ですが。 mixiのデザインを変更する画面を見たのですが。 これは最初から用意されている背景の中から選ぶしかないのでしょうか? 自分で画像を用意して、それをアップロードするなどして好きな背景には出来ないのでしょうか。 サムネは好きなものにできるようなので、背景も自分の好きな画像にしたいのですが、出来るでしょうか? ご存知の方がいらっしゃいましたら、教えて下さると嬉しいです。 ご回答をお待ちしています。

  • 写真にgif形式のロゴを貼り付けたい。

    写真にgif形式のロゴを貼り付けたい。 手持ちの写真(Jpeg形式)にgif形式で作成してあるロゴマークを背景を透過させて 貼り付けたいのですが、方法を教えて下さい。 普段はJtrimを使用しているのですが、これでは無理なようですので・・・ 他の方法又はフリーのソフトを教えて頂ければ幸いです。 OSはWin7です。

  • 画像を透過させる方法がわかりません・・・

    PictBear seで画像を使ってない色を使って透過させてgif形式で保存したんですが、背景画像に貼り付けたら透過するときに使った使ってない色がでてきて透過がされてませんでした。 たぶん私のやり方が間違ってると思うので画像を透過させて、背景画像に貼る方法を知っている方がいましたら教えてください。

  • ピクシアでのロゴ作成、背景透過画像(gif)について

    仕事でホームページを作成しています。 写真に、背景を透過したロゴを組み合わせてヘッダーを作りたいのですが、肝心のロゴの、透過画像ができません。ロゴの背景の透過の仕方を、どなたか分かりやすく教えてください。「はじめてのPixia」という本を購入しましたが、そのものずばりに関する例の記載が無いため、理解に至りませんでした。 ちなみにホームページは、ソフトを使用せずにHTMLで作成しています。 画像処理ソフト超初心者の私ですが、どうぞ宜しくお願いいたします。

  • 背景画像にロゴを重ねる方法を教えてください。

    CSSで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。

    • ベストアンサー
    • HTML
  • ロゴを丸く切り取りたい

    あるサイトからあるロゴをダウンロードし、それを別のページに利用しようとしています。 そのロゴ自体は丸いものなのですが、ダウンロードできた画像(jpg、gif)は正方形です。 で、別のページに利用するさい、色のついた背景の上に貼り付けようとしているので、ロゴの輪郭に沿ってかたどりたいと考えています。 パワーポイント、フォトショップ、イラストレーターのいずれかでできるのであれば、教えていただきたいと思っております。 どうぞよろしくお願いいたします。

  • 透過して画像を背景に貼り付ける方法

    背景に写真を切り抜いた画像を貼り付けてHPにUPしたいと思っていますが、自分で色々やってみましたが出来ません。 jpgの背景画像にjpgの写真(綺麗に形を切り抜いた物)を合成はできるのですが、 切り抜いた画像の周りを透過させて、別の背景に貼り付けて、合成したいのです。 透過させると、gifかpngで保存ですよね。でその画像を背景と合成させるのができません。背景にそれを貼り付け、コピーなどすると、透過できなくて、画像の周りに四角く枠ができます。画像編集ソフトで、gifが読み込めません。でpngに変更して、保存すると透過出来なくて! 困っています。最初から素材でpng透過してある物も、出来ません。ソフトはwinxpに標準でついているもの(フォトレタッチとビルダーv6.5ライト)意外はIrfan とPict Bear(ペイントソフト)のようなものしかありません。 あまり、画像処理ソフトの使い方が分からずにいます 上記のフリーソフトも使いこなせずにいる、初心者です。 良い方法があったら教えてください 市販のソフトでないと、このような事は出来ないのですか。 どうぞ宜しくお願いいたします 説明が分かりづらくてすいません

  • AppleWorks6で背景透過のgifファイルを作りたい

    こんばんは。 MacのOSは10.3.5、AppleWorks6でサイトのロゴを作っています。 ただ、文字部分の背景が白くなってしまうので、これを透過gifにしたいのですが、AppleWorksではgifで保存できません。(現在はjpgで使用) フリーソフトなどを使ってこれをgifに変換し、かつ背景を透過にする手段はあるでしょうか。 (ソフトは、なるべくOS10に対応しているものをお願いいたします)

    • 締切済み
    • Mac