メニューを開く

トップページ │ コラム │ FireWorksで画像を綺麗に加工する方法

コラム

FireWorksで画像を綺麗に加工する方法

ホームページを制作するときに欠かせないものが『画像』ですよね。
この画像はイラストだったり、時には写真だったりもするでしょう。
しかし、いざホームページに写真を使おうと思ったのに、写真が全体的に暗くて見栄えが悪かった…、なんて事がよくあります。

今回はそんな事にならないように、FireWorksを用いて画像を綺麗に編集する方法をご紹介致します!

レベル補正で白い部分と黒い部分をハッキリさせよう

column13_img1

 

今回はこちらの写真を加工しようと思います。こちらの写真は『足成』というフリー素材提供サイトからお借りしました!
さて、こちらの写真、可愛らしい女性の写真なのですが、何となく全体的に暗くてハッキリしていない感じがしませんか?
これをFireWorksの機能を利用して白い部分は白、黒い部分は黒、とハッキリさせるだけで見栄えはとても良くなります。

column13_img2

FireWorksで加工したい画像を選択したら、下部のプロパティから『フィルタ』を選択し、メニューの『カラーを調整』を選択、その後『レベル補正』を選択しましょう。
するとレベル補正に関するウィンドウが出てきますね。

column13_img3

普段使わない方には馴染みのない画面かもしれませんが、何やら山のような図が出てきましたね。
ここで写真の明暗をハッキリさせていきます。

まずはウィンドウ上部の『チャンネル』のRGBと書かれた部分をクリックすると『レッド』、『グリーン』、『ブルー』と選択肢が出てきますので、まずはレッドに切り替えてみましょう。

column13_img4

山なりの図が少し変化しましたね。
これはこの写真に含まれる『赤』の要素なんですが、難しい事はあまり考える必要はありません。
私も詳しくは把握していないです…(笑)

さて、この山なりの図の下に、黒、灰色、白の3つの矢印がありますね。『出力レベル』の文字のすぐ上のやつです。
この矢印を動かす事で、画像の色彩や彩度を変化させる事が出来ます。
今回動かす矢印は左端の黒と右端の白の2つだけで、真ん中の灰色の矢印は動かす必要はありません。

この矢印はマウスポインタを重ねてドラッグすれば左右に動かす事が出来るのですが、この山なりの図形のふもとに矢印を合わせるイメージで移動させます。

column13_img5

上の写真では白の矢印は分かり易いですね、山のふもとがイメージしやすいのではないでしょうか?
それに対して黒い矢印は山が浅く少し分かり難いですが、少しでも山になっていたらそこを山とみなしてふもとに合わせました。
画像によってはもう少し右側まで動かしても良いかもしれませんが、これはレベル補正の結果を見ながら調整しましょう。

レッドの矢印を動かすと、元の写真が少し赤くなったと思います。
また『チャンネル』の部分をクリックして、『グリーン』と『ブルー』も同じように矢印を動かしましょう。

column13_img6

『レッド』、『グリーン』、『ブルー』のすべてで調整を終えた後の画像がこちらです。
元の写真と比べると白い部分がハッキリとしていて、ぼやけた感じがしなくなりましたね!

明るさとコントラストを調整しよう

これで写真の色彩や彩度は調整が出来ました。しかし、写真によっては全体はハッキリしたけど、それでも少し写真が暗い……、という事があります。
今度は写真の明るさとコントラストを調整しましょう。

column13_img7

レベル補正と同じように、画像を選択したら『フィルタ』から『カラーを調整』、『明るさ・コントラスト』を選択しましょう。
明るさとコントラストを設定するウィンドウが出てきます。

column13_img8

今度は分かり易いですね、明るさの数値を大きくすると画像が明るくなり、マイナスにするとどんどん暗くなっていきます。
バーをスライドさせると元の写真もリアルタイムで変更されますので、丁度いいところを見つけて調整しましょう。
明るさを強くし過ぎると写真が真っ白になってしまいますので、やり過ぎには注意です。

次に、コントラストの調整をします。
コントラストは彩度の設定ですね。この数値を大きくすると彩度が上がって写真の色が鮮やかになります。
コントラストは強くすると写真が汚くなってしまいますので、基本的にはほんの少し調整するだけで純分です。
コントラストの数値をマイナスにすると彩度が下がり、全体的に灰色のようなくすみがかった色合いになります。

column13_img9

明るさとコントラストを調整した写真が上の物になります。
全体が明るくなり、鮮やかになりました、これならホームページに掲載しても問題なさそうです!

FireWorksで写真を加工する まとめ

今回はFireWorksで写真を綺麗に加工する方法を紹介させて頂きました。
人によってやり方はあると思いますが、私はこの方法が1番楽で綺麗にできるかなぁと思い使っています。

今回はレベル補正と明るさ・コントラストしか使いませんでしたが、FireWorksのフィルタには他にも色々な機能があります。
例えば『アンシャープマスク』を使えば画像の輪郭などがハッキリとして、メリハリのある画像にする事が出来ます。
『色彩・彩度』を使えば簡単に全体を赤くしたり青くしたり……、なんて事も出来るんですよね。

ただし、画像の加工は万能ではありません。
今回のように明るさや彩度は調整が出来ますが、例えばピントがずれている画像は、どうやってもハッキリとしたものに出来ません。
ご自身で写真を用意するときは、最低限ピントは合わせておく必要がありますね。

また、写真の加工は重ねるほど劣化が進みます。
ですので過度な加工は控え、なるべく少ない工数で加工を済ませたいところですね。

 

参考になったらツイートしてくれると嬉しいです!

他にもこんな記事があります




Copyright © 2015 YUKINEKO WEB DESIGN All Rights Reserved.