Archive for March, 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

When you work for yourself – as a designer, a writer, a photographer or some other creative job – you seem to have it made: no boss to answer to! You can set your own hours! You’re living the dream, doing what you want to do! But there is a downside to freelancing – seven that I’ve listed below.

1. Friends and family expect you work for them for free. I am guilty of this myself, to a point. I ask my lawyer friends to explain legal stuff and ask doctor pals for medical advice. But I try not to take advantage. Acquaintances often naively think that everything creative pros do is fun, but they don’t realize that it takes time and money to produce the product, whether it’s photographing a wedding or building a website.

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

The Mercedes-Benz. They’re sleek, stylish and sometimes glitzy and powerful. Their recent TV campaigns show big, boastful sedans, ripping donuts around their “legal” team in the middle of the sand. Their print campaign, is a touch different. It draws on emotional ties between the left and right brain. The beautiful illustrated spreads show creativity, free spirit and passion of the right brain vs. the familiar, accurate and linear. The campaign, is beautiful, articulate and creative. The copy is carefully crafted and works with each illustration. The campaign was created by Shalmor Avnon Amichay/Y&R Interactive Tel Aviv, Israel and is on adsoftheworld.com

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