iPhone / iPad らしい UI でアプリを制作したい、と思っても、意外とわかっているようでわかっていなかったり、わかっていても、「こんな画像リソースが欲しいのに、作り方がわからない」ということもあるかと思います。そんな開発者の方々の参考になればと思い、デザイン担当の立場から、Photoshop のちょっとした Tips を少しずつお話できれば、と思います。
第1回目は、ナビゲーションバー／ツールバー／タブバーの背景についてです。
この部分の背景画像は、標準 UI をそのまま使うのであれば画像でわざわざ作りこむ必要はありません。しかし「よりデザインにこだわりたい、他のアプリと差別化を図りたい」となると、画像を使って実装することも考えられます。そこでまず、iPhone らしい標準的なグラデーション画像を、Photoshop で作ってみましょう。
グラデーションを設定したいレイヤーをレイヤーパレットで選択し、ダブルクリック → グラデーションオーバーレイを表示します。（または、上部メニューバーの「レイヤー」→ レイヤースタイル→ グラデーションオーバーレイ）
「グラデーションオーバーレイ」の「グラデーション:」の横の、まさにグラデーションが視覚的に確認できるバーをクリックすると、「グラデーションエディタ」（下図）が表示されます。
グラデーションバーの上下にある五角形ですが、上は透明度（アルファ）、下は色の設定となります。五角形をスライドさせると分岐点変更、何も無いところでクリックすると分岐点を新規作成、五角形をドラッグして離すと分岐点消去できます。
透明度（アルファ）の場合は、五角形をクリックして選択後、「不透明度」「位置」を調整します。色の場合は、「カラー（表示色の部分をダブルクリックするとカラーパレットが表示されます）」「位置」を調整します。
そして、下記のように、カラーを調整します。
- カラー／濃い色 位置／0％
- カラー／1と同じ色 位置／50％
- カラー／1よりちょっとだけ薄い色 位置／51％
- カラー／薄い色 位置／100％
こうやってグラデーションをつけたレイヤーを、「色相・彩度」で調整してみても、いろんな色の変化を簡単につけられてよいかもしれません。この場合、ラスタライズされたレイヤーでないと「色相・彩度」は使えないので、レイヤーパレットでそのレイヤーを選択し、メニューから「レイヤーをラスタライズ」しておいてください。
次に、テクスチャに iPhone / iPad 風のグラデーションがついた背景画像を作りたい場合です。
- 上記の手順で作ったグラデーションの画像とテクスチャ画像を重ねる（グラデーションとテクスチャのレイヤーはどちらが上でも、いろいろ違いが楽しめます） 。
- 上に置いた方のレイヤーを選択した状態で、「覆い焼きカラー」等々、レイヤーパレット左上で、調整してみる。
- テクスチャやグラデーション効果がうまく出ない場合は、上に重ねた方のレイヤーの塗り、または、不透明度を調整 （0～100％）してみる。
いろんなデザインに出会い、楽しめるのも、このデバイスの魅力のひとつですね。
関連記事
