アウターシャドーとインナーシャドー

PaintCodeというMacアプリを購入しました。

これでボタン画像などを制作すると、そのObjective-C用のコードが自動生成されるというのが売りです。

ですが、単純に画像制作アプリとしてとても使いやすく優れていて、簡単な操作で誰でもそれなりの質のボタンやアイコンが作れるようになっています。

このアプリの中でアウターシャドーとインナーシャドーの違いがわかりやすく表現されていたので紹介しようと思います。

上段がアウターシャドーで下段がインナーシャドーです。

どちらも影は黒です。

アウターシャドーは対象の下側に影がつきます。

インナーシャドーは対象の内側に、対象がずれて重なっているような感じです。

影をもっと対象に近づけるとこのようになります。

アウターシャドーをつけると対象が浮き上がっているように見えます。

おもしろいのはインナーシャドーなのですが、目の錯覚で2種類の見方ができます。

1つは、対象が下の方に盛り上がっていてドーナツのような形に見える見方。

2つめは、輪っかが陥没して見える見方。

少し見えにくいですが…。

真ん中の円にアウターシャドーがついているイメージです。

この2つのシャドーを使って簡単に下のようなボタンを作れました。

チュートリアル動画はこちら。