Chris Converse |
Sunday, June 08, 2014
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 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).
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.
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.
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.
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.
See how typography can vary across a range of devices and platforms.
Tags: Adobe Photoshop, Client Review, Comp, Design Comp, Front-End Development, Photoshop, Web Design
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.