Simple Photoshop trick for nondestructive image adjustments
The web just wouldn’t work without photos. They add interest to layouts and, when used the right way, can keep eyes on the page. But I have yet to come across a perfect image. There’s always a color adjustment to make here or a resize to do there. The problem is that every time you adjust or resize, pixels are created, altered, or destroyed. The more changes you make, the more the image quality suffers.
Lucky for us, there’s a simple Photoshop trick (for version CS2 and newer) that allows you to make image adjustments nondestructively, i.e. without altering the original image.
The power of smart objects
A smart object layer acts as a reference, or pointer, to the original layer(s). When you adjust or resize a smart object, the transformation is always made in relation to the original image. That means the image quality of the smart object never degrades and the original image never changes, so whatever you do can be undone.
To take advantage of this indestructibility, you can either open an image as a smart object from the start or convert a layer in your mockup to a smart object.
Open an image as a smart object
- Click File > Open As Smart Object…
- When the Open dialog box appears, select the file you want and click open
Convert a layer to a smart object layer
This really comes in handy when you want to try out a design idea with an image or other rasterized layer in your layout.
The long way:
- Select the layer you want to convert in the Layers Palette.
- Click Layer > Smart Objects > Convert to Smart Object
The short way:
- Right-click the name of the layer you want to convert.
- Select Convert to Smart Object from the popup menu.
Regardless of which way you do it, the layer will change to show the smart object icon
Then you can resize, adjust, and filter till your heart’s content. To start over, just make a new smart object from the original image. Ta-da!
How about you? Got any tips or tricks to keep images looking their best as you work from mockup to finished website? Let us know in the comments.
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
3 Comments
Downsizing images in Photoshop has always been a problem for me relative to the final image quality. I have found that resizing the images using the bicubic option usually results in the best image.
thanks for trick..
Good tip, but if you’re in an older version of Photoshop, or don’t want to use Smart objects, these workflow ideas will help also -
1) Always keep a full-res PSD file with all your layers. When you need to save a low-res RGB jpg for the web, then flatten, resize/crop etc and SAVE AS jpg. Or if you need hi-res CMYK EPS for print, again, flatten, convert to CMYK, color correct, etc save as EPS. Put guides on the images for the crop if you need to remember what it was.
2) Use Adjustment layers where possible also, this allows you go back and make adjustments to things like levels, curves, etc as you work or to adjust to client demands.
3) Keep an original untouched version of the image on the bottom layer, then duplicate as needed for things like Highlight/shadows or other filters that directly affect pixels.