どっちが早いデザイン処理?【第7問】未経験者向けWebデザインとフォトショップのクイズをはじめます!




中の人
こんにちは。
どうやら自宅近くの図書館にデザイン本がたんまりありそうなので今度行ってみようと思ったcoffeebreakの中の人(@ra_cer_X)です。

第6問の解答を公開しました!

Webデザインとフォトショップクイズの第7問を発表します。
こやって週1で1問だけ題材にしたクイズで未経験からでもデザインを楽しく学んでいければと思ってます。

必ず勉強しなければではなくて、例えば、

朝通勤の時間に覗いている時

トイレ中にスマホをポチポチする時

ランチの待ち時間

みなさんのちょっとした休憩時間に学んでいただければと思います。

短時間の読み終わるクイズなので、主婦のみなさまにも最適です!
家事や育児の合間でも、ながらクイズとして活用してみてください。

私が出題するクイズはベテランWebデザイナーさんや新米Webデザイナーにとってなんでもない技術です。
でも、用途によってや使い方によっては一番早く作業ができたりします。だから今から勉強しておけば将来実務の時に役立つのではと思います。

理想は、「今勉強する時間が取りづらいけど、クイズやってたな。ちょっと勉強してみようかな」くらいで吸収してもらえれば幸いです。

今回の出題テーマは黒い部分をどうするかです。

Webデザインのお仕事でちょどよい素材が見つかりました。
でも、写真の影が気になる事ってありますよね?

フォトショップには様々な方法で影とかなんでも消しては書いてを繰り返して加工できます。
ただし、その品質は予算、時間、工数にあったものなのか?そこまでクオリティは必要なのかとか考えどこのものもあります。

写真素材そのものも邪魔な影とかしっかり飛ばすように撮影してほしいものですが、全てはそうはいかないので、私がよくやる時短処理をクイズ形式で紹介いたします。

中の人
私のデザインノウハウは手抜きに見えるけど状況しだいでしゃ時短になるよ!

Webデザインとフォトショップのクイズについて

毎週1問づつ繰り返して、楽しく知識を身につけるのが目的で1週目は新規でクイズを1問出題し2週目は同じ記事に解答を新規でクイズを1問出題します。10問くらいを公開できたら一気にクイズを確認できるまとめ記事を用意しようかなと考え中です。

それでは第7問をはじめます!

第7問で紹介したクライアントさんから別の素材を提供してもらいました。

中の人
あ〜この影(赤枠)が気になるぞ!

大きな声では言えないですが、毎回加工処理が必要な素材を用意してくれるWebデザイナー泣かせのクライアントさんっていますよね。

この素材をフォトショップの加工でもう少し黒を抑えて奇麗に修正したいです。
何を使えば上手く出来るかを考えてください。

A.レイヤーを複製しスクリーンから色を飛ばす。後はレイヤーマスクでいらない部分を消す。

B.黒を自動選択し色相彩度で白に近づける。

第7問のヒント

どちらの加工でも白くできます。なんなら、ぼかしツールで上から書き込んでも可能です。
私の記事はより簡単で時短できる方法を答えにする事が多いので、
「Webデザインの画像加工はどちらが簡単かつ効果的か」を軸に解答を導きだしてください。

第7問の解答を見てみよう!

正解はAです。
がっちり消えてるでしょ!

ちなみにBで処理するとこうなります。

ちょっと淵が残るのですね。
残った部分をなにかしらの加工やエフェクトで調整する形になり、
症状によってはかなり手間になってきます。

さらに深堀解説

スクリーンを使って影を飛ばすのですが、1発ではなかなか消えません。
頑固な汚れみたいな物です。

スクリーンにした同じレイヤーを何枚も重ねて完全に白色にしてしまいます。
で、レイヤーマスクでいらない部分を消して調整していきます。

ちょっとまめ知識

フォトショップの加工スキルで頻繁に登場するレイヤーマスクはやり直しがすぐ効くかなり便利な機能です。
レイヤーマスクの方法を詳しく知っておきたい人はこちらの記事でご紹介しています。

【未経験の人・初心者向け】photoshop(フォトショップ)の画像切り抜きツールを効率よく活用する方法

デザインのアドバイスがあればいいな

とお考えの人には、直接添削はできませんがデザインの勉強をtwitterの中でもアドバイスを発信しています。
どんな活動をしているのかは「新しいチャレンジ」の記事を確認してください。

さいごに
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

良い構成のCVエリアのアイデアをいろいろと考察してみる

2017.12.24

記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方

2018.08.26

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google