読者です 読者をやめる 読者になる 読者になる

SACHILOG

Travel, Design, Baby, and My Life.

MENU

【初めてのイラストレーター】ウェブ用バナーをつくってみよう。

超初心者向け。初めてIllustratorを使う人向けの、バナーの作り方を解説していきます!

ちなみに、イラストレーターデータのことを拡張子から、「aiデータ」と言ったりします。

初期設定

「新規」(左側)

①ファイルの保存名

②縦と横のサイズ

③単位(ウェブはpixels、図面などはmm)

④カラーモード(ウェブはRGB、印刷物はCMYK

 

②に、作りたいバナーなどのサイズを打ち込む。上のSizeのところから、A4などを選択することもできる。もしここで指定しない場合は、以下からもサイズ変更可能。

 

「ドキュメントのセットアップ」(右側)

①「Document Setup」をクリック

②「Edit Artbords」をクリック

f:id:sachiyosuedomi:20170428003817p:plain

 

すると、白枠(アートボード)が点線になるので、右上のW(横幅)とH(縦幅)を入力して、サイズ変更ができる。

 

f:id:sachiyosuedomi:20170428083056p:plain

 

ワークスペースを整える

Windowからよく使う項目を選び、自分のワークスペースをつくろう。

 

バナー制作に最低限必要な項目。

・Character

・Color

・Transparency 

・Layers

・Stroke

・Align

・Links

f:id:sachiyosuedomi:20170428003702p:plain

左側のツールは、必ず必要なので、「Window→Tool」をクリックして、出しておこう。

 

f:id:sachiyosuedomi:20170428094752p:plain

 

バナーを作ってみよう!

文字について

「文字ツール」でテキストを打ち込む。そこから、好きなフォントやサイズなどバナーのテイストに合わせて選んでみる。

 

①フォント

②サイズ

③行間

④横幅

⑤文字間

 

TABIPPOでよく使うフォント

ポップでちょっと凝った感じになるので、文字にアクセントをつけやすいのでおすすめです。

f:id:sachiyosuedomi:20170428094818p:plain

上から...

あさご本丸ゴシック

ほのかアンティーク角

ニコ角

マキノス

全部フリーフォントなので、DLしておこうー!

 

画像配置&レイヤー

使いたい画像を入れよう。

「File→Place」から画像を選んで、差し込むか、「ドラッグ&ドロップ」で入れることができる。

f:id:sachiyosuedomi:20170428095451p:plain

その時の注意点として...

例えば、デスクトップにあった画像を持ってきて、その画像を消してしまうと、aiデータを次に開くときにデータ内の画像も消えてしまう。フォルダに移動させた場合や名前を変更した場合も同じです。(デスクトップにある、○○という名前の画像を引っ張ってきていて、紐付けされているイメージ)
なので、事前にフォルダをつくってそこに入れて置くか、画像をリンクとしてデータに埋め込んでしまう方法があります。(これはのちほど説明します) 

レイヤーの入れ替え

画像を足すと、先ほど打った文字の上に重なってしまって、文字が見えなくなります。なので、レイヤーの順番を入れ替えて、画像を一番下に動かしてください。

 f:id:sachiyosuedomi:20170428095051p:plain

ちなみに、目のマークをクリックすると、非表示にできます。

色をつける

 「Color」から色を選択できます。色には、「塗りと線」があって、この場合だと、青色が線、白色が塗りの状態です。

f:id:sachiyosuedomi:20170428083253p:plain

 

外形線の色と、その中の色を選ぶことができます。なので、同じ色を選ぶと、文字が少し太く見えたりするので、強調したい時などは塗りと線両方に色をつけます。

stroke / 線

f:id:sachiyosuedomi:20170428083449p:plain

もっと太くしたい時は、「stroke→weight」から、線の太さを変えることが出来ます。

 

f:id:sachiyosuedomi:20170428094731p:plain

ただ、そのまま太くしていくと、線が太すぎて塗りが見えなくなってしまうので、塗りと線を同じ色にして好きなだけ太くした後に、違う色で少し線を細めにした同じ文字を重ねます。そうすると自由に線と塗りの幅をつくことができます。これも結構私が使ってる技です。

 

transparency / 透明度

f:id:sachiyosuedomi:20170428083459p:plain

透明度を変えることで、画像に馴染ませることもできます。「transparency→opacity」で、透明度が変更可能です。

 

vector画像

色は形を変えられる画像データ。(旅祭ロゴ)

 

f:id:sachiyosuedomi:20170428083522p:plain

ダブルクリックして選択をすると、色や透明度などを変更できます。

f:id:sachiyosuedomi:20170428123600p:plain

 

こういうのもvector画像。色などを変更できる。TABIPPOでは、shutterstockからダウンロードしてきて使うことが多いです。

f:id:sachiyosuedomi:20170428123341p:plain

リンク

「Link」から、オレンジ丸の詳細表示をクリックする。

f:id:sachiyosuedomi:20170428123820p:plain

「Embed Images」をクリックして、画像を埋め込みするとアイコンが表示されるので、埋め込み完了です。

f:id:sachiyosuedomi:20170428123822p:plain

埋め込みをする理由としては、上記の「画像配置について」で説明した通り。デメリットとしては、データが重くなります。なので、理想は埋め込みをせずにフォルダにしっかりまとめること。

保存方法

バナーなので、web用に保存します。

「File→Save for Web」

f:id:sachiyosuedomi:20170428124908p:plain

①「jpg」を選択

②サイズの確認(このサイズで書き出されます)

③「Clip to artboard」にチェック

→Save をクリックで、保存!

f:id:sachiyosuedomi:20170428124808p:plain

完成!

以上でバナー完成です!!!

f:id:sachiyosuedomi:20170428130840j:plain

 

写真を大きくしたり、文字配置を変えるだけでも印象は変わります。

f:id:sachiyosuedomi:20170428124824p:plain

 

レベル上げていって、文字にグラデーションをつけたり、vector画像を入れ見たりレベルアップしていきましょー!

便利なショートカット

この変はバナー制作で便利なショートカットキーなので覚えておきましょう!他にも検索したら山ほど出てくるので調べてみてね。

 

+ + : 拡大

+ - : 縮小

+ 0 : アートボード全体を表示

+ G : グループ化

+ Shift + G  : グループ化

+ C : コピー

+ V : 貼り付け

+ F : コピーした場所に貼り付け

+ Shift + ] : 最前面へ

+ Shift + [ : 最背面へ

+ 7 : クリッピングマスク

+ Option + 7 : クリッピングマスク解除

+ S : 保存

 

バナー制作で上達するには

とにかくたくさん作る。作るときに、良さそうなバナーをマネして制作するのがいいです。ちょっとしたポイントとしては、

・文字の大きさや色にメリハリをつける

・色は3色以上使わない

・四隅な隙間を揃える

まずはこの3つを意識してつくりましょう。