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

powered by hm solution

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

お問い合わせ
ブログTOP » web » webデザイン » Fireworksで簡単!写真風画像加工(斜めでもギザギザさせない)

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」の属性のペーストで一網打尽にできます。

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

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

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.