読んでいただきありがとうございます。
この記事では初心者向けのバナーの作り方を紹介しています。
自分のブログやサイトをよりよく見せてくれるのがバナーです。
しかし、いざ作ろうとすると
おしゃれなバナーを作りたいけど
デザインや操作方法がわからないや
自分のサイトのバナー作りたいけど
デザイナーさんに注文するのは気が引けるなー
という人が多いです。
私も自分のサイトを作る時にバナーをどうしようかかなり悩みました。
この記事を最後まで読んでいただければ
- Adobe Illustratorの操作方法
- Illustratorを使ってサイトのバナーを作る方法
- 参考になるバナーデザインのサイト
- バナーデザインの注意点
を初心者でもわかるように簡単にまとめたので
より理解しながらバナーデザインができるようになります。
バナーを作る前にやっておくべきIllustrator初期設定
ワークスペースを整える
ワークスペースというのは作業画面のことです。
初期設定のままだといちいちめんどくさい工程が増えます。
使いやすいレイアウトとパネルを表示することが大事です。
少なくとも
- カラー
- レイヤー
- 文字
- 透明
- 線
- リンク
- 整列
これらのパネルは開きましょう。
後の作業工程がグンと楽になります。
ツールパネルを理解して作業効率を高める
ツールパネルは初期設定の段階から表示されているはずです。
イラストレーターを作る上で覚えておくべきショートカットキー
- ⌘ + + : 拡大
- ⌘ + – : 縮小
- ⌘ + 0 : アートボード全体を表示
- ⌘ + G : グループ化
- ⌘ + Shift + G : グループ化
- ⌘ + C : コピー
- ⌘ + V : 貼り付け
- ⌘ + F : コピーした場所に貼り付け
- ⌘ + Shift + ] : 最前面へ
- ⌘ + Shift + [ : 最背面へ
- ⌘ + 7 : クリッピングマスク
- ⌘ + Option + 7 : クリッピングマスク解除
- ⌘ + S : 保存
Adobe Illustratorを使ってバナーを作る方法を紹介
01.メインとなる画像を用意する
サイトのイメージやテーマに合わせてメインとなる画像を選びましょう。
画像は
- 自分で撮影した写真をつかう
- 依頼者から受け取った写真をつかう
- 商用可能な画像サイトからDLする
どれかを選んで使いましょう。
上の２つなら問題なく使えます。
サイトからDLするのであれば
商用利用可能かどうかを確認を忘れないように
著作権侵害などで訴えられる可能性があります。
オススメのフリー画像サイト
いくつものフリーサイトから画像を検索してくれます。
このサイトの画像もこちらのものを使わせていただいています。
02.メインとなる画像を配置する
リンクになっているのでちゃんと埋め込みましょう
オブジェクト化しておくと拡大縮小しても画質変わらないので便利
03.文字の打ち込み
イメージに合うフォントを選ぼう
パネルの説明
レイヤーの順番
表示・非表示
重ね順
文字の調整
色を変える
線を太くする
透明度を変える
装飾をつける
- ライン
- 枠
- ロゴ
整列で整える
保存して書き出し
確認事項
- jpegかpngで書き出す
- 保存名はローマ字で
- 埋め込みができているか確認
- 元データはaiデータでとっておく
バナー広告の作り方も紹介しています。
単価ーー円程度で副業できたりもするのでオススメ
イラストレーターの使い方を覚えたい人に
バナー作成のデザイン参考はこの３つのサイトを見ればOK
レトロバナー：大手メーカーの広告バナーも見放題
誰でも知っている大手メーカーの広告バナーまで掲載されていて
参考事例として必見のサイト。
プロの作ったバナーを参考にしながらデザインを勉強しましょう。
Facebook広告はじめました。：バナー広告の説明文まで掲載されていて便利
このサイトはフェイスブックの広告のみを集めたサイトになっています。
サイズのバリエーションはないものの
バナー広告の説明文まで掲載されているのが優秀。
カテゴリーや同種のバナーも表示してくれるので
初めてでもわかりやすい。
ピンタレスト：バナーだけでなくデザイン全般の参考にもってこい
バナーだけでなくデザインをやるならピンタレストは見逃せません。
検索して出てきた画像を自分のページに保存してくれます。
AIがあなたが集めた画像を元に
トップ画面を毎回更新してくれるので
探せば探すほど自分好みのサイトになってくれます。
コメント