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

「Adobe Illutrator」を"Webデザイン"の現場に導入したいけれど「肝心の使い方がわからない!」とお困りの方に向けて、Webデザインに特化した基本的な使い方をお伝えする本連載。第3回目となる今回は、サイトの顔となる「ヘッダー」を作成します。

今回は、まず「ダイレクト選択ツール」の使い方簡単なオリジナルロゴを作成します。その後、外部の画像(EPS、TIFF、PSD形式などの画像ファイル)をアートボード上に埋め込む方法を紹介していきますので、自分だけのヘッダーを完成させましょう。

■これまでの記事
【レポート】IllustratorでつくるWebデザイン・入門編 (1)ワークスペースの最適化
【レポート】IllustratorでつくるWebデザイン・入門編 (2)ペンツールの基礎知識

Webサイトの"玄関口"、ヘッダーを作ってみる

「ヘッダー(header)」とは、名前の通りWebサイトの"頭"、つまり来場者がサイトに足を踏み入れた際の"玄関口"とも言える領域のこと。主に、サイト名や企業名のロゴなどが表示されています。また、サイト内でページを切り替えても常時表示しておける領域としても有効で、目立たせておきたい情報や、サイト内の検索ボックス、リンクボタンなどの機能を追加することも可能です。近年は別の方法でサイトの"玄関口"を設けている素敵なWebサイトも続々増えてきていますが、まずはスタートラインとしてヘッダーの概念を理解して、基礎として押さえていきましょう。

ヘッダーのサイズに決まりはありませんが、今回は一般的に見易いとされる横幅で「幅:980px、高さ:300px」の新規ドキュメントを作成しましょう。

オブジェクトの準備

アートボードが表示されたら、今回変形するための「オブジェクト(パスで描かれた図形)」を準備します。今回は入力したテキストを「アウトライン化」して「オブジェクト」に変換してみましょう。

まず、パスの変形を行う際に操作する「アンカーポイント」を見やすくするため、フォントを変更します。上部メニューバーの「書式」から「フォント」を選択し、フォントを設定。今回は「HGP創英角ゴシックUB」に設定します。該当するフォントがPC内に見つからなければ、角が角張った線が太めのフォントに変更してみましょう。

仮にサイト名「CASE」と設定し、テキストを入力しましょう。ツールボックスの「文字ツール」を選択し、アートボード上のテキスト入力範囲をドラッグします。テキストを入力するボックスが現れたら「CASE」と入力しましょう。

続いて、この「CASE」という文字を「アウトライン化」し「オブジェクト」に変換します。文字の「アウトライン化」は、テキストを図形化する作業。これを行うことによって、テキストを図形のように扱って、パスを変形することが可能になります。

今回の作業と直接関係はありませんが、「アウトライン化」はデータを共有する際にも便利なものです。例えば、自身が作成したIllustratorのデータを他の人のパソコン上で表示すると、相手が同じフォントを導入していない場合、指定したフォントを読み込めず、元ファイルと異なった内容が表示されてしまいます。「アウトライン化」したテキストであれば、テキスト部分もオブジェクトとして表示されるため、同一のイメージを共有することができるのです。

それでは、作業を再開していきます。ツールボックスの「選択ツール」で「CASE」と入力したテキストパスを選択します。このテキストパスが選択された状態で、メニューバーの「書式」から「アウトラインの作成」をクリックしましょう(Ctrl(command)+ Shift + O)。入力されたテキストが「オブジェクト」に変換されました。

文字のサイズは、「選択ツール」でShiftキーを押しながら縦横比率を変えずに拡大縮小できるので、適度に見やすい大きさにしてみてください。この方法の他にも、メニューバーの「ウィンドウ」から「ナビゲーター」パネルを選択し、表示画面の拡大縮小を行うこともできます。