33
ままま ( まままま ) id:woopsdez 1982 まままま (26 ま ) まままままままままままままままま 2 ま 2009 ま 7 まままま

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

  • View
    3.246

  • Download
    4

Embed Size (px)

DESCRIPTION

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

Citation preview

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

まめこ (石嶋未来 )

•id:woopsdez

•1982年生まれ (26歳 )

•栃木県でデザイナしてました。

•東京歴 2年

•2009年 7月に独立

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

第 1 部ノン・デザイナーのための、それっぽいパーツ作成講座

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

今日はこんなのやります

•なんちゃってデザインをしたい時に使える素材サイトはこれだ !

•センスあふれる配色を思いついちゃう裏技

•今どきデザインのボタンを超速で作る方法

•ロゴやアイコンだって簡単にできちゃうんだぜ

•それっぽいメインビジュアルはこう作る

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

まずはソフトについて•やっぱり Photoshop!

約 10万円 約 2万円

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

ソフトがいじれればhowtoはどこにでもある。

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

なんちゃってデザインをしたい時に使えるサイトは

これだ

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

tumblrに投稿しておくと見返しやすい

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

その他のサイト•とは言っても商用では若干の不安が残る場合も。

•会社である程度経費が出せる場合は、右のものを購入するのが良いです。

•具満タン

•素材辞典

•写真素材で検索するとたくさんのサイトがヒットします。

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

センスあふれる配色を思いついちゃう裏技

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

色に著作権は無い !

•どんどん盗もう !

•最初は Kulerなどに頼ってみましょう。

色が多いほど大変。色数を 2-3色で作ってみる。

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

主役の写真で使われている色で構成する。

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

Photoshopで配色

色相・彩度というツールを使ってバリエーションのチェックが出来ます。

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

まとめ•色には著作権はない ! どんどん盗みまくろう。

•主役となる写真があればそこからサイトの色を選ぶのも使えます。

•色相・彩度でバリエーション探し。

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

今どきデザインのボタンを超速で作る方法

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

さぁ、 PCの用意はいいかい?

•photoshopさえあれば OK

•商用利用可能な素材をwebからダウンロードしてどんどん使っていきましょう。

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

「 photoshop グラデーション」で検索

このように沢山のサイトで紹介されているものがあります。

気に入ったらさくっと DL。

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

…僭越ながら私も

iPhoneで使用されているグラーデーションを集めてセットを作ってみました。

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

キモはレイヤースタイル

まとめ

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

…めんどうなら

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

ここからはちょいとレベルが上がります•なんてったってロゴやメインイメージはソフトの使い方より閃きやアイデアの引き出しが必要なところだからね。

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

ロゴやアイコンだって簡単にできちゃうんだ

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

まずはカンタンそうなアイコンから

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

まとめ

•■に入れちゃう

• ■丸や だけで適当に絵を書く

•レイヤースタイルを駆使して質感を表現 !

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

次はロゴ !

•凝った書体は必要ない !

•プリインストールされいてる書体の中にも優れた書体はたくさんです。

Helvetica

Futura

Century Gothic

Georgia

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

こんなん出来ました

アナタにも作れます !

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

まとめ

•既存の書体で十分 !

•それぞれのワードの書体を変える•大きさで差を付ける•カンタンなマークを置く

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

最後にメインイメージ

•ラスボスがやってきた !

•最後の的は強敵よ !うかつに近づいてはいけないわ !

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

商品を伝えたい

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

ロゴを主張

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

こんなの作ります。

黒くて虹色で抽象的めちゃくちゃ良く見ます

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

今日覚えた集大成を発揮しましょう

みんなは「 Photoshop」を装備した。

みんなは「配色」を覚えた !

みんなは「レイヤースタイル !」を覚えた !

みんなはレベルが上がった !

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

完成

•おつかれさまでした !

•みなさんいかがでしたか?