Fireworksで簡単!写真風画像加工(斜めでもギザギザさせない)

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

Fireworksで簡単!写真風画像加工(斜めでもギザギザさせない)

こんにちは松本です。先日第二子が誕生しましたヽ(´エ`)ノこれで女3:男1家族になりました。10年後の自分の扱いが楽しみです。
Fireworks Lover Advent Calendar 2013 6日目の記事です。詳細は前回の記事をご参照ください。

写真風加工を簡単に

Fireworksでポラロイド風写真ホームページ上で良く見かける、写真風の画像加工テクニック。

矩形を二つ作って、内側の矩形と画像をマスクでグループ化して・・・っていうのがオーソドックスな方法ですが、もうちょっと手短にできないかと別案を考えました。

とりあえずサクッとつくる

白枠をつける

Fireworksで写真風加工1

まず実際に作りたいサイズの矩形を作り、その中に画像を Ctrl + Shift + V で内部ペースト(画像を任意のサイズに切り抜いたものでも良いです)。
フィルターから「光彩(内側)」を選択。上記の画像のように「幅:6」「カラー:白」「不透明度:100%」「柔らかさ:0」「光輪のオフセット:0」を設定します。幅はお好みで。

※レベルや、色彩などの補正をする場合は、これより前に行なっておいてください。後で色調補正すると、それより先にかけたフィルターにも影響するため。

枠線をつける

Fireworksで写真風加工2

さらにフィルターから「Photoshopライブ効果」を選択し、「線」をチェック。「サイズ:1」「位置:内側」「不透明度:100%」「カラー:#cccccc」カラーはお好みで。

※線を内側にするのは、スライスした時の画像サイズを変えたくないからです。コーディングのことも考えながらデザインしておくと、後で自画自賛できます。ノーモア奇数!

以上です。

え!終わり!?

終わりといえば終わり。しかし終わりのないのがデザインです。
ちょっと影をつけてみます。

影をつける

シャドウはうっすら

Fireworksで写真風加工3

フィルターのドロップシャドウです。お好みです。なるべく薄く、微妙にかけたほうがオサレに見えます。

影にバリエーションをつける

もっとバリエーション付けたい場合はパスで書きます。

Fireworksで写真加工4

上記のような三角をパスで描いて、フィルター「ぼかし(ガウス)半径:2」を加えて、不透明度を40くらい。もちろんお好みです。

斜めにしてみます。しかしこれがクセモノ。

それだけじゃ物足りないので、斜めにします。が、これが曲者。

線がギザギザじゃと?

下の図のように、加工したオブジェクトをただ斜めにするだけでは、線がギザギザになります。
斜めはお嫌いですか。そうですか。

Fireworksで写真加工5

斜めにするときはお手数ですがビットマップ化で

ギザギザとても気持ち悪い・・・。A型の私にはそんなこと1ピクセルも許せません。なので、お手数ですがビットマップ化してください。
ビットマップ化してから斜めにすると、あら不思議、ギザギザが少ない!

Fireworksで写真加工6

シャドウもギザギザじゃて

また、シャドウをフィルターでかけた場合、シャドウをかけた状態でビットマップ化して斜めにしたら、今度はシャドウが汚い!
なので、フィルターでシャドウをかけたい場合は、ビットマップ化して斜めにしたものに、シャドウをかけます。まわりくどい!

Fireworksで写真加工7

こんな時に便利

斜めにして~のくだりから、面倒くさくなった人もいるかもしれませんね・・・

しかし、斜めにしない場合は、今回の方法がとても便利です。
例えば、写真ギャラリーなどのサムネイルが並ぶページをデザインする場合、コピペじゃ見栄えが悪いので、全部違う写真にしたい時は、私の大好きなショートカット「Shift + Ctrl + Alt + V」の属性のペーストで一網打尽にできます。

使う時が・・・きっと来るはず!!

写真ギャラリーで便利かも

powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.