Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方

TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出

[kawa_hide]

細かい立体感のつけかた

[take-june]

いつもフツーにやってるし、見りゃ分かるじゃんと思うけど、他の人に取っては案外そうでも無いんだなー - Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方

[cumacuma]

1pxシャドウの使い方。

[pwg246]

Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方 | Arch

[warriorking]

Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方 | Arch

[papilio17]

再現PSDデータがついてる。企業やブランドをきちんと理解した上で表現できるデザイナーさんってほんとうにすごい。

[yhakusyaku]

アイコン作成のお手本：Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方 | Arch

[agechu]

再現PSDファイル付き

[kick178]

大事

[htn_50koma]

starred items / from Arch http://www.ar-ch.org/

[repworlds]

これはEvernoteに保存だな

[vitaminsii]

TwitterとFacebookのデザインを分析した記事。勉強になるなぁ。