DesignByNumbers

Despite the fact that there are many excellent WYSIWYG HTML editors on the market, when designing the layout of a website to show a client a pixel perfect comp designed in Adobe Photoshop is still one of the best ways to go. One limitation of Photoshop as a layout tool has always been the fact that scaling an image in a layout is a “destructive” editing process - once you scale it down you lose image data and scaling it back up again leaves you with a low quality image. Not anymore - enter the Smart Object.

Smart Objects are a feature introduced in Adobe Photoshop CS2. Essentially, they are a way of grouping data such as vector logos imported from Illustrator, or multiple layers into a single “Smart Object” layer that always references the original data when transformed. If you scale a Smart Object down, and then scale it back up again later it always has the highest possible resolution because all of the original data is intact. Typically, Smart Objects are created from multiple layers, but you can use this feature with a single image layer to increase your layout flexibility.

 TIP: An undocumented use of this feature is to convert single image layers into smart objects when working on a layout. This way, you can play around with your design, scaling your images down, and back up again without having to worry about a loss of quality.

This entry was posted on Thursday, May 3rd, 2007 at 9:27 am and is filed under DesignbyNumbers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.