覚えておいて損はない！ Fireworksの便利なTips特集

覚えておいて損はない！Fireworksの便利なTips特集

FWUG 第3回勉強会2012.2.5

1

自己紹介

2

まるやま あきら鳥取在住。Web歴15年ほどFireworksはVer.1から昨年のCSS Nite LP, Disk 14に登壇 FWUGのコアメンバー

　　 や　　 の拡張機能とか作ってます。

http://dwlog.net/

3

今日の内容

•書き出し系•シンボル•自動シェイプ•コマンド• Illustratorからのインポート• Illustratorへの書き出し

4

書き出し系•CS5.1より前でも背景グラデーションをきれいに書き出す

• icoファイルを書き出す

5

CS5.1より前バージョンでも背景グラデーションをきれいに書き出す

• CS5以前、256色以上の色をもつオブジェクトのgifやpng8の全色割り付けにバグ。

• 1. スライス範囲を狭める2. 「全色書き出し」で最適化3. カラーをロック4. スライス範囲を戻す5. 再度「全色書き出し」で最適化

書き出し系

6

icoファイルを書き出す

• Webグラフィックスツールなのに何故か対応していない

• 拡張機能を利用Faviconhttp://johndunning.com/fireworks/about/ExportAsFavicon

• Windowsは8以上、Macは CS5以上• Export as Faviconでico書き出し、その他はカンバス作成コマンド。

書き出し系

7

実はMacでプレビューでicoに対応済

プレビュー

ただしLionでは機能がなくなっている書き出しで「Microsoft アイコン」を選択

icoファイルを書き出す（おまけ）書き出し系

8

書き出し系まとめ•CS5.0以前には全色割り付けにバグがある

•スライス範囲を狭めて必要な色をロックする

• icoファイル書き出しは拡張機能で対応（MacはCS5以上で）

9

シンボル系•劣化の少ない拡大縮小•シンボル化でブレンド効果が欠落するバグ

10

•ビットマップの拡大縮小→劣化を生じる

•大きめの素材をシンボル化する

劣化の少ない拡大縮小シンボル系

200%拡大

ビットマップ シンボル

11

•オブジェクトに乗算後、シンボル化ブレンド効果がなくなる！

•ビットマップ化するしかない

シンボル化でブレンド効果が欠落シンボル系

オブジェクト シンボル化

12

シンボル系まとめ•適度に大きめの画像のシンボル化は、拡大縮小時の劣化を抑えることができる

•ブレンド効果を持つオブジェクトのシンボル化はブレンドが欠落

13

自動シェイプ•知っておくと便利（と思う）自動シェイプ

•使用するときの注意点•9スライスを使うには？

14

星形、矢印、多角形などの多彩なシェイプ形状のオブジェクトを簡単に作成および編集することができる

自動シェイプとは？自動シェイプ系

15

コントロールポイントの移動やプロパティパネルでの値の変更で形状などをカスタマイズ可能なオブジェクト

自動シェイプとは？自動シェイプ系

16

•Sunburst　放射状の形状http://fireworks.abeall.com/extensions/autoshapes/#Sunburst

•Arc　円弧を描くhttp://fireworks.abeall.com/extensions/autoshapes/#Arc

• PlaceHolder　当たりを入れるhttp://johndunning.com/fireworks/about/Placeholder

ワイヤーフレーム等で当たりを入れるときに使う。バージョンアップしてより高機能

知っておくと便利（と思う）自動シェイプ自動シェイプ系

17

•Multi-Border Rectangle　辺ごとに異なる太さ・色の線を適用するhttp://johndunning.com/fireworks/about/MultiBorderRect

•角丸長方形（標準）角ごとに角丸を適用できる

知っておくと便利（と思う）自動シェイプ自動シェイプ系

18

•線の属性は利用できないPhotoshopライブエフェクトのストロークを使う

•複雑な機能をもつ自動シェイプは塗り/線を適用しない

•そのままでは9スライスを適用できない自動シェイプをシンボルにする

自動シェイプを使用するときの注意点自動シェイプ系

19

自動シェイプまとめ•自動シェイプは複雑な図形を簡単に生成できる

•線の属性は利用不可。代わりにPhotoshopライブエフェクトで

•9スライスを使うためには自動シェイプをシンボル化する

20

コマンド•選択オブジェクトと同じサイズの矩形をつくる

•選択オブジェクトの数ピクセル拡大・縮小した矩形をつくる

•カンバスサイズと同じサイズの矩形をつくる

•テキストを選択しただけでカーニングを可能にする

21

コマンド•6000x6000pxのカンバスサイズの制限を変更する

•ダイアログを出さずに10または100pxずつカンバスサイズの高さを変える

•コマンドを使ってショートカットメニューを作成

22

•6000x6000pxのカンバスサイズの制限を変更する

•ダイアログを出さずに10または100pxずつカンバスサイズの高さを変える

•コマンドを使ってショートカットメニューを作成

カンバスサイズの制限を変更するコマンド系

23

コマンドまとめ•コマンドは JavaScript & Fireworks APIで構成されている

•通常のUIでは制限のかかっていることを実行可能

•ショートカットと併用で作業効率UP！

24

AIからのインポート

•画像は72dpiでラスタライズして書き出し

•効果はラスタライズされる•文字がずれる•パスがグループ化

25

AIからのインポートまとめ•画像は事前にラスタライズ。配置は無視される

•効果はラスタライズされる。透明度設定のあるものは注意

•文字だけは読み込み時にずれる詰め設定も変更される

• 1オブジェクトでもグループ化26

AIへの書き出し

•FXGを利用する

27

AIへの書き出しまとめ

•FXGを利用して再現性の高い書き出しが可能

•ただし効果やパターン等を含んだオブジェクトはラスタライズ

•通常書き出しだとAI8レベル。ライブエフェクトなどは欠落

28

おまけ

29

Fireworksに関する情報を配信しています

• The Fireworks Daily Newshttp://paper.li/akira_maru/1297491883ハッシュタグ #adobefireworks をチェック！

• Fireworks Lover Jhttps://www.facebook.com/FireworksLoverJ

30

ご清聴ありがとうございました

@akira_maru

31