COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2017
21
JUN
CATEGORY:
デザイナーの独り言
手描き風イラストの作り方~なかほら牧場の場合~
こんにちは。デザイナーのとよ田キノ子です。

先日Web Designingでの掲載をお知らせした、弊社実績の「なかほら牧場」コーポレートサイト。 こちらのサイトのキーとなるイラストを担当しました。
どのような工程でイラストが制作されたのか、その過程をご紹介します。


目次


    01. オリエンテーション

    02. 資料探し

    03. 描き起こし

    04. 線画をスキャンして調整

    05. 着色

    06. 同様に各パーツを描き込む

    07. 全体をトーンカーブで明るくする

    08. レイヤースタイル

    09. 完成

    10. 使用例

    最後に



01. オリエンテーション


アートディレクターよりイラスト依頼書を受け取り、イラストのテイストやアングル、使用イメージなどを相談します。

今回のゴールは、手描き風のイラストで「なかほら牧場」ならではの温もりを伝えること。アートディレクターが考えているイメージと異なるものにならないよう、ここできちんと方向性のすり合わせをしておくことが重要です。

イラスト依頼書

02. 資料探し


なかほら牧場への取材時に弊社スタッフが撮影してきた写真資料だけではよくわからない部分があるので、図鑑やカタログ、画像検索などでディテールを確認します。

資料

03. 描き起こし


資料を元に描き起こします。
今回の場合は、手描き感のある具象的なイラストを指定されていたので、線を鉛筆で手描きし、着色や加工はPhotoshopを使用することにしました。また、ウェブサイトのみでの使用(低解像度)ということと、ページデザイン内では小さくレイアウトされるということでしたので、細かい部分は省き、必要なパーツだけ描いていきます。
(そして、雪がない状態をと指定され、試される想像力)

描き起こし

04. 線画をスキャンして調整


原画をスキャンして取り込み、レベル補正で線をハッキリさせたあと、ゴミや不要な線を消します。 また、この線画の下に着色用のレイヤーを置いていくので、線画を乗算にしておきます。

線画をスキャンして調整

05. 着色


色をつけたいパーツの形をベースになる色で塗りつぶし、クリッピングマスクとして使用します。このレイヤーの上に着色用レイヤーを置き、クリッピングマスクを適用していけば、はみ出しを気にすることなく大胆に塗っても大丈夫。
太めのブラシで薄い色を塗ってから、ブラシを細くしながら濃い色を重ねます。
使用するブラシはほとんどソフト円ブラシで、不透明度設定で濃淡をつけています。
奥のタイヤは、前面にあるタイヤを複製して配置。デジタル万歳。

着色

06. 同様に各パーツを描き込む


色は、資料の写真データからスポイトツールで抽出すると、それっぽくなります。
また、実際に使用するサイズが20〜30%程度になることを想定して、あまり描き込みすぎないようにします。描き込みすぎてしまうと、縮小した際に潰れてしまうのでイラストである良さが薄れてしまいます。

同様に各パーツを描き込む

07. 全体をトーンカーブで明るくする


写真と同じ明るさで描いていましたが、ページデザインのサンプルに当てはめてみたら暗すぎたので、全体をトーンカーブで明るくしました。
イラストが使用されるページの背景色によって、それに合う色味が左右されるので、シミュレーションをして確認することが大切です。

全体をトーンカーブで明るくする

08. レイヤースタイル


手描き風の温かみを出すために、紙のようなテクスチャを合成します。
イラスト全体にレイヤースタイルを設定。
テクスチャのパターンをオーバーレイで重ねます。
レイヤーを1つのフォルダにまとめて、そのフォルダに対してレイヤースタイルを設定すると、修正が楽です。

レイヤースタイル
レイヤースタイル

09. 完成


完成
09-2.jpg

10. 使用例


ページデザインはこのようになりました。
実際に牧場へ足を運び、実際に感じた"なかほら牧場らしさ"のアイコンとして使用しています。

使用例


最後に


イラストは、写真とはまた違った雰囲気づくりが可能です。
パーツとしては小さくても、ウェブサイトの世界観や雰囲気、印象、好感度など、言葉ではない情報として見る側の心に与える影響は大きいと思います。
ソニックジャムでは、そんなイラストを効果的に使ったデザインも得意としています。

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.