More Related Content
Similar to マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Similar to マークアップエンジニア だからうれしい Fireworksの使い方あれこれ (20)
More from Naoki Matsuda (7)
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
- 4. マークアップエンジニア（以下、ME）は
Fireworksがお好き？
やっぱり 全体的に
スライス機能 使いやすい
がいい!! から!!
まぼろしの まぼろしの
マークアップエンジニア フロントエンドエンジニア
小林 西畑
4
- 8. CSSプロパティパネル
過信は禁物
• 塗りにアルファを使っていなくても、「background-color」が
RGB値で指定される
• 「パターン塗り」や「テクスチャ」「ブラシ」は再現できない
• 「境界線のカラー」と「Photoshopライブエフェクト -
ストローク」は共存できない
• 複雑な破線でも、「border-style: dashed;」になる
• などなど
8
- 9. カラーコードのコピー
16進数
#FFCC00
RGBa値
rgba(255,191,0,0.5)
9
- 12. よく使うショートカットキー
スライス挿入 Shift + Option ⌥ + U
キャンバスにフィット Option ⌥ + Command ⌘ + f
属性のペースト Shift + Option ⌥ + Command ⌘ + v
テキストの固定の幅を カスタムでどうぞ
切り替え
* Windowsの場合 ： 「Option ＝ Alt」「Command ＝ Ctrl」
12
- 13. よく使うショートカットキー
スライス作成のショートカットキー。
複数オブジェクトの場合、ダイアログが
出てめんどくさい！
}
スライス1つ挿入.jsf
これらのオリジナルコマンドに
ショートカットキーを割り当てて
スライス複数挿入.jsf 使えばハッピーに！
後日、配布します！
13
- 15. CSSプロパティが出力するコードを
最適化「CSS Profesionalzr」
冗長的なコードを最適化してくれる
拡張機能
• 0px→0に
• width、heightを削除
• rgb(r,g,b)を16進数(#xxx)に変換
• background-image→backgroundに変更
• 無駄な改行を削除(コメントも削除)
• プロパティーをショートハンドに
(border関連)
• などなど
URL：http://mattstow.com/css-professionalzr.html
15
- 16. スライス画像のスニペットを書き出す
Fireworks拡張機能
スライスの情報に応じて、定形コードを
出力できる
• スライスの名前（画像のファイル名）
• 幅（px）
• 高さ（px）
• x座標（px）
• y座標（px）
URL：http://www.kuma-de.com/blog/2012-05-23/3508
16
- 18. スライスの作成・名前付け、コード出力
など「PI_Slice」
スライス編集ツールの
決定版
• 複数スライスの一括作成
• 複数スライスの
一括画像フォーマットの設定
• 連番ベースでの名前づけ
• 独自の値配列による名前づけ
• 複数スライスの一括リサイズ
• 複数スライス名の一括設定
• 複数スライス名の一括変更
• 複数スライスコードの一括出力
(クリップボードにコピー)
URL： http://www.pixelimage.jp/blog/2011/07/pi_slice.html
18
- 19. オブジェクトを種類で絞り込んで選択
できる「SelectManager」
オブジェクトをフィルタリングして、
特定の種類のものだけ選択
• テキスト
• 長方形ツールや楕円ツールなどの
図形
• パスデータ
• ビットマップ
• グループ
URL：http://www.pixelimage.jp/blog/2008/05/_fireworksselectmanager.html
19
- 20. オブジェクトのサイズ、間隔、色などの
プロパティを、指示書のように
オブジェクトのサイズ、間隔、色などを
自動で書き出す「SPECCTR」
+ Expand Canvas
+ Movable/editable labels
+ Specs organized in layers
+ Multispec - spec multiple objects
MEASUREMENTS
+ Width & height
+ Spacing between object and canvas
+ Spacing between multiple objects
+ Spacing between text objects
OBJECT
+ Fill Color
+ Stroke color, size, style
+ Opacity, filter
TEXT
+ Font family
+ Size
+ Color
URL：http://specctr.com/ + Opacity, Filter
+ Alignment, Leading, kerning
20
