Downloaded 63 times
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
- 1.
- 2. 自己紹介 • まぼろしの松田と申します • デザイン、マークアップ、JSer、 ライティングなど • 主な著書 『効率的なサイト制作のためのDreamweaverの教科書 【CS5.5対応版】』（鷹野さんとの共著、マイナビ） 2
- 3. マークアップエンジニアとは？ HTML/XHTMLのマークアップ， CSSの設計・コーディング、 情報および文書構造の設計を 行なうエンジニア。 ≒ HTML+CSSの専門家 3
- 4. マークアップエンジニア（以下、ME）は Fireworksがお好き？ やっぱり 全体的に スライス機能 使いやすい がいい!! から!! まぼろしの まぼろしの マークアップエンジニア フロントエンドエンジニア 小林 西畑 4
- 5. というとこで、 Fireworksでのデザインカンプは 大変よろこばれます。 （たぶん） 5
- 6.
- 7.
- 8. CSSプロパティパネル 過信は禁物 • 塗りにアルファを使っていなくても、「background-color」が RGB値で指定される • 「パターン塗り」や「テクスチャ」「ブラシ」は再現できない • 「境界線のカラー」と「Photoshopライブエフェクト - ストローク」は共存できない • 複雑な破線でも、「border-style: dashed;」になる • などなど 8
- 9. カラーコードのコピー 16進数 #FFCC00 RGBa値 rgba(255,191,0,0.5) 9
- 10.
- 11. スライス機能の改善 シンボル内のスライスも正常に書き出せるようになった CS5の場合 CS6の場合 11
- 12. よく使うショートカットキー スライス挿入 Shift + Option ⌥ + U キャンバスにフィット Option ⌥ + Command ⌘ + f 属性のペースト Shift + Option ⌥ + Command ⌘ + v テキストの固定の幅を カスタムでどうぞ 切り替え * Windowsの場合 ： 「Option ＝ Alt」「Command ＝ Ctrl」 12
- 13. よく使うショートカットキー スライス作成のショートカットキー。 複数オブジェクトの場合、ダイアログが 出てめんどくさい！ } スライス1つ挿入.jsf これらのオリジナルコマンドに ショートカットキーを割り当てて スライス複数挿入.jsf 使えばハッピーに！ 後日、配布します！ 13
- 14.
- 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
- 17. スライスやオブジェクトをクリックする たびに連番をふるFireworks拡張 クリックした順で、連番で名前をつける ことができる • 定形の文字列 ＋ 任意の連番 • 連番の桁揃え • 任意の数字からの連番 • CSSスプライトに合わせれば便利 URL：http://www.kuma-de.com/program/2009-06-14/799 17
- 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
- 21. 結論 • やはりFWのスライスはMEの味方！ • 特に、CSS3周りが十分に使えるスマホサイト 制作では効果抜群 • マークアップエンジニアにこれらのことを 教えてあげると大変喜びます • FWを広めるには、まず外堀から攻めましょう 21