【FW】Fireworksが捗るあれこれ【PNG】

皆さんこんにちは。渡辺です。デザインをしています。

web業界に転職してきてAdobeのFireworksを初めて使用する機会があり、新鮮だったので今回記事にしてみようと思います。

Fireworksとは？

マイクロメディアによってWebをターゲットにした画像作成・出力を目的に作成され、標準保存ファイル形式はPNGだが、JPEG、GIFなどのインターネットで使用される画像形式を、品質を出来るだけ落とさずにバイナリ容量を小さく保存する機能に特化した。2013年5月6日にAdobeがCreative Suiteシリーズから、月額・年額制のカードタイプであるCreative Cloudに移行されるのと同時に、CS6以降のバージョンの開発がされないことが発表されている。

ウィキペディアから抜粋
https://ja.wikipedia.org/wiki/Adobe_Fireworks

色々な記載がありますが、Fireworksで作業するとpng形式でPhotoshopのようにレイヤーになったファイルが出来ます。

特徴としてビットマップ画像もベクトル画像も同等に扱うことができ、ちょっとしたバナーなどはFireworksの方がPhotoshopよりも効率が良かったりします。
また、編集画面がIllustratorやPhotoshopよりもシンプルでわかりやすく操作出来て私は好きです。

残念なことに現在は既に開発終了ですが、何かと使用する機会はあるので、便利だと思った機能と小ワザをまとめてみました。

スライスをオブジェクトのサイズに合わせて自動的に作成することができます。

オブジェクト上で右クリック→「長方形スライスを挿入」を選択

生成された黄緑色のエリアがスライスです。もし生成されたスライスを自由変形させたい時は⌘Tでバウンディングボックスを出現させればOK。
作成したスライスは編集画面右のレイヤーパネルの「Webレイヤー」に格納されています。ここで表示非表示などを設定できます。
ショートカットで数字キーの2でスライスの表示非表示ができます。

編集画面下部にあるプロパティインスペクターからスライスに名前を設定できます。レイヤーパネルからもできます。
書き出す形式は最適化パネルから選択。

複数のオブジェクトに一括してスライスを作成したい時は複数選択した状態で右クリック→「長方形スライスを挿入」→「複数」で作成できます。
長方形以外の形の時は「多角形スライスを挿入」をどうぞ。

ツールパネル内の長方形マークを長押しすると様々なカタチの自動シェイプがあります。選択してカンバス上をドラッグすると出現します。
出現したシェイプの黄色の点をドラッグすることで形状が変わるので自分の好みに合わせてください。

また、編集画面下部にあるプロパティインスペクターから自動シェイプのプロパティを選択することで正確な数値を入力することができます。（表示がない時はメニューの「ウィンドウ」→「自動シェイプのプロパティ」を選択）

バナーなどを作成する際「角丸長方形」や「矢印」が便利です。
Fireworksは単位が１pxごとの設定なのでアンチエイリアスが出にくくPhotoshopよりもパキッとした画像が作りやすいです。
Photoshopでも同じようなことはできるのですが個人的にはFireworksの編集画面の方が操作しやすくて出番が多いです。

なお角丸長方形を自由変形する際は角丸を保つため、パスのアンカーポイントを選択すると上手くできます。

パターンはオブジェクトの塗りに適用することができます。

プロパティインスペクターから「ベタ塗り」になっている塗りの欄から「パターン」をクリック→色々なパターンがあるので選択

塗りにパターンが適用されて表示されます。ここで中心から縦横に線が出ているので引っ張るとパターンを引き伸ばすことができます。
テクスチャーは白黒の画像でオブジェクトの塗りと線に適用することができます。
白い部分は透明になり、黒い部分は元々の塗りで選択している色になります。

プロパティインスペクターから「テクスチャ」→テクスチャーを選択→隣の欄で「テクスチャの適用量」を指定

0（透明）～100（不透明）まであり、「透明」のボックスにチェックを入れると背景を含めて透明になります。

ぼやけないはっきりとした線の画像を作成するには

線の設定についてプロパティインスペクターから「基本」→「エッジが硬い線（角）」→「内側のストローク」→塗りをストロークに重ねるのボックスにチェック

また、画像を縮小拡大したり、配列を繰り返したりしているとアンチエイリアスがかかってくるので

画像を選択→メニューの「変更」→「ピクセルにスナップ」

でパキッとした質感になります。

テキストの場合はプロパティインスペクターから

＊「アンチエイリアスーなし」

テキストがギザギザになります。メイリオやMSゴシック等のフォントがweb上のテキストと同じ見た目になります。デザインカンプを作成する際テキスト部分の文字を表現するのに便利です。

＊「アンチエイリアスー鮮明」、「アンチエイリアスー強く」、「アンチエイリアスー滑らかに」

それぞれアンチエイリアスのかかり方が違うのでフォントによって綺麗なものを選びます。「強く」にすると字が太くなることが多いです。「鮮明」はテキストと背景間が鮮明に、「滑らかに」は緩やかに変化します。

小さい文字、特に漢字は難しいので「カスタムのアンチエイリアス」で様子を見ます。

「オーバーサンプル」→テキストと背景間の変化を作成する量。デフォルトの８回より１６回を選ぶ方が細かく調整できます。
「シャープ」→線の鮮明さ　「強さ」→線の太さ

Fireworksの「カスタムのアンチエイリアス」機能はPhotoshopにはないので、Photoshopでは潰れてしまうような文字でもFireworksで調整することができます。

写真をくり抜きたい・・・そんな時Photoshopでは

ベースの画像→ベースの画像の上にくり抜きたい形を配置→レイヤー上でベースの画像のレイヤーの下にくり抜く形のレイヤーを持ってくる→画像のレイヤーを選択→右クリック「クリッピングマスクを作成」を選択

ショートカットキーはoption+ctrl+G

Fireworksでは

ベースの画像→ベースの画像の上にくり抜きたい形を配置※この時レイヤー上で必ず両方選択していること＆レイヤー上の順番もベースの画像のレイヤーの上にくり抜く形のレイヤーを持ってくる→ツールの「変更」→「マスク」→「マスクとしてグループ化」を選択

作業をしているとPhotoshopと混同しがちになるので要注意です。
結構使う場面がありそうな機能ですが、なぜかショートカットキーがないので各自で設定すると便利です。

全体的にIllustratorやPhotoshopと機能が被っているところが多いですが、慣れてくるとこれはこれで使いやすく感じます。。
以上、【FW】Fireworksが捗るあれこれ【PNG】でした！

-技術