Embed Size (px)
Citation preview
エンジニアのためのアイコン作成勉強会
2012/01/18
自己紹介
• @kurikazu
• Webのシステム作ってます（最近はマネジメント中心）
• 活動場所
• ヒビノログ http://blog.songs-inside.com
• Shibuya.trac
これまでの作品
はじめに
すみませんデザインの知識、基本的には独学です。
こういう希望がある方
デザインの基礎から知りたい
プロ並のアイコンを作りたい
すみません
自己紹介タイム
この勉強会をやろうと思った背景
ふだんの開発の現場で...
• 担当するのはプログラム、機能作りの部分であることが多い
• スケジュールとか予算とかに追われ...
• 「（見た目は置いといて）まずは機能を先に作ってしまおう」となりがち
でも、機能が似たようなものが２つあったとき
「見た目が好み」かどうかが選ぶ基準になるはず。
ぼくらはもう少し、「見た目」にも気を配った方がいいんじゃないかなぁ、と。
好きなデザイン
プロの仕事
http://www.youtube.com/watch?v=O5OVHIG_Nnc
アイコンとは
アイコンとは
• アイコンの語源はギリシャ語の「eikón」であり、これは「類似物」「崇拝の対象」などを意味する。
• また「キリスト教で神様や天使を象徴として模した像、絵」なども指すようになる。
出典 http://dic.nicovideo.jp/a/アイコン
頭に入れておきたいこと
4つの基本原則
•コントラスト
•反復
•整列
•近接「ノンデザイナーズデザインブック」より
コントラスト
•類似するのを避ける
•要素が同一でないならはっきり違わせる
•視覚を引きつける要因になる
反復
•視覚的な要素（色、形、質感、位置関係、線、フォントの書体、サイズ、画像）を作品全体を通して繰り返す
•一体性の強化につながる
整列
•すべてのものを意識的に配置しなければならない
•三分割法、黄金律、...
統一感
•線の太さ
•図形の大きさ、傾き、効果
•図形の位置（マージンなど）
•使う色を決める（アプリのテーマカラーをベース）
やってはいけないこと
• 10 Mistakes in Icon Design（Secrets from the Chef）
• http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
やってはいけないこと
• アイコンのデザインの差があまりない
• 一つのアイコンに要素が多すぎる
• 不要な要素を含んでいる
• アイコンセットに統一性がない
• 小さいアイコンに不要な遠近感、シャドウ（16x16px以下）
やってはいけないこと
• リアルすぎるアイコン
• 国民性や社会性に依存（言語）
• インターフェースで使われている要素をアイコン内で使う（OSのインターフェースと混同する）
• アイコンの中にテキストがある
• ぼけてしまう
実際に作ってみる
•まずはラフデザイン
•上手下手は関係ない
•手を動かすこと、頭の中のイメージを書いてみることが大事
既に定着したイメージはできるだけ使う
•ファイルを開く（フォルダ、書類）
•保存（フロッピー）
•タグ（しおり）
•お気に入り（星）
• SNSに投稿（twitter、facebook）
「何を」「どうする」
•ファイルの新規作成→ 「ファイル」「追加」
＋ →
画面に落とし込み
•拡大、縮小したいのでベクトル化する
•自分で書いた絵をスキャナで取り込む
•イメージに近い画像を探す（Googleイメージ検索など）→いいなぁと思うデザインの コピーから入る
下絵の取り込み
下絵をもとにトレース
パスだとトレースは結構大変
図形の合成や型抜きをうまく使う
抽出しやすく色を変更
選択→パスに変換
ちょっとしたコツ
3つの効果をうまく使う
•シャドウ
•グラデーション
•透過
シャドウ
•少しだけ
•色は少し薄め（または透過）
グラデーション
•濃い→薄い、薄い→濃い
•変化の度合い
•グラデーションの方向
透過
•柔らかい印象になる
•ベースとなる図形の上に光沢や陰の透過図形を重ねたり
余白を作る
使う色は3つくらいを目安に。
•あとはグラデーションをうまく使う
使用環境によるルール
• iPhonehttp://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/IconsImages/IconsImages.htmlhttp://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
• Android原文 http://developer.android.com/guide/practices/ui_guidelines/icon_design.html日本語訳 http://www.techdoctranslator.com/android/practices/ui_guidelines/icon_design
Android な感じ
•マットなアイコン
•薄い⇒濃い
•グラデーションの境界はぼんやり
iPhone な感じ
•光沢のあるアイコン
•濃い⇒薄い
•光沢を別図形で作る
•グラデーションの境界はくっきり
どのツールを使うか• 無償
MS Paint、GIMP
• 有償Photoshop、Illustrator、Fireworks
• 効率に関わるのでけっこう大事
• あとは慣れるのみ個人的には Fireworks をオススメ
パーツの再利用
•作るだけ作ったらとっておく
•うまく行かなかったと思っても後々役に立つかも？
参考にしているサイト
•WebDesign RECIPEShttp://webdesignrecipes.com
• fireworks Maniahttp://fw.v-colors.com/
• Kulerhttp://kuler.adobe.com/
Enjoy Designing!
