Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方creativememomemoWebデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。tips09811582こんにちは。Adobeのソフト一個だけあげるよと言われたら、迷わずPhotoshopを選びます。そんなPhotoshopラブの僕ですが、昔は正直苦手でした。PhotoshopはIllustratorと違って、調整しているうちにデータが劣化(どんどん汚く)なってしまうと思っていたからです。言うと、データが劣化しない方法を知らなかっただけなんですけどね、当時は大変でした。画像も一回小さくしてしまうと、次に大きくした時に荒れてまいますし、トーンカーブ等の画像補正も一回かけると二度と修正できませんでした。何回もトーンカーブかけてるとどんどん画像が汚くなっていくし...よく、サイズを間違えてて2,3時間の作業を一からやり直ししてましたねww今回は、そんな僕と同じ理由でPhotoshopに苦手意識を持っている人に、画像を劣化させずに編集/調整が可能なデータの作り方をメモしておきたいと思います。Photoshopはやり方次第で、限りなく劣化しないデータ作りが可能です。Photoshopをさわる上で、基本的なことなので、すでに知っていることだったり、自己流なのでもっと簡単なやり方があったりするかもしれませんが、その辺はご了承ください。それではどうぞ!!劣化させずに調整できるPSDデータの作り方目次1.劣化させずに調整できる「画像」の作り方2.画像を劣化させずに調整できる「画像補正」のやり方3.画像を劣化させず調整できる「フィルター」のかけ方1.劣化させずに調整できる「画像」の作り方Photshopを触ったことがある方なら分かると思いますが、JPGなどの画像データのサイズを一度小さくしてから再度大きくすると、画像が荒れてしまいます。一度小さくした時に、画像が圧縮されて色等の情報が無くなってしまう為です。これを防ぐ為に、画像をスマートオブジェクトにします。1-1.Photoshopで画像を扱う時は「スマートオブジェクト」スマートオブジェクトとは、ビットマップやベクトルなどの画像データを含むレイヤーのことです。スマートオブジェクトの一番の利点は(元の画像データを保持しているため)「非破壊編集」が可能だということ。通常であれば一度縮小した画像を拡大すると、小さくした段階でピクセルのデータが抜け落ちてしまうので画像が粗くなりますが、スマートオブジェクトなら元のデータを持っているので、拡大縮小しても元の画質のままです。1-2.スマートオブジェクトの使い方スマートオブジェクトにしたい画像レイヤーを開き、[レイヤー]メニューの[スマートオブジェクト]から[スマートオブジェクトに変換]を選択します。これでスマートオブジェクトが作成され、下図のようにレイヤーパレットのアイコンが少し変化し、スマートオブジェクトサムネールができます。スマートオブジェクト容量いついて便利なスマートオブジェクトですが、欠点もあります。それはスマートオブジェクトにするとファイルのサイズが大きくなること。マシンスペックが足りてるならばそのままでも良いですが、どうしても支障が出てくる場合は、大きさが決まった時点でラスタライズすることをおススメします。スマートオブジェクトを書けたファイルにさらにスマートオブジェクトをかけるとファイルのサイズが恐ろしいことになるらしいのでほどほどにした方がよさそうです。次に、何度でも調整できる画像補正のやり方について説明します。ここでは「トーンカーブ」などの色調補正を画像に直接かけずに、調整レイヤーを使います。2-1.「調整レイヤー」の使い方レイヤーパレットの[塗りつぶしまたは調整レイヤーを新規作成]ボタンをクリック&ドラッグし[トーンカーブ]などのかけたい補正項目を選択します。色調補正のダイアログが表示されたら、画像の補正を行い、ダイアログを閉じます。レイヤーパレットを見ると、調整レイヤーが新たに作成されているのが確認できます。調整レイヤーは複数作成して重ねることが可能です。このように、調整レイヤーを作っておけば、後で画像の微調整をしたい時に調整レイヤーを選択して画像を劣化させる事無く再度調整ができます。調整レイヤーは、調整レイヤー以下全てのレイヤーに色調補正をかけるという特徴があります。作業を行っていると、どちらかというと画像一枚ずつ色を補正したい!という時のが多いですよね?そんな時は、調整レイヤーを選択し、[レイヤー]メニュー→[クリッピングマスクを作成]を選択するか、パネルメニュー→[クリッピングマスクを作成]を選択します。下記の画像のような矢印のマークがつけば成功です。無料講座サイトちなみに画像補正の仕方については、WeblogさんとWebデザインレシピさんに超絶分かりやすい記事がありますので、参考にして試してみてくださいね。最後に、「フィルター」のかけ方です。フィルターとは「ぼかし」や「ノイズを加える」等の効果を画像に加えるものですが、普通に画像に直接かけてしまうと、やはり後々微調整ができません。そこでスマートフィルターの登場です。3-1.スマートフィルターでフィルターまでも調整可能!スマートフィルターはその名前の通り、スマートオブジェクトのフィルター版で元画像のデータを持っているので、劣化せずに何度でも調整が可能なステキなやつです。3-2.スマートフィルターの使い方スマートフィルターはじつはスマートオブジェクトにフィルターをかけると勝手になります。先ほどに書いた方法を行うか、フィルターをかけたいレイヤーを選択して、フィルターメニュー→[スマートフィルター用に変換]を選択してスマートオブジェクトにしてから、フィルターを適用してください。下記のようレイヤーの下にスマートフィルターができたら成功です。後々、フィルターを調整したくなったら(今回なら、ぼかしを調節したくなったら)、スマートフィルターの下のフィルター名(今回はぼかし(ガウス))を選択して何度でも微調整する事ができます。ウェビメモ最後に以上で、何度でも修正可能なPSDの作り方の説明を終わります。いかがでしたでしょうか?自分もそうなんですが、Photoshopって独学で学んでいる方が割と多いと思うので、意外と基本的な使い方で抜けというか、知らない事があると思います。今回の記事がPhotoshop初心者さんだけでなく、そういう抜けのフォローになれば幸いです。基本的なとこですが、知ってると知ってないとでは作業効率が全然違いますからね。押さえて効率のいいPSDデータ作りを心がけましょう。PCを2週間使ってみた感想Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方iPhoneで使える特殊文字を使って動物のかわいい顔文字を作ってみた最近覚えた便利すぎておしっこちびるかと思ったPhotoshopの小技/ショートカット11こ努力の過程は家庭が見つけてくれる話(ダジャレ)2018/08/18転職します2018/02/28Chromeで画像を縮小表示すると文字がなんだかぼやける現象を回避するTips2018/01/09SNSと検索の最適化を目指してWordPressで記事タイトルを投稿後一定期間で自動的に変わるようにしてみた2017/09/21【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう2017/05/08creativememomemoクリエイティブメモメモはWebデザイン技術や,クリエイティブでステキな作品を紹介するメモブログです。Ihata綺麗なものと、美味しいものをこよなく愛するひよっこです。名古屋でWebデザインしてます。あと個人でイラストなんかもやっています。