グランジ系デザインもどきをFWでやってみる
ツヤツヤしたweb2.0系のデザインもいいけど、グランジスタイルのデザインもかっこいい。でもツヤツヤ系より手間ヒマがおそろしく掛かりそう。細かい部分の作りこみとか大変そうすぐる。と思ってたけど、The Secrets Of Grunge Design | Design Showcase | Smashing Magazineを拝見して、ついカッとなって「Fireworksで最速でグランジもどきを作ってみよう」という気になった。
もどき完成目安、15分。
15分くらいでこれができるはず。レイアウトはこのサイトのまんま。
１分目 色使いを考える
冒頭のSmashing Magazineにカラーパレットが掲載されてたのを参考にする。「控えめ」「汚れた感じ」「冴えない」感じの色使いがグランジスタイルのカラー使いのポイントらしい。
２～３分目 背景に使うテクスチャ用意
素材集やテクスチャ等の素材配布サイトとかから心の旋律に響いたものを用意。１分目で考えた色をイメージして、色の調整とかして背景にボンと置く。ノイズを少しだけ追加とかしたらなんとなくいい感じになった（ような気がした）。
配布サイトってどこよ？っていう方用
>> ぐぐる 「テクスチャ グランジ」
４～５分目 レッドラインを引く
何はともあれ、このサイトのこだわりの赤いラインを矩形で作る。
グランジスタイルのサイト見てるとなんかこういう枠線のラインがうにょうにょーとしてたり、破れてたりするケースが多かったので、ここはきっとポイントだろうと勝手に決めて適当にそんな感じの線種を選択。
今回たまたまチョイスしたのが「木炭 ->なめらか」。別にクレヨンとか何でもエッジがうにょうにょーとしてくれたらそれでいい。
６～７分目 サイトタイトルを作る
手書き風のかわいい系フォントにしてみる。特に意図はない。今のサイトのフォントがカッチリ系なのでその反動。「おひるねふぉんと」をチョイス。カラーは白にしようかとも思ったけど、背景画像の色を意識しつつ、くすんだ感じの#EFE7DE(ベージュ)にしてみた。
んで文字を並べてさっきの赤いラインと一緒に角度つけた。最初ベタにしてたけど、後でブラシで模様入れたら読みにくくなったから、ドロップシャドウ。幅3、透明度80%、柔らかさ4、角度315。
８～９分目 ブラシでそれらしく模様つける
ここで使ったブラシは「油彩 -> はね」ってやつ。(デフォで入ってるはず)なんか適当にうりゃーって書く。エッジは60、サイズをバラバラにしつつ４箇所に書いた。位置は後で微調整。
きっとここにこだわればこだわるほど味が出てくる。でも今回はサクっと作るがテーマなのであくまでサラっと。
10～12分目 コンテンツを置くであろう土台を作る
いつもなら矩形で書くけど、なんとなく敢えてペンツールで歪ませながら四角を書く。コーディングの事とか考えるとこの曲線、repeatさせにくい。内容はoverflowさせんのｗｗｗ とか思ったけど、敢えてスルーで全力で適当に書いた。そう、今日のテーマは最速でグランジもどきを作ってみようなのだ。
紙の質感とか破れとかは流して、とりあえず色を決めたら内側にグロー。ハローのオフセットは2、透明度60、柔らかさは8、オフセットは0にしてみた。その後ドロップシャドウ。
ここまで書いて怖くなってきた。ほんとにデザインちゃんとやってる人には怒られるんだろうな。。。先に謝っときます。ごめんなさいごめんなさい＞＜
13～15分目 テープで貼り付ける
テープ画像の正しい作り方ではないけど、とりあえず我流解説。まずテキストツールで「▲」を入力 -> テキスト -> アウトラインに変換した後、その▲を右向きに90度回転。それをテープのギザギサに使いたい数複製して、縦に並べて間隔を均等に。それらの▲達を合体（グループ化じゃなくて「パスの結合 -> 合体」で）矩形オブジェクトに重ね、透明度を下げて位置確認。んで、それらと矩形オブジェクトを両方選択して「パスの型抜き」。
テープで留めたい適当な位置へ移動。移動させたらブレンドを「乗算」にする。そして色調節。
ちなみに左図の下の方にあるテープは最初この色にしてましたの残骸。なんか、リアルに今私のデスク付近にある古い書類に貼ってあるテープ、こんな色だったので・・・。でもこの色にするとそこだけ全体と比べて浮いて目立ったので却下しますた。
コンテンツ土台の上はなんか適当に。そしてそこで集中力がキレたが左側下が残ったので、とりあえず今つくった土台をコピーして移動して色を少し変更しただけ。
優秀なデザイナ、グリーンさんに見せた。
ここまで出来上がったもの、デザイナのグリーンさんに見せた。
(n'∀')η＜グランジにしてはキレイすぎるお！
工エｴェｪ（´д｀）ｪェｴエ工工
もどきだから許してね。うん・・・でもそうなんやなぁ。汚したつもりでもなかなか汚しきれないものなんだなぁ。汚れた感じ・・・強敵。
ついでに、テープの乗算について聞いてみた。
めっちゃ細かい事なんだけど、実はテープ貼る時、これは乗算でいいのか、透明度で調節した方がいいのか自分でも迷ってたのでグリーンさんに聞いてみた。
Red：今回乗算使ったんやけど、グリーンさんなら乗算でいく？透明度でいく？
Green：普通のセロテープっぽくしたいなら透明度。濃い目のテープにしたいなら乗算。普通にするなら透明度にしてドロップシャドウするかな。下の色や柄を生かしたい時は乗算。
Red：んじゃさ、今回のケースは透明度で調節した方がよかったと感じる？
Green：透明度かなぁ。(以下フォロー入るｗ）個人の好みだからなｗ 乗算でも今回のイメージはあうと思うよ＾＾
奥が深いぜ！乗算！
<< Fireworks ショートカットコンボ(追記有) | 古びた紙素材を作成するチュートリアル >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/195
コメント (6)
これで15分ですか・・！
いつも些細なことでもデザインに迷いまくりです・・。
これくらいのものがさくっとできたらいいなぁ(;´Д｀)
投稿者: えど | 2008年09月25日 12:52
>えどさん、こんばんわー。
なんとなくですけど、FWってフォトショに比べて劣って見られる事が多いというか（もちろん加工の細かさに関しては勝てないですが）少し肩身が狭かったりするんで、FWでこんな風な事できるよーっていうのを書きたかったんですよねぇ。実際FWのチュートリアルも少ないし・・・。
私もデザインする時は些細な事で悩みまくりです。。絶対的な答えがないだけに頭使いますよね・・・(n'ω' `)
投稿者: Red | 2008年09月25日 19:29
いつも参考にさせて頂いています、ありがとうございます。早速練習しています。
投稿者: mon-ju | 2008年09月28日 14:51
>mon-juさん、こんにちわー。
ありがとうございます(n'∀')η
この記事には関係ないけど、mon-juさんの猫、かわいいですねー！
投稿者: Red | 2008年09月29日 10:39
うわーー、すごいです！！
勉強になりまくりです。
ＦＷは仕組みや操作に大分慣れてきましたが、「あれってどうやって作るの？」なものがまだまだたくさんあって・・。
そんな状況なもんで、ＲＥＤさんの記事はほんとタメになります。
投稿者: きしらう | 2008年10月04日 15:17
>きしらうさん、こんばんわー。
FireworksにしろPhotoshopにしろ、普段の仕事では使わないような機能とかやり方とかできる事を発見するのって楽しいですよね。
>「あれってどうやって作るの？」なものがまだまだたくさんあって・・。
私も私もー！
なんとなく我流で適当に似た感じに真似・・・の繰り返ししてます。ある程度ソフトの使い方が分かったら後は自分でいろいろ試してみる、作ってみる、練習して自分のやり方ができていくんでしょうけど、効率のいいやり方なのかって聞かれるともっといい方法ありそうとか思ったりもします(n'ω' `)
チュートリアルなんかで他の人の手順見るとすっごく勉強になりますね。
投稿者: Red | 2008年10月04日 20:27