CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

30

03月2009年

【Fireworks】画像のシルエットをパスに変換

toyama 17:27 PM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

イメージ

こんにちは、花粉症がすっかり治ったシーブレインの toyama です。
大学生の頃はとても酷かったのに、アレか、歳のせいか。

画像のシルエットを生かして影を作りたいなー、なんて思うことがありますよね。
一つ前のエントリでもシルエットを生かした影を作ったりしていますが、面倒で投げています。だめだこんなことしちゃ!ちゃんとパス抜け!

というわけで、画像のシルエットをちゃんとパスで抜こうじゃないかというお話です。

1. 透過画像を用意

090330_toyama_01.gif

透過画像を用意します。透過画像がそもそもなかなかないので、透過画像がなければ背景を切り抜きます。なんだか本末転倒な気もしますが。
むかーしの「素材辞典」は写真によってはパスデータつきだったのにどうしてやめちゃったのかしら。

2. 範囲選択

090330_toyama_02.gif

画像をレイヤーを選択した状態で [Alt] (Mac なら[Option])を押すと、カーソルが破線の□マークになります。範囲選択のアレです。
そのままレイヤーをクリックして、範囲選択。画像のアウトラインが点線で囲まれ選択されます。
普通に範囲選択ツールから透過背景を選択して[修正]→[選択範囲の反転]をしても同じです。

3. 範囲選択をパスに

090330_toyama_03.gif

そのままの状態で[選択]→[マーキーをパスに変換]。
範囲選択の形のまま、画像のアウトラインがベクター化されました!
なんでいきなりマーキーとか言い出すんでしょうか。混乱するじゃないか!

090330_toyama_04.gif

4. パスを使って加工してみたりする

090330_toyama_05.gif

パスデータなので歪めたりグラデーションをつけたり線をつけたり、やりたい放題です。

Photoshop にもある機能ですが、Photoshop と Fireworks を行ったりきたりするのがダリー…非効率だわ!という場合に便利です。
Photoshop でも言えることですが、自動でパスデータ化されるので、精度はまあまあな感じです。きれいなパスデータがほしいときはやはり手作業か、大きめな画像で作成するといいかもしれません。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1843
###はmt-tb.cgiに変更してください。

コメント

toyama様

いつもバシャログさんのブログを拝見させていただいてます。勉強になります。ありがとうございます。

FireWorksでの画像切り抜きがあまりうまくいかずいい方法をご紹介いただけないかと思いましてご連絡差し上げました。自動選択ツールやなげなわツールでいろいろ試したのですが、ブレがあるというかうまく切り抜きができません。

例:写真画像の中の人物や物(輪郭が直線的でないもの)

またお時間ある時でも、toyama様流のテクニックをブログ内で披露いただけると嬉しいです。

突然の連絡にて失礼いたしました。どうぞよろしくお願いいたします。

りんむう | 2009年07月31日 10:54

> りんむうさん
コメントありがとうございます。
自動選択ツールで複雑なオブジェクトを一発切り抜ければ、こんなに嬉しいことはないんですけどねー!
一度自動選択ツールやなげなわツールで試す→やっぱ無理だった!→諦めてペンツールでパス抜く
という、諦めるための手段としてツールを使います。後ろ向きです。
いい方法が見つかったら、バシャログにエントリさせて頂きますので、今後ともご愛読よろしくお願いします!

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery