pickup
マスク機能でバナー作成

オシャレなバナーを自分で作ってみたくないですか?

Photoshopのレイヤーマスクや、クリッピングマスク 機能を使えばとても簡単にバナーが出来てしまうんです!

今回はPhotoshopのマスク機能を使ってオシャレなバナー作りのコツを初心者の方にも分かりやすく説明していきたいと思います。

スポンサーリンク

オシャレなバナーを作るためのコツ

姉妹サイト

完成バナー見本

今回はこちらの『Creaveart』の姉妹サイト『Creavegraffiti』のバナーを制作した際の工程とデザインのコツなどをお話していきたいと思います。

一見難しそうに見えますが、Photoshopのマスク機能とブラシツールを使えば案外誰でも簡単にできちゃうんです!

デザインのコツ

製作時の注意点

デザインの好みは人それぞれ違って、美的な感覚も人それぞれ違うので、デザインには正解がないです。しかし、『なぜここを赤くしたのか』『どうしてここを大きくしたのか』などの理由が必ずあります。

作り手にとって「重要だ」と思う部分は赤くしたり、「強く強調したい」と思う部分は太字にしたり『見る人にとっていかに有意義であるか』を考える事がデザインをする上で大切だと思います。

有意義な見せ方を工夫するには

  • バナーには載せたい情報がたくさんあるかと思いますが、一番伝えたい事は何なのかテキストの優先順位をハッキリさせます。
  • 文字で魅せるのか、画像で魅せるのか、あれもこれもと欲張らずに一番見せたいものを絞り、その情報を一番引き立たせるにはどうしたらいいか考えながらレイアウトを考えていきます。

素材選び

  • 目的に合わせた画像やイラストを選択します。
  • 自分で用意した写真をメインビジュアルに持ってくるなら、画像をより魅力的に魅せるためにPhotoshopなどで画像加工が必要になります。
  • 手書き風な温かみのある画像を使用するなら、自作のイラストを使用するのもアリですし、フリー素材から探してくるのも一つの方法だと思います。

カラー設定

  • まとまりのある印象を与えるにはメインカラーの配色を色調を揃えて最大3色までにする事がオススメです。
色調(トーン)は4種類あります
・純色
彩度が非常に高く鮮やかな色
・清色(せいしょく)
明清色(めいさいしょく)純色に白を混ぜてできた色を明清色(ティントカラー)と、暗清色(あんせいしょく)純色に黒を混ぜてできた色を暗清色(シェードカラー)の2つの色
・中間色
純色に灰色を加えてできる濁った色
・無彩色
彩度のない白、灰色、黒を表す色

見て飽きない遊びゴコロをプラスする

今回のバナーで言うと、右上のめくれている部分の文字に注目させたいので、デザインのあるものにしてみました。

他にも「トロッととろける生クリーム」というテキストを入れるとしたら、「トロッと」の部分にカーブをかけてトロッとさせてみたり、カラーを生クリームを意識して白っぽくして文字を太めの丸いフォントのものにするのも面白いと思います。

以上の事を踏まえて制作していくと伝わりやすいオシャレなバナーを作れるのではないかと思います。

では実際に今回制作したバナー制作の手順とコツを紹介していきたいと思います。

制作手順

Photoshopで制作開始

今回用意した背景画像は、当サイト『Creave art』のアート感・ペイント感を出すために塗ったような表現の画像を使用してみました。

こちらの背景画像をマスク機能を使ってめくれている部分だけを表示させます。

マスクとは簡単に言うと、元の画像を編集する事なく、見せたくない部分を覆い隠す機能です。

用途別に様々なマスク方法があり、どんな制作物を作るかによってどのマスク方法を選択するかが重要になってきます。

マスクの種類
レイヤーマスク
画像を直接編集せずに、画像の必要のない部分を白と黒の選択範囲で覆って隠す方法
クイックマスク
ブラシツールで色をつけた所を選択範囲にし、特定の範囲にだけ効果を適用させる方法(線の太さを変えながら選択範囲を決めています)
ベクトルマスク
イラストレーターの様にベクトル(パス)で好きな形をつくって選択範囲にし、画像や写真にマスクをかける方法
クリッピングマスク
複数のレイヤーを使って行うマスクで、レイヤーパネル上でマスクしたい画像の下のレイヤーの形でマスクする事ができる方法

今回はレイヤーマスク とクリッピングマスク を使用して作成していきます!

Photoshopを立ち上げ、新規作成から縦500px横500pxのサイズにアートボードを設定します。

  • レイヤーマスク で画像の表示したい部分を選択します
バナー制作

パネル操作

完成

完成

アートボードに画像を表示させます。

レイヤーパネルの下に『②レイヤーマスク を追加』マークがあるのでクリックすると同じレイヤー内にもう一つ四角が表示されマスクが追加されます。

ブラシツールに切り替えて隠したい所を塗りの色を白にして塗っていきます。

画像のように隠したい部分を白、表示したいところは塗りの色を黒に設定して塗っていきます。

背景が完成しました!

  • ブラシツールでめくれている部分を書き足します
バナー制作2

パネル操作

をクリックすると新しくレイヤーをパネルに追加できるので、ブラシツールでめくれている部分を書き足します。

レイヤー名は『めくれ』にしました。(レイヤー内をダブルクリックで変更できます)

でブラシツールの太さを調節しながら書き進めていきます。(画像では7pxに設定しています。)

の『不透明度』でブラシの濃度が設定できるので、濃度を40%くらいに設定してめくれている部分の影を書き足していきます。

めくれている部分が完成しました!

  • テキストを入力して影をつけます(ドロップシャドウ)
バナー制作

元デザイン

バナー制作3パネル

パネル操作

完成3

完成

⑦をクリックして文字ツールを選択後テキストを入力します

今回は『Creave graffiti』の文字をヒラギノ角ゴシックにしました。

をクリックしてレイヤースタイルを追加します(⑦で入力したテキストのレイヤーを右クリックでもレイヤースタイルパネルが表示できます)

ドロップシャドウを選択して文字の後ろに影をつけます

⑨影のカスタム
位置・・・13px
影の位置を決めます。数字が大きいほど影が文字から離れます。
スプレッド・・・15%
影の濃さを決めます。数字が大きいほど影が太くなります。
サイズ・・・13px
影の大きさを決めます。数字が大きいほど影が薄くモヤっとします。
を選択後OKでレイヤーにドロップシャドウが適応されます。
テキストに影をつけることができました!
  • クリッピングマスク でドロップシャドウを適用した文字でマスクをかけます
バナー制作4

元デザイン

完成4

完成

テキストを入力したレイヤーの上にマスクにしたい画像を配置します。

の画像レイヤーの右側()を右クリックして『クリッピングマスク を作成』を選択

画像レイヤーの左にクリッピングマスク マークが表示され、先ほど入力した文字にマスクがかかり、文字部分に画像が表示されます。

テキストにクリッピングマスク を設定できました!

  • 必要なテキストを入力する
バナー制作-文字入力

パネル操作

文字ツールを選択後テキストを入力して画面上のからフォントを選びます

11で文字の太さを変更できます

12で文字の大きさを変更できます

今回は画像右上のめくれている部分のフォントは『遊明朝体』、中央の筆記体は『Milonguita』にしてみました!

完成です!

今回は、レイヤーマスク ・ドロップシャドウ・クリッピングマスク を使って更にブラシでペイントしてみました!

まとめ

いかがですか?

今回はバナー制作をしましたが、このマスク機能や、デザインのコツはチラシなどのPOP制作の時なども役にたちます。

このような美的な感覚が問われる制作物を作成するのは正解がなく、果てしない探究心と闘っている気がして大変奥が深く面白いですね(^。^)

そして少しでも自分が納得いく制作物を作れるように、色々な方の作品を拝見することが自身の美的センスを向上させる近道になるのではないかと思います!

今回ご紹介したマスク機能についてもっと詳しく書いた記事があるので、こちらも合わせてご覧ください♪

手書き感、アート感にこだわった作品だったので、ペンキが垂れるイメージと紙がめくれている感じを出すために最近購入した液晶タブレットを使用して手書きで表現してみました(^-^)

こちらもめちゃ描きやすくてオススメですよ!

ワコム Wacom Cintiq 16(DTK1660K0D) 目安在庫=○
スポンサーリンク

Twitterでフォローしよう

おすすめの記事