「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キヌを抌しながら瞊暪比率を倉えずに拡倧瞮小できるので、適床に芋やすい倧きさにしおみおください。この方法の他にも、メニュヌバヌの「りィンドり」から「ナビゲヌタヌ」パネルを遞択し、衚瀺画面の拡倧瞮小を行うこずもできたす。