TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。(現在のデザインになってからだいぶ経っており、今更な感じですが…)その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字(現在地表示) アイコンと文字(通常表示) ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねw それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook(アプリ) ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
![Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方](https://cdn-ak-scissors.b.st-hatena.com/image/square/87609e46cf5ccf1c68d6ad101149cc3539f893b9/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F10_s1.png)