MENU
技能検定AI対策
Web制作のご相談
お問合せ

05　バナー作成講座　バナーをIllustratorで作ってみた　

Webデザイン Adobe illustrator講座 Adobe Photoshop講座 Webサイト制作 バナー作成講座
目次

在宅・フリーランスになるためのバナー作成講座・イラレ編

5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適しているツールです。下記のようなイラストメインだったり、図形を多く使うバナーを作成する場合は、Illustratorがおすすめです。

今回は、上記の「新生活応援セールバナー」を作成します。

Illustratorで作成する際の注意点から、操作方法をいくつか行います。

Illustratorで作成する際の注意点 環境設定

Photoshop は環境設定の中に文字の単位をpixel変更する設定を行います。

もともとIllustratorは印刷物のパンフレットや名刺・フライヤーやDTPものを作成するのに多く使われていますので、設定も印刷よりです。環境設定から、単位やガイド線などをWeb用のディスプレイ設定を行っておきましょう。

Webでは、色はディスプレイで見るためのRGB、画面の解像度は72dpi、単位はピクセルとなるので、最初の設定も細かく行なっておきましょう。

メニューバーのファイル＞環境設定の一般　キー入力を0.5px
メニューバーのファイル＞環境設定の一般　単位を全てピクセルに
メニューバーのファイル＞環境設定のガイド・グリッドのグリッドを10px もしくは　1px 分割数1に

Illustratorのファイル＞新規作成から

次に新規作成ボタンから、最近使用したもの・・・の右側にあるWebのカテゴリーを選択します。左側にある共通項目の並びにあるWeb（大型）は、パソコンのデスクトップサイズを指しています。これらのサイズから選ぶ場合もあります。今回は左のプリセットの詳細にある 幅「300px」高さ「250px」を入力して、作成します。

新規作成より　幅300　高さ250 詳細オプションはRGB カラー　72dpiの解像度でスタートです

05　バナー作成講座　Illustratorでバナーを作る動画

続きは動画でチェック！

動画で学ぶWebデザイン教室　 Fuku…
01　バナー作成講座　まずは基本のサイズとフォント設定 | 動画で学ぶWebデザイン教室　 Fukuokamiyako バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、We…
動画で学ぶWebデザイン教室　 Fuku…
02　バナー作成講座　コピー文をバナーらしく載せる | 動画で学ぶWebデザイン教室　 Fukuokamiyako 在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop にコピー文を広告バナーらしく入力していきます！ バナー…
動画で学ぶWebデザイン教室　 Fuku…
03　バナー作成講座　背景に写真・さくら吹雪のブラシ | 動画で学ぶWebデザイン教室　 Fukuokamiyako 在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナ…
動画で学ぶWebデザイン教室　 Fuku…
04　バナー作成講座　PSDファイルからの書き出し | 動画で学ぶWebデザイン教室　 Fukuokamiyako 在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバ…
https://fukuokamiyako.com/bana05/
動画で学ぶWebデザイン教室　 Fuku…
06　バナー作成講座　バナーをIllustratorで作って書き出し | 動画で学ぶWebデザイン教室　 Fukuokamiyako 在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のよう…

この記事を読んで、もう少しサポートが必要な方へ

Web制作やデザインについて、学習のサポートから実際の制作まで承っています。
現在のお悩みに近い方をお選びください。

自分で作れるようになりたい方

HTML・CSS、JavaScript、PHP、WordPress、Figmaなどの学習や、制作中の課題についてサポートしています。

  • 「コードがうまく動かない」
  • 「デザインや制作物を確認してほしい」
  • 「次に何を学べばよいか相談したい」

といった段階でも大丈夫です。現在の状況を伺いながら、一緒に解決方法を考えます。

学習サポートを見る

MENTAで学習サポートを見る

制作を依頼したい方

Webサイトの新規制作・リニューアル、WordPressの修正や運用、デザイン・コーディングなどを承っています。

  • 「何から相談すればよいか分からない」
  • 「まだ内容が具体的に決まっていない」

という場合でも問題ありません。ご希望やお困りごとを伺い、必要な内容を整理してご案内します。

制作について相談する

サービス内容・料金を見る

Webデザイン Adobe illustrator講座 Adobe Photoshop講座 Webサイト制作 バナー作成講座
アートボード バナー バナーサイズ バナー作成 フォトショップ フリーランス レクタングル 在宅

この記事が気に入ったら
フォローしてね！

Follow Me
  • URLをコピーしました！
目次