A great tip that you can use even as a web developer (I get asked to resize images in our company every now and then) is that when using Photoshop to resize an image from one size to another, you will have to make sure that you ‘Convert to Smart Object’.
Let’s say you’ve created a new layer ‘Layer 1’, and you wish to resize this layer around. You make it small and save it. A few days later you or someone else works on your Photoshop Document (PSD) and resizes this layer to something else; let’s say that it’s made larger now.
Your ‘Layer 1’ seems a little pixelated, or even greatly pixelated.
The solution is to use ‘Smart Objects’!
Why use Smart Objects?
We’ve got two sides of the table — ‘Vector’ and ‘Raster’ layers.
The difference between the two is that Raster layers are used in Digital painting, whilst Vector layers are not.
If you need crisp quality (and aren’t painting), then Vector layers are your answer. Smart objects have a trait similar to Vector layers — and it has to do with resizing!
Simply put, Smart objects — unlike Rasterised layers — do not pixelate when you scale down and then wish to scale up, like the example earlier with ‘Layer 1’. That’s what makes them smart, among their other handy features.
Adobe.com has this to say for resizing with Smart Objects:
With Smart Objects, you can perform nondestructive transforms.
Raster layers are used along with the Eraser, Brushes, and for general digital painting. And in most cases as a Web developer/designer resizing a client logos, etc. you will almost never use rasterised layers.
So for majority of web developers/designers unless you digitally paint, kindly convert your layers/objects into Smart Objects.
How to identify a Smart Object
(1) Smart objects have this grey icon in their thumbnail:
(2) Smart objects will have this big gray X on itself when you are resizing them.
Raster layers will not have both of these.
Please see the quick vid below on how to Convert a layer/object into a Smart Object.
This is done by finding the layer/object within your Layer panel, right-clicking it, and selecting ‘Convert to Smart Object’.
You may notice that images you drag onto the Photoshop Document are automatically turned into Smart Objects. That’s a good thing, since you are usually not going to digitally paint that image.
Spread the message that we need a crisp web, free of unnecessary pixelated imagery, especially as we move on to denser-pixel devices.
Convert layers/objects to Smart Objects, and save the hassle of pixelating the future use of that layer/object.
Hope you’ve enjoyed this article! I’ve got another Tip of the Coin about Photoshop on properly using Fill Colours here. ❤️