Webデザインとフォトショップクイズの第6問です。
この記事は毎週1問を題材にして、未経験からでもデザインを楽しく学んでいける企画です。
難しいことはせずに、ちょっと考えればデザインが変わってくる良くなるを感じてもらえればと思っています。
でも、Webデザインの勉強ってやろうと思ってもなかなか時間とれないですよね。
ご家庭の事情とか、なんだかんだでうまくいかなくて。
だから通勤時間やお昼休憩、トイレの中とか一人でスマホをポチポチできるクイズを用意できればと思います。
「今勉強する時間が取りづらいけど、クイズやってたな。ちょっと勉強してみようかな」くらいでアクセスいただけば幸いです。
さて今回のテーマは低解像度です。
低解像度の素材で何か作る事ってありますか？
これからWebデザイナーとして働く人には意外な質問かもしれませんが、経験を積んだWebデザイナーさんなら「ありますよ！」って答えると思います。
高解像度の素材を用意してもらう方がありがたいのですが、実際の現場ではWebデザイン制作に関わった事がないクライアントさんや社内の営業さんとか私たちWebデザイナーと見る所が違う人と仕事を進めていきます。
Webデザイナーの常識が非常識みたいな事だってありますし、素材一つにしてもスマホでパシャっと撮影して、ピッと送信してくるのです。
※送信した時にデフォで低解像度に圧縮してしますし・・・
Webデザインとフォトショップのクイズについて
1週目はクイズを1問出題します。
2週目は回答と次のクイズを1問出題します。
毎週1問づつ繰り返して、楽しく知識を身につけるのが目的です。
第6問
クライアントさんから素材を提供してもらいました。
どうやらこの女性素材を使ってほしいみたいですね。
この素材をフォトショップのフィルタでもう少し荒さを抑えて奇麗に修正したいです。
どのフィルタを使えば出来るかを考えてください。
A.レイヤーをRGBカラーモードから「ぼかし」フィルタを使って滑らかにする
B.レイヤーをそのまま「ノイズを軽減」で滑らかにする
第6問のヒント
少し荒さを抑える加工はAとBどちらでも可能です。
私の記事はより簡単な方法を答えにする事が多いので、「Webデザインの画像加工はどちらが簡単かつ効果的か」を軸に解答を導きだしてください。
第6問の解答を見てみよう！
正解はBです。
あれ？セオリーなら正解はAじゃないの？と思う人も大勢いると思います。
確かにAのやり方の方がとても奇麗に仕上がります！
でも、とても時間がかかるのです。
それでは、Bはどのようなフィルタなのでしょう。
さらに深堀解説
Bの「ノイズを軽減させる」を使ってこのように設定しました。
主にぼかしとシャープのパラメータを調整するだけで滑らかな処理ができあがります。
ちょっとまめ知識
荒い画像を短時間で奇麗に見せる処理で「シャープ」というのがあります。
これ、ほんとうに重宝するのですが、小さな画像なら最適な処理方法なのです。
今回の画像で「シャープ」を使うとこうなります。
元の画像よりガタガタになりました。
第6問では、手軽に勝つスピードも落とさずに奇麗仕上げる事ができる「ノイズの軽減」がベストな解答として公開しました。
フィルター処理で荒い画像を奇麗に処理する事ができますが、画像サイズや画像の荒れ具合で使用用途を考え使い分けると良いと思います。
あと、念のためクライアントから本当に高解像度が無いのか再確認もやっておくといいでしょう。
デザインのアドバイスがあればいいな
とお考えの人には、直接添削はできませんがデザインの勉強をtwitterの中でもアドバイスを発信しています。
どんな活動をしているのかは「新しいチャレンジ」の記事を確認してください。
さいごに
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。
最近「けっきょく、余白。」という本を読み、Webデザインに正解は無いのだなと思ったcoffeebreakの中の人（@ra_cer_X）です。
第５問の解答を公開しました！