デザイン勉強会 ノンデザイナーのためのパーツ作成講座 テキストおこし

まずは自己紹介をさせてください。

まめここと石嶋未来です。
ネットでの活動はだいたいこのIDでやってます。屋号の「ウープスデザイン」です。

高校卒業後そのまま就職し、つい数年前まで栃木県で印刷所やデザイン事務所で働いていました。今年の7月に独立し、印刷物からノベルティ、webサイトまで地域密着型なんでも屋として活動しています。

よろしくお願いいまーす。

はい、それではどん。
第1部 ノンデザイナーのためのそれっぽいパーツ作成講座。
内容はこんな感じになります。

まずソフトの話ですが最初に買うのであればPhotoshop Elementsをおすすめしたいと思います。主にwindows版になってしまいますが本家に比べて安いところが良いです。ただいくつかの機能の制限や操作方法が本家と異なるのがネックですけどね。やっぱり一番のメリットは汎用性ですね。まわりの人にも聞きやすいし、データのやりとりでもphotoshop形式ならまぁだいたいは通ります。さらにいい事はこちら。

psdtutsはチュートリアルサイトとしてはかなり有名なサイトです。こういったサイトは海外にとても多く検索すればわんさと出てくるので操作方法さえ覚えてしまえばかっこいいものが再現しやすくなります。またそれらのサイトからピックアップして日本語で解説してくれているPhotoshop VIPも多いに参考になります。ぜひ訪ずれてみて何かを試しに作ってみると良いでしょう。

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

さて何か作る時に必要となるのが素材。
写真はイラストや書体といったものですね。素材がなければ私たちはけっこうタダの人です。でも案件によっては十分に素材を用意できずこちらで作らなければならない事もしばしば。そういった時に現場の最前線にいる私のような傭兵はこんなサイトを使っています。

写真はストックフォトエクスチェンジ。続いてディビアンアート。カテゴリー→リソースアンドストックイメージズ→アプリケーションリソースと辿っていくとたくさん素材があります。
またPhotoshopブラシの宝庫ブラッシージーや兄弟サイトであるベクターデータのベトティージーなどが便利です。

私はフィードで購読してます。そしてこれは使えそう。と思ったものを専用のtumblrにポストし後で見返しやすいようにしています。

また、素材CDを買うこともおすすめします。。1点ずつ購入するよりコストパフォーマンスが良いです。具満タンや素材辞典は多くのタイトルがあるのできっと目当てのものが見つかるでしょう。

では次の内容を見てみましょう。
センスあふれる配色を思いついちゃう裏技。

色は好きです! 色には著作権がありませんからね。盗めるワザはセンスはどんどん盗んでいきましょう。それが上達のコツです。

色遣いに困った時におすすめのワザを紹介します。
主役となる写真が決まっている場合は、その写真で使われている色で配色すると上手く調和します。そういったサービスも用意されています。カラーパレットジェネレーター。

しっくりこない場合はPhotoshopの色相・彩度というツールを使ってカンタンにバリエーションを探すことができます。

さて、配色に関しても分かってきたところで次は本格的に作るところですね。

今どきデザインのボタンを超速で作る方法!
こんなボタンとか良く見かけますよね。おっしゃれー。
ボタンを作るのはマッハでやると5秒で作れちゃいます。ここら辺は少し後で話しますね。

ここからは実演を交えていきます。PCを開いて話しを聞きながらPhotoshopをいじるとより、理解が深められると思います。お持ちの方は立ち上げといてくださいねー。

最近のトレンドでしょうか、グラデーションでより質感を重視したものが流行っていますね。
こちらのボタンデザインを集めたものを見るとよく分かります。ボタンデザインに必要なのはその形状より質感表現にあるのようです。こう「ぷくっ」とでっぱっているような質感。

っても自分でグラデーション作るのもけっこう難しいものです。はじめてのphotoshop、はじめてのデザインではなかなか上手くいきません。ここでも必殺技。

「phothosp グラデーション」で検索してみましょう。このようにものすごく沢山あります! すごいですねー。赤い文字ははてブの数。すごい数になっているのでみなさんも一度や二度ブクマしたことはあるんじゃないでしょうか。ここから気に入ったものをさくっとダウンロードしてやってください。大概はphotohosp形式なのでほとんどつかえます。いやーいいですね。photoshop。

さてさて、僭越ながら私もそんなのを作ってブクマ稼いで有名人になりたいと思います。という事で作ってみました。じゃじゃん! iphoneで使われているグラデーションセットです。これを使えばあなたもiPhoneデザイナーですね。さて実際にこのグラデーションを使ってボタンを作ります。

実演

実際の操作を見てみると、すごくカンタンなことが分かりますよね。
プログラムと同じかもしれません。ちゃんと手順を踏めばかならず同じような見た目になるのです。レイヤースタイルはこのようにとっても便利です。

まーでも作るのめんどいよね。とまたなったとしたら、こんなページがあります。
ペパボの中の一人の方がphotoshopで自由に改変できるボタンデザインと作ってくれています。文字を編集したり色を変えたりとなんでも出来るのでダウンロードしてみてもOKです。

さて次はいよいよ、デザインでいうメインディッシュのところです。
少し難易度があがります。ソフトの使い方もそうですが、閃きや引き出しを多く持っている方がそりゃ有利になります。なのでこれらを作る前にはギャラリーサイトを見てまわって自分のイメージに近いところを探し、どこがいいのか、どこが好きなのか、どうしたらこれを再現できるのか。を十分に実験してみてください。私も日頃からサイトや日常生活で良いデザインのものを見るようにしていますが、やっぱり作る前になるとことさら視線は厳しくピンポイントになります。webでいうと、このナビゲーションのシャドウがいい。型押しの質感がいいとか書体の使い方がいいとか。

はいではいってみましょー。ここからはほぼPhotoshopでの実演です。
まずはアイコンから。

■に入れてしまえばけっこうそれっぽくなります。
さきほど覚えたレイヤースタイルを使えば鬼に金棒!

まずは■を作ります。少し角を丸くするとカワイイですね。
左のツールパレットから角丸長方形ツールを選び。上部の右側にて角の丸さ具合を入力。
ドラックして■を作ります。そして、右のレイヤーパレットから今作った■を選びダブルクリック。
レイヤースタイルからグラーデションオーバーレイで適当に選び、適用。ぷっくりさせるためにエンボスをかけます。数値はこんな感じで。

次は中に入れる図形をを書いていきます。良く使うところでホームアイコン。お家でしょうか。
これは■だけでほぼ作れます。長い■を二つ作ります。ななめにしてくっつけて屋根にする。
■で土台を作ります。次に間の空白を埋めます。左のパレットからパスツールを選択。パスは直線を書く分にはカンタンです。頂点をそれぞれクリックしてちょんちょんちょんと引いていくと家が出来ました! そうするとアラカンタン。お家が出来てしまいました。でもドアを足したいですね。一度ここで統合します。そして左のメニューパレットから選択ツールを選び縦長でドアの用に選択範囲を作ります。そしてその部分を削除。ドアっぽくなりましたね! このままだと殺風景なのでおしゃれっぽくしちゃいましょう。しつこいですがまたレイヤースタイルを使います。レイヤースタイルをマスターすればかなりデザイナーっぽくなります! 何度も使ってみて感じを覚えていきましょう。

さて、質感を与えるためにエンボスをかけます。数値はこんな感じ。そうするとペコっと凹みますね。そしてさらにグラデーションへ。黒と白のグラデーションを選び描写モードをオーバーレイにすると黒いところがより深みがでて、白いところも明るくなりまして。光が当たっているようなグラデーションを表現できます。あら便利。

ここに文字を入れてレイヤースタイルをコピーしてあげればアイコンの感性!!

ログインにいたっては丸と▲。
ユーザーアイコンもすべて丸で作られているのが分かりますね。
口のところは半円を使用して、腕のところだけは図形でなくパスを自分で引いてるので少し練習が必要です。

さてアイコンが出来たところで次はロゴマーク!
凝った書体や工夫は必要ありません! 既に入っている書体だけでもステキな書体があります。
Mriadやverdanaなどもありますね。

こんなものを作ってみました。
これもそんなに難しいことやってません。この後を見ればアナタにも作れるようになります!

ポイントはwoops、designと二つの意味があること。サイト名などにもかなり多いのじゃないでしょうか。英語を二つ合わせて作りましたー。という一番メジャーな命名方法です。
これを上手く使ってそれぞれの意味を別の書体で組み合わせる技です。

woopsのところはAppleでも使われているmyriadです。そして右側のデザインという文字。
手書き風の書体や明朝風、セリフ書体といいます。にしてみるとそれだけでいい感じになります。今回は思いきって筆記体を使用してみましょう。えい、えい。

そしてそれぞれの大きさを合わせるだけです。デザインの感じがステキなのでそっちを大きめにしますね。おおーこれだけで本格的な感じがします。

さらに図形を組み合わせてマークを入れてみましょう。
吹き出しは簡単に作れるのでおすすめです。webサービスでも良くモチーフとして使われていますね。

まずは円形ツールで丸を書きます。そして先程も出てきたパスツール。こいつで▲を作って統合してあげます。吹き出し完成ー。

そして王冠ですね。ここがキモです。正念場。パスツールで曲線を書きます。
まず下から作ります。ぽち。それからカーブのてっぺんをぽち、そしたらクリックしたままマウスをまっすぐ左へ伸ばしてください。そうするとさっき書いた線がまがっていきましたね!! いい感じのカーブになったらマウスをはなします。そしてまた左へマウスを持っていって、ちょうどいいところでクリック。するとカーブした線がかけました! ふーおつかれさまです。ここで王冠のクライマックスが終わりました。あとは頂点から頂点へクリックしていくだけ。じぐざぐじぐさぐ。そしてじぐざくのてっぺんに丸を作っておいていきます。円形ツールで丸を作成します。オプションを押しながたドラックすると複製が可能です! それでちょんちょん置いていく。よっしゃー! これで王冠完成です。

そいつらをdの上に置いてあげれば完成ですね。下にタグラインなど入れてあげるとさらにwebらしいですね。

これでロゴ作りの初歩が完了しました。

まとめはコチラ。難しいことはありませんね。
こういっちゃなんですがスタンダードな書体を使うほど、佇まいが堂々としていてカッコよくなります。

そして最後にメインイメージです。ここがラスボス。
ここで少し小話ですが、メインイメージは何を作るより、どう作る。というのが重要です。すぐにパソコンに向かうのではなく頭でいろいろ練ってから作ると良いです。

たとえば商品を伝えたい場合。そのものを写真で大きく見せるのが良作ですね。
また、無形サービスの場合、写真が難しい場合はロゴやイラストなどで見せる例もあります。

ここでは、ブログなどの個人に向いたものを作る場合に使えるなんとなくカッコ良さそうなメインイメージを作る方法を紹介したいと思います。

最後にこれを作って終わりになります! ぜひ家に帰ってから、明日でもけっこうですのでやってみてください。30日間無料で使えるphotoshopを放置しちゃだめですよー。

さていざクライマックスへ。
こんなのを作ります。めっちゃ良く見るデザインですね。
方法を覚えればいろいろアレンジがききますよー。

まずは1200x1200でキャンバスを作ります。960など良く用いられる幅ぴったりで作るとこじんまりとしがちなので広くとっておきましょう。まずは全てを選択してキャンバスを真っ黒に塗り潰します。
そして960ピクセルの■を作ります。変形ツールで幅を960としてエンターを押せばかってになってくれます。便利ですね。そして全てを選択。上のバーに出てくる整列パレットから真ん中にする。ボタンをクリック。■が真ん中になりました。そいでもってそこにガイドを引きます。これでサイトの横幅は把握できましたね。
さてさてここからが技のオンパレードです。
さらに新しくレイヤーを作りまた黒く塗り潰します。
そしたら左のメニューパレットの一番下。この■二つは上にあるのが描写色。書く時に使われる色ですね。そして下にあるのが背景色とくにこれは深い意味ありません。これらが白と黒になっているのだけ確認してください。
そしたら上のツールバーからフィルタ→描写→ファイバーを選択
そうするとダイアログが出ます。これを上のスライドを30前後にしたらOKボタン。
ファイバーってこんななんですかね。ま、それはおいといて続けざまにフィルダ→ボカシ→移動を選択。そして移動を縦にして999に設定。プレビュー画面を見ると分かる通り金属のような見た目になります。ヘアラインっちゅーヤツですね。それでOK。

そしてそのレイヤーを右のレイヤーパレットから選択しダブルクリック。もう分かりますね。レイヤースタイルです。ここでグラーデションを選択。虹色を選択してこれの角度をさっきのボカシど同様に縦に変更します。そして描写モードをオーバーレイ。そうするとヘアラインにそのまま虹色が乗りました。ここまで着たらあと少し!
さらにここでもフィルタを使用。フィルタ→描写→照明効果。これは本当にライトがあたっているように表現してくれる便利やさんです。
こちらを3ダウンにして、左に出た丸たちはこのように上に向けてまっすぐにします。少し移動にコツがいるので頑張りましょう。そのままでも十分ステキな質感がでるのでいいんですがw

そしたらもうゴールは目前。OKを押したらライトのところの光が浮き上がっているようになりました。これを上部に持ってきます。さらに長方形ツールで■をにょーんと引き色を黒にします。これでかなり見えてきましたね。あとはもうさっきのロゴを置くだけ! 完成です!

ここまでの操作がおいつけなくても冒頭で話したチュートリアルサイトでも細かく載っていますのでぜひぜひ試してみてください。

デザイナーデビューですね!

さて、これでこのセッションは終了です。皆さんいかがでしたでしょうか？
質問などあればどうぞー。