このデザイナさんは、Fireworkラブ!って感じですが、私ではありません。

デザイナーさんにカフェで教えてもらったこと - IDEA*IDEA 〜 百式管理人のライフハックブログ


面白かったので、私もFireworkラブな理由やPhotoshopとの使い分けなどを箇条書きでエントリしてみる。

  • メイン画像の補整は、Photoshop。ウェブページのデザインは、Firework。ロゴなども含めて作らなければならない場合は、illustrator
  • オブジェクトや線は、基本ピクセル単位。ウェブなんで、これがそのままブラウザ上の見た目になり、便利。
  • 「ここにこれくらいの○○を置いて」という風にワイヤを作ると、できあがりのブラウザ上の表示があまりズレがないため、とてもよい。
  • 角丸は、一旦四角形オブジェクトを置いてから、「角丸の半径」で調整していく。
  • 基本的に「前面、同じ位置にペースト」。これがデフォルトなのが、いい。
  • Flashに比べると、カラーパレットが落ち着いている。
  • 四角形ツールなどでつくったオブジェクトは、一旦ダイレクト選択ツールで、ポイントをクリック。「単なる四角い形」に戻しておくと、細かい編集がしやすくなる。
  • フィルタは、それほどいらないけど「ヘベルとエンボス」がボタンっぽくするのに、役に立つ。ただしやりすぎないように。
  • レイヤーの扱いは、illustrator的。伝統的にウェブのデザインというものは、背景画像があったりするのに、最初からまとめられている感じで、こっちの方がやりやすい。
  • 初心者がまず覚えるとしたら、「ベジェに慣れること」「選択ツールとダイレクト選択ツールの使い分け」「グラデーション」
  • グラデーションツールは、いろんなパターンがあって便利だが、いざillustratorに戻ったときに、「あのパターンがない!」って困るので、「線形」と「放射」だけにとどめておく。
  • 「線形」と「放射」のグラデだけでいいイラストがかけるようになっていたら、もう一人前。
  • 「マスクとしてグループ化」を使用すると、なぜか透明化がかかったりするので、「マスクとしてペースト」なども併用しながら。
  • 「整列」は、キーボードショートカットを覚えておくと、もっと便利。
  • オブジェクトを選択中キーボードの「q」をおすと、バウンディングボックスが出てくる。便利。(しかしIMが日本語モードだとダメ。)
  • 「シンボル」は、確かに便利。ウェブだと、たとえば「>」みたいなリンクの横につけるマークをたくさん使用するが、シンボルにしておくことによって、一辺に変更できる。
  • たとえばクライアントに「画像テキスト」と「テキスト」の違いをわかってもらうには、「テキスト」のアンチエイリアスを切っておくといい。
  • 「グラデーションツール」は、色のグラデだけでなく、「透明度」のグラデも扱えると、表現にぐっと幅が出る。
  • 「フレーム」は、もともとGIFアニメのためにあったものだが、「今は使わないけど、後で使うかも」といったオブジェクトや画像を保管しておくに使える。
  • (反論)メイリオはきれいだが、デフォルトで1文字の横幅が110%程ある。メイリオが入ってないマシンの人から、「なんか見た目が違う」と試験「×」にされることもあることを考慮に入れて。


と、まあ、Fireworkの使い方、というよりは、ウェブ制作のコツっぽいエントリになってしまったが。


Fireworkラブなデザイナは、少なくなってきたなー。