Enviar búsqueda
Cargar
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
•
43 recomendaciones
•
7,200 vistas
Naoki Matsuda
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 21
Descargar ahora
Descargar para leer sin conexión
Recomendados
Sass 超入門
Sass 超入門
Michinari Odajima
Sass/Compass講習会
Sass/Compass講習会
Beeworks
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
First sass
First sass
Toshiaki Sasaki
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
switch3000
write once, publish anywhere ……という夢を見た。
write once, publish anywhere ……という夢を見た。
Kenshi Muto
Recomendados
Sass 超入門
Sass 超入門
Michinari Odajima
Sass/Compass講習会
Sass/Compass講習会
Beeworks
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
First sass
First sass
Toshiaki Sasaki
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
switch3000
write once, publish anywhere ……という夢を見た。
write once, publish anywhere ……という夢を見た。
Kenshi Muto
画像Hacks
画像Hacks
Yusuke Wada
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
Chihiro Tomita
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Mihai Corlan
解析データの分析と活用
解析データの分析と活用
Keisuke Anzai
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
takashi ono
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
Shigeru Kishikawa
The Craft of UX
The Craft of UX
Leanna Gingras
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
Asociatia Techsoup Romania
Simple Pure Java
Simple Pure Java
Anton Keks
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
Noriyo Asano
言語の世界
言語の世界
yukihiro_matz
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
Yasuhisa Hasegawa
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
Ryan Stewart
6 Key Elements to a Good Website
6 Key Elements to a Good Website
Webs
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
Digital Intelligence Inc.
JavaFX
JavaFX
Michael Heinrichs
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
hmimura_embarcadero
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
Más contenido relacionado
Destacado
画像Hacks
画像Hacks
Yusuke Wada
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
Chihiro Tomita
Debugging mobile websites and web apps
Debugging mobile websites and web apps
Mihai Corlan
解析データの分析と活用
解析データの分析と活用
Keisuke Anzai
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Yasuhisa Hasegawa
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
takashi ono
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
Shigeru Kishikawa
The Craft of UX
The Craft of UX
Leanna Gingras
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
Asociatia Techsoup Romania
Simple Pure Java
Simple Pure Java
Anton Keks
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
Yoshihiro Ura
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
Noriyo Asano
言語の世界
言語の世界
yukihiro_matz
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
Yasuhisa Hasegawa
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
Ryan Stewart
6 Key Elements to a Good Website
6 Key Elements to a Good Website
Webs
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
Digital Intelligence Inc.
JavaFX
JavaFX
Michael Heinrichs
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
hmimura_embarcadero
Destacado
(20)
画像Hacks
画像Hacks
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
Debugging mobile websites and web apps
Debugging mobile websites and web apps
解析データの分析と活用
解析データの分析と活用
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
The Craft of UX
The Craft of UX
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
Simple Pure Java
Simple Pure Java
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
『デザイニング・インターフェース』読書会資料
『デザイニング・インターフェース』読書会資料
言語の世界
言語の世界
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
6 Key Elements to a Good Website
6 Key Elements to a Good Website
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
JavaFX
JavaFX
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
Similar a マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
CSS3の最新事情
CSS3の最新事情
Makoto Kato
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
Css
Css
SD Labo
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
Akira Maruyama
Software Development with Symfony
Software Development with Symfony
Atsuhiro Kubo
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
Jubatusでマルウェア分類
Jubatusでマルウェア分類
Shuzo Kashihara
フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari
What's Sketch.app
What's Sketch.app
littlebustersreply
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
増田 亨
LESSについて
LESSについて
okaSlide80
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Cocos2dを使ったi phoneゲーム開発手法
Cocos2dを使ったi phoneゲーム開発手法
Nishida Kansuke
10分で分かるr言語入門ver2.14 15 0905
10分で分かるr言語入門ver2.14 15 0905
Nobuaki Oshiro
10分で分かるr言語入門ver2.15 15 1010
10分で分かるr言語入門ver2.15 15 1010
Nobuaki Oshiro
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Tomoharu ASAMI
Similar a マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
(20)
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
マークアップ講座 02 CSS
マークアップ講座 02 CSS
CSS3の最新事情
CSS3の最新事情
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Css
Css
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
Software Development with Symfony
Software Development with Symfony
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Jubatusでマルウェア分類
Jubatusでマルウェア分類
フロント作業の効率化
フロント作業の効率化
What's Sketch.app
What's Sketch.app
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
LESSについて
LESSについて
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Cocos2dを使ったi phoneゲーム開発手法
Cocos2dを使ったi phoneゲーム開発手法
10分で分かるr言語入門ver2.14 15 0905
10分で分かるr言語入門ver2.14 15 0905
10分で分かるr言語入門ver2.15 15 1010
10分で分かるr言語入門ver2.15 15 1010
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Más de Naoki Matsuda
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
Naoki Matsuda
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
Naoki Matsuda
WordPress関数の処理コストを考えよう
WordPress関数の処理コストを考えよう
Naoki Matsuda
Más de Naoki Matsuda
(7)
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
WordPress関数の処理コストを考えよう
WordPress関数の処理コストを考えよう
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
1.
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ 株式会社まぼろし 松田直樹
1
2.
自己紹介 • まぼろしの松田と申します • デザイン、マークアップ、JSer、
ライティングなど • 主な著書 『効率的なサイト制作のためのDreamweaverの教科書 【CS5.5対応版】』(鷹野さんとの共著、マイナビ) 2
3.
マークアップエンジニアとは? HTML/XHTMLのマークアップ,
CSSの設計・コーディング、 情報および文書構造の設計を 行なうエンジニア。 ≒ HTML+CSSの専門家 3
4.
マークアップエンジニア(以下、ME)は
Fireworksがお好き? やっぱり 全体的に スライス機能 使いやすい がいい!! から!! まぼろしの まぼろしの マークアップエンジニア フロントエンドエンジニア 小林 西畑 4
5.
というとこで、 Fireworksでのデザインカンプは
大変よろこばれます。 (たぶん) 5
6.
Fireworks CS6 の コーディングに役立つ新機能
6
7.
CSSプロパティパネル * CS5.x の拡張機能は、現在使用出来なくなっています!ご注意を。
7
8.
CSSプロパティパネル 過信は禁物 •
塗りにアルファを使っていなくても、「background-color」が RGB値で指定される • 「パターン塗り」や「テクスチャ」「ブラシ」は再現できない • 「境界線のカラー」と「Photoshopライブエフェクト - ストローク」は共存できない • 複雑な破線でも、「border-style: dashed;」になる • などなど 8
9.
カラーコードのコピー
16進数 #FFCC00 RGBa値 rgba(255,191,0,0.5) 9
10.
CSSスプライトを書き出し
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.
コーディングを スピードアップできる Fireworks の拡張機能
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
Descargar ahora