fireworksで人物の切り抜き方法

デザインを行っていると画像の切り抜きという作業が必ず必要となることがあります。
その中でも人物の切り抜きは髪の毛を含むので普通にパスを使って切り抜いていたら非常に手間がかかってしまいます。

Photoshopを使っている場合こんな方法でできるというのは割と有名なのですが、人物の切り抜きだけのためにPhotshopにツールを変えるというのも癪なので、fireworksで試行錯誤の上、これが一番楽だろうという方法を見つけましたので紹介します。
※環境はfireworksCS3を想定しています。

1、切り抜く画像を開く

2009071701

まず切り抜く画像をそのままfireworksで開きます。今回は髪の長い女性の画像を選んでみました。髪の先端が細くて切り抜くのが難しそう




2、髪の毛以外の部分のふちをペンツールで選択

2009071702

ひとまず体などのふち(外側)をペンツールで選択します。髪の毛は適当に余白をとって選択しておきます。




3、選択した部分を黒く塗りつぶす

2009071703

2でペンツールで選択した部分を黒くしちゃいます。




4、切り抜く(補足があります

2009071704

3の黒い形に沿って切り抜きます。
切り抜き方は、
1、切り抜きたいレイヤーを選択する
2、切り抜く形のレイヤーを「alt」を押しながら選択
3、「shift」「Ctrl」+キーボードの「i」を押すと選択範囲が反転する
4、「Backspace」で切り抜き完了
という流れで行います。この方法はよく使うので覚えておくとよいと思います。




5、切り抜いた画像をコピーしてグレースケールをかける

2009071705

切り抜いた画像のレイヤーをコピーしてそれをグレースケール(つまり白黒)にします。グレースケールは上部メニューの「コマンド」>「クリエイティブ」>「グレースケールに変換」で変換できます。




7、画像をレベル補正して髪を真っ黒にする

2009071706

グレースケールにした画像の髪の毛がほとんど真っ黒になるくらいまでレベル補正しちゃいます。レベル補正は「フィルタ」>「カラー調整」>「レベル補正」で真ん中の▲を右に持っていくと髪が濃くなっていくと思います




8、全体を黒く塗りつぶす

2009071707

7で髪の毛が黒くなりましたが、それ以外の部分もブラシツールなどで真っ黒にしちゃいます。その際に手順2で作成した選択範囲を選択した状態で塗りつぶすとはみ出さないので楽にできます。




9、アルファチャンネルに変換

2009071708

8で塗りつぶしたものをアルファチャンネルに変換します。アルファチャンネルは「フィルタ」>「その他」>「アルファチャンネルに変換」でできます。




10、選択してみる

2009071709

アルファチャンネルに変換したもので選択範囲を作成してみると髪の毛の部分が細かく選択されていると思います。




11、選択範囲を反転して切り抜く

2009071710

手順4で説明した方法で下のレイヤーを切り抜いてみると割ときれいに背景を切り抜けている…(ような気がする)




12、背景を当ててみる

2009071711

背景に色を入れてみると…おおっ!切り抜けてる。


ただ、背景が黒など濃い色の場合は切り抜いた画像と背景がうまくマッチしないので、切り抜く際に選択範囲をぼかしたり、数回切り抜く作業を繰り返したりすればいいと思います。




Adobe Fireworks CS4 (V10.0) 日本語版 Windows版(Fireworks CS5 への無償アップグレード対象)
アドビシステムズ (2008-12-19)
売り上げランキング: 622




オープンソースCMSテンプレートデザイン―Dreamweaver & Fireworksによる
伊丹 シゲユキ
ソシム
売り上げランキング: 200588




Fireworks CS4 スーパーリファレンス for Windows&Macintosh
Web&HP研究会
ソーテック社
売り上げランキング: 5980







fireworksで人物の切り抜き方法」への7件のフィードバック

  1. ありがとうございます。
    ファイヤーワークス 切り抜き方法 のキーワードでたどり着きました。
    非常に興味深い方法ですね。
    早速試してみます。
    ありがとうございました。

  2. コメントありがとうございます。
    自分独自の方法なので使えるかわかりませんが…
    他にもよい方法がぜひあれば教えてください。

  3. 私の使っているファイヤーワークスだと黒く塗りつぶすところまではできるのですが、5の「切り抜いた画像をコピーしてグレースケールをかける」がどうやってもできません。fireworksCS3からの機能なのかもしれませんね><:

  4. そうですか。5は使ったことないので分からないのですが、グレースケール機能がないのかもしれませんね。
    でも、色彩・彩度の調整ツールで「色彩」「彩度」を0にしてしまえばグレースケールになりますので、その方法で試してみてください。
    で、この方法はあくまでも自己流なので、他にもいい方法があれば教えていただけると助かります!

  5. はじめまして。
    fireworks初心者です。
    是非とも参考にさせて頂きたく拝見させて頂きました。
    ですが、4.の切り抜き時に、「選択範囲の反転」をしようとすると、
    「ピクセル選択範囲の指定をしてください」と表示されてしまいます。
    altを押しながらクリックすると、ペンツールで指定したパスはどのような変化ができるのでしょうか?
    切り抜きがうまく出来ませんでした。
    fireworks MX 2004を使ってます。バージョン古すぎでしょうか・・・。

  6. >>アンヘルさん
    コメントありがとうございます。
    当方の環境はFireworks8なのでMX2004で同様にできるかどうか分からないのですが、「ピクセル選択範囲を指定してください」と表示されるということは、選択範囲が指定されていないのでは、と推測します。
    4,の段階でレイヤーが二つあると思いますが、レイヤーパレット上で一つのレイヤー(Aレイヤー)を選択した状態でもう一つのレイヤー(Bレイヤー)を「alt」を押したまま選択すると、Bレイヤーのオブジェクトの範囲が選択された状態になります。
    その状態のままAレイヤーを操作することができるのです。
    ああ…自分で書いてて分かりづらいですね。
    あらためて解説したいと思いますね。

  7. 細かいTIPSまでありがとうございます。
    結論からいうと・・・できましたっ!
    ただですね、問題はキーボードの押し方にありました。
    私のMX 2004の場合、「alt」ではなく、
    「alt+ctrl」にて同様の作業が出来ました。
    新しいバージョンを買った方が良さそうです。
    でも今回の件で、全く関係の無いことも学ぶことができたので、
    結果オーライということで納得しておきましたw
    ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です