ホームページの部材をIllustratorで作るとは

ホームページのボタンなどの部材を、Illustratorで作るためのメモ。

例えばボタン。複数のボタンに対して、同一のデザインを適用したいわけである。例えば、影の付け方などは、全ボタンに対して共通にしたい。

ボタン一つ一つに、手作業で影を付けていたのではたまったもんではないので、なんとかし化ければならない。

さすがIllustratorには、スタイルとシンボルという二つの機能があるわけで、このどちらを使うか迷った。で、結論はシンボル。

シンボル

これはボタンの形状をシンボルとして登録しておけば、あとはそのボタンを置きたい場所に、「シンボルを置く」とやれば、登録したシンボルがそこに出現する。

ボタンのデザインを変更した場合には、全シンボルにその変更が伝達される。

後述するスタイルとは異なり、ボタンを、複数の部品の集まりとして実現できる点が長所。

ボタンそれぞれで、大きさは微妙に修正を要する。ところが、ボタンのデザインを変更すると、修正済みの大きさまでもが、デザイン変更時の大きさに統一されてしまい、再度、ボタン個々のサイズ修正が必要となる。

↑、そんなことはなかった。はて?

スタイル

これはあくまで、ボタンの上に載せる文字に対するIllustratorでのスタイルの集合として定義するもの。Illustratorでは、文字の形状を四角に変えたり、その位置をずらしたりと、形状に対して様々に変化が付けられるので、文字に対するスタイルの集合だけでも、組み合わせることで色々なボタンが実現可能。

欠点は、複数の部品の組合せとして実現できないので、ボタンのデザインが制限されること。

もう一つの欠点は、英語フォントと日本語フォントのデザインの違いに由来。

ボタンの表面に、文字が具合良く収まるようにするためには、ボタンと文字の位置の微妙な調整が必要。

しかし、この具合が、日本語フォントと英語フォントでは異なる。従って、ボタンラベルが日本語及び英語に対して、別々のスタイルを作成しなければならない。

選択の理由

スタイルでは、スタイル変更に伴うボタン位置のずれが発生しない点を理由として、スタイルを採用。

デザインは限定されるは、凝ったことはしないので、これでよいでしょう。