今回は、Illustratorでバナーを作る方法を実際の画面をお見せなしがらご紹介します。WEBデザインの初心者の方でも簡単に作れる方法です。「バナーを作る際のコツは?」こういった疑問をこの記事を読めば、解決できます。Illustratorでバナーを作る方法をご紹介します。今回は、以下のようなバナーを作成したいと思います。8STEPで作成していきます。書き出し今回は、WEBデザインをする上で必須のAdobeCCソフトIllustratorを使って作成しますので、未契約の方は以下の記事を参考に契約しましょう。CCについて紹介しました。3つの特徴とお得な購入方法もお伝えします。CCについて知りたい方は、是非記事をご覧ください。素材の準備まずは、バナーで利用する素材を準備します。フリーのサイトから素材を入手することで、簡単にお洒落なバナーを作ることができます。「いらすとや」にアクセスこちらのリンクより「いらすとや」にアクセスします。素材のダウンロード次に、素材をダウンロードします。以下のような検索ボックスがあると思うので、それを使って素材を探します。今回は、以下の2つのキーワードで検索しました。素材のダウンロード方法は、ダウンロードしたい素材の上で、「右クリック」を押して、「名前をつけて画像を保存」を押すと素材がダウンロードきます。今回は、以下の2つの素材をダウンロードしました。同じ素材がない場合もありますので、好きなデザインを選んでいただけたらと思います。次に、イラストレーターを使って、アートボードを作成します。WEB用のアートボードを選択し、作成するバナーの大きさは以下のように設定します。px高さ・・・116px大きさの入力が完了したら、「作成ボタン」を押します。以下のようなアードボードが作れると思います。注意点バナーを作成する前に、単位の設定を確認しておきましょう。Windowsの方は、ファイルの中に環境設定があるはずです。4つの項目が全て「ピクセル」になっていることを確認しましょう。WEBの制作物の単位はすべてピクセルで表すので、もし他の単位になっている方は、ピクセルを選択し、「OK」ボタンを押します。すると、Illustratorの単位がピクセル表記になります。次に、左のツールバーにある文字ツールを使って、文字を入力していきます。以下の3つの文字を入力してください。Lifeそして、文字パネルを使って文字のフォントや大きさをそれぞれ設定していきます。文字パネルがアートボード上にない方は、ウィンドウ>書式>文字から文字パネルを表示できます。Cafe」の文字を選択し、文字の設定を行います。文字パネルは、以下のように設定します。「平成丸ゴシック」のフォントがない方は、他のフォントを利用されても問題ありません。「平成丸ゴシック」を利用されたい方は、Adobeフォントで無料でダウンロードできますので、以下の記事を参考にダウンロードしてみてください。無料ダウンロードの方法|WEBデザインAdobeフォントについて知りたいですか?本記事ではAdobeフォントの概要と無料ダウンロード方法を紹介しました。ダウンロードは、全部で6STEPです。これからAdobeフォントを利用したいと思っている方は、是非記事をご覧ください。先ほどと同様に「日常から離れたくつろぎを提供」を選択し、文字の設定を行います。文字パネルは、以下のように設定します。太ゴB101」のフォントもAdobeフォントで無料でダウンロードできます。Life」も同様に設定を行います。文字パネルは、以下のように設定します。Ernie」のフォントもAdobeフォントで無料でダウンロードできます。すべての文字の設定を行うと、以下のようなバナーが完成すると思います。次に、縦文字を入力します。今回は、「CLICK!!」の文字を縦で入力します。左にある文字ツールから「文字(縦)ツール」を選択します。先ほどと同様に以下のように文字を入力します。文字パネルは、以下のように設定します。左にある塗りのツールから文字の色を以下のように白色に設定します。すると以下のように文字が入力できたと思います。次に、長方形ツールで、背景を作成していきます。左側にあるツールパネルから「長方形ツール」を選択します。アートボードの中でクリックすると長方形の設定が表示されるので、以下のように入力しましょう。116mm次に、長方形の塗りと線を設定します。長方形を選択ツールで選択した状態で、以下のように設定しましょう。塗りに関しては、カラーコード「d8c6ba」と入力すると、私と同じ色になります。線はなしで問題ありません。すると、以下のような長方形が完成すると思います。采配面へを選択します。最後に、選択ツールを使って、長方形を移動させます。以下のように、選択ツールを使って、作成した長方形をアートボードの上に配置できたら、背景の完成です。次に、先ほどダウンロードした素材と文字を以下のように配置します。配置に関しては、自身の好きなように配置で問題ないと思いますので、色んな配置を試してみてください。文字の角度を変更したい場合は、以下の回転ツールを使って角度を変更できます。回転ツールの使い方は、回転したい文字を選択ツールで選択した状態で、回転ツールをダブルクリックします。すると、以下のような設定画面が出ますので、そこに「8°」と入力すると同じような傾きにできます。次に、クリックボタンの背景を作成します。作成方法は簡単で、長方形ツールを使って以下の大きさの長方形を作成しましょう。116pxそして、長方形の塗りは、カラーコード「cc9a87」を設定し、「CLICK!!」の文字の背景に設定します。これで、以下のようなバナーができれば、完成です。書き出し最後に、作成したバナーを画像で保存しましょう。WEB用に保存(従来)を選択します。ファイル形式が、「GIF」または「JPEG」になっていることを確認して、「保存」ボタンを押します。保存先を指定して、「保存」を押すと、バナーの完成です。まとめ今回は、以下のようなバナーをIllustratorで作る方法を、実際の画面をお見せながらご紹介しました。WEBデザイナーは、名刺と同様にバナーを作成する機会はかなり多いと思います。「習うより慣れろ」ということわざもありますので、まずは、こちらの記事でバナーを作成するための基礎を学んでいただけたらと思います。Illustratorの基礎をさらに固めたいという方は、UDEMYで勉強するのもおすすめです。私がIllustratorの勉強のために、最初に利用した教材は以下です。※現在、UDEMYはキャンペーン中で、かなり安くなっております。UDEMYのおすすめ動画はこちら初心者におすすめのIllustrator・Photoshop講座まとめ初心者にもわかりやすいIllustratorやPhotoshopの講座を知りたいですか?本記事では、私がこれまでブログで発信してきたおすすめのIllustratorやPhotoshop講座を紹介しました。ご自身のスキルに合わせたおすすめの講座を紹介しております。これからIllustratorやPhotoshopのスキルを高めたい方は、是非記事をご覧ください。DesignerYuta某大手企業勤務。2020年よりWEB制作やデザインの勉強を開始し、40件以上の案件を対応。Photoshopを中心にスキル上達コンテンツを無料で発信中。