Takazudo hamalog

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + /

cool guy

CSS Nite LP14 Fireworks特集 メモ

2011/03/05 permalink

Fireworksのアレ

  • フォントのサイズとか何パターンかスタイルとして定義しておく
  • カンプのステートとは別に本デザインのステートを作り、切り替えながら作業する
  • 使う色を■で作って端に置いておき、それを1個ずつスタイルでも用意しておく。塗りや線の色を選ぶときも、スポイトツールでそのスタイルをクリックすれば色が適用される
  • Fwで用意されているパターンは癖が強い感じのものが多いけど、フィルタで色相彩度変更すれば結構応用可能
  • なんかオブジェクト作り、整列パネル→間隔→12pxとか選べば、12px間隔で並んでくれるので便利
  • 選択範囲をパスに変換機能
  • パス書いてから、パス→ストロークを塗りに変換 ってやればそのあと細かく編集できる
  • パス書いてから、プロパティパネルでストロークを編集とかやると点線とか超細かく作れる
  • 星ツールのパスいじるとキモイ形が色々できる
  • グレースケールで作ったボタンをスタイルセットとして登録しておき、使う時にそれ適用して色変えるとかやると便利
  • Fireworks mania
  • Photoshopライブエフェクト
  • Fwでgif書きだすとPsより軽くなる。けどちょっと荒い
  • 右クリックシンボルに変換してから共有ライブラリに登録するとどこでも使える
  • ページ機能: マスターページを設定すると全ページにそこに置いたものが敷かれる
  • レイヤーから共有したいの選んで右クリック→「レイヤーを複数ページで共有」ってやるとサイドナビとかを幾つかのページで共通化できる
  • 髪の毛みたいな細かい切り抜き・浮かんでる雲:Fwだと厳しい、Psのアルファチャンネルでやりやすい
  • 連続したパターン:Psのほうがグラデーションマスク・トーンカーブ・色相・彩度が細かく補正できる
  • Fw:角丸、パスツール、長方形ツール、テクスチャ張りとか超楽。たぶんオブジェクトとして管理できるからっぽい。
  • PNGGauntlet
  • Fwのレイヤー付きのpngデータをそのまま使い、パブリッシュ時にはPNGGauntletで最適化するだけワークフロー
  • pngファイル紛らわしいので、海外では hogehoge.fw.png って名前付ける慣習もあるらしい。
  • PNGGauntlet前にsvnやgitでcommitしてtag付けておけばバージョン管理もできる
  • ブラウザのCMS(カラーマネジメントシステム)が機能すると、ファイルに設定されてる色設定を読み込んでくれる。ブラウザによってこれを実装しているか否かはまだまちまち。
  • Adobe RGBが解釈できるブラウザ:Safari, Firefox, IE9
  • カメラ:AdobeRGBかsRGB、Windows:sRGB、Mac:システムで調節できる、モニタ・プリンタ:機種ごとに違う
  • プロファイルが埋め込めるのはJPGファイル(あとはPSDとかTIFFとか)
  • カラーマネジメントがあれば、異なる色空間を相互に変換してくれる
  • ブラウザのCMSもまちまちだし、一番使われてるのはsRGBなのでsRGBに合わせよう
  • Windows用のキャリブレーションソフト Calibrize
  • FwCS4からプロファイルを読み込んで自動的にsRGBに変換してくれる。でも書きだすときにプロファイルはくっつけてくれない。Fwの作業空間はsRGB。ただしJPGに埋められたプロファイルは無視する。
  • Ps:編集→プロファイル変換 するとプロファイルを変換してくれる
  • すげー拡張機能たち
  • 960.gs : グリッド制御
  • Guide Panel : ガイド制御
  • Placeholder : アタリ画像
  • Table Panel : 表作れる
  • gradient panel : グラデーション細かく設定
  • gradient direction editor : グラデーション方向制御
  • Transform Panel : 変形自由に
  • Object Panel : オブジェクトの中身を見れる
  • Orange Commands : ショートカットにない機能をショートカットに
  • Fill With Background : content aware fill みたいなやつ
  • Keyboard Resize : 文字をリサイズしてもコンテナだけをリサイズ
  • Level Horizon : パスに合わせて写真の傾斜を変更
  • Smart Knife / Smart punch : オブジェクトのパスによる分割
  • Linked Images : Psのアレ
  • CSS Sprite Maker : CSS sprite作れる
  • Favicon : favicon.ico作る
  • Export selection : 選んだのだけ書き出し
  • おまけ
  • Fireworks AutoBackup utility : 自動バックアップ
  • ForeverSave Lite : 勝手に自動保存してくれる。Macのみ
  • カスタムブラシいけてるサイト http://qbrushes.net http://myphotoshopbrushes.com
  • abr→PNGに変換するやつ ABRviewer, abrMate, BrushPilot
  • オブジェクト選んで右クリックからスライス作れる
  • クリッピングマスクみたいなやつ(マスクとしてペースト)
  • 2つ選んで、変更→マスク→マスクとしてグループ化
  • 明度を使ってマスクっぽくもできる
  • 複数のオブジェクトをスライスするときは、まとまりをグループ化しておかないとダメ
  • 例えばスライスするやつ・スライスしないやつ・背景画像・デバイスフォントというレイヤー分けとか言うやり方でやってる。そうすりゃえらんでスライスするだっけ。
  • ガイド間の距離はshift押せば計れる
  • ものさしツールで距離こんだけみたいなオブジェクトを作れる
  • ものさしツール用のレイヤーを用意してやるといい感じ

blog comments powered by Disqus

  1. cabbagekobehamalogからリブログしました
  2. komapoohhamalogからリブログしました
  3. cocoaprojecthamalogからリブログしました
  4. hamalogの投稿です