Fireworksの最近のブログ記事

fireworksを使いこなせ！

皆さんウエブでグラフィックを作成するときは、どんなアプリケーションを使っていますか？結局のところ使いやすいのが一番なのですが、僕はウエブデザインに特化したfireworksを使っています。webの知識も含めていろいろ覚えてきたので、少しまとめてみました。

[A]グラフィック作成

■フレームを使いこなせ！
フレームとは１コマの事。例えば、トップページとサブページを作成する際に使う。ロールオーバーのイメージを作成する際にも使う。

■うまく整列されろ！
fireworksの整列機能は好きだ。サイズさえもあわせてしまう。
これははっきりいって使うっきゃない。キャンバスに整列とかも便利である。

■ヘッダー・フッターを共通化！
共通化をするには、レイヤーパレットで共通化するオブジェクトをフォルダでまとめ、そのフォルダをダブルクリック、このレイヤーを共有化するにチェックを入れる。

■重くなってきたら統合だ！
イラストレーターから入ってきた人はとっつきやすい機能だ。fireworksは元はマクロメディアのアプリケーション。パスの関係は非常に弱い。ということでパスが増えてくると以上に重くなるので、そんな時は統合したいオブジェクトを選択し、[修正]→選択範囲の統合。
ただ、ビットマップにしてしまうので、小さくはできても大きくはできなくなるので、元データを残しておくなど注意は必要。

■スタイルを使いこなせ！
なぜillustratorなりfireworksなり初期のライブラリはこんなに使えないのだろうか？まあとにかく、このスタイルは結構便利だ。スタイルの作成はいたって簡単。オブジェクトを選択して、スタイルパレットで+を押すだけ。コツとしては、透明や角丸、ちょっとしたシャドウなどを登録しておくこと。それだけで、汎用性があり使いやすいものになる。

■アプリを連携しろ！
fireworksは作りこみをするアプリケーションというより、連携するアプリという感覚の方が言い方は正しいかもしれない。僕がよく使う方法としては、

1.illustratorからパスをコピー
これはコピペでできたりする。ただ、一部上位バージョンではコピーの形式を選べるためビットマップでコピーされるときがある。そんなときは、環境設定でクリップボード関係の形式をあわせてあげるとうまくいく事が多い。

2.photoshopからレイヤーも含めてコピーしろ！
これはpsdファイルをfireworksで開けばすむ話だけど、もっと早いのは、finder(explorer)からpsdファイルをfireworksのアートボードにドラッグ。一瞬でできてしまう。

3.flashと何とか連携しろ！
Dreamweaverにしろflashにしろさすが同じ会社のアプリケーション。結構考えられている。

flashで編集のライブラリ（ビットマップ）を何とかする場合は編集したいオブジェクトを選択して、編集fireworksを押す。慣れたらとっつきやすい。

4.うまく書き出せ！
fireworksは結構いろんな形式に対応しているところが便利だ。
ちなみに普通に保存されるのはpng24という形式。細かいアルファが聞いたり、文字情報なども保存される形式だ。そのほかにもさまざまな書き出し方法があるので慣れていたら結構使える。
psd
ai
swf
の基本的なものの他に
フレームをファイルに変換
レイヤーをファイルに変換
なんかは使い方によっては結構使える。

例えば動きのラフを見せるとき、
aiでもとのラフを書いていて一気に書き出したいとき。

もっとあるのだろうけど、結局そんなのアプリケーションの効率なだけで、考え方や仕事の進め方の効率を疑ったほうが仕事は速く進むんだけどね・・・・。

何かいろいろとpngのデザインの時によく使うものをまとめてみた。まだまだ中途半端な段階だけど、ま、時間が空いた時にまたまとめてしようかなと思ってます。ちなみにfamfamfamというサイトのアイコンはかなりやばめ！かわいすぎます。

まとめたpng
http://www.show-hey.com/download/pngitems_061028.zip

famfamfam.com
http://www.famfamfam.com/

便利なのだろうと体験版を触ってみたが、意外や意外気になるところはそうでもなかった。CSSでのナビゲーションやらが一括でできるかと思えばそうでもないし、それは確認したところMXでも同じような感じだし、ただ、改めて見ることで、MXでも十分に使えることが判明した。

■ 書き出し

書き出しについては、書き出す際のオプションで今まで行っていた作業が下手すりゃ半減するんちゃうってくらい簡単な作業があったりした。まずテーブルについて

あくまでもテーブルはテーブルだが、spacer.gifは基本的には入れないので、その際は、ネストテーブルの作成という形で書き出せば問題がない。

次にcssでの作業だが、MXも共通。若干作業が異なってくる。

各エリアの定義・基本構造の定義
これが一番楽かもしれない。結局手打ちの方が楽なのかもしれないが、idを間違いなく振ってくれるあたりは便利かもしれない。このdivたちをliに直したり、あるいはoverflow設定をかけたり、あるいは一部書き換えたりしなければならないが確実にオールcssの作業には効率的な気がする。

※もうある程度の所まで行ったらアプリケーションのよさは変わらないね。photoshopにしてもbit処理意外はほとんど6くらいで完結してるし、イラレにいたっては9で僕の場合は十分だし、

グラフィック系のソフトはそうなんだろうなと思う。

ただ、エディタ・プレビュー系のソフトは新しい方が確実にいいのだろう。DW8とかね。

まあ、頑張ってみる。

fireworksって、photoshopとillustratorを足して割ったような感じのソフトとよく言われますが、そういう意味で、例えば、illustratorで使い慣れている機能をfirewoksでも使うっていうのは可能だったりするみたいですね。

それで、いろいろ見てて発見したのがヒストリ。fireworksにもヒストリってあったんですね。これを使う事でillustratorやphotoshopでいうアクションが作れるみたいです。ちなみにfireworksでのアクションはコマンドと呼ぶそうで、新しい8にはswfでアルバムを作る機能なんかが機能拡張としてあるみたいです。

なんともなんともです。しかも、これもよく考えたら当たり前の話で、psdで作成したものをfireworksに読み込むこともできるし、その逆も可能だったりする。いやはやこれが、分かると、ピクセル数さえ分かって、レイヤーさえ分けておけば、いいんだとちょっと感心してしまう。

やっぱりfireworksって凄いソフトです。

cssできっちり作るにしても、結局webをする時にこのfireworksってのは、必需だ。

fireworksでスライスをきれいに隙間なく何個も切って書き出すと結局うまく切らないと、tr,td,の連続になってしまって、w3c的にはよろしくないのかもしれないが、やっぱり便利なソフトだなとつくづく思う。

で、ご存知の方も多いと思いますが、そのスライスは単純に画像を切るだけでなく、htmlも書けるんですね。さっき、初めて知りました。これをつかったら、簡単なサイトならhtmlに書き出して、DWでちょこっといじって終わりってな感じになるんですね。

で、ちょっと試しに書き出してみると

タグが入ってしまうみたいですね。ま、気にしなければ、関係ないんですけど・・・。