2月 2013 | CREATE RECORD｜blog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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で反時計回りにオブジェクトを回転させる事ができます。
回転もよく使います！

今日もFireworksについてです。
アプリケーションにはユーザー独自にショートカットキーが登録できるものがありますが、Fireworksにも、もちろんあります。

これは設定しておいたほうがいいだろうって僕のおすすめを紹介します。

1.選択したオブジェクトのサイズを変更

以前の記事でもご紹介しましたが、あらためてここでも
コマンド＞選択したオブジェクトのサイズを変更です。
僕はcommand+mで設定しています。

2.マスクとしてグループ化

変更＞マスク＞マスクとしてグループ化
Fireworksでデザインするならこのショートカットも必須です。
Fireworksは白いオブジェクトで透過の無いマスクがかけれて黒いオブジェクトで透過のマスクがかけれます。
フェイドアウトするようにマスクをかけるなら白→黒のグラデーションののマスクをかければOKです。
矩形ツールで簡単にマスク出来ちゃいますので、このショートカットは是非！
僕はcommand+/で設定しています。

3.水平方向に反転＆垂直方向に反転

変更＞変形＞水平方向に反転
変更＞変形＞垂直方向に反転
反転もやっぱり良く使います。
僕は水平をcommand+[
垂直をcommand+]に設定しています。

FireworksはPhotoshopのアクションのようにヒストリーをつかって簡単にオリジナルコマンドも作成できますので
それに対しても僕は結構ショートカットキーを割り当てています。
ベベルっぽいドロップシャドーとか二重に枠が設定できるとか写真のエフェクトとか
最初の設定は面倒ですが、設定するとかなりの効率アップになります！
多い時は年間100サイト以上デザインしますので、この辺の効率化は地味に役立ちます。

Fireworksでデザインをしていて矩形のエッジがダルくなる事ってありませんか？
僕の職場ではその現象を「例の現象」と言ってます。

Fireworksの最小単位は1pxで1pxで割り切れない小数点の座標にオブジェクトが配置された時にこの現象になるみたいです。コピー元とコピー先の座標が離れすぎているばあいや、偶数の幅のオブジェクトの中で、奇数の幅のオブジェクトを整列で中央にしたときや拡大縮小ツールで拡大縮小したときにもなる事があるみたいです。
エッジがダルくなった時は変更 > ピクセルにスナップcommand(ctrl)+kで元に戻ります。プロパティで数値を入力しなおしてもなおります。オブジェクトのリサイズでもなおります。
配色によっては凝視しないと、わかりにくい場合もあるので僕はcommand+kを癖づけて対処しています。