2011年6月20日月曜日

見えない影。


じーーーっと見る。


でも実はじーーっと見られてる。

はるか右後方より。



こんばんわ。

曇り空のちっとも爽やかでは無い仕事初めの月曜日、どのようにお過ごしでございましょうか。


昨日はGoogle先生のトップページのロゴが変わってたんですけども、その絵柄を見て勝手に


「世界で初めてネクタイが製造された日なのかそうなのか」


と思っておりましたNAWOです。


ちがいますよね。パパンの日なんですよね。

本当失礼しました。


というか気になる。

何が気になるかって、その父の日のロゴがものすんごい微妙〜〜に左に傾いてるのが。


気になって気になって、夜も眠れないほどに気になって。

昨日は8時間も寝てしまったではないか。どうしてくれるGoogle先生。


多分ですね、このロゴが微妙〜に傾いてるのは、日頃あくせく働いてるお父ちゃんの、仕事から帰ってきてあーー疲れた〜〜。的な事を表現しておるのではないのかと。

ちょうど父の日は日曜日ですのでね。仕事オフの日ってのもあると思うんですけども。

そういうちょいと気が抜けたカワイサみたいなもんを、あのナナメってる事で表現してるんだと、これまた勝手に考えて解釈して納得して。

でもってそのせいで8時間も寝てしまったと言う事にしておこうそうしよう。


というかこのロゴもそうですけども。

最近流行ってますよねえ。こういうアナログの質感の物に、微妙なシャドゥが入ってて立体的に見せるって手法。


解像度のあまり高く無いWEBのデザインの中で、こういう繊細な表現ってのは結構面倒臭いといいますか、ちと頭をひねらないと出来ぬ事だったりするんですけども。

大きな背景だとか、大きなロゴとかだったらまだしも、小さな文字表現だとかラインだとかになると、その影を1ピクセル単位で作らなきゃいかんので、とても繊細な作業になるんですが。


でもってそれぞれの人が見るモニタの解像度や、色の環境ってのもそれはそれはもうバッラバラですんでね。

どこを落としどころにするのか?ってのは非常に難しいとこだと思うんですけども。


この前からまたちょくちょく自社サイトをコチョコチョ触ってたりしてるんですけどもね。

一度そういう繊細な表現を探ろうか。と思って、参考になるようなサイトさんを探しまわってた時期がありまして。



Tinkering Monkey

厨房機器だとか、あと雑貨だとか。

色々オリジナルグッズを販売してらっしゃるサイトさん。

ここは背景にナチュラルな紙のテクスチャを敷いて、文字関係にはさりげなーーくですけどもほぼ全部にちょこっと立体的なエンボスチックな加工が施してあります。


このさりげなさがなかなかに素敵でしてね。


このショップのテーマカラーが、背景のナチュラルなベージュと、あと濃い灰色、それとアクセントカラーで赤を使ってるんですけどもね。

扱ってる商品自体が、あまり装飾されたものではなく、ナチュラルやシンプルな物が多いので、とても雰囲気は良いのですけども。

その自然な雰囲気を崩さずに、文字だとかをさりげなく目立たせる良い効果になってるなー・・・と思ってみてたんですけどもね。



でもってやはり作りが気になるので、このサイトさんに使われてる画像を解析してみる事にしたんですよ。






とりあえずサイトのトップに貼ってあるタイトルロゴをコピーしてきてフォトショップで開いてみた。

PNGて言います、背景が透明の画像になっておりましたけどもね。

この状態で見てても、本当にさりげなーーくですけど内側に影がついてて、少し凹ませたような感じになってるのは一目で解るんですけども。


でも何かそれだけじゃあ無いような気がしてならない。






背景を白で塗りつぶしてみた。

印象はさほど変わらず。

相変わらず少し凹んで見える。


でもさっきの透明の時と比べて、なんとなーーーくですけども、立体感が無くなったように感じるのは気のせいか・・・・・な?






今度は先ほどの背景の白を、100%反転させて黒にしてみた。

今度は凹んだ感じはさほどしなくなったのだが・・・・・・

ん?

何かロゴの左下に、影が入ってるような・・・・・・






超拡大してみた。


おおおー。確かに何かおる。確実におる。なんぞこれ??






さらに拡大して、何色なのかチェック。

うーむ。濃いめのグレーですな。


にしてもなぜに背景を白にしたら見えないのに、黒だったら見えるのか?






これだけ濃いグレーだったら、背景白にした時点で見えなかったらおかしいのに。

大きさにして数ピクセルだから、省略されてるんだろうか。

でも上みたいに拡大しても、白のほうは全くその存在を確認できず。ムムムムム・・



フォトショップでこういう影を、例えば描画方法を

「カラー比較(明)」

とかで重ねると、同じような効果にはなるんですけどもね。

でも最後にWEBで使用するとなると、PNGの型式かJPGの型式にしちゃいますので、画像が統合されてしまいますし。


そうなるとこのような黒だと見えて、白だと見えないって事は出来ないんですけどもね。


でも実際にこのロゴはPNG画像で、そういう効果になってるし・・・ムゥー



とまあ、その原因はいまだに謎のままなんですけども。



よく見ないとわかりませんが、

ロゴが少し凹んで見えるところをさらによく見ていると、ロゴの左下を中心に、すこーーしだけ白いフチドリみたいな物が確認できるんですよね。

ちょうど厚紙を、上からプレス機とかでプレスしたり、あと型押しで抜いたような時に出る、周囲の盛り上がりを再現してるようで。

この画像はものすんごい拡大してるのでちょいボケてますけども。

でも言ってる左下の白フチっぽいのは、なんとなく解ってもらえるかなーと思います。



この画像のような、基本レタープレスっぽい商品がメインだったりしますので。

おそらくそのイメージを崩さないようにと考えて作られてると思うんですよね。

作りはフォトショップで解析しても未だに私の勉強不足で謎のまんまですが。

ですけども良い勉強になりやした。


ありがとう。Tinkering Monkeyのサイトを作ったクリエイターの方々。


このようにですね、WEBの世界の中でも、色々な小技で魅せる事に特化してる技術ってのが沢山あるんですよね。


というかこうやって誰でもがそのWEBページから素材を収集して研究する事も出来ますので、有る意味WEBページを作ってアップするって事は

「自分の作品を試される」

という場だと言う事もできるのかもしれませぬ。

不特定多数の誰でもがネット環境さえあれば見る事が出来ますものね。


色々入れ替わり立ち替わりが激しい業界ではありますけども、日々こうやって人知れず工夫してる方々がいらっしゃるというのは、物は違う制作者としても誠に頭が下がりますです。はい。


ちなみに。

このサイトさんで必ず右上に出てる

「カートを見る」のこのボタンなんですけども。


これだけ見てても解んないかもしれませんが、下の赤色の布地の上が、実は無理矢理に伸ばしてあったりして。

よーく見ると解りますけど、上1/4くらいの場所から、同じテクスチャが連続してるんですね。

これは元画像の上の一部だけを選択範囲とって、変形して縦長にした時におこる現象でして。

フォトショップを少し知ってる人だったらすぐに見てわかりまする。


ま、サイトの本当に一部で、しかも上のその部分は見えないとこなんで何にも問題ないんですけどもね。

こういう事もバレてしまうのか。と思って人ごとではないな・・・と思ったんでつい載せてしまいましたとさ。


もう、細かいとこまでイヤなヤツね〜とは言わないで(汗)これも勉強だったりしますです。はい。



というわけで今日はちとWEBで見つけたどうしてもわからなかった影の謎について。

絶対にこの作り方調べてやるもん。


では仕事に戻りますー

明日天気になーれ♪


また明日〜

ごきげんよろしゅう〜








2 件のコメント:

  1. む、むム、難しいッ(><;

    なんだかもぅ私には、わからん。。。 orz

    (「カートを見る」のは、なんとなく理解済)


    他所様のを「視る」のは、わからないなりにも結構好きですけどね。。。

    でも、あまり人のいるときの会社ではしないよにしてます。

    だって、「何をぼ~っとしてるの?」と心配されるから。

    返信削除
  2. >hariさん

    こんばんわですー
    お仕事ご苦労様です♪

    昔と比べると、そらもうサイトの数なんて本当に星の数ほどありますんで。

    ちと変わってたりするくらいでは脚光も浴びないような状況ですけどもね。

    でもこういう細かいとこで小技炸裂させてるところを見ると、良い仕事してますねえ~っとどこぞのテレビ番組みたいにつぶやいてしまうんですねこれが。

    WEBにしても何にしても、そういう解りにくいとこで手間をかけるってのがツボだったりします。

    いまだに上の影は謎なんですけどね(汗)


    ボーっとしてるように見られるのは最初だけですよー

    いつもそういう状態にしてしまえば、

    「ああ、何か考えてるのね・・・」

    と周りはかってに誤解してくれますww


    油断して寝ないようにするのが大変だったりしてw
    私の場合w

    返信削除