新着記事はこちら

バナートレース #06│画像を好きな形でクリッピングマスクする方法|青色の心理的効果

スポンサーリンク
バナートレース06

トレース結果

バナートレース元画像
元画像
トレース画像
トレース画像

Size:395×283
Tool:Pinterest│illustrator│photoshop
Font:Acumin Variable Concept(Wide Bold)│HG創英角ゴシックUB

Color:#000(ブラック)│#FFF(ホワイト)│#045E89(ブルー)

バナー考察

  • こちらは車の技術職への転職情報サイトのバナー。キャッチコピーはシンプルで分かりやすく、車関連の仕事だとすぐに分かる。
  • 落ち着いた青系の配色と読みやすいフォントで、知的さや誠実さを感じる

学んだこと

画像を好きな形でクリッピングマスクする【illustrator 操作】

①切り取りたい形の画像を用意する

画像のクリッピングマスク方法、画像を用意する

ペンツールを使って切り取りたい形に添ってドラッグしてパスを作成

画像のクリッピングマスク方法、ペンツールでパスを作成

③作成したパスを取り出して、わかりやすいようを付けておく

画像のクリッピングマスク方法、パスの画像
画像のクリッピングマスク方法、パスに色を付ける

④切り取りたい画像を、パスを前面にして重ねる

画像のクリッピングマスク方法、パスを前面にして重ねる

⑥パスと切り取りたい画像を選んだ状態で「オブジェクト」→「クリッピングマスク」→「作成

画像のクリッピングマスク方法、クリッピングマスク選択

⑦切り取り完了。 正確には切り取っているのではなく、画像をみえないようマスクしているだけなので、ダイレクト選択ツールで背後の画像のパスを表示させた状態でドラッグすると位置を調整できます。

画像のクリッピングマスク方法、位置を調整

文字のクリッピングマスク方法はこちら↓

青色の心理的効果

青色のイメージ画像

広告だけではなくロゴ、サイトのイメージカラーなどデザインするすべてのものにも言えること。伝えたいメッセージをきちんと伝えるため、期待する行動(商品の購入、申し込み、問合せなど)を効果的に促すためには重要な要素の1つ。

今回トレースしたバナーは全体的に青みがかった色調に統一されています。青色は鎮静効果のある色で、一般的に「冷静さ」「誠実さ」「信頼感」などをイメージさせる効果があります。そのことから、世界的にみてもロゴとして使われることが一番多い色だそうです。青色をメインに使用しているロゴも多いです。 Facebook、Twitter、ANA、ローソン、アサヒやサントリー、ほかにもたくさん。アサヒやサントリーは「清涼感」を与える目的もありそう。

「冷静さ」「誠実さ」「信頼感」 はあくまで代表的なイメージであり、年齢性別文化などによって色の印象は変わるので「誰をターゲットに作るのか」考えることがポイント。

難しかった点、課題

クリッピングマスクをする枠になるオブジェクトを作成するためにペンツールでトレース画像に沿ってパスを作成しましたが、このやり方では微妙なずれが生じて正確性に欠けるのと、直線的な形の時しか使用できません。もっと正確な方法いろんな形を作成できるよう勉強したい所。ベジェ曲線の練習も必要そうです。また、イラレでもカラーバランスを調整できますが、写真の色調を編集したい場合はやはりイラレではなくphotoshopを使うべきなのか?疑問が色々です。疑問の解決次第、また追記したいと思います!

タイトルとURLをコピーしました