Successfully reported this slideshow.
Your SlideShare is downloading. ×

マークアップエンジニア だからうれしい Fireworksの使い方あれこれ

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Sass 超入門
Sass 超入門
Loading in …3
×

Check these out next

1 of 21 Ad
Advertisement

More Related Content

Viewers also liked (20)

Similar to マークアップエンジニア だからうれしい Fireworksの使い方あれこれ (20)

Advertisement

マークアップエンジニア だからうれしい Fireworksの使い方あれこれ

  1. 1. マークアップエンジニア だからうれしい Fireworksの使い方あれこれ 株式会社まぼろし 松田直樹 1
  2. 2. 自己紹介 • まぼろしの松田と申します • デザイン、マークアップ、JSer、 ライティングなど • 主な著書 『効率的なサイト制作のためのDreamweaverの教科書 【CS5.5対応版】』(鷹野さんとの共著、マイナビ) 2
  3. 3. マークアップエンジニアとは? HTML/XHTMLのマークアップ, CSSの設計・コーディング、 情報および文書構造の設計を 行なうエンジニア。 ≒ HTML+CSSの専門家 3
  4. 4. マークアップエンジニア(以下、ME)は Fireworksがお好き? やっぱり 全体的に スライス機能 使いやすい がいい!! から!! まぼろしの まぼろしの マークアップエンジニア フロントエンドエンジニア 小林 西畑 4
  5. 5. というとこで、 Fireworksでのデザインカンプは 大変よろこばれます。 (たぶん) 5
  6. 6. Fireworks CS6 の コーディングに役立つ新機能 6
  7. 7. CSSプロパティパネル * CS5.x の拡張機能は、現在使用出来なくなっています!ご注意を。 7
  8. 8. CSSプロパティパネル 過信は禁物 • 塗りにアルファを使っていなくても、「background-color」が RGB値で指定される • 「パターン塗り」や「テクスチャ」「ブラシ」は再現できない • 「境界線のカラー」と「Photoshopライブエフェクト - ストローク」は共存できない • 複雑な破線でも、「border-style: dashed;」になる • などなど 8
  9. 9. カラーコードのコピー 16進数 #FFCC00 RGBa値 rgba(255,191,0,0.5) 9
  10. 10. CSSスプライトを書き出し 10
  11. 11. スライス機能の改善 シンボル内のスライスも正常に書き出せるようになった CS5の場合 CS6の場合 11
  12. 12. よく使うショートカットキー スライス挿入 Shift + Option ⌥ + U キャンバスにフィット Option ⌥ + Command ⌘ + f 属性のペースト Shift + Option ⌥ + Command ⌘ + v テキストの固定の幅を カスタムでどうぞ 切り替え * Windowsの場合 : 「Option = Alt」「Command = Ctrl」 12
  13. 13. よく使うショートカットキー スライス作成のショートカットキー。 複数オブジェクトの場合、ダイアログが 出てめんどくさい! } スライス1つ挿入.jsf これらのオリジナルコマンドに ショートカットキーを割り当てて スライス複数挿入.jsf 使えばハッピーに! 後日、配布します! 13
  14. 14. コーディングを スピードアップできる Fireworks の拡張機能 14
  15. 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. 16. スライス画像のスニペットを書き出す Fireworks拡張機能 スライスの情報に応じて、定形コードを 出力できる • スライスの名前(画像のファイル名) • 幅(px) • 高さ(px) • x座標(px) • y座標(px) URL:http://www.kuma-de.com/blog/2012-05-23/3508 16
  17. 17. スライスやオブジェクトをクリックする たびに連番をふるFireworks拡張 クリックした順で、連番で名前をつける ことができる • 定形の文字列 + 任意の連番 • 連番の桁揃え • 任意の数字からの連番 • CSSスプライトに合わせれば便利 URL:http://www.kuma-de.com/program/2009-06-14/799 17
  18. 18. スライスの作成・名前付け、コード出力 など「PI_Slice」 スライス編集ツールの 決定版 • 複数スライスの一括作成 • 複数スライスの 一括画像フォーマットの設定 • 連番ベースでの名前づけ • 独自の値配列による名前づけ • 複数スライスの一括リサイズ • 複数スライス名の一括設定 • 複数スライス名の一括変更 • 複数スライスコードの一括出力 (クリップボードにコピー) URL: http://www.pixelimage.jp/blog/2011/07/pi_slice.html 18
  19. 19. オブジェクトを種類で絞り込んで選択 できる「SelectManager」 オブジェクトをフィルタリングして、 特定の種類のものだけ選択 • テキスト • 長方形ツールや楕円ツールなどの 図形 • パスデータ • ビットマップ • グループ URL:http://www.pixelimage.jp/blog/2008/05/_fireworksselectmanager.html 19
  20. 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. 21. 結論 • やはりFWのスライスはMEの味方! • 特に、CSS3周りが十分に使えるスマホサイト 制作では効果抜群 • マークアップエンジニアにこれらのことを 教えてあげると大変喜びます • FWを広めるには、まず外堀から攻めましょう 21

×