IllustratorでつくるWebデザイン・入門編 (3)Webサイトのヘッダ作成

いよいよ今回の"要"となる「オブジェクト」の変形に移ります。ツールボックスの「ダイレクト選択ツール」を選択しましょう。「ダイレクト選択ツール」は「オブジェクト」を「アンカーポイント(点)」単位で選択することができるため、この作業をする際には欠かすことのできないものです。

では、「CASE」という文字を変形させましょう。画像を参考にテキスト「E」の「アンカーポイント」をShiftキーを押しながら、2点選択します。この時、選択中の「アンカーポイント」は■、同じオブジェクト上で選択されていない「アンカーポイント」は□と表示されます。2点が選択された状態で「アンカーポイント」の位置を水平移動させるため、新たにShiftキーを押しながら、■のどちらかを選択したまま右方向へドラッグしてみましょう。すると、同時に選択されたふたつの「アンカーポイント」の位置が水平に右方向へ移動し、「E」の形状が変形しました。

このように、Illustrator上の「オブジェクト」は常時、パスを変形させることができます。最後に伸ばした「E」の上に「2012」と加えて、ロゴはこれで完成です。

■ペンツールの豆知識
・「アンカーポイント」を複数同時に選択する場合は、上記の行程で使ったShiftキーを押しながらひとつずつ追加選択する方法のほか、選択するアンカーポイントの範囲をドラッグして選択することもできます。

・今回は「アンカーポイント」の移動によってフォントを変形させましたが、ベジェ曲線上の「アンカーポイント」を一度クリックして再度現れる「方向線」をドラッグすることにより、曲線の形状を編集することも可能です。方向線については第2回を参照してみてください。

・今回は使用しませんでしたが、ツールバーの「ペンツール」アイコンをクリックしたままにしておくと、「アンカーポイントの追加ツール」、「アンカーポイントの削除ツール」というツールが表示されます。作業に慣れてくると便利なツールなので、ぜひお試しあれ。

画像の埋め込み

ここからは、ヘッダーに画像を埋め込んでいきしょう。まずは、埋め込むためのEPS形式の画像を準備します。JPEG形式の画像でも埋め込むことはできますが、編集中に画像の品質が劣化する恐れがあるので、Illustrator上で扱う画像はEPS、TIFF、PSD形式の画像ファイルをお勧めします。

Webサイトの玄関口であるヘッダですから、サーバーから短時間で読み込ませたいもの。そのため、ファイルサイズが大きく、ダウンロードが遅くなってしまうのは好ましくありません。埋め込む画像は、見た目の品質がさほど悪くならない範囲で、極力ファイルサイズの小さい画像を選ぶ、あるいはファイルサイズが小さくなるように編集するようにしましょう。画像の「カラーモード」は、Webで閲覧する画像となりますので「RGB」を使用します。

さて、Illustratorにおける画像の埋め込みは、一般的な「コピー＆ペースト」とは少し異なります。ただし方法は簡単です。まず、メニューバーの「ファイル」から「配置」を選びます。すると、埋め込むファイルを選択するウィンドウが表示されます。

次に、あらかじめ準備したEPS形式の画像(もしくはその他の形式)を選択します。この時、下部の「リンク」という項目にチェックが入っていないことを確認し、入っていたらチェックを外した後「配置」をクリックします。これで画像をIllustratorファイルに埋め込むことができました。今回はヘッダーサイズと同じEPS形式の画像を準備してみました。

さきほど作成したロゴが隠れてしまった場合は、メニューバー「ウィンドウ」の「レイヤー」パネルで、重なった「オブジェクト」の上下をドラッグし入れ替えて、重なりの順序を変更することができます。準備した画像の背景がブラックなので「CASE」の色をブラックからホワイトに変更しました。

画像もオブジェクトと同様に、「選択ツール」を使ってサイズを変更したり、位置を調整したりすることができます。縦横の比率を変えずにサイズ調整する場合は、Shiftキーを押しながら角を変更しましょう。また、「ウィンドウ」の「変形」パネルを開くと「W(幅)」、「H(高さ)」を数値入力できます。例えば、画像を今回のヘッダーサイズの高さにしっかり合わせたい場合は、「W(幅)」、「H(高さ)」の間の鎖マークが結ばれている状態(縦横比を変えずに拡大縮小ができます。)で、画像選択中にメニューバー下の数値入力欄「H(高さ)」を「300px」としましょう。鎖マークが結ばれていない場合はクリックすると結ばれます。

できあがったヘッダー画像は、連載の第5回で使用しますので、第2回で作成した地図と同様に大切に保存しておきましょう。今回は保存ウィンドウの「フォーマット」を「Illustrator EPS」として保存してみましょう。ヘッダーのサイズで保存しておきますので、「各アートボードごと」にチェックを入れて保存してください。

これで、今回の作業は終了です。次回は、Webサイトデザインに使える「効果」を用いたボタンの作成方法をご紹介します。お楽しみに!

紘太郎
福岡県出身。玉川大学芸術学部パフォーミング・アーツ科卒業後、エディトリアルデザイン、イラストレーターとしての活動を開始。書籍のイラストカットやイベントの広報物制作を請け負う傍ら、2010年にはTEDxYouth@Seedsにデザインチームの一員として参加。その後も、輸入アイスクリームの公式サイトデザイン、キャラクター制作など活動の幅を広げている。