Quantcast
Channel: 箱庭 haconiwa » STUDY
Viewing all articles
Browse latest Browse all 124

デザインのひきだし見せます!手描きのイラストバナーの作り方

$
0
0

150709k_00

手描きのイラストをスキャンして加工してみよう!

こんにちは。Keinaです。
箱庭では、facebookページのいいね!が1000人単位で増えるたびに、
お祝いバナーとメッセージをfacebookに公開しています。
このお祝いバナーは、箱庭メンバーがローテーションで作っています。
昨夜、52000いいね!になったので(嬉しい!)、今回は、わたしが担当しました!

小さい頃から絵を描くのが大好きだったので、
漫画やイラスト、文字のレタリングを描いていたのですが、
デザイナーになってからは、自分のイラストが仕事で登場することはそんなにありませんでした。
ここ数年、デザイン業界でもイラストがとても人気で、自然と仕事で描く機会も増えて、
個人的にとても嬉しいところ。きっと小さい頃の自分が知ったら喜んでいることでしょう。
せっかくなので、自分流の手描きのイラストバナーの作り方をこっそり伝授します。

どんなデザインにするか想像しよう

最初に、イラストを描く前にどんなデザインにしたいか想像したり、どんな文字を入れるか考えよう。
今回は、梅雨もさすがに飽きてきたので、大好きな「夏の海」がテーマ。
海から連想できる、かもめ、貝殻、ヨットなどを組み合わせてみました。
簡単なラフをつくってもいいし、頭でイメージするだけでもOK。
わたしは、バナーの場合はラフを作らず、頭の中でラフを描くのが好きです。

筆記用具

150709k_02
イラストを描くのに使ったのは、(上)コピックチャオ、(下)LAMY safari

コピックチャオは、初めてコピック製品を買う方向けのエントリーモデルで、
丸型ボディときれいな色がお気に入り。Brush Lettering用に買いました。
ペン先がミディアムブロードとスーパーブラシの2種類あり、インクの補充もできて便利。

LAMY safariは、カートリッジタイプの万年筆で、線画や手描き文字用に使ってます。
ほっこり雑貨手帖をつくるときに記念に買ってから、何かと使っていて、いまは2本持ってます。
こちらもカートリッジが交換できるので、長く使えて、愛着も湧く1本。
このペンで文字を書くと味が出るので、手紙を書くときもおすすめ。

今回は、使ってないけど、えんぴつ、色えんぴつ、アクリル絵の具、水彩絵の具、クレヨンなども使うこともあります。いろんな線を描いてみて、そのテイストにあう筆記用具を選ぶのがおすすめ。

イラストを描こう

150709k_01
ブルーのインクは、コピックチャオ。ブラックのインクは、LAMY safari。
絵を描く用紙は、スキャンしやすいよう普通紙を使ってます。
ちょっとでもイメージと違うなと思ったら、すぐ近くに描き直します。
イメージにあうまで何度も描くと、少しずつ上達しますよ。

描くのが苦手な方は、参考になる絵を見本にして練習すると、手が慣れてくるので、
慣れてきた頃に、自分なりに描いてみましょう。

スキャンして、PCに取り込もう

150709k_03
イラストが描き終わったら原稿をスキャンします。
箱庭の事務所では、PIXUS Atelierを使っています。
印刷はもちろん、スキャンもキレイです。
以前、お仕事でお手伝いした「プリンターでつくる彩りレシピ Atelier GALLERY」も要チェックです。
※もしスキャナーを持っていない方は、カメラで撮ってもOK

Photoshopで画像補正をしよう

150709k_04
スキャンしたそのままだと、白い部分が少しグレーになっていたりするので、
レベル補正やトーンカーブなどを使って白い部分を明るくします。
画像補正が終わったスキャンデータは、背景の白い部分だけを削除し、必要なイラストだけ選択し、
新規ファイルにコピペして、レイアウトしていきます。

イラストをレイアウトしよう

150709k_10
今回は、一番下のレイヤーに海の写真を入れて、その上に文字やイラストを入れます。
最初は、各パーツバラバラにしておいて、おさまりのいいようにレイアウトしていきます。
※細かいイラストは、白い部分を削除するのが面倒なので、そのまま残しています(笑)

イラストや文字を白抜きにしよう

150709k_05
白抜きにしたい部分を選択し、「イメージ」→「色調補正」→「階調の反転」をチョイス、
次に「レイヤー」→「レイヤースタイル」→「レイヤー効果」→描画モードから「スクリーン」を選択。
これで、白抜きのできあがり。

保存しよう

150709k_06
最後に「ファイル」→「Web用に保存」を選び、JPEGで保存すればバナーの完成です!
作り途中にデータが消えるとショックなので、こまめに保存しよう。

カラーバリエーションも楽しいよ

レイアウトしたもので、カラーバリエーションをつくるのもおすすめ。
文字とイラストを黒い塗りのままにしておいて、その上のレイヤーに写真を配置して、
「レイヤー」→「レイヤースタイル」→「レイヤー効果」→描画モードから「スクリーン」を選択すると、
下記のように写真が文字やイラストにくり抜かれたように浮き出ます。すっきり爽やかに変身。
色は、お好みで選んでみてね。
150709k_09
夕暮れの海バージョン。
150709k_08
青い海バージョン。

150709k_07
Instagram用などサイズ違いでつくるのもGOOD!

ぜひ、お試しあーれー
また気まぐれに紹介してみますね!


Viewing all articles
Browse latest Browse all 124

Trending Articles