TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

SCHOOL

Illustratorでバナー作成をおすすめする理由





こんにちは!トミオカです!

WEBデザイナーやUIデザイナーの方はバナーを作る機会ってよくありますよね。

大体の方はphotoshopで制作する方が多いと思うのですが、
僕は断然!Illustratorでのバナー作りをおすすめしています。

今回はその理由と、実際の作り方についてのご紹介となります。

なぜphotoshopでバナー作成する人が多いのか

そもそもIllustratorとPhotoshopの違いってご存知ですか?
扱っているデータの種類がそもそも違うのです。

Illustratorはベクター画像というデータを扱っており、
コントロール・ポイントと呼ばれる点と点を直線や曲線が繋がって表示されます。

少しわかりにくいですが、利点としては画像を拡大縮小しても画像は劣化せず、
グラフィックデザインにとても適しているソフトウェアです。

Photoshopはビットマップ画像というデータを扱っており、ピクセルという点の集合体で画像が表示されます。
Illustratorとは違い、画像を拡大すると1つの点が大きくなるので画像は劣化します。

ソフトの違いを理解した上でバナー作りに置き換えてお話します。

バナーは基本WEB上で表示されるツールです。

パソコンやスマホの画面というのもphotoshopと同様で
ピクセルの数で画面を表示させており、
解像度(ピクセルの数)が設定されています。

それを踏まえた上でPhotoshopで制作する方が多いと推測できます。

またPhotoshop上のアートボードで、
バナーを複数個作った場合、
ピクセルに綺麗に合わせてスライスできるから、作業が楽という点もあります。

それではなぜIllustratorをおすすめするのか、次の項目でご説明します。

スピード、デザイン性を高めるならillustrator

前項でご説明した通り、Illustratorはベクター画像を扱っており、
デザインする上でレイアウトや装飾にとても優れたソフトウェアです。

そのため画像の拡大・縮小も(画像を劣化させず)手軽にでき、スピードも格段に早いです。

おそらく僕の場合ですが、2分の1ぐらい時間短縮できると思います(個人差はあると思います)。

Photoshopは元々写真加工に優れたソフトです。

そのためデザイン上で使用する写真加工にのみ使用すると割り切って、
レイアウトや装飾はIllutratorでしっかりとクオリティをあげることをおすすめします。



3つのポイントを守るだけで簡単に作れる

じゃあ実際どうやって制作するのか。

簡単です。

Photoshopが選ばれる理由をなくしてしまえば良いのです。

近年IllustratorでもWEBツールが制作しやすいよう機能が格段に増えました。
そのため環境を少しphotoshopに寄せるだけで良いのです。

・ポイント1 単位をpixelに設定する

グラフィックデザインを行なっていると、単位を下記のような設定にしている方多いのではないでしょうか。

そもそも新規ドキュメントからWEBに設定することで
単位をすべてピクセルに自動設定してくれて、
なおかつカラーモードをRGBに変更してくれます。

その上で単位も下記のように設定しましょう。

これで初期設定は終了です。

・ポイント2 最小単位を1ピクセルにする

前項でご説明した通り、
パソコンやスマホの画面はピクセルの数で画面表示をしており、
最小単位が1ピクセルとなります。

そのため端数(0.5ピクセルや1.5ピクセルなど)は綺麗に表示できず、
ぼけた表現となります。

そのため線を描くにしろ、四角を描くにしろ、最小単位を1ピクセルにすることが大切です。

ただスマホに関してはRetinaDisplayが適用され、
2倍、もしくは大きめに作ることが多いので、
デザインデータが実際どのくらい縮小されるのかは事前確認が必要となります。

例えば2倍で作るのであれば、実際は2分の1されるので
最小単位は2ピクセルにしなければいけません。

1ピクセルだと2分の1された時に0.5ピクセルという端数がでてしまうので
実際見た時にボケた表示となります。

その上でオブジェクトの大きさは偶数にすることをおすすめします。
(2分の1になった際端数がでるので)

・ポイント3 座標軸を整数にする

こちらも非常に重要です。

オブジェクトのサイズを1ピクセルを最小とし、
大きさも整数にするというポイント2と考えは似ています。

例え大きさを整数にしたところで
X軸とY軸に端数にしてしまうと同じくぼけてしまいます。

そのため座標軸も整数にすることが基本です。

以上3つのポイントをしっかりと覚え、また慣れてしまえば、
Illustratorで簡単かつクオリティの高いバナーがスピーディに作ることができます。

WEBサイトを作る際も同様の考え方

バナーはWEBツールなのでWEBサイトを作る際も基本的な考え方は同様です。

もう一度整理をすると

・単位をpixelに設定する
・最小単位を1ピクセルにする
・座標軸を整数にする

こちらの3点は大前提として

WEBサイトはサイズが指定されないだけに感覚的な部分と知識も必要なので
別の記事で改めてご説明できればなと思っています。

まとめ

いかがだったでしょうか。

デザイナーの方は細かいマージンや装飾にこだわる方が多いと思いますので(むしろそれがデザイナーですねw)、
ソフトの使い勝手で時間を費やすより、デザインに時間を費やしたい方が多いと思います。

僕自身がそうなので、
今回はこのような記事を書かせていただきました。

今回の記事内容に関してはYoutubeでもご紹介しておりますので、
よろしければご覧になってください。

長々とご覧になって頂き、ありがとうございました。

少しでも参考になれば幸いです。