CSS Nite in Omotesando, Vol.1が終了しました

2010年6月8日、表参道 The Gallery「station 5」 でCSS Nite in Omotesando, Vol.1を開催し、70名弱の方にご参加いただきました。

「Fireworksビギナーのための120分徹底トレーニング」と題して、鷹野 雅弘（スイッチ）が、Fireworksの基本操作からTips、CS5での強化点についてお話ししました。

たくさんのtweetをいただきました。ありがとうございます。

• Togetter - まとめ「CSS Nite in Omotesando, Vol.1「Fireworksビギナーのための120分徹底トレーニング」」

次のブログで取り上げていただきました。ありがとうございます。

• ワイヤーフレームはFireworksがベストか。意外とInDesignが次点か。 | 戦意
• Fireworksでfaviconを作成[to-R]
• Weblog of operation α: 【セミナー】css nite in omotesando vol.1
• CSS Nite in Omotesando - Kyo'sDiary

補足

• FXGはFlash XML Graphics formatの略です（Flex...といっていましたが誤りです。お詫びと訂正まで）。
• Favicon書き出しの拡張機能は、CS5からMac版にも対応。Favicon - Adobe Fireworks Extensions - johndunning.com
• 数値を入力して変形は、オブジェクト単位で実行できるのがキモです。Photoshopの［イメージ］→［画像解像度］は、カンバス内のすべてがオブジェクトが対象となってしまいます。デモの流れ上、画像1枚で行ったので混同されてしまったと思います。
• アルファ透過はPNG-8でも対応できます。ただし、アルファは1bit（2値）。PNG-32だと、8bit（256段階）のアルファが使えます。
• Fireworksの［ファイル］→［画像プレビュー］（command+shift+Xキー）は、Photoshopの［ファイル］→［Webおよびデバイス用に保存］にあたります。
• リサイズ後、シャープネスの調整を行い、書き出し、という流れでしたが、画像によっては、当然、色調補正（トーンカーブ、レベル補正）を行います。これも、［プロパティ］パネルの［フィルター］から行います。
• 過去のMac版のFireworksでは、［表示］→［Windowsガンマ］がありましたが、Mac OS X 10.6（Snow Leopard）以降、MacのガンマがWindowsと同様の2.2に変更されたため、［表示］→［ガンマ1.8］になっています。つまり、10.5以前のMac用に補正する必要があるときのみ使います。
• Fireworks CS5では［環境設定］の［一般］カテゴリに［.pngファイルを関連付け］というボタンがあります。これをクリックすると、すべてのPNGファイルがFireworksで開くようになります。
• 書き出しファイルにPNG形式を利用するときは、レイヤーやテキストなどの情報を持ったFireworks PNG（オリジナルファイル）を、書き出しPNGで上書き保存しないように注意してください。サイト内に「fwpng」のようなフォルダーを作り、書き出し用のものと別に管理するのがオススメです（Dreamweaverでは拡張子でなく、フォルダー単位でクローク設定）。
• Fireworksの印刷機能に不満の場合には、PDF書き出ししてAcrobatで印刷するとよいかもしれません。
• ボタンシンボルを使うと、自動的にスライスが作成されます。ドロップシャドウのボケ足を伸ばすと、スライスの大きさも自動調整されます。
• ボタンシンボルは9スライスと合わせて使うと最強なのですが、文字のベースラインの問題で、大きさのバランスによって使いにくいこともあります。
• ビヘイビアで書き出されるMM謹製JavaScriptを使うことは、ほぼありませんが、単純にFireworks内でインタラクションの確認を行うためにビヘイビアを使います。
• CSS Spriteを使うときには、RsStudio Style - CSSSprite Extensionの紹介とドキュメントを利用されるとよいでしょう。
• ［ものさしツール］はFireworks CS4からです。
• Fireworksの「外観を保持」に相当する機能はPhotoshopにもありました。大変失礼しました。
• Fireworksのマスクはあくまでも簡易的に使うときに便利ですよね、という程度。特に、Photoshop CS5の［境界線を調整］の［エッジの検出］は、髪の毛などを抜くのに最強。全部、Fireworksでというわけでなく、使い分けるとよいと思います。

※ピクセルにスナップしなくても、オブジェクトを選択し、プロパティの幅か高さにカーソルあわせてエンターするだけで良い。これはFireworks4くらいから出来る技。kuracom

参照リンク：

• バージョン別機能比較表 | Adobe Fireworks CS5
• Favicon - Adobe Fireworks Extensions - johndunning.com
• シンボルを使用して作業効率を高めよう | デベロッパーセンター
• 自作Fireworks コマンド
• Webデザインベーシックトレーニング講座について｜JaGraプロフェッショナルDTP&Webスクール（アドビ認定トレーニングセンター）
• Photoshop で背景透過の美しい favicon (ファビコン) を作成する

単純な形状で試してみたのですが、FWのステート、FXGでFCに反映された。keiso

USTREAMは録画されています。