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. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本語のチュートリアルで…

    ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術…

  2. フォトショップ

    細部にこだわってポスターデザインを仕上げるためのディティールを詰めるコツ

    ディティールを詰める技術を覚える男性の怪しさが増すような画像を重ね…

  3. フォトショップ

    1クリックで完了っ!Photoshopで文字を「縦書き」する方法&英字・数字の応用編

    Photoshopで"すでに横書きで入力されている文字"を「縦書き」に…

  4. webデザイン

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

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

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 新規のWordPressブログをSSL化(http⇒http…
  3. 画像スライダーだけじゃない!WordPressのブログ記事が…

思考系のおもろい記事

ブログラ
  1. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. コピーライティング

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

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP