商品の写真を使用する際、少しだけ幅が足りなかったり、余計な背景が写っていて、ある一部分だけを切り取りたい・・となった時に良く使われるのがマスク機能です。イメージをお伝えするために、マスクを利用した商品説明をサンプルとして作ってみました。(クリックすると拡大します。)

[1]

この丸く切り取られた部分にマスク処理をしています。よく見かけると思いますが、非常に簡単に出来る処理です。お使いになっていますか？ 今回もFireworksCS3を使用して、説明したいと思います。

まずは丸く切り取ってみよう！

写真を用意します。今回は下駄の写真を用意してみました。

ツールバーから楕円ツールを選択します。（図1）矩形ツール等、他のツールが選択されている場合は長押しすると、他のツールが選択出来る様になります。
[2]

楕円ツールで円を書きます。この時、Shiftキーを押しながらマウスでドラックすると縦横が同じ正円が書けます。この円の色を白に変更して下さい。（図2）
[3]

次に写真と、白い円のレイヤーを、両方選択した状態にします。この時、写真を配置したレイヤーが下、白円が上である事を確認して下さい。
それでは、マスクをかけましょう。 メニューから修正⇒マスク⇒マスクとしてグループ化を選択します。(図3)
[4] これで丸く切り抜くことが出来ました。
[5]

さて、今度はもう少し複雑なマスクをかけてみましょう！簡単に出来て、知っておくと大変便利なグラデーションマスクです！

次はグラデーションマスクに挑戦！

先ほどは白い丸で切り抜きましたが、同じ要領で白から黒へのグラデーションで切り抜く事も出来ます。バナー作成の際など、少し幅が足りない画像や、端にテキストを入れたい時などに良く使われます。

まずは写真を用意します。右にテキストを入れたいので右側に空白部分作っておきます。(図1)
[6]

写真と空白部分の境界がはっきりしているので、もう少し柔らかい感じを出すために、グラデーションマスクをかけてみたいと思います。

まずはツールバーから、矩形ツール(場所は白円の図１参照)ですっぽりと写真を覆います。(図2)
[7]

次にこの矩形にグラデーションをかけます。先ほどの円と同じで、白色部分がマスク（隠されて残る部分）されます。
白から黒へのグラデーションをかけて、だんだん残す部分を少なくし、最終的に全く見えなくするという考え方です。そこで写真の中で、「残す部分」を白、「残さない部分」を黒と考えてグラデーションをかけます。
プロパティボックスから、塗りの種類⇒グラデーション⇒線形を選択します。(図3)
[8]

左側を白、右側を黒に設定します。(図4)
マスク処理をした後でも微調整は可能ですので、ここでは単純に白から黒へ均一なグラデーションを作ります。
[9]

ここからは円と同じ要領で、矩形と写真のレイヤーを両方選択し、メニューから修正⇒マスク⇒マスクとしてグループ化を選択します。ここまでで、こんな仕上がりになりました。(図5)
[10]

少し、ボケた印象になってしまったので、微調整します。
マスクをかけたレイヤーを見てみると、写真とグラデーションをかけた矩形が鎖のような物で繋がれています。
これは、「関連付けられています」といった意味なのですが、各々をクリックする事で、関連付けを行ったまま調整をする事が出来ます。(鎖をクリックすると関連付けを外す事も出来ます。)

ここではグラデーションの調整をしますので、右側の矩形部分をクリックします。(図6)選択すると、緑色の枠線がつきます。
ここで必ず、矩形と写真部分のどちらを選択しているのか確認して下さい。

後は、グラデーションのハンドルか、プロパティボックスから「塗り」をクリック、白と黒の開始位置を変化させて調整を行ってください。(図7)
[11]

これで右側に字を入れても自然な感じに仕上がりました。

同じ要領で、矩形だけでなく、写真や文字など何でもマスクする事ができます。勿論、マスクしたレイヤーにもドロップシャドウやグローなど、エフェクトがかけられますので、アイデア次第で色々なデザインが楽しめます！ぜひお試しを。