デザイン勉強会2nd 第1部 ノンデザイナーのためのパーツ作成講座

3,529 views

Published on

東京で行なわれた有志の勉強会、デザイン勉強会2ndの第1部の内容です。

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,529
On SlideShare
0
From Embeds
0
Number of Embeds
924
Actions
Shares
0
Downloads
29
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

デザイン勉強会2nd 第1部 ノンデザイナーのためのパーツ作成講座

  1. 1. まめこ ( 石嶋未来 ) <ul><li>id:woopsdez </li></ul><ul><li>1982 年生まれ (26 歳 ) </li></ul><ul><li>栃木県でデザイナしてました。 </li></ul><ul><li>東京歴 2 年 </li></ul><ul><li>2009 年 7 月に独立 </li></ul>
  2. 2. 第 1 部 <ul><li>ノン・デザイナーのための、 </li></ul><ul><li>それっぽいパーツ作成講座 </li></ul>
  3. 3. 今日はこんなのやります <ul><li>なんちゃってデザインをしたい時に使える 素材サイトはこれだ ! </li></ul><ul><li>センスあふれる配色を思いついちゃう裏技 </li></ul><ul><li>今どきデザインのボタンを超速で作る方法 </li></ul><ul><li>ロゴやアイコンだって簡単にできちゃうんだぜ </li></ul><ul><li>それっぽいメインビジュアルはこう作る </li></ul>
  4. 4. まずはソフトについて <ul><li>やっぱり Photoshop! </li></ul>約 10 万円 約 2 万円
  5. 5. ソフトがいじれれば howto はどこにでもある。
  6. 6. なんちゃってデザインを したい時に使えるサイトは これだ
  7. 8. tumblr に投稿しておくと見返しやすい
  8. 9. その他のサイト <ul><li>とは言っても商用では若干の不安が残る場合も。 </li></ul><ul><li>会社である程度経費が出せる場合は、右のものを購入するのが良いです。 </li></ul><ul><li>具満タン </li></ul><ul><li>素材辞典 </li></ul><ul><li>写真素材で検索するとたくさんのサイトがヒットします。 </li></ul>
  9. 10. センスあふれる配色を 思いついちゃう裏技
  10. 11. 色に著作権は無い ! <ul><li>どんどん盗もう ! </li></ul><ul><li>最初は Kuler などに頼ってみましょう。 </li></ul>色が多いほど大変。 色数を 2-3 色で作ってみる。
  11. 12. 主役の写真で使われている色で構成する。
  12. 13. Photoshop で配色 色相・彩度というツールを使って バリエーションのチェックが出来ます。
  13. 14. まとめ <ul><li>色には著作権はない ! どんどん盗みまくろう。 </li></ul><ul><li>主役となる写真があればそこからサイトの色を選ぶのも使えます。 </li></ul><ul><li>色相・彩度でバリエーション探し。 </li></ul>
  14. 15. 今どきデザインのボタンを 超速で作る方法
  15. 16. さぁ、 PC の用意はいいかい? <ul><li>photoshop さえあれば OK </li></ul><ul><li>商用利用可能な素材を web からダウンロードしてどんどん使っていきましょう。 </li></ul>
  16. 17. 「 photoshop グラデーション」 で検索 このように沢山のサイトで紹介されているものがあります。 気に入ったらさくっと DL 。
  17. 18. 僭越ながら私も… iPhone で使用されているグラーデーションを集めてセットを作ってみました。
  18. 19. キモはレイヤースタイル まとめ
  19. 20. めんどうなら…
  20. 21. ここからはちょいと レベルが上がります <ul><li>なんてったってロゴやメインイメージはソフトの使い方より閃きやアイデアの引き出しが必要なところだからね。 </li></ul>
  21. 22. ロゴやアイコンだって 簡単にできちゃうんだ
  22. 23. まずはカンタンそうなアイコンから
  23. 24. まとめ <ul><li>■ に入れちゃう </li></ul><ul><li>丸や■だけで適当に絵を書く </li></ul><ul><li>レイヤースタイルを駆使して 質感を表現 ! </li></ul>
  24. 25. 次はロゴ ! <ul><li>凝った書体は必要ない ! </li></ul><ul><li>プリインストールされいてる書体の中にも優れた書体はたくさんです。 </li></ul>Helvetica Futura Century Gothic Georgia
  25. 26. こんなん出来ました アナタにも作れます !
  26. 27. まとめ <ul><li>既存の書体で十分 ! </li></ul><ul><li>それぞれのワードの書体を変える </li></ul><ul><li>大きさで差を付ける </li></ul><ul><li>カンタンなマークを置く </li></ul>
  27. 28. 最後にメインイメージ <ul><li>ラスボスがやってきた ! </li></ul><ul><li>最後の的は強敵よ ! うかつに近づいては いけないわ ! </li></ul>
  28. 29. 商品を伝えたい
  29. 30. ロゴを主張
  30. 31. こんなの作ります。 黒くて虹色で抽象的 めちゃくちゃ良く見ます
  31. 32. 今日覚えた集大成を発揮しましょう <ul><li>みんなは「 Photoshop 」を装備した。 </li></ul><ul><li>みんなは「配色」を覚えた ! </li></ul><ul><li>みんなは「レイヤースタイル ! 」を覚えた ! </li></ul><ul><li>みんなはレベルが上がった ! </li></ul>
  32. 33. 完成 <ul><li>おつかれさまでした ! </li></ul><ul><li>みなさんいかがでしたか? </li></ul>

×