REDLINE MAGAZINE | Fireworks ちょいネタ集

Fireworks ちょいネタ集

※このエントリはFireworks CS4を元に書いています。
バージョン違いの場合は内容が異なるかもしれません。

大好きなFireworksの「地味だけどコレ知ってると効率いいよ！」という小ネタ集です。このネタが有名な話なのかそうでないのか分からないのですが、私自身最初知らなかったけど、気付いてからは効率上がったぜという話なので、もし知らないユーザーさんがいたら是非活用して欲しいなーと思って書いてます。

整列パネル　間隔に数値を入れて等間隔にする

CS4ではスマートガイドがあるので、動かしたいオブジェクトを任意の位置へパパっと正確に移動させることができます。任意のオブジェクトを別のオブジェクトの上下左右のどこかに揃えたいなんて場合はそれで済ませる事も多いですが、等間隔に配置したい時は整列パネルの『間隔』使いますよね。

この『間隔』には２種類の間隔をとる方法があるのですが、そのお話。

「等間隔」で整列する場合

デフォルトでは間隔の値は「等間隔」になっています。(右図参照)

この「等間隔に整列」というのはFireworksに限らず、いろんなソフトで見かける内容なので、今更説明するのもアレなんですが、例えば下の画像内の5つの四角に対して「等間隔」のまま整列を行った場合はこうなります。

一番左と一番右の四角の位置は変わらず、間に挟まっている3つの四角が移動し等間隔に整列されます。

「数値を入力」して整列する場合

次にその「等間隔」と書いてある枠の中に数値を入力して等間隔に配置させる方法です。単位は px です。

セレクトメニューの▼をクリックしても「px」としか出てこないし、最初は何これ？状態でしたが、意味分かってからはとても便利だなー、と思ってます。右図のように、その枠に10と入力すると、10px間隔で整列されます。

一番右のオブジェクトの位置は関係なくその数値で間隔を開けて整列できます。

使い分けると便利です。

例えばナビゲーションボタンとか、予め幅・高さの決まったエリア内でオブジェクトを等間隔に端から端まで配置したい場合はデフォルトの「等間隔」を、特に大きさは決まってないけど、コンテンツ内で使うちょっとした画像なんかで間隔自体を指定して等間隔に配置したい場合は「数値を入力」して整列を、という使い分けがとても便利です。CSS Spriteを用いる時も、後者の方法で決まった間隔で整列しておくと背景位置の計算も楽になるかもです。

よくあるこういうのをパパっと解決

オブジェクトを複製した時、下図の様に重なった状態で複製してしまった時に「うわー、ミスったー。とりあえず間を空けて複製したかったのにー」という様な時にも、この数値を指定して間隔をあける方法なら重なってた状態をサクっと間のあいた状態にすることができます。

等間隔の場合は左右の端の位置は変わらないので、オブジェクトの幅によっては重なったまま等間隔になってしまうので、やはりこういう時は「数値を入力」で。

パスパネル　グラデーションをボタン1つで反転させる

パスパネルの中に「グラデーションを反転」というボタンがあります。

グラデーションのみを反転させたいパスを選択してこのボタンをクリックすると、グラデーションが反転される。

グラデーションを反転させるにはグラデーションのスライダーの部分の色を素直に変更してもいいし、オブジェクト自体を反転させるという方法もあります。ただ、スライダーの部分の色をいちいち変更するのは面倒だし、オブジェクト自体を反転させる場合、矩形とか円形ならいいけど、この例のように星型だった場合、

こうなると、何か意図と違ってきますよね。そんな時にこの「グラデーションを反転」ボタンなら

オブジェクトの形はそのまま、グラデーションのみ反転させることができるよ、と。

アクア風ボタン等のグラデーションは注意

グラデーション部分のみを反転させるのにとても便利なのですが、グラデーションに含まれる色数が４種以上の場合、ちとややこしいのです。次図の様なオブジェクトを作って、グラデーションを反転ボタンでひっくり返してみました。左が元オブジェクト、右がグラデーション反転後のオブジェクトです。

グラデーションのスライダーがズレてしまって、真ん中のラインがハッキリしなくなってしまいます。なので、こういったグラデーションならば、オブジェクト自体を反転させた方がキレイなままの状態を保持できます。次図はオブジェクト自体を反転させたキャプチャです。

が、オブジェクトの形状次第では（上記の星形とか）オブジェクト自体を反転させるのはマズいのでグラデ部分のみを反転させたいという場合もありますよね。その時はスライダーの色をそれぞれ変更してもいいのですが、一旦「グラデーションの反転」をクリックしてから、スライダーの位置だけ動かして元の状態にすればハッキリ度が復活します。

一旦「グラデーションを反転ボタン」を押してからスライダーを調節したものです。スライダーをちょこっと動かしただけで意図したとおりになりました。

テキストのカーニングを速くする

テキストのカーニングを調節するにはプロパティパネルのカーニングの部分に数字を入れて調節してもいいのですが、数字だと分かりにくいので、実際のテキストオブジェクトを見ながらキーボードで調節している方が多いと思います。その場合は該当テキスト部分をマウスで反転させて「Ctrl + 矢印キー」で調節しますよね。

が、これイラレ等と比べるとすごく遅いですよね。ストレスが溜まること溜まること。そこでこのスピードをアップさせるために「Ctrl + 矢印キー」ではなく、「Ctrl +Shift +矢印キー」で操作します。

まぁ、こんな画像を見てもスピード感はまったく伝わらないですが、上記画像くらいの文字間隔をあけるのに「Ctrl + 矢印キー」だと脳内カウントで5、6秒は掛かりますが、「Ctrl +Shift +矢印キー」だと1、2秒で済みます。

ツールヒントのショートカット

地味だけど侮れないツールヒント。
ツールヒントをオンにしているとこういう時に便利です。

オブジェクトのサイズを変更しようとすると、側に幅・高さが出てきます。オブジェクトを移動させようとするとXY座標が出てきます。こういうの地味なんですけど、すごく助かる時があるんですよね。

だけど、いつもいつも出てこなくていいよ、という存在であるのも確かです。なので、このツールヒントをオン・オフにするショートカットを覚えておくと効率よく作業ができます。

ツールヒントのショートカット　「 Ctrl + ] 」

まだ使ったことのない方はショートカットも覚えて、是非使ってみてください。重宝しますよー。(多分)

2010年05月30日 13:33 | Red | パーマリンク