FireWorksFireworksのマスクの作り方にいろいろあります。 主にパスマスク系とグラデーションマスク系です。 どちらもマスクサムネイルがレイヤーの中に生成され黒く塗りつぶされるところがマスクされているところ。白いところが見せているところです。 作り方には数種類ありますが、今回は一番手数の多いやり方を記載します。



 

Fireworksで選択範囲を作りマスクを作る方法

写真の一部もしくはある一定の大きさをマスクしたいことがあります。複雑な形状のものをマスクする場合ペンツールでパスで囲み<変更>→<>→<マスクでグループ化>を前回解説しましたが、写真に写った人物や猫などの毛むくじゃらなものなどをマスクするにはパスマスクだと境界線がはっきりしすぎていて背景が透けてみえてエッジが目立って出来上がりに満足できないことがあります。こうゆうときにはFireWorksではピクセルを選択する選択範囲を利用してマスクを作ると背景に馴染んだマスクを作ることができます。

マスクされる写真でコーヒーのカップマスクの完成図今回はコーヒーのカップを例にとってマスクを作成したいとおもいます。左の写真がマスクする前、右はマスクされた完成図です。

 
マスクしたい画像を用意します。

マスクしたい写真

<ファイル>→<画像の取り込み>でドキュメントに画像を取り込みます。

ペンツールで境界線を描きます。

ペンツールでパスを書いている様子

ここはなるべく丁寧に、内側をペンツールでなぞります。 ここで荒い作業をすると綺麗に抜けません。失敗したらやり直す覚悟でパスを完成させてください。
パス作成ができた画像 完成しました。

パスを選択範囲に変更します。

変更パスを選択範囲に変更

<変更>→<パスを選択範囲に変更>を選びます。
PhotoshopなどではパスパネルなどにボタンでできるようですがFireWorksでは無いようです。選択範囲になったところ
選択範囲のエッジ処理の設定

選択範囲のエッジ(端)の処理ダイアログボックス

エッジ 選択範囲の境界線の端の処理のダイアログボックスが展開されます。ここで選択範囲をぼかします。もちろんぼかさなくてもいいのですが、この処理をしないとパスマスクと同じはっきりした境界線になります。 三角のプルダウンメニューで「エッジをぼかす」「アンチエイリアスをなし」「アンチエイリアスあり」の設定がありますのでどれかを選びます。ここでは「エッジをぼかし」を選択しましょう。 ぼかす数値は「3px」ほどいれるといいでしょう。作品の状態に合わせてぼかす大きさを設定しなおしてくださ。デフォルト「10px」になっているので数値を必ずいれなおしてください。間違った場合は「Ctrl+Z」でやり直してください。

選択範囲の注意

選択範囲になったところ

ここでパスは破線の選択範囲に変更されました。レイヤーではパスレイヤーがなくなり読み込まれたビットマップレイヤーが選択されていることを確認してください。もし選択されていなければマスクするビットマップレイヤーを選択ツールで選択してください。

選択範囲から選択範囲を表示

選択範囲からマスクに変更

<変更>→<マスク>→<選択範囲を表示>でマスクが完成します。

マスクの完成

マスクの完成図

これで完成です。背景になじませるにはエッジのぼかし方などに工夫が必要です。犬や猫などの切り出しにはやはりPhotoshopのほうがウワテですがWeb用の72ppiの解像度ならばFireWorksでも問題はないでしょう。100%表示で確認をしてみてください。
レイヤーパネルのマスクサムネイルを選択するとプロパティインスペクタで「グラデーションマスク」「アルファチャンネルマスク」のオプションが選べます。といっても見た目どう違うのか私にもわかりませんw 今回の肝はエッジをぼかせるマスクであるところなのでココらへんの研究は割愛させていただきます。

 

CS5/4/3 (速習デザイン)


FireWorksのチュートリアル教本としては一番に上がってくる本です。価格2680円とこのレベルの本では平均的なお値段です。操作に慣れてきて更に上達したいかたは購入をかんがえてもいいのではないでしょうか?お小遣いの許す範囲でかんがえてください。 また著者の山口有由希さんの運営する「FireWorks Mania」も力強いデザインのヒント集になるとおもいます。

 

このエントリーをはてなブックマークに追加
[`evernote` not found]
はてなブックマーク - Fireworks グラデーションマスクの制作方法。