On September 14th, 2017, we published revised versions of our Privacy Policy, Terms of Service and Website Use Policy and published a Cookie Policy. Your continued use of Lynda.com means you agree to these revised documents, so please take a few minutes to read and understand them.

Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Chris Converse |

Use Photoshop for Web Design Comps


Creating design comps for responsive and interactive states of a website can be time consuming, regardless of the design app you’re using. Fortunately Photoshop contains a number of production tools that help when creating web design comps—in particular SmartObjects, Text rendering options, and Layer Comps.

Layer comps

Layer Comps allow you to control all non-destructive aspects of layers you’ve created in the Layers panel. This means that each Layer Comp can turn layers on and off, move elements, and even change properties of special effects, such as strokes, shadows, or even gradients.


In the figure above, the active Layer Comp named “Sub Menu Hover” resets the position and visible layers in the Layers panel to match the desired layout for that interactive state (shown later in this article).

Watch a movie

Learn to capture multiple layouts with the Layer Comps feature of Photoshop.

Creating Layer Comps is as easy as setting the states of your layers in the Layers panel, and then clicking the New button in the Layer Comp panel. This captures the current settings or “state” of the layers panel into a new Layer Comp. Once your Layer Comps are created, you can activate them by clicking on each Layer Comp.


Watch a movie

Learn to export all your Layer Comps into a multi-page PDF file with a single menu selection to share with your colleagues and clients.


Photoshop provides many ways to work in a non-destructive way—meaning that changes you make to your designs can be adjusted later without having to re-create your artwork. SmartObjects let you reuse artwork within your designs as well, which is particularly handy for web design comps.

When you work with SmartObjects in Photoshop, the actual pixels, or data, are stored inside of an object. This means that each time we adjust (or transform) an object in your design, Photoshop re-renders that specific transformation on the main canvas but does not alter the original image. SmartObjects can be created from items you’ve copied-and-pasted from InDesign and Illustrator, or created from existing layers inside a Photoshop file.

Watch a movie

Learn how quickly you can cut-and-paste vector artwork form Illustrator into a Photoshop SmartObject.

Another valuable aspect of SmartObjects is the ability to efficiently reuse objects within the same composition. When you duplicate a SmartObject in the Layers panel, the data from the SmartObject is not duplicated—it’s created as a reference to the original SmartObject. This means that whenever you change an original SmartObject, all of the references of that SmartObject will be updated as well across your design. This gives you a very fast and effective way to update design elements within your composition.


Duplicating SmartObjects provides a fast and efficient way to edit and update design elements in your composition.

Text rendering

When working with live text layers in Photoshop, several anti-aliasing options become available. Anti-aliasing, or the “smoothing” effect of text edges, can be used to simulate how type will look in various web browsers. It’s helpful to visualize this for clients.


Browser text can look very different across operating systems and platforms. In the image above, the same CSS is applied to HTML across Microsoft Windows, Apple Macintosh, Apple iOS, and Google Android devices. In addition, browsers can also introduce their own effects on type edge, as we can see here in Internet Explorer, Chrome, Safari, Mobile Safari, Mobile Chrome, and Firefox.

Watch a video

See how typography can vary across a range of devices and platforms.

Tags: , , , , , ,

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.