Photoshop を使用した Tips 第2段として、今回は iPhone / iPad などで使用されるアイコンについてお話させて頂きます。
iPhone / iPad アプリにはシンプルかつわかりやすいアイコンが必須です。お話はそのアイコンを作成した後からになります。
まず、アイコンが表示される iPhone / iPad の場所として主には以下の3つがあります。
- ナビゲーションバー: 画面の上方に表示され、現在のタイトルを表示しているバーです。
- ツールバー : 画面の下方に表示され、現在のオブジェクトに対するアクションを実行するボタンが置かれているバーです。
- タブバー: 画面の下方に表示され、異なるモードを切り替えるバーです。
これらのアイコンは基本的に白色で作成します。実はこの時点でプログラマーさんの手に渡り、よく実機で見られるグラデーションや影がシステムで自動的に付けられます。Apple のデフォルトアイコンもほとんどが透過 ( アルファ ) 100%の白色のみで作成されています。
今回、タブバーアイコンを作成する際のちょっとした表現方法をご紹介させて頂きます。白ベタだけの表現では奥行きがなかったりして「もうちょっとなんとかならないかなぁ～」というとき、白にアルファを何%かかけると、奥行きが出せるので、デザインの幅が広がります。
例えば、先ほどのタブバーのイメージをご覧下さい。この「ホーム」の家のアイコン。ドアの色が他と違うと思いませんか？これは、ドアの白に Photoshop で 40% の不透明度を設定しているのです。
こうすることで後に実機に表示された際、色の幅が広がります。白一色だけではなく、アルファをかけたことで、グレーという色が増えたからです。だったら、最初からグレーで描けばいいのでは？と思われるかもしれません。だめなんです。実は、白でない色でもいいのですが、使用できるのは1色のみです。どの色で作成しようと、決められた色のグラデーションが付けられるため、画面に表示されると同じ色になるのです。ただし、アルファのみは反映されるので、同じグラデーションが付けられても、透過により下のタブバーの黒が透けることで、色が増えたかのようになります。
他にも、1つのアイコンに2つの絵を手前と奥に配置して、奥のモノにアルファをかければ重なった2つの絵に奥行きが出ます。奥の絵が暗い色になります。
アイコンはツールバーで 20 x 20 ポイント以内、 タブバーで 30 x 30 ポイント以内の大きさと基本的に決まっています。小さい上に、使用している色は白一色ですが、このようにアルファを絵の一部に設定することで、シンプルながらもデザインの幅を広げることができるんです。
シンプルだからこそ、ちょっとした手の加えようで「おお！」っと目を引くようにしたいものです。
関連記事
