FireworksやPhotoshopなどのグラフィックツールでWebデザインのモックを作る際、文字ツールは矩形ツールより多く使うことが多く、文字設定のショートカットを覚えているだけでも効率は全然違います。グラフィックソフトで一番に覚えるべきショートカットは何かと聞かれたら間違いなく文字周りのショートカットです!

今日はFireworksで覚えておくと便利な文字設定のTipsや拡張機能をまとめておきます。

これだけは最低限覚えておきたい文字設定のショートカット

手動で文字の設定を行う場合にはショートカットキーがとても便利です。
PhotoshopやIllustratorなど他のツールで慣れている方は、[Alt]のショートカットは[Ctrl]に置き換わると覚えておくと、スムーズに覚えられるのではと思います。

手動で字間調整するときにやっておくこと2つ

[自動カーニング]をOFFにする

カーニングを手動で行う場合は、[自動カーニング]の設定をOFFにします。
ONになっている状態でカーニングの値を動かすと、適用したい箇所の前の1文字も少しずれてしまいます。手動の場合はこの設定をOFFにすることを強くおすすめします。

カーニング・トラッキングの単位は1/1000文字

カーニング・トラッキングの値はCS4から1で1/1000文字分という形になりました。これはIllustratorやPhotoshopとも同様です。文字半角分空けたいときは、500を入れると、ちょうど半角スペース1個分の間隔を空けることができます。

テキストまわりで便利な拡張機能

Font Mixer

Illustratorには合成フォントがあるのに…Fireworksユーザーなら一度は思ったはず。Font Mixerは名前どおりにFireworksで混植を簡単に実現するプラグインです。とくにランディングページの制作・文字が多めの画像にはこちらを重宝しています。

PI_TextGenerator

縦並びメニューを作るときに、テキストオブジェクトを1個1個作っていくのは手間がかかってしまいます。そんなときに便利なのがこちらの拡張機能。タブや改行区切りでテキストオブジェクトに分割します。

IllustratorからテキストコピーしたときのFireworksの再現具合

Fireworks CS4からはIllustratorからテキストオブジェクトを再現したままペーストできるようになりました。現時点で実験して維持されているのは以下のとおりです。

段落揃え
プロポーショナルメトリクス
禁則処理
文字組み
文字の回転
文字スタイル
タブ揃え
段落スタイル
段組の文字
アンチエイリアスの付き方
合成フォント ×
合字(リガチャ) ×

FireworksではCS4から文字のレンダリングエンジンがIllustratorと同様のものになったものの、それを設定する場所がありません。なので、文字組にこだわって制作する場合にはIllustratorからコピー&ペーストをすると、効率化が望めます。

Adobeソフトのテキストペースト時の挙動

参考までにPhotoshopやIllustratorなどの他のツールのテキストオブジェクトのコピペ具合をまとめてみました。検証に使ったのはCS6シリーズですが、おそらくCS6以前でも同様になると思います。

  コピー元
Fireworks Photoshop Illustrator
ペースト先 Fireworks --- ビットマップ画像 テキストオブジェクト
Photoshop ビットマップ画像 --- ビットマップ画像
Illustrator テキストオブジェクト ビットマップ画像 or
ベクター画像
---

FireworksとIllustratorはテキストオブジェクトとしてのコピペができる一方、Photoshopはラスタライズされたり、シェイプとしてしかペーストすることができません。ただし、Photoshopの場合は.aiファイルをそのまま開くことはできます。使い分ける際のご参考までに。

一長一短はあるものの、コピペ時の挙動はAdobeソフトで共通化されると楽ですね。