【つくってあそぼう：01】noteのヘッダー

あっという間にGWですね。

４月から新入社員が入ってきて会社がにぎやかになってきました。

私が新入社員で、デザイナーとしてのはじめての仕事は

社内の採用パンフレット作りでした。

数年経っても社内のデザイン業務を時たまします。

ということで、今回は社内のnoteのヘッダーをつくりました。

折角自由にデザインさせてもらったので、

コンセプトや作業方法を書いていこうと思います。

01.コンセプトを決める

「色々書いていいよ！」の元、デザイナーやディレクターが

様々な内容を書くので、「雑多」「集合体」とかを最初にイメージしました。ここからは連想ゲームです。

で、自分の中で出たコンセプトが

「マンションの窓」です。

いろんな人が住んでる様子を、ちょっとのぞいて見ちゃうような、

そんな面白いnoteになればいいかな、と思いました。

02．参考を探す

毎度恒例参考探しのお時間です。

WEBの参考以外だとピンタレストによくお世話になっております。

ありがとうございます。

ピンタレストの元をたどるとBehanceに行きつくことが多いので

Behanceもよくみております。今回もこの二つを主軸にみました。

特定のキーワードを入れるよりか、気になるものをクリックして

ドンドンイメージに近い参考を探していきます。

03.イメージをちょっとラフで書いてみる

ジャン！！！！！！！

自分に伝われば大丈夫です。

入り口とか、花瓶とか、階段や時計に鍵穴・・・

室内プールやミラーボールとか奥行きがあるイメージやいろいろ

特にプールの底みたいな格子が歪んだパーツは

個人的に作ってみたいと思っていたので入れてみました！

ラフはこんな感じで

あとはソフトで作り上げていきます！！

04.イラストレーターで描き起こす

ザクザクとパスで引いていきます！

基本的に円や四角で構成しているので

長方形ツールや円ツールを組み合わせて線を作っていきます！

ラフは参考にしながらも実際に配置しながらいい感じのところを探します。

ちょっと線が重なっているのは内側の塗りがなしになっているからですね。
色を塗ったら大丈夫です。

05.色を塗る

色を塗ります！

イメージがマンションなんでいっぱい色を使ってカラフルにしてみました。

あと純白よりも鈍った色が好きなので一番明るい色はオフホワイト気味に

色のチョイスは好きな色を数色置いて

明度と彩度は統一した色合いを他にも用意することが多いです！

そっから微調整したり、アクセントに彩度を挙げてみたり

ある程度形や色が整ったら次は質感を加えてみます。

06.テクスチャを加えてみる

お気づきでしょうか・・・ざらざらっとした感じが

下から上に向かってそれぞれかかっていることに・・・

そうです、ノイズを別レイヤーで作って上からオーバーレイで

かけてみました。

のっぺりした感じから、ちょっと廃れた雰囲気になりましたね。多分。

07.文字を載せる

実は、さっきの背景とは別でタイポグラフィを作成しておりました

正方形の枠の中に収まるように、正円ベースで作っております。

こちらも先ほどと同じラフ→線画→着色の流れで出来上がりました。

カラーも背景と組み合わせて調整しております。

目立たせる、というよりは同じようなオブジェクトとして

認識して欲しいという気持ち寄りで色はチョイスしてます。

これをさっきのテクスチャと背景オブジェクトたちの間に挟んで・・・

08.イラレで全体図が出来上がり

こうやって出来上がりましたのがこちら！！

おまけ.PSDで悪あがき

ここで完成でもいいんですけど・・・

もっといい色味やテクスチャがでないかとPSDで配置して調整しました!

↓薄くハーフトーンをかけてみました！

ほんの気持ち、テクスチャが丸く荒くなったのと、

ハーフトーンで色が変わりすぎないよう

微妙に色彩と彩度・明度を調整しています！

はい！満足！！

以上

自分がどうやって作業しているのか整理するために

作業工程を書いてみましたが、

物が作り上がるのってやっぱりワクワクしますね。

お疲れ様でした！！

↓ロジカルスタジオにはどんな人が住んでいるのか、ちょっとのぞいて見ちゃいませんか？

↓面白いなと思ったら、デザインチームのnoteものぞいて見ちゃてください！