Fireworks | CREATE RECORD|blog

カテゴリーアーカイブ: Fireworks

Firewoksの代わりについて

Fireworksの開発が修了だそうです。これは大変な事だ!
Fireworksは僕や僕の会社にとってメインのオーサリングツールだからだ。
このブログの記事もFireworks関連のものも多いと思う。

まぁ明日からFireworksがいきなり無くなるわけではないから
悲観せずにじっくり今後の事を考えよう。

僕の中で選択肢は4つある。

1.Photoshopをつかう
2.Illustratorをつかう
3.AdobeがFireworksの代わりに推奨しているアプリをつかう
4.Fireworksを使い続ける

この4つだ。

僕はMac使いなのでFireworksを使い続ける事4番にはやや抵抗がある。
MacはOSのアップデートのスパンが速いので新OSで動かなくなるのでは?
と言う懸念がある。

互換等現実な事を考えると3番と言う選択肢はないと思う。
下請けの仕事もあるので納品データとしてはNGがでそうだ。

となると1番か2番が現実的な選択肢になる。
僕は今完全分業のワークスタイルでデザインしているので、
ぶっちゃけIllustratorであろうがPhotoshopであろうがそんなにおおきな問題はない。
むしろデザインのクオリティー自体はそのどちらかのアプリを使った方が
高くなるのでこれを機に乗り換えるのも全然悪くはないが、会社として生産性を考えた場合は別だ

IllustratorもPhotoshopもスライスの取り回しがFireworksにくらべると
極悪といっても差し支えないぐらい不便だからだ。

クオリティーも上がるが工数も上がる
と言う事は生産性が落ちると言う事だ。
生産性=利益
なので僕らの技術力があがる+デフォルトではできない何か
を考えていかなければならないだろう。

ググると色んな記事が出てくるが実際に自分で試してみない事には何とも言えない。
まずPhotoshopからやってみようと思う。

と言うわけで次回に続く。

追記
今後もOSサポートなどは引き続き提供されるそうなので、4番という選択になりました!
なので多分次回に続かないです!

Fireworksテクスチャー

デザインの幅を広げるのにテクスチャは欠かせません。「Fireworks テクスチャ」でググると色々と配布されています。探しているものが無い場合でもわりとオリジナルのテクスチャーも手軽に作れるのがいいところです。
僕の作ったテクスチャも配布しますのでよかったら使って下さい。商用利用もOKです。
各見出しは各テクスチャーを使った例です。

テクスチャのダウンロードはこちら

Fireworksのマスクのやり方(基本編)

Fireworksでマスクをするには白いオブジェクトをマスクをするオブジェクトの上に重ね2つのオブジェクトを選択し
変更>マスク>マスクとしてグループ化でマスクする方法とオブジェクト(白くなくてもOK)をコピーしマスクをするオブジェクトに
変更>マスク>マスクとしてペーストする2通りの方法があります。
どちらも便利な機能なのでショートカットに登録をする事をおすすめします。
僕はマスクとしてグループ化をcommand(ctrl)+/
マスクとしてペーストをcommand(ctrl)+option(alt)+v(初期せっていかも?)
で設定しています。このショートカットを設定しているのと、いないのとでは、かなり工数に差がでますので皆さんも是非設定して下さい!

茶色の枠に写真を納めたいけどはみ出してしまう・・・・

茶色の枠と同じ大きさの白い矩形を作りマスクする写真と矩形を選択しマスクとしてグループ化

上の画像のように3枚の画像を同じマスク範囲でマスクする場合は作成した矩形を切り取り写真を選択し、マスクとしてペーストを行うと早いです。3枚の写真をグループ化してからマスクしてもOKなのですが、一枚一枚微調整をする時にグループ解除しなければならないので、僕は1枚ずつマスクします。

写真にドロップシャドウやグロー、枠線等のエフェクトをかけてマスクすると上の画像みたいにシャドー部分や枠線がうまくマスク出来ていません。
そんな時はエフェクトをかけた画像をF8キーでシンボル化してからマスクして下さい。

奇麗にマスクできました。

ちなみに今回使った写真もペイレスイメージズで入手できます。

Fireworksで画像を扱う時の注意点。

上の2枚の写真を見て下さい。
可愛いですね〜
でも、見比べて見ると左の写真のほうがくすんで見えないですか?

いままでFireworksのいいところばっかり紹介してきましたが、
FireworksはsRGBのカラーモードなのでAdobeRGBのカラーモードの写真を
そのまま開くと左の写真のようにくすんでしまうのです。
Fireworksを使っていて不便だなぁ〜と思うところです。
Fireworks使いだした当初はカラーモードの事なんかわからなかったので
トーンカーブなんかでちょい赤みが出るようにとか調整していました。

右の写真はPhotoshopで一旦書き出したものです。
書き出す時はsRGBに変換にチェックを入れます。

鮮やかさが全然違いますね!

Fireworksで画像を開いて色が何かおかしい!と思った時は
Photoshopで書き出してみるといいとおもいます!

つか、Fireworksでカラーモード対応してほしいっす!

僕は大量に画像を変換する場合はPhotoshopのアクションをアプリケーション化する
ドロップレットを使って自動化でやります。
作業中だと重くなるので、昼休みとか休憩してる合間にやっちゃいます。

嘘つきました。コーダーさんにドロップレットでやってもらってます。

ちなみに今回使った写真はペイレスイメージズで入手できます。

Fireworksのこれは覚えておいたほうがいいぞってデフォルトのショートカットキー

Fireworksはオリジナルでショートカットキーを設定できますが、デフォルトのショートカットキーもなかなか便利なものがそろっています。
なかでも整列はかなり便利!
中央整列とか
垂直command(ctrl)+option(alt)+2
水平command(ctrl)+option(alt)+5で一瞬でできます。
この整列系のショートカットはテンキーで覚えると覚えやすいと思われます。

垂直
command(ctrl)+option(alt)+(1,2,3)でそれぞれ左、中央、右

水平
command(ctrl)+option(alt)+(4,5,6)でそれぞれ上、中央、下

垂直に均等に揃える
command(ctrl)+option(alt)+7

水平に均等に揃える
command(ctrl)+option(alt)+9

便利っす!
僕は整列したときは例のエッジがダルくなる現象対策でcommand+kをセットで癖づけています。

後はフォント関係ですね〜
詰めはcommand(ctrl)+矢印キーの左右+shiftで移動の単位が大きくなります。
行間はcommand(ctrl)+矢印キーの上下+shiftで移動の単位が大きくなります。

フォントサイズ
command+shift+>大きくcommand+shift+<小さく
ハイライトした部分だけでも全体でも出来ます。
大小の強弱をつけた場合オブジェクトとして選択すると比率をたもったまま大きさを変更できるので
結構便利です。

他にもいろいろあります。僕はツールも基本ショートカットで切り替えます。
その時に「かな」になっているとショートカットが使えません。
でもFireworksがオンの場合テキストを編集出来る状態に無いと英数キーが効きませんので
shift+英数キーで英数にするようにしています。
shift+英数キーの場合はテキストが編集出来る状態になくても英数にかわります。

オブジェクトを選択してoption(alt)+shift+uでオブジェクトのサイズでスライスがあてれます。
よく使うのはこんなところかなぁ〜

command(ctrl)+shift+9で時計回り
command(ctrl)+shift+7で反時計回りにオブジェクトを回転させる事ができます。
回転もよく使います!