Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Sunday, June 08, 2014

Use Photoshop for Web Design Comps

figure_2_layercomps_layouts-WEB

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.

figure_1_layercomps_to_layers-WEB

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.

figure_2_layercomps_layouts-WEB

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.

SmartObjects

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.

figure_3_smartobjects-WEB

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.

figure_4_textrendering-WEB

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.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

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.