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. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. webデザイン

    意外と知らないっ、、Photoshopで文字の輪郭(境界線)だけに影を付ける方法

    Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外…

  2. 3分の話

    クリエイターとは何ぞや!?ということを真剣に考えてみた結果、ちょっとした独り言で終わった話し。

    響がなんかカッコ良いっ!でも「自称クリエイターです。」と、自称を付けて…

  3. webデザイン

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

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

  4. フォトショップ

    photoshopで上手なカラーハーフトーン設定をすると面白い印象になりますよ。

    ポップ調、アニメ、サイケデリックなどでよく用いられるドット柄はphot…

  5. フォトショップ

    photoshopでアンディ・ウォーホル風なイラストを作ってみよう。

    ポップアートの旗手と呼ばれるアンディ・ウォーホル風なイラストをphot…

  6. webデザイン

    境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

    フォトショップで画像を合成させるためには、さまざまな切り取り方法がある…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. コピーライティング

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP