^Simulate HTML Text in Web Mockups

Perhaps the most common use of Photoshop text currently is in web development, because for web designers, Photoshop is often both the design and page layout program.

Text created in web design mockups typically falls into one of two categories—text to be made into a web graphic or text that will ultimately be rendered by the browser as HTML text. It is the latter category that this tip applies to, because the former (text to be made into a web graphic) isn't affected by HTML.

In particular, many web designers create detailed design mockups that are presented to the client for sign-off before the code development process begins. Because of the nature of HTML text and how it is rendered differently by various browsers and operating systems, there are certain things you can do in Photoshop to more accurately simulate it. The more accurate your mockup is, the happier the client will be when the final product looks just as they expected it to.

TRY IT To accurately simulate HTML text in Photoshop, open a web design mockup and activate one of the type layers containing text that will ultimately be rendered by the browser. Then, check to make sure you have addressed each of the following issues:

• Turn off anti-aliasing, because text rendered by the browser is never anti-aliased (in other words, it always has hard edges). Select the type in question with the Type tool and choose None from the Anti-Aliasing Method drop-down menu in the Options bar or the Character palette.

• Mac designers: Set the font size between 1 and 2 pts larger, because Windows text typically displays larger than that on a Mac. In other words, if you plan to use 10 pt text in HTML, set the font size to 12 pt in your mockup to accurately show how the text will likely display on a Windows machine.

• Windows designers: Avoid font sizes below 9 pt, because text on a Mac typically displays smaller than that on a PC and can become unreadable.

• Use the appropriate text, link, and visited link colors.

• Use single-spaced text, because paragraphs displayed in HTML are single-spaced by default. In other words, if your font size is 12 pt, use the default leading of 14 pt. Likewise, if your font size is 10 pt, set the leading to 12 pt.

• Avoid using Photoshop's built-in underline feature when simulating HTML text links under 10 pts in size. It creates an underline that touches the bottom of the text, even though HTML link underlines never touch the bottom of the text. If you need to add an accurate underline to small text, you can use the Pencil tool with a single-pixel brush to draw one in on a new layer. (Sorry!) Or, you can use the inaccurate underline and alert the client that it will display accurately when the text is ultimately rendered by the browser.

• Avoid using special formatting techniques, such as adjusting the leading, kerning, or tracking in the Character palette, when simulating HTML text because these aren't available in traditional HTML. If you do choose to use these formatting techniques by employing Cascading Style Sheets on your site, be sure to let your client know they won't be visible to viewers of older browsers.

Photoshop Secrets

Photoshop Secrets

Are You Frustrated Because Your Graphics Are Not Looking Professional? Have You Been Slaving Over Your Projects, But Find Yourself Not Getting What You Want From Your Generic Graphic Software? Well, youre about to learn some of the secrets and tips to enhance your images, photos and other projects that you are trying to create and make look professional.

Get My Free Ebook

Post a comment