creatersnest121

photoshopで画像ファイルを劣化させない為にすることまとめ


こんにちは!たかひろまーきゅりー参上でございます。
皆さん、Photoshop極めてますかー!?
Photoshopって画像編集においては万能のツールなんですけれど、
如何せん、クセがあるというか性質を理解していないと使いづらい面も多々ありますよね。

例えば画像を何気なく編集していると、元は綺麗だったはずの画像がいつの間にか劣化している・・・
そんな経験がある方も多いと思います。

また、フィルターをかけたりすると、後々直してくても直せないなんてことも・・・

今回は、そんなPhotoshopの性質を理解し、対処する方法をお教えします!

画像縮小→拡大編集に伴う画像の劣化。

編集前

今回は上のアイスクリームの画像を元に編集を行います。
この画像はまだ編集前なのでクリアな画質ですね。
しかし、これに何度か縮小拡大編集をすると・・・

編集後
あらら!かなりぼやけてしまいましたね!
今回は変化が分かりやすいようにだいぶ大げさにやりましたが、
このようにぼやける現象が起きます。
なぜこのような現象が起きるのでしょう?

ラスター形式。

そもそもPhotoshop上のデフォルトの画像はラスター形式と言って、
細かいドットが密集して構成されています。

縮小するとその下の画像より少ないドット数で下の画像と同じ画を表現しなければならないためオリジナルのドットの色情報が変更されます。

そして拡大すると、変更されたドットが足りない分のドットを補おうとするためにこのようにボヤけた状態になります。

ようするに、縮小した時点でデータが書き換えられ拡大して大きさを戻しても既に画像データとしてはオリジナルとは別物なのです。

では、このように画像の劣化を防ぐためにはどうしたらいいでしょうか?

スマートオブジェクトで解決。

スマートオブジェクトという言葉を既に聞いたことがある方もいるかもしれません。
スマートオブジェクトを適用すると画像の劣化を防げる理由は元データの情報を保持しているからです。

スマートオブジェクトの設定の仕方。

スマートオブジェクト
レイヤーパネル→右クリックで「スマートオブジェクト」に変換をクリックして完了です。

スマートオブジェクトスマートオブジェクトが適応されるとレイヤーパレッドのアイコンに上記のようなマークが付きます。

aa110
スマートオブジェクトに適用後、何回か同じように縮小・拡大を繰り返しましたがご覧の通り写真は元画像のままボヤけておりません!
画像を編集する時にはまずスマートオブジェクトをかけるのがオススメです!

後でやり直しが効く画像補正の方法。

aa111

画像補正をする際に、多くの人がイメージから画像補正のコマンドを選択しているのではないでしょうか。
それは決して間違ってはいないのですが、この方法だと画像に直接修正をかけているのでやり直しが効きません。

調整レイヤー。

調整レイヤー
レイヤーパネルの下にアイコンが並んだ箇所にて丸いアイコンがあります。
そこが調整レイヤーの新規作成を行える場所です。

調整レイヤー
上の写真のオレンジの枠の中のように表記されればオーケーです!
調整レイヤーから補正を行えば、後から微調整したいときに画像データを劣化させずに変更することができます。
また、複数補正をかけることができるので、基本的に調整レイヤーで補正をかけるのが正しいやり方と言えるでしょう。

フィルターをかける際の画像データ劣化を防ぐ方法。

Photoshopに慣れてくると、フィルターをかけたりして画像編集の幅を広げることができます。
しかし、フィルターも画像データに直接かけているので、後々の微調整が効きません。以下の方法を適用しましょう。

スマートフィルターを使用する。

スマートオブジェクトのフィルターバージョンです。
スマートオブジェクト同様、画像データを保持することで変更を可能にしています。

aa1201

フィルター→スマートフィルターで完了です。

スマートフィルター

レイヤーパネルにはこんな感じに表示されます。ダブルクリックすることで編集可能です。

おわりに

いかかでしたでしょうか?
画像の劣化がなぜ起こるかわからなかった方も今回の記事で理解していただけたら嬉しいです。

Photoshopは初めはなかなかクセに戸惑うものですが、慣れてくると画像編集の最高のパートナーになります。
今回の記事のように性質を理解していけば、すぐに慣れますよ。

それでは引き続きお勉強頑張ってくださいね!
また会う日まで!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【初心者脱出!】ワンランク上のデザインを目指す人のためのHTMLコーディング術