Layer Styles are nothing new. They’ve been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.

Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter. You will find more useful Photoshop techniques and tutorials in our hand-picked selection, Best of Photoshop on Smashing Magazine.

Download the source files (.zip, 1.6 Mb).

The Bump Map Effect

“Wait, what?” you exclaim, “There’s no bump map effect in the Layer Styles menu!” That’s true, but by combining Pattern Overlay and Bevel and Emboss, we can achieve a textured, bump-mapped surface with a controllable light source.

This technique requires two images: one for texture and color, and the other to serve as a depth map. The depth map needn’t have any hue because it determines depth based on a composite value, black being the lowest, white the highest. In some cases, you may be able to use the same image for both, but in our example we’ll use completely different ones.

Step by Step

1. We’ll start by creating our bump map pattern. Open the diamond-plate.psd file.
2. Inside you’ll find a number of white shapes on a black background. Create a pattern from this document: Select All (Cmd/Ctrl + A), then “Edit” → “Define Pattern.” Name it “diamond plate bump map” and click okay.

   
   Creating the diamond plate pattern.

3. Now, open the start.psd file.
4. Repeat step 2 to create a pattern from the “patchy gray” layer. This will be used later to add texture to our background.

   
   Defining the texture pattern.

5. After creating the pattern, delete the “patchy gray” layer. It’s no longer needed.
6. Use the Rectangular Shape tool to create a shape layer about 20 pixels wider and 20 pixels higher than the canvas. Change the color of this layer to a dark, brownish, chromatic gray.

   
   Creating the shape layer for our background.

7. Be sure that the shape layer doesn’t have any Layer Styles already applied to it (Photoshop will often apply the most recent Layer Style automatically). Then, begin the new Layer Style by adding a Pattern Overlay.

   
   Adding a Pattern Overlay effect.

8. Choose the “patchy gray” pattern from the pattern picker, and change the Blend Mode to Soft Light. This will add the texture to our background layer.

   
   
   Adding a pattern overlay effect.

9. Next, add a Bevel and Emboss, along with the Texture effect. This time, change the Texture effect’s Pattern to the “diamond plate bump map” pattern created in step 2. We now have a grungy diamond plate background.

   
   
   Applying the Bevel and Emboss texture effect.

10. As with most Layer Style effects, the default values are rarely ideal. By tweaking the Bevel Type and Size, Gloss Contour, Highlights, Shadows and Light settings you can achieve some dramatic results.

    
    
    Tweaking the Bevel and Emboss settings.

11. With a few extra effects, you can shape the background layer even more. The example has a Gradient Overlay to simulate reflected light by darkening certain regions of the image.

    
    
    Using the Gradient Overlay to darken some regions.

12. You may notice that the highlights from the Bevel and Emboss filter all seem to have the same value. This is because the Bevel and Emboss effects are very high on the Layer Style’s stacking order. To darken the highlights that lie outside our main light source, simply paint a Layer Mask using the Brush tool.

    
    Painting a mask to increase the appearance of light in the background.

We now have a textured, bump-mapped background that is completely dynamic; everything about it can be modified easily from within the Layer Styles menu. Consolidating complex imagery into one dynamic layer like this can reduce layer clutter dramatically and allows you (and whoever else may be using the file) to easily find and modify things. Now, let’s move on to creating our icon.

3-D Modeling

By combining some interior effects, we can use the Layer Styles menu to create simulated 3-D objects: great for icons, buttons and other interface objects. We’ll now model the base of the round icon in the example image using a single layer.

Step by Step

1. Begin by creating a circular shape layer with a rich red fill.

   
   Creating the shape layer for the icon’s base.

2. As is often the case when modeling a 3-D shape, let’s begin by adding a Gradient Overlay to our Layer Style. A white-to-black Radial-styled gradient set to Linear Burn works best for our implementation. Be sure the white area of the gradient is at the origin.

   
   Adding Gradient Overlay set to Linear Burn.

3. We now have a dramatically shaded sphere with a head-on light source. By decreasing the opacity of the gradient, we can flatten the shape to a more concave button.

   
   Reducing the Opacity for a subtler effect.

4. Let’s also move the direction of the light to the upper-left. While leaving the Layer Style menu open, move the mouse over the image itself (the Move Tool icon should appear). Simply click and drag the epicenter of the gradient to the upper-left of the shape layer.

   
   Repositioning the gradient within the Layer Styles menu.

5. While Bevel and Emboss may seem like more logical tools, you can often get a cleaner, more customizable beveled look by using a combination of other effects. First, add a black Inner Glow, set to Multiply. Adjust the Choke, Size, Opacity and Contour until you have a softened edge inside the shape.

   
   
   Adding a Glow to darken the edge of the base.

6. Like for any well-rendered spherical surface, we have to add some reflected light in our shadow region. This is easily achieved with the Inner Shadow effect. Change the color to white and the Blend Mode to Linear Dodge. Adjust the angle so that it appears in the lower-right of our shape. Tweak the Contour, Distance, Size and Opacity to create a subtler effect.

   
   
   Adding subtle reflected light using Inner Shadow.

7. To enhance the feeling that the shape is part of the document’s “environment,” we can add some effects to interact with the background. Drop Shadow is usually the easiest tool to use for this. Massage the settings until everything feels right.

   
   
   A simple Drop Shadow goes a long way.

8. Using the Outer Glow effect, we can simulate the reflected red light that our background image would absorb if this were an actual setting. Change the glow’s color to a darker red, and change the Blend Mode to darken. Again, work with the Size and Opacity settings to create the desired effect. This is one of those effects that, when used correctly, no one should notice because it just looks natural.

   
   
   A red Glow to add more “environment.”

Please notice that Layer Style gradients can’t be dithered, which can make them lower quality than their Gradient Layer and Gradient Tool counterparts (— Marc Edwards).

Diffuse vs. Specular Light

Now, our icon reflects a simulated diffuse light, which gives it the look of a matte-finished surface. If you prefer a glossier appearance, you can easily create a specular highlight using (what else?) Layer Styles.

Step by Step

1. Duplicate the current shape layer (Cmd/Ctrl + J).
2. Clear the new layer’s Layer Styles: right-click the layer in the Layers palette and select “Clear Layer Style.”
3. We also need to modify the shape of the layer to give the reflected light a sharper edge. Using the Direct Selection Tool (A), select the shape path in the layer’s vector mask. Copy it (Cmd/Ctrl + C) and paste it (Cmd/Ctrl + V) above the current path. Change this path’s mode to Subtract from shape area (-). Then move the shape down and to the right to create a crescent shape. You may also want to make the negative shape larger to create a more natural inside curve: simply Free Transform (Cmd/Ctrl + T) and then scale the shape up.

   
   Modifying the shape of the specular highlight.

4. Because we need this layer only for its Layer Styles, we can set its Fill Opacity to 0%.

   
   Dropping the layer’s fill to 0%.

5. We also want this layer to inherit the Layer Styles of the underlying layer, so create a Clipping Mask on the new layer (Cmd/Ctrl + Option + G).

   
   Creating a Clipping Mask to inherit effects.

6. Now, begin the Layer Style with a Gradient Overlay. Use the default black-to-white gradient, and set the Blend Mode to Screen. Knock the Opacity down to about 50%, and change the angle to about 115°. You may need to change the positioning of the gradient, which you can do by clicking and dragging inside the document window, just as you did in the 3-D modeling section.

   
   
   Setting the Gradient Overlay to Screen.

7. This is a good start for the highlight, but it still looks somewhat unnatural. Using a transparent inside stroke, we can shrink the perimeter of the interior effects. Add a Stroke effect to the layer and drop its opacity to 0%. Change the position to Inside, and work with the size slider until the highlight begins about where the darker inner glow ends on the underlying layer (the example image uses 5 pixels).

   
   
   Using a 0% Inside Stroke to shrink the perimeter of interior effects.

8. To add a more dynamic look to your highlight, you can add a white Inner Shadow set to Screen with a custom contour. Tweak the distance and size settings to finish off the effect.

   
   
   The Inner Shadow creates a more dynamic specular reflection.

X-Ray Vision

Step by Step

To create the die-cut type inside our icon, we could turn the text layer into a shape layer and use the paths to mask away areas from the base. However, this would result in degenerated content; we would no longer be able to modify the type. Instead, we’ll simulate a mask using the Knockout Blending Option. This will also allow us to apply custom effects to the cut-out area.

1. Create a new Type Layer with the text “fx”, and position it within the circular base. The example uses 120 point Garamond Bold Italic.
2. Drop the Fill Opacity to 100%.
3. Begin your Layer Style by adding an Inner Shadow. Increase the size, and increase the opacity to about 90%. You may also want to modify the distance and contour to your liking.

   
   The beginnings of the die-cut effect.

4. We now have the beginnings of a die-cut effect, except that the text still shows the base below it. To fix this, go to the Blending Options section in the Layer Styles menu. Change the Knockout from None to Shallow (this setting samples pixels from the layer directly beneath the current layer’s group). Because our text layer doesn’t belong to a layer group, it samples instead from the Background layer. (Using a Deep Knockout would always sample from the Background layer, regardless of the layer’s group.)

   
   
   Shallow Knockout samples pixels from the layer directly beneath the current layer’s group.

5. To get the text layer to sample from our diamond plate layer, start by clicking “Okay” to close the Layer Style menu. Select the text layer and both of the buttons that make up the base, and group the layers (Cmd/Ctrl + G). As you can see, the “fx” shapes are now drawing pixels from the textured layer directly below the new layer group.

   
   Grouping the icon so that the Knockout samples from the diamond plate layer.

6. The knockout effect is very convincing, but the type still feels detached from the base. Let’s add a beveled effect to simulate the surface quality of the base. Start by adding an outside Stroke with a size of 2; then drop the opacity to 0%. This doesn’t achieve anything but is necessary for the next step.
7. Now add a Bevel and Emboss effect. Change the Style to Stroke Emboss and Technique to Chisel Hard. This will apply the bevel’s lighting effects within the stroke area created in the step above. Modify the settings to achieve a subtle and smooth edge.

   
   
   Adding a Stroke Emboss.

8. Let’s take the bevel one step further by adding a thin specular highlight to the bottom-right edges of the shape. We can use a white Drop Shadow effect, set to Screen, to add a bright highlight just at the edge of the bevel. You’ll want to modify the distance and size to give the highlight a sharp edge.

   
   
   Adding a thin specular highlight using a Drop Shadow.

9. Finish off the Layer Style with more shading within the die-cut letters by adding a simple black-to-white Gradient Overlay, set to Multiply.

   
   Finishing off the die-cut.

Quick Tips

Despite frequent misuse, the Layer Styles menu really is a powerful tool that every designer should learn to work with. Not only does it provide a level of speed and control not easily found through other means, but it provides invaluable flexibility. Our example shows how a multi-dimensional icon and a completely dynamic background can be consolidated within four simple Shape layers, allowing them to be easily modified, reused and repurposed throughout your designs. Below are a few extra tips to remember when working on your next project.

Effects Stacking Order

You may have noticed sometimes that an effect isn’t visible when another effect is being used. For example, a Color Overlay seems to override a Gradient Overlay. This is because of the Layer Styles Stacking Order. Just as with the Layer’s Palette, one layer will cover another that is lower down in the stacking order. Unfortunately, the Layer Styles menu doesn’t allow you to rearrange the order of effects. One way around this (even if you sacrifice the ability to edit) is to use Create Layers, which turns all of your Layer Style effects into actual layers that you can move.

Interior Effects Stacking Order:

• Stroke
• Bevel and Emboss
• Inner Shadow
• Innger Glow
• Satin
• Color Overlay
• Gradient Overlay
• Pattern Overlay

Exterior Effects Stacking Order:

• Stroke
• Outer Glow
• Drop Shadow

Non-Color-Specific Styles

Though not always possible, you may want to use black, white and grays for your effects. Using monochromatic colors in conjunction with the proper Blend Mode allows you to create styles that are non-color-specific, meaning you can modify the color of the actual layer, and your Layer Style will update appropriately.

Scaling Effects

There may be times when you’ve created a Layer Style that looks great at the original size, but when the shape is increased or decreased, your beautiful style is destroyed. Fortunately, Photoshop provides a method to adjust styles that are out of whack. Simply choose Layer → Layer Style → Scale Effects, and then input the percentage you need.

Inconspicuous Menu Options

A number of hidden commands are available to you from within the Layer Styles menu. Depending on the effect, you will have access to either the Hand tool or the Move tool by simply mousing over the document window. The Hand tool allows you to move the document around just as you would outside the Layer Styles menu, and the Move tool repositions the current effect and updates the settings automatically. When using the Move tool, you can still access the Hand tool by holding the space bar. While using either of the tools, you can zoom in and out by holding Space + Cmd or Space + Option respectively. Don’t forget, as with most other menus in Photoshop, holding “Option” will change the “Cancel” button to a “Reset” button, allowing you to undo any changes.

Thanks to Marc Edwards and Ricardo Gimenes for their assistance in editing the article.

(al)

© Thomas Giannattasio for Smashing Magazine, 2011.

  

No matter how brilliant a website’s design, no matter how elegant its navigation, sooner or later visitors will decide whether to take action because of something they read. In the end, the effectiveness with which a website converts visitors hinges on words. If a new website is going to hit all the right notes, its content must be just as well crafted as its design and programming. However, as you might imagine, there are many ways to go wrong with content in a Web development project.

Image Credit

The errors discussed in this article have the potential to undo a website and are issues that I run up against time and time again in my nearly 12 years of producing Web content. Half the battle in avoiding these traps is simply recognizing them: all too often, content is handled as an afterthought, hurriedly completed to meet a project’s deadline. I hope these content tips will help you stay ahead of the game and build a better website in your next project.

Error #1: Writing Inwardly

Having worked in-house for many years, I’ve fell victim to the inward-focus syndrome on many occasions. It’s easy to do. You spend all day dealing with the intricacies of your products and services. You’ve made a huge intellectual and emotional investment in every product innovation and point of differentiation. You love thinking about your products, you love improving them, and you love talking about them. It’s only natural that you want to shout from the rooftops and tell the world your product’s story in all its splendor.

Problem is, the rest of the world isn’t interested in your story. Customers don’t have time to admire your greatness. They’re too busy searching for ways to make life better for themselves. A high-level Web page answers one question of the reader above all: What’s in it for me? To illustrate, we’ll stick with products, although this applies to other types of pages as well.

It’s not about you.

A well-written category-level product page talks a bit about features, a little more about benefits and a great deal more about the experience. This last element is especially important and exactly where most pages come up woefully short. Let’s use a mundane example of this principle in action by considering a hypothetical Web page for a packaging machine:

Feature: Up to 100 cycles per minute.

Benefit: Faster production.

Experience: Getting more product out the door per shift means you’ll blow away your productivity goals and be a hero. You might even get a promotion.

A typical Web page written about this machine would be 80% features and 20% benefits. However, if I were writing it, I’d budget 50 words on the features, 100 words on the benefits and 150 words on the experience.

Note:

1. Setting a “word budget” forces discipline. Not only that, it relieves the anxiety over having to determine how to approach each individual product page, thus eliminating one of the biggest causes of delay in Web development projects.
2. Focusing on the experience forces you to think about the target audience of the page in question. The experience I described speaks to an operations person. If my audience is made up of C-level executives or purchasing agents, then I would need to describe a completely different experience. If I’m writing for all three audiences, I may have to rethink my word budget. In any event, having an audience in mind prevents a Web page from devolving into that cursed, watered-down, “everything for everyone” messaging that says absolutely nothing.
3. The purpose of a high-level page is to get people interested in the product. Once they’re interested, they may crave more information about features and benefits. Perfect. Tell the long version of your story on a detail-heavy product sub-page. Companies need not neglect features and benefits; they just need to suppress the urge to hit visitors over the head with them the minute they walk through the door.

To see how this plays out in real life, consider this conversion optimization case study, documented on ABtests.com. A firm achieved a 200% increase in conversions by replacing feature-oriented copy with benefit-oriented copy. The high-converting page focuses on what the applicant wants, rather than what the service (DesignCourse.com) offers:

• “Become an amazing designer.”
• “Start earning real money.”
• “It’s fun and exciting.”
• “No tests, no hassles.”

If you’re still not convinced, listen to legendary copywriter John Caples, who is quoted in Made to Stick (page 179) by Chip Heath and Dan Heath:

Caples says companies often emphasize features when they should be emphasizing benefits. “The most frequent reason for unsuccessful advertising is advertisers who are so full of their own accomplishments (the world’s best seed!) that they forget to tell us why we should buy (the world’s best lawn!).” An old advertising maxim says you’ve got to spell out the benefit of the benefit. In other words, people don’t buy quarter-inch drill bits. They buy quarter-inch holes so they can hang their children’s pictures.

Quick Tips for Writing Outwardly

• Before you start writing, collect feedback from customers and prospects. Ask them why they buy from you, why they don’t, and how doing business with you has affected them.
• Start with an outline. Associate every feature with a benefit and every benefit with an experience.
• Have a customer read a draft and then explain to you why they would want to buy the product. If the customer “gets it,” you’re a star.
• Do the same thing with a person who knows nothing about your product and industry. If that person gets it, you’re a rock star.

Error #2: Burying The Lead

If they can’t figure it out, you’re dead.

Websites are a poor medium for subtlety. Visitors decide whether to stay on your website within a few seconds. If you can’t communicate why a page is important to them immediately, your conversion opportunities will vanish. Look at the two paragraphs below. Which conveys your most important message more quickly?

Your most important message is here., sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Or:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate your most important message is here. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Online marketers like to sneer at newspapers, but we can learn a lot from print journalists. For instance, they don’t bury the lead. To illustrate, here are a few leads I recently pulled from the Wall Street Journal:

• “Companies cranked up hiring in April to the fastest pace in five years…”
• “European markets snapped a three-session losing streak as gains in the banking sector and better-than-expected US jobs data for April sparked a rally.”
• “Women may have fared better than men during the recession, but they are not making up lost ground as fast as men in the recovery.”

Now look at your Web pages. How do your leads stack up? Are you leading with the main point? Are you giving visitors a reason to read further? If an in-house writer is not familiar with Web writing techniques, they may approach the project as if they were writing a novel, assuming that visitors will read their new website from start to finish.

This assumption is disastrous. People skim and scan Web pages, their eyes bouncing around like pinballs. For any given Web page, visitors are likely to read the headline and the first few lines of text; beyond that, any body content they read is gravy. Expecting someone to read an entire page of content sequentially from beginning to end is wishful thinking, period. The most important words on the page must be the easiest to find, read and comprehend.

Quick Tips for Unburying the Lead

• Before writing, ask, What is the key takeaway I want visitors to have after they visit this page? That’s your lead.
• Highlight your lead idea in a bold font. This is especially helpful when you can’t work it into the first sentence.
• Use plain language.
• Keep your most important points above the fold, as sub-headings, as the first sentence of a paragraph and as bullet points.

Error #3: Mediocre Meta Material

Meta titles appear in browser tabs.

Some of the most important text in a Web document isn’t the on-page content at all. Certain meta elements have an enormous impact on the user experience, brand awareness and conversion. Meta elements are bits of HTML code that are read mainly by search engine robots. However, two meta tags in particular speak to humans as well, and mastering them is critically important for copywriters.

• Meta Title
  The meta title describes the subject matter of the page and is ideally 65 characters or fewer. Visitors see the meta title in their browser tab and in search engine results; it is the most important piece of information that Google and other engines read on a given page.
• Meta Description
  The meta description, ideally 155 characters or fewer, is a snippet of text that is displayed under a link on a search engine results page (SERP). The meta description has little if any SEO value but is important for conversions.

Meta Titles

Because Google values meta titles so highly, including primary keyword phrases in them is imperative, preferably towards the beginning of the title. For human readers, a title tag should clearly and straightforwardly describe the nature of the page. In addition, the tag can also carry a branding message.

Here is an example of a strong meta tag, taken from the services page of a client of mine:

Enterprise-Level Credit Card Processing, Merchant Accounts | BluePay

At 68 characters, we’ve gone slightly over our recommended maximum. But having branding keywords (i.e. BluePay) at the end is OK: Google may truncate the last few characters, but visitors will see the branding message in their browser tab, especially if they bookmark the page. The title tag will further extend brand awareness if the visitor tweets the page or likes it on Facebook:

Title tags appear in Facebook link posts.

Meta Descriptions

Meta descriptions appear in search engine results under the page’s title.

A meta description can set your page apart from others on a SERP. Here are seven tips for crafting a good one.

1. Don’t overuse keywords. This will make your description look spammy. For example, “We have promotional coffee mugs, custom mugs, custom coffee mugs, and custom mugs for coffee.”
2. Don’t use multiple exclamation points!!!! Excessive punctuation can be interpreted as aggression. It pushes people away.
3. Avoid extravagant claims. They undermine your credibility.
4. Include an incentive to click through to your page:
   • “Order one, get one free.”
   • “10% off your first order.”
   • “Learn how our service can reduce operating costs up to 15%.”
5. Focus on the user benefits of your product or service.
   • Bad example: “High R-factor insulation.”
   • Better example: “Insulation to keep your home warm and toasty.”
6. Mention your location if you are a local business. This helps searchers instantly connect your business to their need.
7. Establish your credibility:
   • “In business since 1965.”
   • “BBB accredited.”
   • “Over 5000 satisfied customers.”

(Whereas title tags are always displayed, description tags are not. Today, Google doesn’t always pull meta descriptions into its SERPs; instead, it might excerpt on-page content related to the user’s search terms.)

Quick Tips for Meta Magnificence

• If an SEO is working on your project, have them generate title tags based on their keyword research, and then tweak as needed.
• If you do not have an SEO, back up a step and reflect on why you are building the website. I believe that an unoptimized website is not worth building.
• Title tags should be consistent in style and form to enhance the user experience. Meta descriptions need not be consistent at all.
• Because of character limitations and the need for concision, writing these tags can be time-consuming. Remember, though: you don’t have to achieve perfection for launch. Tags can be changed at any time, and analytics experts often suggest that they should be.

Error #4: Saying Too Much

Brevity is the soul of conversion. Find out why.

Error #5: Weak Or No Calls To Action

Strong calls to action from our company’s website.

Assuming that you’ve written a brilliantly persuasive page, it’s still next to worthless without a strong call to action (CTA). It’s flat out wrong to assume that visitors will be so inspired by your brilliant copy that they will pick up the phone and call, or fill out an online form and beg you to contact them.

In the real world of Web marketing, visitors want to be led. If they have to stop and think about how to take the next step, you’ve already lost them.

CTAs generally fall into one of four types, listed here in descending order of commitment:

• Place an order;
• Enroll, subscribe, enter;
• Get a quote;
• Learn more.

Recognizing the need for a call to action on every page is step one. Matching the right CTA to the page is step two. High-level product category pages normally call for a “soft” CTA, such as “Request more information” or “Schedule a consultation.” In contrast, detailed product-level pages require a “hard” CTA, such as “Order now.”

A call to action must be clear and compelling:

• “Order now to save 15%,”
• “Get your artist’s rendering within 24 hours,”
• “Learn the 5 secrets to permanent weight loss.”

Calls to action are strengthened by:

• Testimonials: It’s worked;
• Credibility statements: It’s reliable;
• Warranty or guarantee: It’s risk-free;
• High value: It’s worth having;
• Urgency: It’s now or never.

Unfortunately, the calls to action on business websites often seem like afterthoughts: vague, lame and boring. Remember: customers want to be led. Effective leadership requires more than “Call for more information.”

One last vital point about CTAs: having a primary and secondary CTA on each page is often a good idea. A prospect may not be ready to order, but they may be willing to download a white paper that they would read and remember. Today’s white paper could be tomorrow’s conversion.

Five Case Studies that Illustrate the Power of Strong Calls to Action

• Hyundai increased conversions by 62% by adding SEO text, bigger pictures… and a CTA.
• RIPT Apparel added “Limited 24-hour availability” to its CTA and increased sales by 6.3%.
• Notify, by the Weather Channel, redesigned its landing page to focus on the CTA. Conversion rates increased by 225%.
• Express Gold Cash changed its CTA from “Submit” to “Request a pack” and improved its conversion rate by 47.7%.
• Natural Air increased conversions by 590.6%(!) by adding a CTA with pricing.

Two Tips for Strong Calls to Action

• The main reason why firms don’t include strong CTAs on their website is that they don’t have them. Before getting too far into website development, conduct a brainstorming session to begin the process of identifying action steps that website visitors would be eager to take.
• For CTAs to be effective, design and content must be joined at the hip. The position of an arrow, the font and color of a button can make or break a call to action. Don’t segregate your writers and designers. We’ve found that a team approach to Web projects fosters continual interaction between all contributors and results in a far better product all around.

Keep Your Eye On The Conversion Ball

In case you haven’t noticed, or you skimmed to the end, as Web readers often do, the errors and fixes discussed above revolve around one thing: conversion. One of my favorite quotes comes from advertising icon David Ogilvy. He said, “If it doesn’t sell, it isn’t creative.” Ogilvy, arguably the greatest copywriter who ever lived, understood the primacy of persuasion. You may prefer a soft sell or a hard sell, but if your Web page isn’t selling, why is it there?

Resources And Tools

• My favorite character counter, handy for composing title tags and meta descriptions.
• Test readability with this awesome online testing tool.
• Detailed information on content-related SEO topics.
• Twelve pithy journalism-inspired writing tips for the Web.
• Modern words of wisdom: for spot-on copywriting technique, read Don’t Make Me Think by Steve Krug.
• Classic words of wisdom: perhaps the greatest “how to” copywriting book of all time, Tested Sentences That Sell by Elmer Wheeler is available online.

(al) (il)

© Brad Shorr for Smashing Magazine, 2011.

  

Designing for the future Web. That’s a big subject. Where do we start when we’re talking about something that isn’t here yet?

In this article, we’ll look at what the future Web might look like and how we can adapt our current skills to this new environment, as well as how to create fluid websites that are built around a consistent core and that adapt to the limitations and features of the device on which they are viewed. We’ll also look at how our conceptual approach to designing websites should evolve: designing from the simplest design upwards, and not from the richest website down.

But before we get to that, let’s start with a question. What do we mean by the “future Web”?

What Is The Future Web?

Back in the old days: analogous Google queries would have taken 30 days. Image: dullhunk

The one word that I hear more than any other at the moment is mobile. Mobile websites, mobile devices, mobile apps: the list seems to go on and on. In fact, a large swell of opinion says that the future Web is mobile.

But despite all this, focusing just on mobile isn’t the answer.

The way we access the Internet is changing, of that we can be certain. And in the short term, this does mean more mobile devices. But in the long term, we have to look a little wider. Thomas Husson, senior analyst for Forrester, summed it up nicely in his 2011 Mobile Trends report when he said, “The term mobile will mean a lot more than mobile phones.” In the long term, the word we should use instead of mobile is portable.

Why Portable? How Has the Internet Changed to Make It So?

First, the physical infrastructure of the Internet is spreading rapidly, so that our ability to access the Internet wherever we are grows daily. In the last 10 years, the number of Internet users has grown by 444.8% and now includes 28.7% of the population. That’s nearly 2 billion people, the majority of whom are in Asia. This growth is fuelled by investment in the underlying hardware that gives us access to the Internet: millions and millions of computers, millions of miles of cables, hundreds of thousands of wireless hotspots and, on top of all this, growing 3G coverage around the globe (around 21% by the end of 2010 according to Morgan Stanley).

Secondly, the way we use the Internet is changing. We are increasingly orienting our online experience around services rather than search engines. Services such as Facebook, Twitter and LinkedIn are becoming the hub for our online life, and we are blending them to create our own unique Web of content: Facebook for our social life, LinkedIn for our professional life, Spotify for music, Netflix for television and film. We’re seeing a very different form of information consumption here, one in which we expect information to be pushed to us through our social circle, the people whom we trust. We’re moving away from the old paradigm of information retrieval, in which we are expected to seek information using search engines and links.

Some of these services are tied to a single device, but increasingly they are available across multiple platforms, including the desktop, mobile apps, Internet-enabled TVs and others. Only last month, Samsung created the first tweeting refrigerator. Okay, that might not be the greatest use of an Internet connection, but it is an example of how these services are starting to spread out, away from the desktop and into our everyday lives. Evrythng, a start-up currently in beta, is working on a platform that would give any physical object an online presence, effectively making the Internet an ubiquitous entity containing data that can be consumed anywhere and by anything.

Given these changes, it’s important that we not be overly rigid in our approach to creating new Web content; we mustn’t allow ourselves to think in terms of devices. Right now, we are producing mobile apps and standard websites to deliver our services, but in a few years’ time, we may be looking at a completely different landscape, one where knowing exactly where and how our content is being viewed is impossible. Our content must be portable in the sense that it can be displayed anywhere.

Media marketers have responded to the increasing use of mobile media. (Image: birgerking)

We may also find ourselves having to decide whether to concentrate on particular devices and channels at the expense of audience numbers or to take a less tailored approach and serve the widest spectrum possible.

Regardless of the route we take, the ability to deliver a consistent experience across all channels is paramount, and our ability as designers and developers to understand the options and deliver this consistency to our clients will be crucial.

So, this is the future Web, a mish-mash of devices and channels. Sounds good, doesn’t it? Let’s go back to the key word, portability.

How Do We Design For The Portable Web?

Ask yourself, how would your latest project cope in the following scenarios:

1. The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.
2. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad
3. The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed.

Each of these scenarios presents us with a different problem to solve: (1) an odd aspect-ratio and browser combination, (2) a good display area but slow connection and (3) a very small display area. And they are all very possible scenarios. The first Internet TVs by big brands are now available from the big retailers. Opera Mini has over 85.5 million users and is the dominant browser in many areas of the world; in fact, in Asia, Opera and Nokia (with their combined 66.33% market share) are way ahead of the third-place browser (which is BlackBerry, with a 9.81% share). And Deloitte has predicted that 2011 will be the year of the tablet and that 50% of the “computing devices” sold will not be PCs.

Chances are that, unless you’ve really thought about it (and if you have, then you probably don’t need to read this article), your website won’t work in all of those cases.

When designing for the portable Web, we need to be aware of three things: design, content and integration. Approached in the right way, we can create websites that are accessible across the widest user base and that provide a consistent experience regardless of access method.

Consistent? How?

When faced with a multitude of devices to design for, all with varying specifications, the last goal that might come to mind is consistency, and with good reason. And yet we should be striving to achieve consistency. Not in design but in experience.

Conceptually, we should be thinking about our design in two layers: the core content or service, and then the display layer. The core of our website should not change from device to device, and it should deliver a consistent experience. As we shall see shortly, this means that we must ensure that elements such as the content and the navigation patterns work the same way always.

The web’s future consists of vast possibilities, considering them all is virtually impossible. That is why we need consistency! Image: Juhan Sonin

Let’s say our user is at work and is browsing our website on an iPad. They work through the carefully designed navigation hierarchy to get to the piece of content that they want to read, but they are interrupted by a phone call and have to stop browsing. Later, on the train home, they access the website again, this time via their phone. The visual elements of the design will be different—by necessity—but crucially, the routes they took to find the content should be exactly the same, as should the content they read when they got there.

This consistency of experience is what will allow us to create great websites for the portable Web and a complete user experience.

Where Do I Start? And How Will I Know When I Get There?

If a single consistent experience is our goal, this begs the question, should we create a mobile website that scales up or a desktop website that degrades?

The answer is neither. We should try to create a single design that can be used across all devices without alteration. But in practice, at least for the moment, we should start with the simplest website and work up.

Why? Let’s go back to the introduction. On the portable Web, we have no control over how our content will be used or viewed, and as such we must throw out the idea that we are designing for a particular device or device size. We must approach the design of our website in a different way, one in which we create the core content or service first. After all, this will define our website in the end, not the visual elements. This may seem difficult initially, but as we shall see, many of the best practices for desktop website development hold true for the portable Web, especially with regard to content structure.

To recap, here are the key rules to bear in mind when working through a design for the portable Web:

1. The website should be available to as wide an audience as possible;
2. The website should contain the same content wherever it is viewed, where feasible;
3. The website’s structure should be the same wherever it is viewed;
4. The content should be displayed in a manner that is appropriate to its environment.

A website that meets all of these criteria would fit snugly in the future portable Web. But how do we go about making our websites do this?

Designing For The Portable Web

Design Using Web Standards: That Means HTML5

The good news is that the two most common browser engines on mobile, Webkit and Opera, both support HTML5 very well; Webkit has supported HTML5 at least partially since November 2007.

Using standard and descriptive mark-up throughout our websites will have the benefit of delivering consistent output across most devices. And the extended capabilities of HTML5 to deliver media, animation and local storage make it a great choice for mobile applications.

These three abilities allow HTML5 websites to reproduce behaviours usually associated with native mobile applications, closing the experience gap between the two. Video can now be played natively through HTML5 using the video tag, while animations can be played using the HTML5 canvas. Finally, local storage allows a website to store database-like information on the device, allowing for fully functional offline use of the website.

YouTube, Netflix and Gmail all have HTML5 versions of their websites that are designed for the mobile experience and that take advantage of the new capabilities of HTML5. They’re a great starting point for any developer who wants to see what can be achieved.

HTML5 is now ready to be used for development, and there’s no reason why you can’t start right away. Many excellent resources and tutorials are available to help you get started:

• Dive into HTML5
  An overview of the HTML5 standard and a great starting point.
• HTML5 Demos and Examples
  A series of demonstrations showing the capabilities of HTML5, with source code.
• HTML5 Gallery
  A showcase of websites created in HTML5.

To get started using HTML5 in your projects, you can take advantage of any one of the number of development environments that support it. The most complete implementation is through Adobe’s Dreamweaver CS5; an HTML5 support pack can be downloaded that extends the built-in editor. Aptana also supports HTML5 in its beta of Aptana Studio 3. Links are provided at the end of this article.

Start Simple, Work Up

Thinking portable means thinking clean and simple. The wide variation in screen sizes—from a 40-inch LCD running at 1920 × 1080 pixels to a portrait-orientation mobile screen at 320 × 240 pixels—means that we must create designs that are scalable and adaptive. We must also be aware that someone may be interacting via a remote control or a fat stubby finger on a touchscreen. The simpler the design, the more adaptable it will be.

Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan

Create your basic website structure first and add only your core styles, the ones that are applicable to all devices and layouts. Starting simple gives us a great base on which to build. Essentially, we are starting from the most basic experience, available on even the smallest mobile device, and working our way up to the more capable desktop browsers.

Using @media queries in the CSS will enable your website to recognize the additional capabilities of desktop browsers and scale up for these environments, presenting a fuller and more interactive experience where possible.

A word of caution and a reason why we don’t work the other way around by degrading a desktop website to a mobile one: @media queries are not supported by every mobile device. Rachel Andrews provides a good overview of @media queries here on Smashing Magazine, albeit working from desktop to mobile, rather than the other way round.

Forget About Proprietary

Whatever you do, stay away from the proprietary technologies, because that’s the one way to guarantee an inconsistent experience. Flash and Silverlight as development platforms are living on borrowed time. Microsoft has already indicated that it will discontinue Silverlight development to concentrate on HTML5, while Flash is being used mainly as a game development platform and video-delivery mechanism. If we are going to create truly cross-platform websites that display consistently across all devices, then Flash and Silverlight are not wise choices because we cannot be certain that they will be installed on the user’s device. Not to say that Flash doesn’t have its place; as a platform for Web-based games, it is currently unrivalled. It’s about choosing the best technologies for the job at hand.

Be Wary of JavaScript… for the Time Being

The bad news is that we may have to sacrifice some of the things we take for granted now. We must learn to design for unknown screen sizes and ratios and allow content to flow as required. Think less about design structure and page layout and more about content structure.

We may have to forgo using JavaScript and AJAX (both staples of desktop development) to create more involving user experiences, because some lower-end devices will not have the hardware muscle to deal with complex libraries. Trimming page weight will also be a priority because we cannot be certain that end users will have broadband-speed access to the Internet, so large libraries will be unacceptable overhead.

This is particularly important in light of the recent “hash bang” trend, started with Gawker Media’s controversial redesign of its websites. The websites (including Gizmodo, Lifehacker and Gawker) present a more application-like experience to users, but do so by relying on JavaScript for content delivery. In effect, the websites consist of a single page that is loaded with dynamic content on request, instead of the multiple pages that they consisted of previously. Any users whose browsers cannot process the JavaScript, for whatever reason, will be unable to browse the website; they are greeted with only a blank page.

However, a number of libraries are being developed to be lightweight and usable on portable devices. jQuery has an alpha of its mobile library available for testing. The project has the backing of industry players such as BlackBerry, Mozilla and Adobe, so it is worth keeping an eye on.

JavaScript support will mature as devices worldwide move onto more modern platforms and as older devices are taken out of service. But for the time being, a conservative approach to its use will mean a wider potential audience for your work.

Test, Test, Then Test Again

On the portable Web, there’s a good chance we won’t be able to test against every possible platform on which our content will be viewed. But that doesn’t take away the need to test. And test we must.

Opera Mini’s emulator lets you test your website in a virtual browser.

Buying a device from each platform would be prohibitive for the majority of designers. But alternatives are available. For most of the main platforms, device emulators are available that simulate the browsing experience. See the resources section at the end of this article for links.

At the other end of the scale, a paid service is available from DeviceAnywhere, which enables you to test your website on over 2000 handsets.

Unfortunately, there are no Internet TV emulators so far, but Google has released a guide to designing for Google TV.

Finally, of course, we mustn’t forget to test on our desktop browsers, too. The aim of designing for the portable Web is to create a single experience across as wide a set of devices as possible. Just because users are able to browse the Web in many ways doesn’t mean they will stop using their desktop, laptop or netbook. Use this to your advantage when testing simply by resizing your browser to ensure that your design scales and flows appropriately. The emulators will provide you with an exact rendering of your website on other devices.

The Ugly Duckling?

So, does the portable Web defy beauty and kick sand in the face of outstanding design? Of course not. Great design is not only about visual imagery, but about presenting information clearly, which involves hierarchy and importance through innovative and well-thought out typography, layouts and navigation. Which brings us to…

Content For The Portable Web

Content is once again king. The rise of Quora should be enough to convince anyone of that; it is a service based solely on content. On the portable Web, this is doubly true. By paring down the design elements, you leave even more focus on the content.

Understand What’s Important

Identifying what is most critical to users should be your first task when developing a portable website. There may not be room for complex navigation, especially on smaller screens, so keep it simple. Compare the mobile and desktop versions of YouTube’s start page:

YouTube’s standard home page.

YouTube’s HTML5-based home page works brilliantly on small screens.

Create a Solid Information Hierarchy

Structuring our content is important, for both readability and SEO. Understanding the content that we are presenting is essential to creating clear information hierarchies that guide users through it.

Map the user’s possible journeys through your content. There should be a clear route to every piece of content, starting with the top-level information categories and getting more granular with each click.

John Lewis’ mobile website has a clear information hierarchy to aid navigation.

A good example of this is the mobile website of John Lewis, a UK-based department store. From the home page, you can easily drill down to each department, and from there to individual products. It’s simple, and it also means that the amount of information on any given page is not overwhelming and that you know exactly where you are in the hierarchy at all times.

Keep Content Available

Even if users aren’t on a desktop, don’t treat them as second-class citizens. Provide as much content as is feasible. And for what content there is, present it appropriately. Remove the following:

• Superfluous images
  If an image isn’t essential to the content, get rid of it.
• Unsupported file formats
  Don’t include Flash or even the Flash placeholder if the file likely can’t be played.
• Unnecessary text
  Good desktop copy doesn’t necessarily make for good portable copy. Is that second customer testimonial absolutely necessary? If not, remove it.

While we want to remove unnecessary content, we don’t want to remove too much. In the example below, we have a simple accessible website, but one that has no depth. The first level of information is presented well, but the headings for the company’s services at the bottom of the page should link to the next level of information. The way it is, if I want to find out more, I’m forced to visit the non-optimized website. This is a poor user experience, because it makes finding what I need more difficult.

Sapient Nitro’s mobile website displays really well but cuts a lot of information from the full website.

Integration And The Portable Web

If services are to become the new hub of the Internet, keeping our websites linked to these services becomes paramount.

Keep It Modular

Services will come and go (although the main ones will certainly remain for a long time yet… yes, I’m looking at you, Facebook), so keep your design modular. Being able to integrate with new services as they come online and to prune away those that have fallen by the wayside will ensure that your content is available to the widest possible audience.

The goal is to make it easy to push your content across multiple services and thus integrate your content into the fabric of the Web. Primarily, this will be through search engine optimization and social sharing.

Make Your Content Search-Engine Friendly

While the way people access content is becoming more social and less search-based, search engines are still a massive source of traffic. Keeping your content formatted for easy retrieval is a must. Quora has done this extremely well, leading to high rankings across the major search engines and generating traffic for its next-generation Q&A service. SEO may be old hat for some, but as quality of content becomes increasingly important, it will gain new life.

Quora plays nice with search engines, with great results.

Make Sharing Easy

SEO is important, but so are direct connections to other services through OAuth, OpenGraph and OpenID. If this isn’t an option for you, then at the very least give users some way to share your content. Services like AddThis and ShareThis make it simple to add sharing capabilities; take advantage of them. A single tweet can generate a lot of activity. Of course, modern development and content platforms such as WordPress have this functionality built in.

Bringing these three elements together will create websites that are discoverable, consistent and usable. Just one question now is raising its ugly head…

What About Apps? Aren’t They The Way Forward?

Apps are big business. Gartner forecasts that mobile app store revenue will top $15 billion in 2011. It’s no surprise that Google, Microsoft, Nokia and others are trying to get in on the act. But just because app stores are commercially successful, does it mean they should be our first point of call when designing for the future Web?

Let’s look at why one might want to create an app:

• Easy to purchase, install, use and throw away
  Apps are so usable that even your granny could use them. Installing them on a smartphone is a smooth process that requires minimal involvement from the user. And when you’ve had enough, you simply delete it and no trace of the app remains. This is a great user experience, period. That’s why Apple is now pushing the same concept for full-blown Mac apps through the Mac App Store. Apps also provide, in most cases, a good user experience, with their native controls and design patterns.
• Brand association and lock-in
  Apps are designed to do one thing and do it well. The most successful apps are exercises in brand association: “I want to search the Web, so I’ll use the Google app,” or “I want to check up on my friends, so I’ll use the Facebook app.” You experience the brand through the app. I could easily use the Safari browser on the iPhone to access both Facebook and Google, but the apps make it easy for me. I’m locked into the experience, which is great for the companies because their brands get planted square in the middle of my home screen; in this case, a big F and a big G.
• Money
  The most attractive thing about apps to many companies is the profit. Apple’s App Store has shown that monetizing content is possible. Even for independent developers, making a lot of money in a relatively short period of time is possible.

What’s remarkable about all of these points is that they have nothing to do with information consumption. They are all about brand and user experience. However, there are also reasons why you should think twice:

• Apps are information silos:
  Apps do what they do well. But they don’t do a good job of bringing in the wider Web. Want to follow a link? You might be able to view the page in app, but you’re just as likely to get thrown out into the browser. That’s not a good user experience. You also lose control of the user’s actions and their focus on your content.
• Apps are platform-specific:
  Writing an app automatically ties you to the platform you are writing it for. This immediately limits your potential audience. Smartphone penetration is growing but is still a small segment of the overall Internet-enabled phone market. To take the US market as an example, even though 31% of the population have smartphones, only 6% of the population have iPhones. That’s 19 million out 307 million. If you released an iOS-only app in the US, you would immediately lose 76.17 million potential users.
• Apps work best for big brands and services:
  Regardless of how good the app is, you have to find a way to get it discovered among the tidal wave of apps that are released into app stores every day. Big brands can push their apps through their existing Web presence, but that’s a lot more difficult for smaller brands. And unless you can generate a lot of relevant content regularly, as the major services do, your app will be consigned to the trash very quickly. Research by Pinch Media (now Flurry) shows that free apps are used primarily in the first 10 days following installation, and then rapidly trail off to around 2% of the installation base after 70 days. Paid application usage drops off even more quickly.
• Mobile users prefer browsers over apps:
  A study by Keynote Systems in October 2010 shows that users prefer mobile websites for nearly all types of Web content. The only categories in which apps came out on top were social networking, music and games, which makes sense because these apps usually take full advantage of a native platform’s capabilities.

So, if we want to create something with more permanence, that can evolve at a speed that suits us and our clients, then we need to look away from mobile apps and towards the mobile Web. We must execute good design, thoughtful content and solid integration to tie our portable websites into the social infrastructure of the Web.

Conclusion

The fully portable Web may not be here right now, but it will be before we know it. As it was with the browser wars, developers and designers must re-educate themselves to become the driving force behind these changes and be brave enough to let go of current design thinking and work to set new standards. Understanding how to create online presences that take full advantage of all platforms and preparing for the future shape of the Web will position us not just as technicians, but as people who can provide real value to our clients.

Resources

The HTML5 editors and device emulators mentioned above can be downloaded from the following websites.

HTML5 development environments:

• CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
• Aptana 3 beta

Device emulators:

• Android
• Opera Mini
• Apple iPhone (via iOS SDK)
• Windows Mobile (look for the latest Windows Phone Developer Tools)
• BlackBerry
• Nokia Mobile Browser

(al) (ik)

© James Gardner for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, future, mobile, portable, trends

  

Two weeks ago we published the first part of Photoshop tips and tricks for photo retouching. Today, we’ll be presenting the rest of the article. We hope that these techniques will be quite useful for your workflow. You may know some of them, but hopefully not all of them. We have had articles on various tools in Adobe Photoshop but this one is focused more on the techniques rather than the tools provided. Please note that all images used in this article were purchased and are used according to their licenses.

Here is a short overview of the techniques we’ll be covering in this follow-up:

• Defining Colors
• Controlling Folders
• Split-Toning Effect
• Flexible Vignette
• Skin Retouching In Camera Raw
• Setting Lights
• Distinguished Paleness
• Dodge And Burn Look
• Bright Eyes
• The Orton Effect
• Optimizing Lasso Selections
• Aligning Layer Contents
• Restoring Selections
• More Photoshop Tips and Tricks

Defining Colors

If you want to redefine the foreground and background colors, use the Eyedropper tool to select the foreground color, and then switch the position with the background color, maybe by using the shortcut X, and pick up the next color. But there is an easier way. First, define the foreground color just as you’re accustomed to, but then define the background color by holding the Alt/Option key. Instead of changing the foreground color, you’ll redefine the background color with just one click.

Define foreground and background colors.

Controlling Folders

Folders give structure to layers, which is especially important if you’re working on demanding compositions. Folders are often collapsed, so you can’t see the contents at first sight. This conserves space but it’s not always desirable. If you want nested layers to reveal their contents and offer a quick overview, hold the Control/Command key and click on one of the triangles to expand. All folders at the first level will expand. You can collapse them again using the same trick. To expand all nested folders inside the folders as well, hold the Alt/Option key as well as the Control/Command key.

Hold the Control/Command key to expand the folder.

Split-Toning Effect

Create two new gradient maps via Layer → New Adjustment Layer → Gradient Map. You could, for example, create a gradient from dark-blue to beige and another from dark-brown to white. To change a gradient, click on it to open up the “Gradient Editor” dialog box. There, click on your chosen color patches and open up the color picker via the “Color field.”

Blending Options: This Layer

Confirm with “OK,” double-click the layer with the second gradient map and, under “This Layer,” move the right slider to the left. To make the transition a little smoother, click on the slider while holding down the Alt/Option key and move it to the right. Confirm with “OK.”

Split-Toning Effect

Flexible Vignette

To create a non-destructive vignette, go to New Adjustment Layer → Levels. Darken the image completely by, for example, setting the Highlights down to 80. Now use the Brush tool with black color to paint the light center into the layer mask. Instead of using a brush to paint the area, you could use the Elliptical Marquee tool and fill the selection with black.

Adjustment Layer: Levels

You can use the Move tool to adjust the vignette’s position any time, or blur it using the “Gaussian Blur.” You can also increase or decrease the darkening. To do so, open the Levels Adjustment dialog box again.

Skin Retouching In Camera Raw

Again, open a photo in Camera Raw (for example, by using the right mouse key from Bridge and clicking “Open in Camera Raw”). In general, you can use the Spot Healing Brush tool and all other tools and sliders to improve the image. When you’re happy with it, hold the Shift key and click on “Open Object.” The image will be put on a new layer as a Smart Object.

You could also click the blue link at the bottom of the screen, which opens the “Workflow Options” dialog window. From there, you can control some other settings as well. Make sure to check the “Open in Photoshop as Smart Object” checkbox, and then confirm with “OK” to open the images (without having to holding Shift).

Here, layers are smart objects.

Right-click on the layer and choose “New Smart Object via Copy,” and then open the Camera Raw dialog box again by double-clicking the layer icon. Set the “Clarity” value to -100 and confirm with “OK.” Hold the Alt/Option key and click on the “Create Layer Mask” button, then use a soft brush to paint over the optimized skin. Use the opacity slider to control the amount of retouching.

Here is optimized skin with the help of Camera Raw.

Setting Lights

If you want to do some virtual re-positioning of your strobes, then neutralize the shot first. Go to Select → Color Range, and set Select option to “Highlights.” Copy the selection content to a new layer by hitting Control/Command + J. Activate the background layer again, and select the “Shadows” this time. Bring those to their own layer, too, with Control/Command + J, and then set the blending mode to “Screen” and the highlights to “Multiply.”

Highlights and shadows

Reduce the opacity to about 30%, depending on the image content. “Shadows/Highlights” might also help. On a new layer, filled with a neutral gray and its blending mode set to “Overlay,” paint in the desired light quality with the Dodge and Burn tools. Alternatively, add a new layer and set its blending mode to “Soft Light” or “Overlay” and, with a low opacity brush, paint black and white on this layer.

The lights were neutralized a bit.

Distinguished Paleness

For a distinguished paleness, copy the background layer and set its blending mode to “Screen.” Use Image → Adjustments → Desaturate or “Black & White,” then “Shadows/Highlights” to increase the effect. The exact adjustment options can vary according to your image content.

Here’s the layer after creating the mask.

The effect will cover the entire image unless you click on the “Create Layer Mask” button while holding the Alt/Option key, and then paint the pale areas with the brush tool and white color. You can control the effect’s strength with the opacity slider.

Distinguished paleness.

Dodge And Burn Look

Copy the reduced layers to a new layer with Shift + Control/Command + Alt/Option + E, and then set the blending mode to “Vivid Light.” Use Control/Command + I to invert the layer content, and apply Filter → Blur → Surface Blur with a radius of about 70 pixels and a threshold of 40 levels. Press Shift + Control/Command + Alt/Option + E again, delete the layer below, and set the blending mode to “Overlay.” Apply a “Gaussian Blur” to make the contours a little softer, and then click Image → Adjustments → Desaturate.

Dodge and Burn Look

Bright Eyes

To make eyes appear brilliant, click on New Adjustment Layer → Exposure. Fill the layer mask with black (or invert the mask), and paint with white over the irises and with black over the pupils. Set the blending mode of the adjustment layer to “Luminosity.” Increase the exposure in concert with the gamma value to give the iris structure more contrast. Also, try changing the “Offset slider.”

Create beautiful eyes with exposure.

The Orton Effect

With the Orton effect, sharp and blurred versions of a photo are mixed together. Copy the background layer with Control/Command + J, and click on Image → Apply Image. Change the blending mode to “Screen” and click “OK.” Copy the current layer again with Control/Command + J. Apply a Gaussian Blur to this copy by clicking Filter → Blur → Gaussian Blur. The value will depend on the size of the image. The shapes should always blur slightly. Set the blending mode for the layer to “Multiply.”

The Orton effect creates contrast and depth.

Optimizing Lasso Selections

Many users (even professionals) prefer the Lasso Selection tool to the Path tool for uncomplicated selections. To switch to the Polygon Lasso tool for a short stretch, hold the Alt/Option key while working. To switch back to the regular Lasso tool, just release the Alt/Option key while depressing the mouse button.

Switching between the Lasso and Polygon Lasso tools is easy.

It often happens that, during a zoom, you hit the edge of the work area while making a selection. Just keep the space bar pressed to switch to the Hand tool, and you can quickly change the displayed image section.

Aligning Layer Contents

Some areas in Photoshop are hardly ever noticed. This is one of them. If you activate the Move tool, you’ll see some mysterious symbols to the right called Align tools, in the option bar next to Auto-Select and the Transform controls (which are basically equivalent to Free Transform).

Align tools

If you activate just one layer, the Align tools won’t do anything, but if you select two or more layers by holding the Control/Command key, then you can align the layer’s contents with these buttons. Choose from options such as “Align Top Edge” and “Align Vertical Center.”

Restoring Selections

Often, while in the middle of working on a tricky selection, you’ll accidentally deselect it by clicking once too often. You can restore the lost selection by pressing Shift + Control/Command + D. This will get the ants marching again. You can also undo (Control/Command + Z) the action, and even perform multiple undos with Control/Command + Alt/Option + Z.

By the way, you can hold the Alt/Option key to subtract elements from the selection at any time, or hold the Shift key to add to the selection. Pressing a combination of both keys creates a selection intersection. Important selections that you might need later can be saved by going to Select → Save Selection.

Restore lost selections.

More Tips and Tricks to Improve Your Workflow:

• Mastering Photoshop: Unknown Tricks and Time-Savers by Thomas Giannattasio
• Compositing in Adobe Photoshop: Time-Saving Tips by Daniel Durrans
• Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles by Marc Edwards
• Useful Adobe Photoshop Techniques, Tutorials and Tools by Vitaly Friedman
• The Ultimate Guide To Cloning In Photoshop by Joshua Johnson
• The Ultimate Collection Of Useful Photoshop Actions by Jacob Gube
• Unveiling Photoshop Masks by Thomas Giannattasio

(al) (vf) (ik)

© Dirk Metzmacher for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: photoshop

2. Those same friends and family ask you to run errands for them. How many times have you been asked to sign for a package or walk a dog between 9 a.m. and 5 p.m. because people think you’re not on any schedule? They don’t believe you have deadlines to make or meetings to attend.

3. Taxes are hard. So much for the 1040EZ – all those freelance checks are unwieldy compared with one W-2 form from an employer. If you’re a first-year freelancer, it might be best to see a professional tax preparer, and before you go, check online to be sure you have all the proper paperwork.

4. A lack of personal interaction can be harmful to social skills. I’ve found that when I work from home – even for one day – I talk to myself, to the television, to my cats and even to the plants. If I don’t, when I do encounter a human being, I don’t even understand what comes out of my mouth – it’s just an unintelligible rant of non-English. Freelancers would do themselves some good if they got outside to meet clients or even visited the neighborhood café to personally order coffee. Keep those conversation skills active!

5. You need to get your own clients. You could be the best designer or photographer in town, but that doesn’t mean you’ll get any business unless you seek it out. “Marketing” is one of the top answers I hear when I ask people about the downside of freelancing. Creative pros want to create, not sell themselves. But until they’ve earned a reputation that precedes them, self-promotion is necessary to get customers.

6. Freelancers must wear a lot of hats. Aside from marketing, self-employed creatives must also handle all business affairs: IT, human resources and accounting, for example. Sure, I’ve heard of people outsourcing some of these responsibilities, but can you afford to do so right now? Fortunately, a lot of free or cheap software is out there to help with some of these tasks. And rather than resort to point No. 1 – asking a friend to work for you for free – this could be an opportunity to barter your skills.

7. Your “hobby” becomes a chore. That previously mentioned idea of “livin’ the dream”? Now that you’re doing what you love, you might not love it so much. You don’t always get to use your creativity to make art – now you’re photographing uncooperative children, writing brochure copy or designing text-heavy web pages. And in your spare time, do you really want to be behind a computer or pick up a camera?

That’s quite a list of gripes, but all that being said, would you give up the freelancing life to go back to the 9-to-5 world? The freelancers I’ve spoken to value their freedom too much to return to having a boss and having to stuff their feet into close-toed shoes each day. Besides, the coffee you brew at home is usually far superior to that burned-tasting sludge in the office.

How have you learned to deal with your freelance woes?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

  

When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because it’s always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning, compositing, masks and obscure Photoshop time-savers in the past. This article is different.

I’ll be covering some of the useful techniques and tricks which I’ve learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.

Here is a short overview of the techniques we’ll be covering:

• Naturally Increased Light
• Simulate Infrared Images
• Levels
• Color Look With An Adjustment Layer
• Controlling Mid-Tone Contrasts
• Sunset
• Creating Smiles
• Colorful Water Drops
• Skin Color
• Matching Skin Tones
• Reducing Noise
• Retro Look With Curves
• Identifying Layers
• Conserving Resources
• Classy Sepia Look
• Precise Positioning
• Applying Layer Styles Multiple Times

Naturally Increased Light

The light of the sun creates texture. There are shadowy areas and spots where the sunlight can shine without interference. To control the intensity, you can draw more light onto a separate layer or increase already existing light. Create a new layer by going to Layer → New → Layer, or by pressing Shift + Control + N on Windows or Shift + Command + N on a Mac. Set the blending mode to “Color Dodge” and the opacity to about 15%.

Increase light on a separate layer.

Then use the brush tool with a soft brush, and hold the Alt/Option key to pick up colors from the area that you want to brighten. Continue to brush in some light, picking up appropriate colors if the background changes. This way, you increase not only the light, but the saturation, which makes for more realistic results.

The blending mode “Color Dodge” creates realistic results.

Simulate Infrared Images

Open a photo in Camera Raw; you can do this either in Bridge, using the right mouse key and clicking “Open in Camera Raw,” or directly in Photoshop, by selecting File → Open as Smart Object. Apply basic adjustments to optimize your image (for example, with the “Recovery” and “Fill Light” slides), then switch to the “HSL/Grayscale” tab. Check “Convert to Grayscale,” and set the Blues down to around -85. Set the Greens to +90 and the Yellows to +20.

Trees and bushes should now shine in the typical white, and the sky should appear almost black. If you want to go on and simulate some grain, switch to the “Effects” tab, and enter 15 for the amount, 20 for size and 80 for roughness. You could also apply a “Vignette.” Here I used -30 for the amount, 40 for the midpoint and -35 for roundness.

It’s almost like an infrared image.

Levels

When applying a “Levels adjustment,” you can set black and white points in order to decrease color tints, but where are the darkest and brightest spots in the image? Go to New Adjustment Layer → Threshold to find those areas. This function is available under the “Layer” menu.

Move the slider so far to the right that only a few white spots remain in the document. Use the “Color Sampler tool” and set down a point there. Move the slider to the left until only a few black spots remain, and set a second point down there.

One could also find a neutral gray in the image by using a “Threshold adjustment layer.” Add a new blank layer between the original image and the threshold adjustment layer, and fill this layer with 50% gray. Go to Edit → Fill or press Shift + F5, then select “50% Gray” under “Contents” and click “OK.”

Here is the threshold adjustment layer at work.

Change the blending mode of this layer to “Difference.” Select the “Threshold adjustment layer” again and move the slider all the way to the left. Slowly move the slider back to the right until black dots start to appear. These are the neutral gray areas in the image (if neutral grays are present). Add a “Color Sampler spot.”

Now delete both the threshold adjustment layer and the 50% gray layer. Create a new adjustment layer, “Levels.” Use the first Eyedropper tool to click on the darkest area, then use the third Eyedropper on the brightest area.

Here’s a before-and-after comparison.

Now you can use the gray Eyedropper tool on the third Color Sampler spot. The color tint will be decreased. Color Sampler spots can be deleted by dragging them off the canvas with the Color Sampler tool.

Color Look With An Adjustment Layer

Go to the Layer menu, and then New Adjustment Layer → Hue/Saturation, and set the blending mode to “Soft Light” and check “Colorize.” Use the Hue, Saturation and Lightness sliders to control the color: for a cool look, for example, set the hue at 210, the saturation at 50 and the lightness at 10; for a warm look, set the hue at 30, the saturation at 30 and the lightness at 5.

Here is Hue/Saturation and Color Fill.

Alternatively, you could use several color layers. Create them from the layer palette with the “New Fill/Adjustment Layer” button. Choose a color, then set the blending mode to “Vivid Light.” Reduce the opacity to about 12%, and invert the layer mask with Control/Command + I. Paint in the colored light with a big brush and white color. This works especially well for the lighting in portraits that have a textured background.

Here’s the Color Look with an Adjustment Layer.

Controlling Mid-Tone Contrasts

To increase detail in landscape shots, boost the mid-tone contrast. Copy the background layer with Control/Command + J, and then click on Filter → Convert for Smart Filters in the menu. Then go to Filter → Other → High Pass and enter a radius of 3 pixels. Change the blending mode to “Overlay” and double-click the layer next to its name to open the “Layer Style” window.

Layer Style window: This Layer

For the first gradient, “This Layer,” split the sliders by holding the Alt/Option key and trim the layer effect to the “50/100” and “150/200” ranges. As soon as you move the sliders, you’ll see where those numbers are. This increases contrast only for the mid-tones. Double-click the “High Pass” filter in the layer palette to bring the dialog box up again in order to adjust the radius to your liking.

Check out these mid-tone contrasts.

Sunset

A sunset, especially at sea, can be an amazing color spectacle. The hues will depend heavily on the weather, though — but you can push them a bit with a gradient map. Click on the “New Fill/Adjustment Layer” button in the Layer palette and select “Gradient Map” from the list. Click on the gradient to open the “Gradient Editor.”

Gradient Map

Click on the first color patch below the gradient, and change the color to red. Set the color patch on the opposite side to yellow, and click “OK.” Set the blending mode to “Soft Light” and reduce the opacity to about 50%. This will create a warm, almost golden sunset.

Observe the movement from a blue to a golden sunset.

Creating Smiles

Roughly select the area around the mouth with the Polygon Lasso tool. Go to Select → Modify → Feather, and enter a radius of 10 pixels. Confirm, then click on Layer → New → Layer via Copy (or press Control/Command + J), then Edit → Puppet Warp. Photoshop will put a mesh over the entire layer in the shape of your previous selection.

Here’s the mesh over the layer.

You can control the size of the mesh with the “Expansion” value in the Options bar. Increase the density to “More Points” for increased precision. Press Control/Command + H to hide the mesh, then set the first pins to the corners of the mouth. Add more pins to distinctive spots of the mouth. By clicking and dragging the mesh, you can shape a nice smile.

Colorful Water Drops

Macro shots of water drops are appealing, and shapes can be further accentuated with discreet coloring. You could treat the bland surface with a linear gradient from #772222 (RGB 119, 34, 34) to #3333bb (RGB 51, 51, 187). If the photo is on a layer of its own, click on Layer → Layer Style → Gradient Overlay or double-click the layer next to its name.

Layer Style: Gradient Overlay

Set the blend mode to Color, the opacity to 50%, the gradient to “Foreground to background color” and the angle to 90%. The gradient will be saved as a layer style, so you can come back at any time to adjust the values. Double-clicking the style name opens up the dialog window once more.

See the colorful drops with optimized colors.

Skin Color

If the skin is not quite perfect after retouching, it might be because of the general hue. You can control it by going to New Adjustment Layer → Hue/Saturation. Click on the miniature mask, and press Control/Command + I to invert the mask.

Adjustment Layer: Hue/Saturation

Using white color and a soft brush, paint over the skin areas so that only they get treated. For the adjustment, switch from Standard to “Reds” (found in the Hue drop-down menu of the Adjustment layer), and use the Hue, Saturation and Lightness sliders to adjust the skin color. Switch to “Yellows” and optimize the skin tone. Getting the colors exactly right depends very much on the image material. Rely on your common sense.

Optimized skin tones

Matching Skin Tones

A sunburn or a blush can disrupt a portrait, especially if there is a contrasting pale person nearby. Photoshop has a tool to correct that: “Match Color” offers control over skin tones. Open your image and use the Quick Selection tool to roughly select the red skin areas.

You can hold down the Alt/Option key and subtract areas from the selection. Click on Select → Modify → Feather and enter a value of about 15 pixels. Use the Control/Command + J shortcut to copy the selection to a new layer.

Adjustments: Match Color

Using the same technique, copy the non-reddened skin to a new layer. In the next step, you’ll have to differentiate between the source layer and the layer to edit, so rename these two layers meaningfully; all it takes is a double-click on the layer name. You could use the naming scheme shown here and call them “Beautiful skin” and “Reddened skin.”

Activate the layer with the red skin, and select Image → Adjustments → Match Color from the menu. For “Source,” select the current document, and for “Layer,” select the one with the beautiful skin. Control the effect using the “Luminance” and “Color Intensity” sliders in the Image Options area. Once you confirm, you can control the effect’s strength with the Opacity slider.

Paler skin after Match Color

Reducing Noise

Noisy images are annoying. One way to reduce noise is through the channels. Copy the background layer by pressing Control/Command + J, switch to the Channels palette, and select the channel that shows the least noise. Drag that channel down to the “New Channel” icon (next to the trash can) and go to Stylize → Find Edges. Then apply a Gaussian Blur with a radius of about 3 pixels.

Look at this copy of the red channel.

Click on the new channel’s miniature icon while holding the Control/Command key to select the content. Activate the “RGB channel” (top-most), and switch back to the Layers palette. When the duplicated background is selected, click on the “Add Layer Mask” icon.

Click on the Layer Miniature icon, and select Filter → Blur → Surface Blur from the menu. Play around with the Radius and Threshold sliders until the noise has been reduced as much as possible. Thanks to the mask you created, the contours are safe.

With and without noise

Retro Look With Curves

Go to Layer → New Adjustment Layer → Curves and switch from RGB to Reds. Then drag the line downwards a little for the shadows and upwards for the highlights, creating a slight “S” curve. Do the same for the Greens. For the Blues, drag the highlights down a little and the shadows up (for an inverted S shape). The shadows should now be slightly blue-ish, the highlights slightly yellow-ish.

Adjustment Layer: Curves

Create a new layer with Shift + Control/Command + N, and fill it with #000066 (RGB 0, 0, 102). Set the blending mode to “Exclusion.” Now copy the background layer by clicking it and pressing Control/Command + J. Set the blending mode for this copy to “Soft Light.”

To decrease the effect overall, activate the top-most layer and then click on the background copy while holding the Shift key, thereby selecting both layers. Alternatively, you can add them to a group with Control/Command + G. Reduce the layer’s (or group’s) opacity. Note that in Photoshop versions prior to CS5, you’ll have to reduce the opacity for each layer individually.

Achieve a simple retro look in a few steps.

Identifying Layers

If you’re ambitious with your collages, then you’ll be familiar with this problem: meaningful layer names are often neglected during the creative process. This can result in layer names like “Layer 4” and “Layer 5 Copy 2,” which are not very helpful when you need to quickly identify the contents of a layer.

Photoshop offers a number of solutions for our laziness. For example, you can click on the element you want to select by using the “Move tool” and holding the right mouse key; you’ll see which layer contents are below the tool. Photoshop will display a list in a drop-down menu, from which you can easily select the desired element.

Right click with the Move tool

Control/Command + left-click with the Move tool selected and, in most cases, you’ll select the corresponding layer of the element that your mouse is over (unless Photoshop can’t distinguish between the multiple layers).

You could also Control/Command + left-click on a layer’s miniature icon to get a selection of the content of that layer. The marching ants will show you what is on that layer and where it is.

Another option is to click on the Layer palette’s Options icon, in the top-right corner, and select “Layers Palette Options.” From here you can adjust the size of the layer’s miniature preview and concentrate the miniature’s content to the layer’s bounds, which should cut down on future guesswork when it comes to layer contents.

Layers Palette options

Conserving Resources

Plug-ins save time, but they’re a bit resource-hungry; at least, they lengthen Photoshop’s start-up time. Your plug-ins might have functionality that you rarely use, so deactivate them until you need them. To do so, create a new folder by going to Adobe → Adobe Photoshop CS5 (or whatever your version) and name it something like Plugins_deactivated.

After disabling some plug-ins.

Now move all of the extensions that you don’t need for the moment. When you restart Photoshop now, those plug-ins won’t load, so the program will start up quickly. Your RAM will be relieved. Because you neither deleted nor uninstalled the plug-ins, they’re available to use anytime. If you need them, just move them back to the plug-in folder.

Classy Sepia Look

The sepia look is an absolute classic. To enhance a black and white image with a classy sepia tone, follow these steps. Click on Layer → New Adjustment Layer → Photo Filter, and select the Sepia filter, with a density of 100%. Double-click the layer (not the layer name) to open up the Layer Style window. This will show the Blending options.

A view of the Layer Style window.

At the bottom of the dialog box for the first gradient, move the white slider to the left while holding the Alt/Option key. This creates a smooth transition between adjusted and unadjusted areas. The sepia will now look elegant.

Subtle sepia

Precise Positioning

I’m sure you’ve often been irritated by Photoshop’s tendency to position elements on its own, but the program is just trying to help you align an element that is on its own layer with the outer edge of the document or with the edge of another object. To your frustration, the layer’s content will jump to the edge, even though you wanted to leave a few pixels of space in between. You can temporarily deactivate the automatic snapping by holding the Control/Command key as you position.

A banner, close to the edge.

Applying Layer Styles Multiple Times

Usually, layer styles can be applied only once. For example, if you click on Layer → Layer Style → Drop Shadow, you cannot create a double drop shadow, one of which has an angle of 120°, a distance of 2 pixels and a size of 2 pixels, and the other of which has an angle of 180°, a distance of 12 pixels and a size of 12 pixels.

Actually, it is possible! It just requires a little detour. Create the first drop shadow as you normally would. Then right-click on the layer and select “Convert to Smart Object” from the menu. This smart object can be assigned another drop shadow, and you can convert the smart object into yet another smart object. This way, you can easily add a third and fourth drop shadow. Alternatively, you could apply multiple strokes.

Three shadows in combination.

By the way, to put one or even several styles onto their own layers at once, right-click on the FX symbol and select “Create Layer” from the list. Now you can apply filters to these styles, but they won’t be editable anymore.

Stay tuned

The second part of this post will be published in 2 weeks. Please stay tuned and subscribe to our RSS-feed and join us on Facebook.

Huge thanks to Carlos Lanenga for his valuable suggestions for this article.

(al) (ik) (vf)

© Dirk Metzmacher for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: photo, photoshop, retouching, techniques, tips, tricks

Music

Paint

Passion

But, all of this aside… The campaign is super creative, well created and technically sound. But, the problem that I keep reeling over is “is this Mercedes-Benz”?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

  

The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.

This quick introduction to @font-face will lead you towards a guide through the @font-face kit generator. If you want to make Web use of your already licensed desktop fonts, read up on how to embed them from your own server. Topped up with some helpful tips, tricks and workarounds, this article will hopefully provide some useful insights.

Web Font Formats

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, and the list goes on. To find one’s way through in this veritable jungle of font formats is not exactly easy. Let’s have a closer look at the pros and cons of font formats that are particularly relevant for their use on websites.

TrueType

This format was developed in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. As a scalable outline format, it replaced the common bitmap fonts that were used for screen display at that time. Microsoft took up the TrueType format as well and it soon evolved into the standard format for system fonts due to the fact that it offered fine-tuned control for a precise display of font in particular sizes.

OpenType

Microsoft and Adobe teamed up in developing this font format. Based on the TrueType format, OpenType offers additional typographical features such as ligatures, fractions or context sensitive glyphs and the like. However, browser support of these features which are common in sophisticated layout and illustration programs is still unsatisfactory. There are two different versions of OpenType fonts, depending on the outline technology used. There are:

• OpenType fonts with TrueType Outlines (OpenType TT) and
• OpenType fonts with PostScript Outlines (OpenType PS)

OpenType comes in two different versions.

OpenType PS is a so-called CFF based file format (CFF = compact file format). This is relevant when using OpenType PS fonts as Web fonts, because PostScript based formats are displayed without subpixel rendering on Windows platforms which affects the rendering quality considerably. That’s why TrueType based fonts are the better choice as Web fonts, even though Microsoft will solve this rendering issue in the future. The structures of TrueType and OpenType fonts are very similar and browser support is available in Safari 3.1 and higher, Firefox 3.5 and Opera 10 (and of course newer versions).

EOT

Internet Explorer has supported the proprietary Embedded OpenType (EOT) standard from the late 1990s. It’s a variation of the TrueType and OpenType formats that provide the following particularities:

• EOT fonts are a compact form of OpenType optimized for quick delivery on the Web due to data compression.
• By means of URL-binding, EOT fonts can be tied to a specific domain. The fonts can then only be delivered to and used on those Web pages. This technique helps prevent fonts from being copied and used without a licence.

EOT is exclusively supported by Internet Explorer. Even though it might not succeed as a Web font format in the future, it still makes sense to use this format today in order to supply the users of various IE versions with Web fonts. Current IE versions (< 9) do not use any other format.

If you want to convert TTF fonts to natively compressed EOT files, you can use EOTFast (a free application) currently available only for Windows.

WOFF

Unlike EOT, the Web Open Font Format (WOFF) is in the process of being standardized as a recommendation by the W3C which published WOFF as a working draft back in July 2010.

WOFF came into existence as a kind of a compromise between font foundries and browser companies, so it’s no wonder that WOFF has been developed by two font designers (Erik van Blokland and Tal Leming) in cooperation with Mozilla developer Jonathan Kew. Essentially, WOFF is a wrapper that contains TrueType and OpenType fonts, and it’s not really a new format of its own.

WOFF uses an integrated compression algorithm named zlib, which offers file size reduction for TrueType fonts exceeding 40%. Furthermore, meta data can be added, e.g. a user’s licence. However, this data presents only meta information and is not validated by browsers.

Thanks to WOFF, Mozilla can use its corporate typeface FF Meta.

The format has been supported by Firefox since version 3.6, and by Google Chrome since version 5.0. All other browser manufacturers are working on adding full support in future releases. Fonts can be converted into the WOFF format by the online service Font Squirrel free of charge.

SVG

SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format — SVG fonts are always uncompressed and usually pretty large.

SVG fonts are not really an alternative to the other Web font formats, and iOS 4.2 is the first version of Mobile Safari to support native Web fonts (in TrueType format) instead of SVG. However, SVG is the only format that can be used for the iPhone and iPad prior to iOS 4.2.

Tools, such as Font Squirrel, can be used to convert fonts into this format. Another possibility to obtain SVG fonts is to rent them from one of the numerous Web font providers.

Typekit also serves its fonts as SVG files for the iPhone and iPad. Typekit no longer servers SVG fonts to iOS devices. The service serves TrueType fonts to iOS 4.2 devices and higher.

@font-face Revolution

The CSS3 property @font-face presents so many new possibilities that a veritable gold-digging mentality is taking hold of Web designers. There’s hope that regular system fonts will soon be abolished by Web font embedding, which enables us to choose practically any typeface and font style they want — just like in print design.

With regard to typography, the Web is way behind print. Take headlines: in print, condensed typefaces come in handy because they allow more words to fit on one line. System font collections, however, usually have no condensed fonts. Also, companies cannot use their proprietary fonts on their own websites. Instead, they have to replace them with standard fonts, such as Arial, which makes establishing a consistent corporate identity across all media impossible.

@font-face in the Late 1990s

The ability to embed any font into a website has been around for a while. Netscape 4 and Internet Explorer 4 supported @font-face by the end of the 1990s. The rule allowed us to deposit a font on a server and deliver it through a Web page.

@font-face {
font-family: Gentium;
src: url(fonts/gentium.eot);
}

This technique was ahead of its time. At that point it was used for simple grayscale anti-aliasing. This was no problem for system fonts, which were laboriously optimized for rendering on screen, but other fonts were not rendered properly; they lacked the benefits of manual on-screen optimization. Instead of improving Web typography, the non-system fonts made websites look worse.

It’s no wonder that the @font-face rule was removed in the CSS 2.1 specification. Using system fonts was the general practice in Web design, especially for copy. For headlines, several workarounds have been established. Some designers replaced text with a bitmap file or a Flash movie that displayed the headline in a particular font.

Another approach that has emerged in the past few years is to replace headlines with vector graphics, with the help of JavaScript. Typeface.js and Cufón offer this functionality. Each of these techniques, though, has one problem or the other, be it incompatibility with search engines or issues with zooming.

Successful Second Run, Thanks to Subpixel Rendering

The introduction of Safari 3.1 by Apple marked a turning point in the use of Web fonts. The browser update brought the old @font-face rule back. A significant improvement came with the introduction of flat-panel LCD displays, which have high screen resolutions and anti-aliasing via subpixel rendering. Subpixel rendering takes advantage of the fact that each pixel on a color LCD is composed of individual red, green and blue subpixels. It uses these subpixels to anti-alias text, which increases the apparent resolution of an LCD display and thus improves the rendering of text — even text set at very small sizes.

On Mac OS X platforms, this function is activated by default. Windows uses its own trademark, ClearType, which is activated by default on Windows Vista and Windows 7 but turned off on Windows XP. In Microsoft Office 2007 and 2010, Internet Explorer 7+ and Windows Live Messenger, ClearType is turned on by default, even if it’s not enabled throughout the operating system.

Safari 3.1 offered support for standard font formats for the first time (demo).

Subpixel rendering is displayed in Safari on Mac OS X. What’s remarkable about Safari’s @font-face support is that, for the first time, embedding standard formats — namely, TrueType (TTF) and OpenType (TTF/OTF) — is possible without any prior conversion, as the following CSS shows:

@font-face {
font-family: Gentium;
src: url(fonts/gentium.otf);
}

The Font Foundries’ Concerns

Suppliers of commercial fonts, however, were not exactly happy about the new functionality. Anyone could now download and embed fonts without paying the licensing fee. A lively debate between browser makers and font foundries began… and continues. The foundries want commercial fonts to be protected from bootlegging and unlawful use, while the browser makers do not feel obligated to claim the foundries’ copyrights; they instead argue that content providers are responsible for declaring any copyright-protected fonts on their websites, just as they are obliged to do with images, video, text and other assets.

Using the @font face Kit Generator

For a practical test you might want to download the font package at Graublau Sans Web. This font package offers a PostScript-based OpenType font that can actually be used on Safari 3.1+, Firefox 3.5+ and Opera 10+ without any changes. In order to provide browser support for Internet Explorer and improve the screen display, you can use the @font-face Kit Generator. Click the “Add Fonts” button and upload the respective font with all its weights. Then choose the “Expert” radio button and check all the necessary options, which we’ll go through in more detail now:

Font Formats

The main problem is that you have to activate EOT in order to obtain @font-face support on Internet Explorer IE4 to IE8 (in IE9 RC, WOFF is supported as well). SVG fonts will mainly be needed for Mobile Safari on the iPhone and iPad prior to iOS 4.2, although Chrome and Opera can handle this format as well. Alternatively or rather in addition to SVG, there’s the compressed version SVGZ, which offers a much smaller file size. Unfortunately, it doesn’t run on the iPhone so you’ll need the SVG font anyway.

Creating a TrueType font format will allow for support in Safari (since 3.1), Firefox (since 3.5) and Opera (since 10). Checking the WOFF option won’t increase browser support these days, but it sure will in the near future, when WOFF has become the standard Web font format.

Rendering and Miscellaneous Options

• Add Hinting: This option offers improved font display in Windows. You should only uncheck it if you are absolutely positive that the respective fonts are screen-optimized already.
• WebOnly™ adds specific modifications which allow browsers to use the modified fonts but avoid installation of these fonts on common operating systems. Checking this option helps to avoid unintended illegal copies.
• Keep OT Features: Desktop fonts may have a number of OpenType functions. As there is little browser support for these functions today, you might want to remove them with this option (rendering and miscellaneous options). In order to keep some of the standard, i.e. already supported OpenType functions such as ligatures, you can activate this option.
• Remove Kerning: Another possibility to reduce the file size is by checking this option which will erase all kerning values that are contained for specific letter combinations. In case you are going to use the font for body text, this option is highly recommended. For headlines it should be handled with care or not be done at all as the missing kerning values might lead to the unpleasant effect of the shape of words looking like a Swiss cheese.
• Simplify Outlines does exactly that: it tries to simplify the outline of characters. As this option reduces the quality of screen display, it is not advisable to use it.
• Build Cufón File isn’t directly part of the options for @font-face embedding. For further details on building a file you can also check the Cufón website.

Subsetting

Subsetting means that all superfluous characters are removed. Whether or not this is actually necessary depends on the respective font. Some fonts can easily contain thousands of characters of various writing systems which bloats the font file considerably. Without subsetting such fonts, they are not suitable for use as Web fonts.

The option Basic Subsetting is set as default and offers the usual Western European glyph allocation based on the character set MacRoman. Custom Subsetting allows for a custom defined scope of contained characters and glyphs. Whereas, the option No Subsetting deactivates subsetting completely and converts the font with all contained characters and glyphs.

CSS-Formats

The @font-face Kit Generator creates both the converted fonts and the matching CSS files which is helpful as the CSS code can be huge, especially when several fonts with various font formats are involved.

You can choose three different versions:

• Fontspring Syntax
• Further Hardening of the Bulletproof Syntax
• Mo’ Bulletproofer
• Smiley

The Fontspring syntax is currently the most simple and compatible one. It can deliver the WOFF file to IE9 and EOT to IE prior version 9 and it also works on mobile operating systems like iOS and Android.

CSS Options

The option Style Linking groups styles by family. This allows for addressing the fonts later through the CSS properties font weight and font-style.

This option will only work properly if the font family doesn’t contain more than the common four styles, i.e. regular, italic, bold and bold italic. Otherwise, you should leave the option unchecked so that fonts can be addressed by independent family names.

Last but not least, the option Base64 Encode embeds Web fonts with a base64 encoding into the CSS code instead of creating a separate font file. As a result, the fonts don’t appear as font files in the browser’s cache.

Code Sample

The following example illustrates what your CSS code for @font-face embedding might look like:

@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'),  /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
url('Graublauweb.ttf')  format('truetype'), /* Safari, Android, iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}

The first statement is for IE9 in IE7 & IE8 render modes. In the second source declaration, the EOT file for Internet Explorer is declared first in this comma-separated list and the name is followed by a question mark. This fools IE into thinking the rest of the string is a query string and loads just the EOT file.

The other browsers follow the spec and select the format they need based on the src cascade and the format hint. The SVG specification contains an additional hash tag as a unique identification number. This is necessary as SVG files may contain several fonts. However, the Fontsquirrel @font-face generator takes care of the identification number and its embedding into the CSS code automatically.

Please notice that the syntax suggested by Ethan Dunham in his article The New Bulletproof @Font-Face Syntax and revised by Richard Fink in an article on New @Font-Face Syntax: Simpler, Easier no longer works in Internet Explorer 9. Also, take a look at Ethan’s follow-up Further Hardening of the Bulletproof Syntax.

Loading Time Increases With Amount of Fonts

By means of the above-mentioned options, file sizes of Web fonts can be reduced to approximately 30 to 60 kilobytes. Larger font files or too many fonts on one web page can slow down loading of the page, especially on mobile devices.

Weird Interim Solution in Firefox

Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using Google’s Webfont Loader.

The result of the above process looks like this in Safari on Mac OS X.

Embedding Web Fonts From Your Server

You don’t necessarily always have to rent or licence fonts for use on Web pages. You can also pimp your already licenced desktop fonts for cross-browser Web font embedding and upload the fonts to your own Web server.

Fonts to Choose and Fonts to Avoid

Before you start converting your desktop fonts into Web fonts, make sure that the licence with the respective font entitles you to do so. Generally, commercial licence agreements do not permit the storing of font software on a publicly accessible Web server. This, however, is a prerequisite when using the @font-face rule.

Currently, commercial font providers count on Web font embedding services. Only a few suppliers deliver special Web font packages for storage on the customer’s own Web server, among them FSI FontShop International and Fontspring. A growing number of webfont packages can also be licensed via MyFonts.com.

Once the Web Open Font Format (WOFF) is accepted as a standard, more font vendors might offer this service.

Embedding Free and Open-Source Fonts

Besides commercial fonts, there’s a wide variety of freeware and open source fonts which you can embed into your Web pages. A list with suitable fonts that are free for use via @font-face embedding can be found on webfonts.info.

Another huge collection of such fonts is offered by Font Squirrel. It is a useful tool when it comes to converting desktop fonts into Web font formats as it offers a powerful tool, the @font-face Kit Generator.

Please note that the fonts you want to convert have to be legally eligible for Web font embedding!

Creating web fonts made easy by Font Squirrel’s generator.

Tips, Tricks and Workarounds

The possibilities for using custom fonts on Web pages have developed more quickly over the past two years than anyone had expected. But Web designers still have to struggle with a clutter of formats in order to provide cross-browser support for a given font. This problem will subside as soon as the Web Open Font Format (WOFF) is established as the standard Web font format.

Typographic variety beyond the monotony of system fonts.

Another obstacle, mentioned earlier, is the prevalence of Windows computers on which subpixel rendering is deactivated (either by default on Windows XP or by preference on the part of users). Compared to system fonts, most Web fonts are displayed at low quality on screen displays that lack subpixel rendering. Time will solve this problem, as users replace old hardware and operating systems. In the meantime, Internet Explorer 9 works with a text engine called DirectWrite that delivers significantly improved rendering.

Using Web fonts in your design requires thorough testing on as many different browsers and platforms as possible, with a close look at various options for rendering text. If the screen display is of poor quality and lacks subpixel rendering, then opt for graceful degradation by serving system fonts to older browsers and OS. Conditional comments are the easiest way to exclude older browsers and operating systems from style sheets with Web fonts. Of course, JavaScript is a more elegant way to detect whether a client’s subpixel rendering is turned on.

Text Layout

Even though some Web layouts are drawing nearer in sophistication to print layouts (thanks to rich typography and Web font embedding), there’s still a big difference: browsers do not automatically hyphenate text. Especially in languages with many long words (such as German), justifying text is not possible without creating spacious gaps, and thus reducing the readability of the body text.

With JavaScript, you can provide language-based client-side hyphenation. A server-side solution is offered by phpHyphenator. Still, these are band-aid solutions for a function that should be integral to every browser — hopefully in the near future.

OpenType Typography Features

Another text-layout shortcoming shared by common browsers has come into focus as Web fonts spread: high-end desktop publishing programs, such as InDesign and QuarkXPress 7+, do not support OpenType typographic features.

OpenType functions add several smart options that enhance a font’s typographic and language-support capabilities. If an application supports these options, then characters can be replaced by additional features automatically. For Roman scripts, these mainly concern ligatures, fractions and small capitals.

Computer-generated small caps (gray above) and true small caps (blue below) in Firefox 4 beta.

Some fonts can be put to use only through OpenType functions in the first place. Take joined Roman lettering or Arabic writing, in which the shape of a character depends on its position in the word and on adjacent characters. Comprehensive OpenType fonts might, therefore, contain alternative glyphs for a given character. By means of OpenType functions, the basic version of a character would be replaced by a version with matching connections, based on context, as this screenshot illustrates:

The blue lettering on the bottom exhibits a perfect joining of characters, thanks to context-based replacement in Firefox 4.

The current beta version of Firefox 4 offers access to this OpenType feature for the first time. You can define with this browser-specific attribute:

h1 {
-moz-font-feature-settings: 'smcp=1';
}

This would display the headline in true small caps, provided that the font has a small caps case.

Microsoft has a list of common OpenType features. So far, there are no standards to address these features in your CSS style sheets, but the CSS Fonts Module Level 3 draft mentions the possibility. Other browser companies will likely follow this example sooner or later.

Browser developers still have a long way to go before the Web catches up to the text layout in print design, let alone overtakes it. It’s good to know, though, that there’s a growing awareness of typographic subtleties among browser manufacturers. No doubt, further progress can be expected soon!

(al) (sp) (ik)

© Ralf Hermann for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: typography

  

We have theories about everything: why the sky is blue, why apples fall, why bees buzz (and do other unmentionable things), why my boss said a certain thing, why that girl in the restaurant looked at me, why didn’t that girl in the restaurant look at me…. We’re wired to theorize. Theories make us feel secure. We can wrap our heads around them and explain them with little diagrams on whiteboards, or with equations, or even graphs. We give theories fancy names like “The Classical Elemental Theory” and “The Flat Earth Hypothesis.”

The bottom line is: we humans love theories. Yet as a wise person once said, “In theory, theory and practice are the same. In practice, they are not.” This article is about practice. It’s about five and a half — yes, half — habits that highly effective designers tend to share and which I’ve observed first-hand in the complicated, non-theoretical, absolutely real world. If practice is your thing, keep reading.

This article doesn’t provide an ultimate medicine for becoming a highly effective designer, but it might help you achieve a better workflow.

They Know When To Quit

Some of you might know Vince Lombardi as a football legend. I know him as the guy who ruined the world by uttering seven simple yet lethal words: “Winners never quit, and quitters never win.” You’ll find this unassuming little quotation’s fingerprints all over tragic events worldwide: co-dependent lovers who implode their relationships, leaders of warring nations who refuse to compromise for peace, CEOs who won’t back down from flawed strategies to save their company from bankruptcy, and blackjack players who double-down instead of retreating to their rooms.

Admittedly, Vince wasn’t the real offender. He was just a messenger for the real culprit: our humanness. The urge to persevere despite seemingly unconquerable conditions is as human as opposable thumbs. We’re so awful at cutting our losses that there’s even a technical term for this tendency: loss aversion. We strongly prefer to avoid losses than to achieve gains. It’s central to our inability to quit. Quitting has a bad rep, but it’s often the most rational option.

Quitting doesn’t necessarily mean pulling a Jerry Maguire, although it did work out well for him in the end.

As Seth Godin writes in a little book about quitting called The Dip, “Winners quit all the time. They just quit the right stuff at the right time.” It’s worthy, practical advice that can curb the runaway idealist in every designer. Bear in mind, we’re not just talking about quitting your job. We’re talking about quitting things on a daily basis. This entails: picking your battles at work; discerning not just your design goals, but your non-goals; relenting to client needs when necessary; and trading off some design idealism for business karma.

Ironically, quitting can be good for your career. So, that’s the first habit: learn to quit. Let things go. Kill your darlings.

They Redesign Processes

I remember when Agile software development methodologies were all the rage. I was working at Amazon as a program manager at the time, and our team was the first to adopt Scrum. Scrum was going to enable us to ship early, with twice the features and zero overhead (at least, that’s how we interpreted Ken Schwaber’s words).

It would have been nothing short of a miracle, but then again, most of us were fresh out of school, and miracles, free pizza and unicorns were part of our reality. In the end, we shipped almost a year behind schedule, with fewer than half of the planned features. Worse, over 75% of the team quit within 90 days of launch (which is not necessarily a bad thing, as we just learned). Yippee ki-yay!

What’s most worrisome about failures such as these, though, is that they so often occur despite “gold standard” processes. It happens all the time.

Tomes have been written about why our best practices fail so frequently. For a literary (even theoretical) overview, I direct you to two books: The Design of Design by Fred Brooks, author of The Mythical Man-Month and recipient of the 1999 Turing Award; and The Black Swan, by the brilliant, Larry David-like Nassim Nicholas Taleb.

A Website Named Desire illustrates (see the screenshot above) the non-linear and highly erratic nature of the web design process in the real world.

To understand such failures from a practical standpoint, we must turn to another book: Predictably Irrational, by behavioral economist Dan Ariely. Ariely’s research confirms that predictable irrationality is often the root cause of process failures. Indeed, as A Website Named Desire illustrates, our biases, prejudices, quiet agendas, irrational actions and diverse portfolio of imperfections are more often to blame than the processes themselves.

Formal processes work when we accept the irrational nature of people and make room for those imperfections. Thus, the key to successful processes lies in how practically we implement and execute them, not in how well we adhere to an ideal.

Highly effective designers embrace and learn processes — and then tweak them to work well in reality.

They Combat Distortions Of Reality

Picture this. You’re reviewing final comps with a set of stakeholders. After multiple iterations, you’re finally feeling great about the design. Then, out of nowhere, a senior manager says, “I think we need to change the blue on the top bar. It doesn’t feel right. I showed it to my wife, who’s pretty good at picking colors, and she felt the same way.” He continues, and then delivers the final blow: “I know you worked hard to find the right color scheme, but picking colors is pretty subjective, right? It’d be worth taking another pass at this.”

Groan.

“How a Web Design Goes Straight to Hell,” a classic post on Matthew Inman’s “The Oatmeal”, humorously depicts distortions of reality.

“Design is subjective” is one among many prevailing distortions of reality — ideas that have gone unchecked for so long that they parade around as facts — in our organizations. You might recognize these other distortions: “Data and logic trump intuition,“ “Design is decoration,” and “More feedback leads to better designs.” Then there are those that hit closer to home, like “The page has a fold,” and (everyone’s personal favorite) “Make the logo bigger.” (Note that there is now much evidence out there against distortions like these.)

These clichés seem benign but, in fact, are extremely harmful. They are the proverbial elephant in the room at the heart of dysfunctional organizations. Highly effective designers work to resolve these distortions in their organizations.

They Find The Right Environment

People are brilliant scavengers. In a world of a million choices, we know exactly where to look when we need something. We’re good at identifying environments that meet our demands, almost without thinking. We instinctively know how to find certain things (keyword: certain).

When it comes to finding slightly more intangible things — true love, a good job, a great employee — many of us spend a lifetime searching awkwardly and failing repeatedly. We can’t wrap our minds around such abstract pursuits. God knows we try, though; how many times have you heard someone proclaim that they have made a spreadsheet to determine a life choice or a good partner?

Identifying a good work environment falls into the same category. We’re usually terrible at it. Here’s a little secret: highly effective designers are most often products of a good work environment and know how to seek them out.

What does a good work environment look like?

The answer is hidden in a brilliant presentation on clients by Michael Bierut. I recommend watching the whole thing, but if you don’t have the time, then watch the four-minute section from 13:00 to 17:00. In it, Michael answers the questions “What do I look for in a client?” and “What should I look for in a work environment?”

Michael Bierut’s presentation on clients also answers the question “What should I look for in a work environment?”

The simple answer is trust, passion, courage and brains. Each quality has obvious benefits. In a trusting environment, stakeholders can rely on their designers’ gut instincts. Where there is passion, the will to make meaningful progress will flourish. Courage enables designers to take risk and bring cutting-edge designs to market. Brains — not genius, but real-world, common-sense brains — bring it all together.

All four of these qualities must exist simultaneously to make a good environment. Take one away, and the environment will eventually become dysfunctional. For instance, take away trust, and you end up testing 41 shades of blue to find the right one.

They Habitually Rewrite The Habits

In the software industry, we strive to build “perfect” (read: bug-free) things that can’t be improved. This is a worthy goal, but it can have negative side effects. For example, we often conclude that certain practices, processes and lines of thinking have reached their zenith and can’t be modified. We start treating real life like a line of code — a meticulously crafted string, neatly concluded by a semicolon, that reaps a perfect, logical result (needless to say, I’m not referring to Web development here).

Reality — or should I say practice — proves that this kind of thinking is a mistake.

If this article were written a decade ago, it would have listed different habits. A decade from now, I expect some of the habits will have changed; for example, eventually we’ll all agree that “Design is subjective” is a distortion of reality. Heck, if you had written this article, you might have listed completely different habits.

Highly effective designers are aware of this. They’re always questioning, rethinking, improving and refining the dogma. Their methods are best captured by an old Chinese proverb: “All things change, and we change with them.”

There you have it: the final habit. It’s one and a half times as important as the other habits.

Now you know what the “half” means.

(al)

© Nishant Kothary for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:

  

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements.

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS