webデザイン

【初心者必見!】Photoshopで画像を劣化させずに拡大・縮小するにはスマートオブジェクトに変換しよう

Photoshopで画像のサイズを拡大すると画質が劣化してしまいます

そのため、あらかじめカンバスサイズより大きめの画像素材を用意して、一旦縮小したら拡大しないようにいちいちレイヤーを複製しながら、慎重に作業を進めている人もいるようです。

そんなときは、Photoshopのスマートオブジェクトを活用することで、画像を劣化させることなく縮小・拡大を繰り返すことができます

ここでは、そのまま縮小・拡大をした場合と、スマートオブジェクトに変換してから縮小・拡大を繰り返した場合の比較から解説するので、不要であれば前半部分は飛ばしちゃってください。

まず、サイズ変更したい画像をphotoshopで開きます。開いた画像が”背景”となっていて編集できない場合には、レイヤーサムネイルをダブルクリックしてOKを押すとレイヤーに変更できます

enlarge01

移動ツールで画像を縮小します。

enlarge02

縮小した画像の変形を適用してみます。

enlarge03

続けて、元のサイズまで拡大して適用します。

enlarge04

すると、あきらかに画像がぼやけて劣化してしまいました

enlarge05

スマートオブジェクトに変換する

縮小・拡大を繰り返した際に画像を劣化させないためには、サイズを変更したい画像レイヤーを右クリックして、スマートオブジェトに変換しておきます

enlarge06

スマートオブジェトに変換されると、レイヤーサムネイルに ↓ のようなマークがつきます。

enlarge07

先ほど同様に移動ツールで画像をぐーっと縮小してみます。

enlarge08

元のサイズに戻して適用します。

enlarge09

すると、先ほどとは違い画像の劣化が見られません(ちなみにここでは縮小・拡大を10回ほど繰り返してみました。)

enlarge10

ヘッダーやバナーデザインの際に威力を発揮

実際には、一枚の画像を拡大したり縮小したり繰り返すケースはほとんどありませんが、ヘッダーやバナー、ポスターなどをデザインする際にスマートオブジェクトはその威力を発揮します

enlarge12

レイアウトやサイズの微妙な調整を繰り返して適用しているうちに・・

enlarge13

気ずかないうちに徐々に画像が劣化してしまうことがあります。(まれにこのような劣化を気にせずに完成としてしまう人もいるようですがOUTっ!ですね。)

head34

縮小する際には、必ずスマートオブジェクトに変更してからサイズ変更する癖をつけておきましょう

enlarge15

これで気兼ねなく縮小・拡大をしながら調整することができます。

enlarge16

サイズの微調整を繰り返しても、画像の劣化なくしっかりとレイアウトを組むことができました

head33

スマートオブジェクトのデメリットって?

サイズを変更しても劣化しないなら、「常にスマートオブジェクトにしておけばいいじゃないか?」という発想になるかもしれませんが、スマートオブジェクトは直接画像を編集できないというデメリットがあります。

例えば、色調補正をしようと思っても、”各調整の項目がグレー表示”になり編集ができません。

enlarge20

サイズ調整が不要になり、画像を直接編集したい場合にはスマートオブジェクトに変換したレイヤーを右クリックしてレイヤーをラスタライズします

enlarge21

これで、直接編集ができるようになりました。

enlarge22

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

  2. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ …

  3. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  4. webデザイン

    photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

    スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそう…

  5. webデザイン

    素人っぽいWEBサイトに見えてしまう4つのロゴデザインの特徴と誰でも簡単にできるPhotoshopと…

    ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用し…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP