IllustratorでWebデザインするなら使うべき機能その1

近年は猫も杓子もベクターベクターということで、ベクターっつったらアレだろ?ほら。あのびゅーんって線描いて、ちゃちゃっと印刷とかできるやつ。
ね。使ってます?使ってますよね?え?Webだから◯ketchですって?なんてこった!
それライセンスあるけど使ってなくてごめんなさい。

というわけでAdobe Illustrator大好き、夜のペンツールマスター、北村たあです。

生まれも育ちもIllustratorではじまったわたしのデザイン人生ですが、最近はとくにWebデザインでも見直され始めていて、とは言ってもまぁ日本だけ特殊らしいですけどそれはそれ。
どうせIllustratorで作るなら、もっと快適に使ってやらにゃなんねぇ。
Webはとくに、同じ要素のパターン化がキモなもんだから、ああまた修正かよ。ちっ。これ変えるのに何箇所直さなきゃなんねぇんだコンチクショウ。とかって、ちまちまとめんどくせぇ作業をやってねぇかいべいびー?

そんなIllustratorでWebデザインする初級者のみなさまのために、IllustratorでWebデザインするならこれだけは使っておけ機能をご紹介しませよ。

1)合成フォント

イラレを使ってる人に言っても、意外となにそれおいしいのと言われてしまう合成フォント機能。印刷よりもむしろWebでこそ威力を発揮すると思っているのでまずはこちらをご紹介。

さてまずこちらをご覧ください。

 font-family: Helvetica , "Hiragino Kaku Gothic ProN" , "Yu Gothic" , sans-serif;

これ、Webでコーディングなんかをする人は当たり前なんですけど、デザイナーだとよくわかってない人もいるかも知れません。
なので簡単に説明すると…

ヘルベチカフォントがあったらヘルベチカ。なければヒラギノ。さらになければ遊ゴシックで表示してね。それでもなければ…(続く

という指定なんですね、つまりこの場合、半角英数字はヘルベチカで出してくれるけど、日本語はヒラギノを優先します。
こんなのあんの?とか思う人もいるかもしれないですが、意外と多いです。

じゃぁデザイン上もそれに習わないといけないよね。ってんで、試しに通常の指定方法でどうなるか見ておきませよ。

ヘルベチカ(Helvetica)で和文混じりを指定すると、こんな感じで、例えば小塚ゴシックとの混合みたいに(勝手に)されます。

ヘルベチカ指定

じゃぁ。ってんで、ヒラギノで指定すると、当然ですが英数字もヒラギノになりますわな。

ヒラギノ指定

なにこれ。タイトルなんかの文字の少ない要素はよいけれど、本文みたいな長文はどうすんじゃ?半角英数字全部手作業で変換すんの?それともデザイン上は(めんどくせぇので)全部ヒラギノですって言い切るの?ってことになります。

そこで合成フォント!

まずはここ、「書式」の中にある「合成フォント」を開きます。

合成フォントの場所

するとこんな感じで、「新規」から新しいフォント(の組み合わせ)を作成して、「漢字」、「かな」、「半角欧文」なんてな具合に、それぞれお個別にフォントを指定できます。
つまりそう。
変えるのはこれだけ。
合成フォント作成画面

で、どうなるかってーと。こうなります。
合成フォント使用例

こうしておけば、ながーい長文。いや長文だから長いに決まっているのだけど、どんな長くても勝手に合成!ビバ合成!

 

 

続きは次回。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です