Photoshopで線画イラスト素材を活用した
簡単バナー作成テクニック
こんにちは！ omatsuです。
箱庭オリジナルのイラスト素材が買えるお店「haconiwa DESIGN STORE」がオープンして早3カ月。
「かわいい！」「買ったよ！」など、うれしいお言葉をいただくことがあり、感謝の気持ちでいっぱいです。
いつも箱庭をサポートしてくださり本当にありがとうございます！
ただ、なかにはイラスト素材を使いたくても、
「どうやって使っていいのか分からない！」
といったご意見もあったりもします。
そこで今回は線画イラスト素材を使った簡単なバナーの作り方を伝授しちゃいます！
Photoshopで新規ファイル作成
［ファイル］→［新規］で新規ファイルを作成。
［幅］と［高さ］に作りたいバナーサイズのピクセル数を入れ、［解像度］は「72」「pixel/inch」、［カラーモード］は「RGBカラー」「8bit」を選択します。
素材を貼りつける
ドラッグ&ドロップで、イラスト素材を簡単に取り込むことができます。
あとは、Shiftキーを押しながら画像の端っこをドラッグしてサイズ調整をしましょう。
文字要素を入れる
ツールバーの［文字ツール］を選択し、文字を入力します。
ちなみに今回使った欧文フォントは、「39 Smooth」というフリーフォント。
フリーハンド調のフォントなので、アナログ感を演出したい時にオススメです。
さらに上質感を高めるため、日本語には「游明朝」をチョイス。
イラストや文字を白抜きしてみよう！
線画イラストの使い勝手のよさは、白黒反転させて楽しめるところ！
白抜きにしたい部分を選択し、［イメージ］→［色調補正］→［階調の反転］を選択し、
次に［レイヤー］→［レイヤースタイル］→［レイヤー効果］→描画モードから［スクリーン］を選択します。
白黒反転させることで、より上質なビジュアルに仕上がり、キーイメージとして働いてくれます。
これでも十分な感じですが、応用編としてイメージ写真がある場合の使い方もご紹介！
レイアウトを分割する
まず雑誌の見開きページのようなデザインに仕上げるため、左右でレイアウトを分割します。
ステップ3までは、イラストを主役として大きく見立てていましたが、今度は写真を目立たせるため、イラストは脇役としてポイント使いをします。
[移動ツール]で背景の長方形と、グループ化した文字要素を選択して、整列で整えていきます。
フォルダ分けをしたり、グループ化をしたり、レイヤーを整理すると作業しやすくなります。
画像にマスクをかける
［長方形ツール］で切り抜きエリア用の長方形を準備します。長方形は［属性パネル］でXY軸を指定すると正確なサイズと位置が配置できますよ。
長方形レイヤーの上に画像をのせて、画像のサイズや切り抜き位置を決めます。
レイヤーパネルで画像レイヤーを選択し、オプションメニューから［クリッピングマスクを作成］を選択。
見開き風のバナーデザインの完成～！
たった5つのステップで、雑誌の巻頭ページのようなバナーが作れます！
やっぱり写真と組み合わせた方が完成度が増しますね。
レイヤーパネルでは、ベースレイヤー名に下線が表示され、マスクが適用されたレイヤーのサムネイルはインデントして表示され、クリッピングマスクアイコンが表示されます。
背景色をチェンジ
もう少しライトなイメージに仕上げたい時は、背景の長方形の色を変更してイメージチェンジすることも！
[移動ツール]で背景の長方形を選択し、［属性パネル］で色を変更することができます。
コーヒーフィルターのような雰囲気を演出するため、茶色く色調節した水彩テクスチャ素材をマスクして使ってみました。テクスチャー素材を使えば、グッと質感がアップして、より伝わるデザインに。
さて、この工程だけでも5パターンのデザインができましたね！
人によって受け止め方が違うので、はじめのうちは何パターンか作って、第三者に選んでもらうのも手です。
線画イラストは、アイデア次第でいろいろ活用できます。
他にもこんな風に作ってみました！
ギフト用バナー
ひとつのイラストを大きく使って、アプローチしたデザイン例。
※【シンプル】PLANTS 10点セット、【シンプル】ライン 6点セットで作成
イベント告知バナー
イラストを散りばめて、にぎやかなイメージにしたデザイン例。
※【シンプル】TRIP 10点セット、【シンプル】CULTURE 10点セット、【シンプル】WORK 10点セットで作成
アプリ紹介記事バナー
線画にぬり絵をして、タイトル用フレームとして活用したデザイン例。
※【シンプル】WORK 10点セット、【水彩】パターン 10点セットで作成
箱庭オリジナルのドローイング素材集「線画イラストコレクション」
今回の使用した線画イラストは、EAT（食）、PLANTS（植物）、TRIP（旅）、CULTURE（カルチャー）、WORK（仕事）の5種×各10点を収録した全50点の箱庭のオリジナルの素材集。
バナー制作だけではなく、フライヤーやDM、雑誌やパンフレットのデザイン、企画資料を作りたい方にもオススメです！使えばぬくもり伝わるデザインになるはず！
スタンダードなモチーフを収録した「スタンダードコレクション」、にじみやグラデーションがキレイな水彩テクスチャを収録した「水彩コレクション」も、ぜひ合わせてチェックしてみてね！