合成フォントの設定方法 イラストレーター編

Twitterで横浜市が無料配付しているフォント
imagine yokohamaについて投稿しましたが、
このフォント、ほぼ仮名しかないフォントです。
制作側の人間にとっては何でもないことですが
念のためadbeイラストレーターでの合成フォントの設定方法を書いておく事にします。

使用しているのは Mac,illustlatorcs4です。
タイトルにイラストレーター編とありますが、これのみです。あしからず。

まず、イマジン・ヨコハマ フォントをこちらからダウンロードしてください。

http://www.city.yokohama.lg.jp/bunka/outline/brand/output02.html

フォントをPCにインストールしたら、イラストレーターを立ち上げてください。

新規ドキュメントを開き、文字を打ってみます。

「文字」ウィンドーで書体をイマジン・ヨコハマ フォントにします。

イマジン・ヨコハマ フォント見本

 

 

 

 

 

書体がイマジン・ヨコハマになりましたが、上の段の漢字はゴシックです。

この書体には漢字が入っていない為、無い字は別の書体に置き換わってしまいます。

したの段の漢字「横浜」はこの書体にある為正しく表示されています。

こういう書体は他にも多くあります。写植時代から仮名のみ別の書体というのはありましたね。OKLかNKLかなんて懐かしいです。

それでは合成フォントの設定方法です。

まず、書式→合成フォントを開いて右の「新規」ボタンを押してください。

合成フォントテーブル

 

 

 

 

 

好きな名前で合成フォントの新規登録をします。

ウィンドーで、漢字:かな:全角約物:全角記号:半角欧字:半角数字をどの書体にするか選んで行きます。

かなは当然イマジン横浜ですね。合わせる漢字は好きな書体でいいんですが、太さがかなに近いものがいいでしょう。私は“TBUD丸ゴシック Std SL”にしてみました。かな以外の指定はかなと同じ書体にしましょう。

合成フォント設定画面

 

 

 

 

 

 

指定が出来たらOKを押して、先程打った文字をいま作った合成フォントにしてみます。

合成フォントは書体リストの一番上にあります。

設定完了

 

 

 

 

 

 

これで完了です。いろいろな組み合わせが出来ますので、応用してみてください。

バナー画像を追加 サムネールからアップまで

お店の集客ツール活用支援をアピールするために
ホームページにバナー画像を追加しようと思う。
サムネールというのは頭の中に思いついたアイディアやレイアウトなどを
簡単に紙に書き留めたものです。

サムネール
サムネール

サムネールでだいたいこんな感じと決めておいて、あとは作りながら修正します。
イラストレーターで作り始めます。
サイズは940×300pxですからガイドラインを引いておきます。
左側に文字を入れ、右側に挿し絵を描いて入れていきます。ほとんどサムネールのままですね。

 
色を少し変更する事にしました。背景をロゴと同じ色に。黄色を入れて目立つように。並べて本当にこれでいいか比較検討します。

 

 

 

 

 

決まったデーターをPhotoshopに持っていき(コピー&ペースト)画像にします。Photoshopで940×300pxの新規画面を開いて、イラストレーターのデーターをコピペします。これをpng形式で保存すればホームページに張り込む画像ができ上がり。あとはhtmlを修正して画像と一緒にサーバーにアップ、ホバーなどの後処理を施せば終わりです。

Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑