Fireworksマニア

みなさんこんにちは☆
Fireworksマニア、年明け最初のチュートリアルです！

新年一発目のチュートリアルは、
『Fireworksだけでできる、カンタンきれいな画像切り抜き術』です。

Web用なら問題ないキレイさで、カンタンに手早くFireworksだけでやってしまう方法をご紹介します！

いろんな写真でのサンプルを作ったので、それを使って見本画像を作ったために、ちょっとすごいことになりました…ごめんなさい。

以下の内容を解説します。

1. パスを使って画像切り抜き
2. パスでマスキング
3. わざわざ手で書かずに、カンタンに切り抜き用パスを作成する
4. 色の差の少ない画像のときにもカンタンに切り抜き用パスを作りたい！
5. [おまけ]いろんなパスでマスキング

それではやっていきましょう！

Fireworksのよいところは、ベクターとビットマップを一度に扱えるという点です。
ベクターパスを用いてビットマップ画像をキレイに切り抜いていきます。

ペンツールを使って、切り抜きたい形のパスを書いていきます。

この画像の場合はほとんど直線なので、とんとんと点を打って結んでいきます。

↑こんな感じ

下の方も適当に点を打って、スタート地点までもどり、一周ぐるりと囲みます。

こんな感じで囲みます。
（わかりやすいように塗りを適用してみました。）

囲み終わったら、このパスで画像をマスキングしていきます。

パスでマスキング

パスを選択した状態で右クリック→編集→カットを選びます
（ctrl+x または command+xで切り取りしてもOK）

次に、元画像をクリックして選択状態にします。
その状態で右クリック→編集→マスクとしてペーストをクリックします。

すると、最初に書いたパスの部分にそってマスクが作られます。

こんな感じで切り抜けます。

パスを書く時に線が多少ずれてしまっていても、ベクターパスなのであとから修正ができます。
マスクをかけた後でも編集できるので便利です！

ただ、この方法だと少々複雑な形を切り抜きたいときちょっと大変ですよね。

切り抜きたい物と背景の色の差がはっきりしている写真なら、わざわざ手でパスを書かなくても、カンタンに切り抜き用のパスを作ることができます！

わざわざ手で書かずに、カンタンに切り抜き用パスを作成する

写真はPHOTO STOCKERから持ってきました。

カンタンに切り抜き用パスを作るには、自動選択ツールを使います。

プロパティパネルの許容量の設定がとっても重要です。
画像のコントラスト差に応じていろいろ調整してみてください。

ポイントは一度ですべて選択してしまおうとしないこと。
背景に当たる色がある程度まとまって選択できる許容量に設定して、
shiftキーを押しながら背景部分をとんとんとクリックしていくと…

こんな感じで、ブルーの部分がすべて選択されました。

選択範囲が出来上がったらこれを反転させて、物の方が選択範囲になるようにします。

メニューの編集から　選択範囲を反転をクリックします。

選択範囲が反転されました。

この選択範囲のまま、マスキングすることも可能なのですが、今回はこの選択範囲をパスに変換して、パスで切り抜きを行います。

こうしておくことによって、パスのポイントを編集することで切り抜きたい部分を滑らかに微調整することができます。

この選択範囲をパスに変換します。
メニューの選択から、選択範囲をパスに変換　をクリックします。

選択範囲がパスになりました！

このパスを使って画像をマスキングしていきます。

上記えんぴつのサンプルでご紹介した『パスでマスキング』の部分と同じ手順です。

このパスを選択した状態で右クリック→編集→カット
次に、写真を選択した状態で右クリック→編集→マスクとしてペースト

このように、選択範囲でマスキングできました！

下のような差のはっきりした写真なら一度で選択範囲が作れますよ♪

こちらも写真はPHOTO STOCKERから持ってきました。

↓こんな感じ

色の差の少ない画像のときはにもカンタンに切り抜き用パスを作りたい！

さて、上記の例は、比較的単純な形のものだったり、背景と物の色の差がはっきりしていたりして比較的切り抜きのしやすいものでした。

ただ…普通、こんなカンタンに切り抜けるものばかりじゃないんですよね。

色のトーンが似ていて上手く範囲選択ができず、かといってパスを書くのも面倒な図形…ありますよね。

こんな写真をPHOTO STOCKERから持ってきてみました。

ハイビスカスと葉っぱです。

一見、カンタンに範囲選択できそうなのですが…

実際やってみるとこんな感じで、上手く選択できません…。

こんなときは、画像をちょっと加工して、境目をくっきりはっきりわかりやすくしてあげましょう！

まず、レイヤーを複製します。

複製した画像の色味を調整します。
このとき、プロパティパネルのフィルタではなく、上のメニューバーのフィルタを使ってください！

フィルタメニューからカラーを調整→レベル補正をクリックします。

画像にあわせて、レベルを補正していきます。

プレビューを見ながら、こんな感じで色味を変更していきます。

こんな感じの２つになりました。

こうなってしまえばパスをとるのはカンタンですね！

上記の手順で選択範囲をとり、反転させてパスに変換します。

変換したパスを右クリックして編集→カットして、
色味を変えていないほうの写真の上で右クリックして、編集→マスクとしてペーストをクリックします。

お花がカンタンに切り取れました。

[おまけ]いろんなパスでマスキング

これまでは、対象物の形で切り抜きましたが、
たとえば丸く切り抜きたい、四角く切り抜きたい、なんてこともあるかと思います。

そんなときも同じ手法でカンタンにマスキングができます。

好きなツールで図形を書きます。
今回は円を書いてみました。

このパスを使って画像をマスキングしていきます。

上記えんぴつのサンプルでご紹介した『パスでマスキング』の部分と同じ手順です。

このパスを選択した状態で右クリック→編集→カット
次に、写真を選択した状態で右クリック→編集→マスクとしてペースト

円でマスキングされました！

レイヤーパネルを見ると、このように写真とマスキングしているパスとが表示されます。

この鍵の部分をクリックすると、鍵が外れます。

鍵を外した状態で画像を選択して動かせば、画像のマスクされる位置をカンタンに変えることができます。

鍵がかかった状態で動かすと、普通のオブジェクトの移動と同じです。

Web用の切り抜きなら、
Phososhopを使わずともFireworksだけである程度の切り抜きができますので
みなさんもぜひ挑戦してみてくださいね！