こんにちはNAOです。
今回はAdobe Illustratorを使ってWebサイトで使用するバナーなどの作り方を紹介していきます。決して難しくないので是非実践してみてください。
どのジャンルのバナーなのか
自分が作ろうとしているバナーはどのジャンルなのかを理解して置くこと。美容系なのに全然違うタイプのバナーを作るのは結果として信用を失うのでリサーチをしてどのジャンルでどのタイプのバナーを求めているのかを把握してから作成に移っていきましょう。
内容はしっかり詰めて必要な文言を用意してもらうか、内容に即した文言をこちらで考えて作成していくかになると思います。
サイズを把握する
まずは自分が作成するバナーはどのサイズを求められているかを理解しておく事です。
Illustratorでweb使用のアートボードを選びピクセルで数値を指定して作る事から始めてください。今回は300×300pxのサイズで作成していきます。この際アートボードサイズも必ず仕上がりサイズで作る事をお忘れなく。
素材をどうするか
バナーに入れる素材は相手から提供を受ける実物の画像か、こちらで準備する有料やフリー画像などになると思います。画像を使わないバナーも存在しますのでその点も要チェックですね。
今回は下記のフリー画像を使用してバナーを作成していきたいと思います。
画像をどう使うか
上記の画像を前面に使うバナーにしようと思いますがサイズが違うので300×300pxのサイズにマスクをかけましょう。
マスク(⌘+7)をかけてみました。文字のバランスなどを考えて画像のトリミング場所を合わせてください。※基本的に画像は一度PhotoshopやLightroomなどで色調整などを施してからIllustratorで使用するのがベストですがそれが無理でも何とかなります。
使用する文言は今回はこちらを使用します
TSUTAERU DESIGN SCHOOL
今なら受講料の10%をキャッシュバックキャンペーン
詳しくはこちらを
どこを強調するのかなどを考えて文字を配置していきましょう!今回はやはり今なら受講料の10%をキャッシュバックキャンペーンなのでそこをメインに次はクリックを押してもらいやすい詳しくはこちらをのボタンを作成するということです。それでは作成していきます。まずは文字のレイアウトをどうするかを簡単に考えてみました。ここからどう目立つようにしていくか考えていきましょう。
文字をデザインしていきましょう
さくっと作成してみましたがデザインは皆さんの思うデザインにしてみてくださいね。伝えたい所を強調してリンク先に飛びやすいように工夫する事は忘れないでくださいね。
バナーとして保存するときはファイル→書き出し→web用に保存を選択してJPEGで保存して完成になります。
これでバナーは完成しましたのでバンバン作っていきましょう!バナーの仕事も副業としてするのも全然ありですので頑張ってください。