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. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. webデザイン

    ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

    HDRとはハイダイナミックレンジの略で最近ではiphoneカメラにも搭…

  2. webデザイン

    最近、123RFとゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

    つい最近までは画像素材を使用する際にはもっぱらiStockとFotol…

  3. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

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

  4. フォトショップ

    photoshopで顔や肌のテカリをうまい具合に抑える方法。

    顔や肌のテカリを抑えるためにphotoshopのブラシなどで塗ったりし…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フォトショップ

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