Recommended
More Related Content
Similar to エンジニアのためのアイコン作成勉強会
Similar to エンジニアのためのアイコン作成勉強会 (20)
More from Kazuaki KURIU
エンジニアのためのアイコン作成勉強会
- 2. 自己紹介 • @kurikazu • Webのシステム作ってます （最近はマネジメント中心） • 活動場所 • ヒビノログ http://blog.songs-inside.com • Shibuya.trac
- 3. これまでの作品
- 6. はじめに
- 9. すみません
- 10. 自己紹介タイム
- 11. この勉強会をやろうと 思った背景
- 12. ふだんの開発の現場で... • 担当するのはプログラム、機能作りの部分で あることが多い • スケジュールとか予算とかに追われ... • 「（見た目は置いといて）まずは機能を先に 作ってしまおう」となりがち
- 13. でも、機能が似たようなものが ２つあったとき
- 14. 「見た目が好み」かどうかが 選ぶ基準になるはず。 ぼくらはもう少し、 「見た目」にも気を配った方が いいんじゃないかなぁ、と。
- 15. 好きなデザイン
- 20. プロの仕事
- 22. アイコンとは
- 23. アイコンとは • アイコンの語源はギリシャ語の「eikón」であ り、これは「類似物」「崇拝の対象」などを 意味する。 • また「キリスト教で神様や天使を象徴として 模した像、絵」なども指すようになる。 出典 http://dic.nicovideo.jp/a/アイコン
- 24. 頭に入れておきたいこと
- 25. 4つの基本原則 • コントラスト • 反復 • 整列 • 近接 「ノンデザイナーズデザインブック」より
- 26. コントラスト • 類似するのを避ける • 要素が同一でないならはっきり違わせ る • 視覚を引きつける要因になる
- 27. 反復 • 視覚的な要素（色、形、質感、位置関 係、線、フォントの書体、サイズ、画 像）を作品全体を通して繰り返す • 一体性の強化につながる
- 28. 整列 • すべてのものを 意識的に配置し なければならな い • 三分割法、黄金 律、...
- 29. 統一感 • 線の太さ • 図形の大きさ、傾き、効果 • 図形の位置（マージンなど） • 使う色を決める （アプリのテーマカラーをベース）
- 30. やってはいけないこと • 10 Mistakes in Icon Design （Secrets from the Chef） • http://turbomilk.com/blog/cookbook/icon_design/ 10_mistakes_in_icon_design/
- 31. やってはいけないこと • アイコンのデザインの差があまりない • 一つのアイコンに要素が多すぎる • 不要な要素を含んでいる • アイコンセットに統一性がない • 小さいアイコンに不要な遠近感、シャドウ （16x16px以下）
- 32. やってはいけないこと • リアルすぎるアイコン • 国民性や社会性に依存（言語） • インターフェースで使われている要素をアイコン内 で使う（OSのインターフェースと混同する） • アイコンの中にテキストがある • ぼけてしまう
- 33. 実際に作ってみる • まずはラフデザイン • 上手下手は関係ない • 手を動かすこと、頭の中のイメージを 書いてみることが大事
- 34. 既に定着したイメージはできるだけ使う • ファイルを開く（フォルダ、書類） • 保存（フロッピー） • タグ（しおり） • お気に入り（星） • SNSに投稿（twitter、facebook）
- 35. 「何を」「どうする」 • ファイルの新規作成 → 「ファイル」「追加」 ＋ →
- 37. 下絵の取り込み • 自分で書いた絵をスキャナで取り込む • イメージに近い画像を探す （Googleイメージ検索など） →いいなぁと思うデザインの コピーから入る
- 38. 下絵をもとにトレース
- 39. パスだとトレースは 結構大変
- 40. 図形の合成や型抜きを うまく使う
- 41. 抽出しやすく色を変更
- 42. 選択→パスに変換
- 43. ちょっとしたコツ
- 46. グラデーション • 濃い→薄い、薄い→濃い • 変化の度合い • グラデーションの方向
- 47. 透過 • 柔らかい印象になる • ベースとなる図形の上に 光沢や陰の透過図形を重ねたり
- 48. 余白を作る
- 50. 使用環境によるルール • iPhone http://developer.apple.com/library/mac/#documentation/ UserExperience/Conceptual/AppleHIGuidelines/IconsImages/ IconsImages.html http://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
- 51. Android な感じ • マットなアイコン • 薄い 濃い • グラデーションの境 界はぼんやり
- 52. iPhone な感じ • 光沢のあるアイコン • 濃い 薄い • 光沢を別図形で作る • グラデーションの境界 はくっきり
- 53. どのツールを使うか • 無償 MS Paint、GIMP • 有償 Photoshop、Illustrator、Fireworks • 効率に関わるのでけっこう大事 • あとは慣れるのみ 個人的には Fireworks をオススメ
- 54. パーツの再利用 • 作るだけ作ったらとっておく • うまく行かなかったと思っても 後々役に立つかも？
- 55. 参考にしているサイト • WebDesign RECIPES http://webdesignrecipes.com • fireworks Mania http://fw.v-colors.com/ • Kuler http://kuler.adobe.com/
- 56. Enjoy Designing!