アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

iCloud風のアイコンを作成する(Fireworks)

こんにちは。和田です。


今回はiCloud風のアイコンをFireworksで作成したいと思います。
オブジェクトは3つだけで作成できるのでとても簡単です。

それでは作成したいと思います。
まず始めに700×700pxの新規ファイルを作成します。

そして、

1.土台?となる部分の矩形を作成します。
 ・サイズ:512×512px
 ・丸み:94px
 ・塗り:線形グラデーション
  →グラデーションの値(番号は下記の画像に記載している番号を表しています。)
   (1) #DDDDDD
   (2) #89898B
   (3) #545456





2.次にステンレスのようなヘアライン効果のオブジェクトを作成します。

2-1.円の矩形を作成します。大きさは、「1」で作成したものより大きく作成します。
  大きく作成するのは、この後で設定するフィルタ(ぼかし(放射状))の効果を奇麗に反映させる為です。

 ・サイズ:646×646px
 ・塗り:円錐グラデーション
  →グラデーションの値
   (1) #E7E7E7
   (2) #B3B3B6
   (3) #9C9A9E
   (4) #F2F2F2
   (5) #F2F2F2
   (6) #9C9A9E
   (7) #F2F2F2
   (8) #F2F2F2
   (9) #9C9A9E
   (10) #9C9A9E
   (11) #F2F2F2
   (12) #F2F2F2
   (13) #9C9A9E
   (14) #9C9A9E
   (15) #C1C1C4
   (16) #C1C1C4





2-2.ヘアラインの効果を作成する為にノイズとぼかしを設定します。

 ・ノイズを追加:適用料:10
 ・ぼかし(放射状):
   適用量:30
   画質:100


ノイズがかかったイメージ


ぼかし(放射状)がかかったイメージ




2-3.「1」で作成したものより小さい矩形を作成してマスクをかけます。
  小さくすることでエンボスがかかったように見せる事が出来ます。
  但し、1点注意点があります。
  それは「2-1〜2」で作成したステンレスの矩形データはフィルターがかかっており、このままマスクをかけても上手くいきません。そこで矩形データを画像に変換してからマスクをかけます。
  画像に変換するには、
   ステンレスの矩形データを選択→その場で右クリック→メニューから「選択範囲を統合」を選ぶと画像に変換出来ます。

  ・サイズ
   幅:502px
   高さ:502px
   丸み:90px




こんな感じになります。
大分それらしくなってきました。



3.イラストの作成
3-1.アイコンの背景が出来ましたので、上に載せるイラストを矩形で作成します。
 ・塗り:#78787D




3-2.ここで、雲のイラストで色が塗られている部分に
  下地のヘアライン効果を反映させ、黒光りしたイメージにしたいので、描画モードを「焼き込み(カラー反転)」に変換します。




3-3.そして、イラスト部分を凹んだイメージにする為、下記のフィルターを設定します。

 (1)ベベルとエンボス(Photoshopライブエフェクト)

   構造--------------------------------------
    スタイル:ベベル(外側)深さ=200
    テクニック:スムーズ:サイズ=4
    方向:ダウン:ソフト=0

   陰影--------------------------------------
    角度:90度
    ハイライト:スクリーン(#FFFFFF):100
    シャドウ:乗算(#000000):60


 (2)シャドウ内側
   距離:5
   不透明度:100%
   ぼかし:2
   角度:315度




これで出来上がりです。
いかがでしょうか?
ちなみにいくつかバリエーションを作ってみました。




今回も簡単なので
皆様も是非作ってみて下さい。

AndroidにおけるLauncherアイコン、背景画像の作り方

はじめまして。鴨田と申します。
年初からアシアルにてデザイナーとして働いており、
今日からブログも書くようになりました。
どうぞよろしくお願いいたします。

さて、今日はAndroidにおけるLancherアイコン制作を中心に、
お話をさせていただきたいと思います。

なぜ、この話題かというと、アシアルでは現在、
Androidアプリの制作を積極的に行っていて、
正式なプレスリリースは明日行いますが、
今日から、「ClapClap Clock」というAndroidアプリがAndroid Marketにて、
無料公開されています。

どんなアプリかというと、拍手に反応して、
現在の時刻を声で知らせてくれるという時計ユーティリティです。
興味のある方は是非インストールして頂ければと思います。

今回はそのデザインを自分が担当したので、
そのときに参考にしたデザインガイドラインを大まかに翻訳しながら、
(翻訳というか、かなり意訳して、簡潔にしてあります)
AndoroidにおけるLauncherアイコンについて、お話させていただきます。

大元のAndroidデザインガイドラインは、下記になります。
http://developer.android.com/intl/ja/guide/practices/ui_guidelines/icon_design.html
こちらも一緒にご覧頂きたいと思います。


○Lancherアイコンについて

■見た目

「クリーンで現代的に」
・古臭く見えたり、みすぼらしいデザイン、暗喩的な表現のアイコンは避ける。

「シンプルかつシンボリックに」
・シンプルにデフォルメをして、小さなサイズでもわかるようにし、複雑にはしない。
・アプリケーションの特徴を示す一部分を取り上げる。
・自然なアウトラインと形になるように考慮する。
・だからといって、大きな画像の一部分のトリミングにはしない。

「質感とテクスチャー」
・あまりツヤツヤしたものではなく、マットな質感にすること。

「正面向きで、トップライト」
Android 2.0以降のプラットフォームでは、アイコンは正面向きに表現する。
 トップライトを用いて、ほんの少しだけ奥行き感をつける。



■するべきこと、しちゃいけないこと

「するべきこと」
・現代的に、シンプルに、マットに、質感を大事に表現する。
・正面からの見た目、トップライト、色は限定されたカラーパレットから選ぶ。

「しちゃいけないこと」
・古臭く、複雑で、光沢感のある、平面的なデザイン。
・奥行き感のある表現、トリミング、使用すべきでない色を使う



アイコンがとてもシンプルなものだったら、質感の表現を重視して作るといいようです。

デフォルトのアイコンセットでは、図3のようなマテリアルを使っており、
これをそのまま応用してもいいようです。





Andoroidのランチャーアイコンは2色で表現するのがふさわしく、1色はモノトーンカラーを用い、
もう1色のプライマリーカラーは予め用意されたカラーパレットから選択した方がいいようです。
そして、コントラストの表現をつけることが推奨されます。

推奨カラーパレットは、明るさが異なるモノトーンカラーとプライマリーカラーから出来ています。

このカラーパレットを使って作ったサンプルアイコンが図4になります。
異なる明るさのベースカラーとハイライトカラーを組み合わせて使うことで、
コントラストの表現が容易にできるようになっています。

推奨カラーパレットは図5になります。
テンプレートファイルも用意されています。
(http://developer.android.com/shareables/icon_templates-v2.0.zip)



■サイズと位置

ランチャーアイコンのサイズは画面の解像度によって決まっていますが、
そのままのサイズで作るのではなく、余白を考えて配置をします。

例えば、高解像度(hdpiサイズ)の場合、アイコンそのものの画像サイズは、72×72pxになりますが、
上下左右に、6pxの余裕をもって、配置させるようにします。
形状によって、その範囲から飛び出す分には構わないようです。
また、アイコンが真四角なものだったら、56×56pxにするのが適切なようです。

xhdpiスクリーン:
画像サイズ :92×92px
※2012/2/6追加

hdpiスクリーン:
画像サイズ :72×72px
アイコン  :60×60px以内
真四角の場合:56×56px

mdpiスクリーン:
画像サイズ :48×48px
アイコン  :40×40px以内
真四角の場合:38×38px

ldpiスクリーン:
画像サイズ :36×36px
アイコン  :30×30px以内
真四角の場合:28×28px



■サンプルアイコン



■実際に作ったアイコン

こちらが、実際に「ClapClap Clock」用にデザインしたアイコンになります。



手の形をIllustratorを使って、デザインして、
それをPhoshopに取り込み、大きさを整えて、
あとはアイコンテンプレートから、
グラデーションやカラーパレットを拝借しました。

おそらく、形のデザインさえしてしまえば、
後はテンプレートからいろいろ持ってくると、
簡単に出来るのではないかと思います。

Lancherアイコンに続いて、
背景やボタンに使う画像の説明を簡単にしたいと思います。


○背景画像やボタンについて

Androidアプリでは、画面サイズによって、
アイコン以外の画像も変える必要が出てきます。
背景やボタン画像などがそうです。

可変サイズのボタン画像の作り方もガイドラインに書いてあります。
http://developer.android.com/intl/ja/guide/topics/graphics/2d-graphics.html

ひとつの画像を9つのパーツに分け、
ストレッチ部分と固定部分を指定することで、
大きさが可変する画像の作成ができます。

具体的な制作手法は以下のようになります。

1.構成要素をすべて入れ込んだミニマムな画像を作ります。

2.ストレッチ部分の範囲を、上と左の端に、1pxの黒いラインを入れて指定します。

3.固定部分も含めて、コンテンツ部分にしたい範囲を下と右の端に、1pxの黒いラインで指定します。

4.完成です。



こちらが完成品で、上下左右の端に1pxのラインがある画像になります。
つまり、下図の白部分がストレッチ部分、赤部分がコンテンツ部分となります。



拡大された時のイメージは、このようになります。





○おわりに

結構な駆け足になってしまいましたが、いかがでしたでしょうか。
実は、アイコンガイドラインは最近になって変更されて、
それまではもっと作りにくい3Dっぽいアイコンの制作が推奨されてました。

ある日、ガイドラインがいきなり変わって、
ほぼ2Dで、しかも色数も制限されるようなものになったので、
アイコンに関しては作りやすくなったのではないかと思います。

Andoroidに携わるデザイナーさんには、常識なのかもしれませんが、
これからAndoroidに関わるデザイナーさんの手助けになればと思います。


○追記

Androidのアイコンガイドラインは下記が最新です。(2012/2/6現在)
いろいろと変わっているようですね。
http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html