こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

mixiのロゴの制作方法

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

よろしくお願いします。

投稿日時 - 2010-03-26 11:31:02

QNo.5780352

困ってます

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

確かに、どのマイミクさんのページに行っても、ソースを読むと
単一のロゴ画像(gif)のアドレスを指定しているように
見えるのですが、これが罠じゃないでしょうか。

実際にダウンロードしたgif画像(標準の白背景用)は、明るい
背景になじむように「文字色グレーで周囲を白くぼかし、背景を
透明に」処理されているようです。

一方、濃い色の背景を使っているマイミクさんのページを見ると、
透過処理云々以前に、ロゴの文字色が白になっているんですよね。

推測ですが、表示されるソースとは別に、背景によってそれに合った
ロゴ画像を指定する処理が行われているのではないでしょうか。
(ひょっとするとソースの中にその処理を行うタグが含まれている
のかも知れませんが、私の知識ではそこまでわかりませんでした)

試しにイラストレーターで背景一面にグラデーションのオブジェクトを
作り、その前面にダウンロードしたロゴ画像配置してみると、明るい色の
上ではきれいに馴染みますが暗い色の上ではやはりジャギーが出ます。

以上、参考まで。

投稿日時 - 2010-03-26 12:20:52

お礼

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

おっしゃる通り、背景色によってロゴの色を変えてるのに
気付きました。
それで対応してるんですね。

参考の件もありがとうございます。

投稿日時 - 2010-03-30 12:27:42

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

ふつーのGIFですよ

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

画像のフリンジを1px削除してください

投稿日時 - 2010-03-26 12:39:28

お礼

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

投稿日時 - 2010-03-30 12:28:49

ANo.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のアルファチャンネル対応していないから透過できない。

投稿日時 - 2010-03-26 12:11:24

お礼

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

>背景に合わせて複数の画像を用意しているだけでしょう。
言われて気付きました。
そういうことだったんですね。

おっしゃる通り、PNGはIE問題があるので使えないんですよね。

投稿日時 - 2010-03-30 12:23:53

ANo.1

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

投稿日時 - 2010-03-26 11:56:57

お礼

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

投稿日時 - 2010-03-30 12:20:09