SlideShare a Scribd company logo
1 of 13
Download to read offline
FFiirreewwoorrkkss	 	 LLoovveerr	 	 AAddvveenntt	 	 CCaalleennddaarr	 	 22001133

FFiirreewwoorrkkss	 	 ddee



GGeenneerraattoorr

DDeecceemmbbeerr	 	 11sstt

AAkkiirraa	 	 MMaarruuyyaammaa
AAddoobbee	 	 GGeenneerraattoorrって何?
Photoshopのことなのでざっくりと…

• Photoshop CCの新しい機能(要アップデート)
• スライスなしで画像が書き出せる
• 書き出しはレイヤーあるいはレイヤー単位で
• 見た目オブジェクト同士が重なっててもOK
• 書き出しフォーマットや書き出しサイズも柔軟に指
定できる
• 書き出しフォーマットやサイズはレイヤー名に記述
する
はっきり言って



とっても便利です!
FFiirreewwoorrkkssには…
もちろんあ�りません…
しかし
拡張機能で近いことが



できるんです!
GGeerreerraattoorrもどきですが…
Generate Web Assets
http://johndunning.com/fireworks/about/
GenerateWebAssets

個人的にはかなりつかえます!




しかもGGeenneerraattoorrより前にリリースされているんです。
できること	 	 その11
レイヤーorレイヤーフォルダー単位での書き出し

書き出されるレイヤーは

拡張子のついたレイヤー名のみ
できること	 	 その22
書き出しフォーマットは限定される

32bit png

Jpeg-高画質 80% Gif アダプティブ256色

アルファチャンネル透過
できること	 	 その33
書き出し先は記憶される

一度書き出したディレクトリーは記憶される
変更したい場合は「Generate Web Assets Change Export Location」を選択
残念ながら…
サイズの変更はできません…
メニューの説明
コマンド  Export
Generate Web Assets

→ すべて書き出し
Generate Web Assets - Change Export Location

→ 保存先を変更してすべて書き出し
Generate Web Assets From Selection

→ 選択オブジェクトだけ書き出し
まとめ
• Photoshop CCのGeneratorは便利
Fireworks にあるべき機能だがない orz
•
• Gererate Web Assetsで擬似的に実現可能
書き出しフォーマットは限定的
•
• でも割と使える(個人的感想)
Fireworksの情報も発信してます
• The Fireworks Daily News

http://paper.li/akira_maru/1297491883

ハッシュタグ #adobefireworks をチェック!

•

Fireworks Lover J

https://www.facebook.com/FireworksLoverJ

@akira_maru

MaruyamaAkira

More Related Content

What's hot

自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」についてSeiko Kuchida
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバke-m kamekoopa
 
Prop Matrix
Prop MatrixProp Matrix
Prop Matrixzio3
 
Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Seiko Kuchida
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -Toshio Ehara
 
Vi(vim)とお友達になる
Vi(vim)とお友達になるVi(vim)とお友達になる
Vi(vim)とお友達になるy-n
 
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告Joe_noh
 
ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会cw-ozaki
 
レガシーシステムのDBマイグレーションし始めた話
レガシーシステムのDBマイグレーションし始めた話レガシーシステムのDBマイグレーションし始めた話
レガシーシステムのDBマイグレーションし始めた話nekogeruge_987
 
プレゼンテーションをGameDraw
プレゼンテーションをGameDrawプレゼンテーションをGameDraw
プレゼンテーションをGameDrawMohammad Khair Obaidat
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームTakumi Ohashi
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
webアプリケーションフレームワークの話
webアプリケーションフレームワークの話webアプリケーションフレームワークの話
webアプリケーションフレームワークの話Yoshihiro Ura
 

What's hot (15)

自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバ
 
Prop Matrix
Prop MatrixProp Matrix
Prop Matrix
 
Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
Vi(vim)とお友達になる
Vi(vim)とお友達になるVi(vim)とお友達になる
Vi(vim)とお友達になる
 
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
 
JS/Canvas Tutorial2
JS/Canvas Tutorial2JS/Canvas Tutorial2
JS/Canvas Tutorial2
 
ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会ChatWorkではじめるChrome Extensionもぐもぐ会
ChatWorkではじめるChrome Extensionもぐもぐ会
 
Sinatra
SinatraSinatra
Sinatra
 
レガシーシステムのDBマイグレーションし始めた話
レガシーシステムのDBマイグレーションし始めた話レガシーシステムのDBマイグレーションし始めた話
レガシーシステムのDBマイグレーションし始めた話
 
プレゼンテーションをGameDraw
プレゼンテーションをGameDrawプレゼンテーションをGameDraw
プレゼンテーションをGameDraw
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
webアプリケーションフレームワークの話
webアプリケーションフレームワークの話webアプリケーションフレームワークの話
webアプリケーションフレームワークの話
 

More from Akira Maruyama

設定のカスタマイズで
まだまだ使える
Dreamweaver
設定のカスタマイズで
まだまだ使える
Dreamweaver設定のカスタマイズで
まだまだ使える
Dreamweaver
設定のカスタマイズで
まだまだ使える
DreamweaverAkira Maruyama
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToAkira Maruyama
 
Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察Akira Maruyama
 
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみたFireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみたAkira Maruyama
 
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集Akira Maruyama
 
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレートコードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレートAkira Maruyama
 
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αパワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αAkira Maruyama
 
Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.Akira Maruyama
 
Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!Akira Maruyama
 
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築するHTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築するAkira Maruyama
 
DW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンスDW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンスAkira Maruyama
 

More from Akira Maruyama (11)

設定のカスタマイズで
まだまだ使える
Dreamweaver
設定のカスタマイズで
まだまだ使える
Dreamweaver設定のカスタマイズで
まだまだ使える
Dreamweaver
設定のカスタマイズで
まだまだ使える
Dreamweaver
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
 
Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察Fireworksで作成したデータのリサイクル考察
Fireworksで作成したデータのリサイクル考察
 
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみたFireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみた
 
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
 
コードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレートコードビュー中心で開発するDreamweaverテンプレート
コードビュー中心で開発するDreamweaverテンプレート
 
パワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+αパワーユーザー必携の海外の拡張機能20選+α
パワーユーザー必携の海外の拡張機能20選+α
 
Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.Dreamweaver de HTML5 CS5 Ver.
Dreamweaver de HTML5 CS5 Ver.
 
Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!Fireworksの潜在能力を拡張機能で引き出そう!
Fireworksの潜在能力を拡張機能で引き出そう!
 
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築するHTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築する
 
DW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンスDW テンプレートをマスターして 楽々サイトメンテナンス
DW テンプレートをマスターして 楽々サイトメンテナンス
 

Fireworks Lover Advent calender 2013 1日目 Fireworks de Genetator