04/03/2013 - admin

Master pixel perfect design

pixel_master

Hello Shock Followers, let's consider for a while the importance of mastering  pixel perfect design as a way of  boosting the quality of our designs and consequently marketing ourselves as great professional designers and developers, that's what we will be discussing in this opportunity: the basic tips to achieve a clean and visually consistent product, either in icon design, application development or web design, through the implementation of pixel perfect design practices.

In today’s world where mobile devices are setting the pace on the communication between users and the world, the graphical elements of every platform and application become the cornerstone of their success. Any apparent disregard for the quality of the graphic interface may be perceived by the users as a disregard for the quality of the entire product, and even for the designers or developers themselves as part of their company, in the same way we all may feel unsatisfied with a scrappy or carelessly manufactured product like a mouse with a shard of plastic on the edge , or uncomfortable with a poorly made and crooked label on our food or the sloppy appearance of the store we go into or the clerk itself.

The issues with these cases can be united under a single problem any developer and designer must be aware of: the looks are what sell; as shallow as it may sound it is true, it is not people that we’re talking about so there’s no need for the ‘what’s inside’s what matters’, it’s products, and they must look professional and tidily done to make the clients be satisfied and trust the quality of the product, given that a program or an application with poor performance or user experience won't make it too long, but it will certainly achieve recognition if it's got the looks. With mobile devices the challenge lies in the closeness between the user and the display; the size of the screen and the conditions the device is used in draw the user closer in and makes it much more aware of the small details, for this reason it is so important to take care of the way we create the graphic elements. Being the basic unit of the graphics displayed, it is the pixel we must be particularly attentive to.

Design professionally – Keep an eye out for details

Paying special attention and understanding the importance of mastering perfect pixel design is therefore key to develop excellent design pieces. Particularly now with thousands of devices out there in the consumers’ hands, able to go online at any time, with varied capabilities, styles, screen sizes and resolutions. When all of those devices seem to have outrun traditional desktop computers market, building responsively and adding high quality images that help us achieve harmony in our work -responding to customers’ needs at the same time without sacrificing aesthetics- becomes a key area in every piece of work, complying with web standards and bringing out pixel-perfect built products. Let’s stop for a moment and consider where it all started and how the evolution of devices and possibilities for web access made the attention to details in pixel design so essential.

How it all started and what has changed

The goal of a “responsive images” solution is to deliver images optimized for the end user’s context, and we could state the basis on this subject is clearly at the core of Apple’s first developments on display capabilities, which in recent years saw the Retina display –which we will address to later in this post- come to life with a remarkable 220 pixels inch. Although regarding pixel design, more time is put into smaller images now in order to make them look professional and stylish, retouching every little detail. This is another example of how computer science developments have reshaped designing practices as a whole. Starting with the creation of the Macintosh, for which a whole new operative system had to be written, as well as graphic routines.

Later, the need to come up with great web design urged developers and designers to perfect different techniques for images displayed in a lot of different browsers, monitors, and computers running varied OS. But as this development went further, it would soon be seen that web pages were not print pages, and certain elements and aspects were required to achieve good results. Hence, pixel perfect design came under the spotlight.

In this sense, we know that the way people actually think about technology and computers has changed, and so has the graphics concept, as well as the definition of good quality images/design. This particularly brings us to consider responsive design, for it aims to provide an optimal viewing experience, in a time when –a quarter century since the Macintosh- as the interface designer and founder of Oblong (a company building apps for aerospace, bioinformatics, video editing and more) John Underkoffler considers, “memory capacity and disk capacity have been multiplied by something between 10000 and a million; same thing for processors’ speed […]” and so have graphics, as we now have more “graphics power” than a decade ago.

More graphics power was also in Steve Jobs’ mind, whose determination to create products with both great design and performance, boosted the search and development of better resolution screens, as presented in the iPhone 4 launch, back in 2010. Making the focus on every little detail and the styling of the compositions bring incredible results to the final product.

Although Retina display may not be the best quality that will ever be achieved. It might just represent the best one so far, since it is considered that its resolution hasn’t matched the actual resolution of the human eye –just yet-.

Strive for perfection

Having gone over the marketing must understands and some background, let's cut to the chase. 001
Screenshot from the Zeus GUI element set from designshock.com


This article is about creating pixel perfect images, and pixel perfect means controlling the aspect of the image down to the precision of the pixels and adjusting them to the grid, by this means we seek the goal of creating images that will be nifty, clean and professional, This applies to any graphic element regardless of the style we’re aiming at, even if it is an app where we’re going for a sketchy look, it still must look like that hipster that spends half an hour in front of the mirror to accomplish the messy look, not like the regular bump  you can tell with a glimpse that didn’t try and just looks like he got up a second ago.


With pixels it comes down to letting them advice you, because well, they know better than you, so, when playing with pixels you must know how they behave; they are pretty much like us: they are quite bold when acting alone, when they want to do something on their own without caring for the acceptance of those around them they really stand out, but when they work along others they know how to blend in, to cooperate, and do things they couldn’t by themselves; and when they’re standing in line and one slides to one side it messes it all up like the guy that moves out of place for a picture at the last second.

002
The single pixel stands out in the eyes on the upper icon and in the center of the q on the lower one; the groups of pixels working together in lines and color areas in all three; and, in the line that crosses the f you can see the misplaced pixels. Icons from Iconshock’s freebie sets (the errors in the last icon were purposefully drawn for this example).


So when you have,say, a rounded square, you’ll want it to have smooth rounded corners and bold, well-defined straight sides; the sides should be easy to come up with, just think of a line, a division between two groups: the more differentiated they are from the other group and the likelier to the next one within the group the better, like superheroes and evil villains, throw some outlaw vigilantes or socially-accepted felons in and the line gets all blurry. Blurry! yes, that’s the same chaos we experience in our daily lives blurring the line, the gray zone, it can make things that should be simple a mess, and so it does to the lines of our square.

On the other hand there’s this tool akin to the blur that can also help relief the hardness of a black or white perspective: anti-aliasing, it softens the difference between two areas of color by placing pixels with intermediate tones –when dealing with a transparency-adjacent color area the transition happens from the color to that same color with no opacity-. It is this anti-aliasing that’s going to help us achieve a nice soft round corner; should you try to draw  a curve with pixels of the same color that completely stand out from the background, you’d basically be putting a line of heavily armed cops before an angry mindless mob, you can tell the hard edges, you can see those pixels not blending, and being rather disruptive, they do what they’re there to do, contain, but they don’t help you build an harmonic and professional looking image. What’s needed in this case is a series of mediators, that are knowledgeable of the nature of the mob and can contain it calmly, in the case of our rounded square, the pixels of the edge can’t be a ragged line of enforcers, but a smooth band of pixels blending just the necessary.

The anti-aliasing, however, cannot be overused, or it will look like the line’s being dissolved, and that brings us to the opposite problem  from the last situation; let’s say these mediators get too involved, they overthink the implications of their situation or whatever: they will lose focus of their mission and will start to spread a problem on their own, the same happens to the curve, it will become a blurry band and it compromises another value of a good pixel perfect graphic: crispiness. The deal with crispiness is that the crispier the cleaner, and there’s no use making perfect horizontal or vertical lines if the curved ones fail to show some of that same precision.

In most image editing software the anti-alias is enabled by default, avoiding the problem of overdoing  it manually, yet sometimes it happens the other way around and the objects look a little jagged still, so we must enhance it manually.

003
The blue one shows the correct anti-aliasing, the green one shows a problem with the lines being blurry, the purple one the pencil-drawn jaggy corner, and the cyan one an overdone and sloppy anti-alias.
 

Hands on experience

Now let’s ground the concepts a little more by doing a simple exercise on Adobe’s Photoshop. Remember what I told you about letting the pixels advice you because they know better? when we start with a project it is time to get some help from them, and the vectors paths will give us a hand as well. Usually if we work just by filling selected areas and using the pencil we won’t have much problem achieving straight and well defined lines or areas, but being pixel they’ll be hard to manipulate or edit down the road, specially if we need to do corrections or deliver  source files to a client, for these cases it is best to use vector shapes that are far more easily edited.

The thing with vectors is that they are immune to the limitations of the pixels and that means that they won’t  always sit respectfully between them, they can and will –if left on their own– go and do crazy things to the pixels and ruin the crispiness, but there’s a way to fix that whimsical behavior of them: the grid and the option to align path nodes to it, this way the nodes fall perfectly between the corners of the pixels rendering them easy to align even by hand; in order to do this the grid must be activated first, we do it going to the Guides, Grids & Slices option in the Edit>Preferences menu, there you can choose how to display the grid: color, style, how often there’s a gridline and how many subdivisions to place in each space; for the best results with pixel work it is better to set the style to dots and the distance between gridlines in a pixel distance matching the number of subdivisions, and for those of us familiar with the decimal system the 10px-10 subdivisions approach should be much more efficient, however, when working with large files it may look too busy to work with (that’s a plus for the dots, they don’t make as much noise as the other options) so higher numbers may be better then.

004
Edited screenshot to show the path to enter the window for the grid adjustments.


Continuing with the exercise we’ll draw now a square with round corners adjusted to the grid (this is done in the menu View>Show>grid, and View>Snap to>grid, this way we have a pixel perfect path that’s so much easier to modify than a raster image. Since the vectors in Photoshop are treated as a mask for a layer we can use it on gradient layers to avoid using a gradient overlay effect and be able to use the path as a clipping mask; this way there aren’t two equal shapes aligned which would affect the anti-aliasing.

With circles for example it might happen that it looks too hard on the upper, lower and side edges, because the pixels align there, so an easy way to fix it is resizing it just a little, sometimes bigger and sometimes smaller, that reduces the strength of the straight looking sections. other way to fix a less than perfect anti-alias is selecting the vector mask while pressing ctrl/cmd to produce a raster selection and produce a raster opacity mask in the same layer, then hiding the vector mask by clicking on it while pressing shift and proceeding to manually adjust the raster mask. it is very useful (and important in case you must deliver the source file) that you don’t get rid of the vector mask after adjusting the raster one, so you can continue to modify it easily.

005
Here’s visible the grid with a point every pixel and every gridline spaced every 10px, the gradient layer with a vector mask adjusted to the pixels –as well as the path selected–, a raster mask to enhance the anti-alias and the pattern fill masked in. 


With such a simple example we go through the basic points to produce a high quality image that’s pixel perfect.

But if we desire to go above and beyond the call of duty, so to speak, there are other, more precise, ways to achieve pixel perfection as well. These arcane design secrets are not usually imparted along the more common tips because, frankly speaking, they require a lot of work but if you strive for absolute perfection then this technique will come useful.

Pixel Hinting

The method’s name is pixel hinting and, in short, it allows you to move pixels in intervals smaller than 1px, which will come useful when making pixel perfect typography and illustrations. It involves going into File> Preferences> General and unchecking Snap Vector Tools and Transform to Pixel Grid because usually, the pixels, in their infinite wisdom, know better than any half-baked automated tool Photoshop may have. After doing that, the real fun starts because now you need adjust each and every single vertex using the up and down keys to move them in extremely small increments which will allow you to finely tune the amount of aliasing you desire. It’s a harsh and time consuming labor but, sometimes, it’s necessary.

Pixel Perfect Type

On the subject of pixel perfect typography pixel hinting is extremely useful, but not nearly enough to polish characters to perfection. You’ll need to know the different settings and subtleties of the anti-aliasing options available for a type layer, the intricacies of changing tracking, horizontal scaling, and fractional width. The reason for this is that letters are complex shapes, made of a multitude of curves and no shortage of straight lines as well, and messing with the anti-aliasing of one part of the letter can change the whole thing so let’s go over type layers first.

Among the many kinds of layers Photoshop offers you’ll find Type Layer, which has several specific options tailored to type design. One of these options allows you to select between different types of anti-aliasing, which are: none, sharp, crisp, strong and smooth. Sharp, generally gives you the best possible anti-aliasing for small text and is the first step on the stairway to perfection.

Since sharp significantly reduces horizontal aliasing we still have to deal with vertical aliasing, which, if you are working with individual letters, is actually pretty easy; you just need to manually adjust the position of the troublesome letters using the transform tool until the letters match the grid perfectly, however, if you are working with whole words then it’s a significantly more complex affair since you’ll need to alter a whole bunch of settings.

When dealing with vertical aliasing in complete words we need to consider fractional widths which are the spaces (or tracking) between letters. These spaces are measured in fractional units by default, which means you’ll need to turn fractional widths off by going to the options menu of the characters palette.

The previous step should have significantly reduced the anti-aliasing in many letters but not all, to further perfect your text you’ll need to manually change these spaces between letters, which leads us to manually changing the tracking for problematic characters, changing the value for that option of the character palette. Remember, as the good book says “thou shalt never go over 25 points or below -25 lest thou desire for an unsightly text”.

Finally, if everything else fails to solve your anti-aliasing issue, you can try and change slightly the width of the incorrigible characters until it fits the pixel grid perfectly. Remember, unless it’s a pixelated typeface specifically designed to fit the pixel grid of your screen or you made it yourself, it’s nigh impossible to make it fit with absolute, 100%, precision; you should instead aim for a reasonable amount of perfection and hide the rest with careful use of contrast and, since light text over a dark background will make the blur noticeable, aim for dark text over light background.

To sum it up, you must understand the ability of the pixels to differentiate from one another, and their capability of making transitions to achieve soft curves, to produce really professional graphics that are tidily finished and can give your work the edge it needs to catch the client’s eye.

To show you an example, you can find several pixel perfect icon sets here at Iconshock, which have been hand crafted by our pixel perfect experts.

  Beyond the pixel

Not so recently by now there are considerations raising about the impact of higher density displays and density-independent design and how it will eventually displace pixel-perfect design since pixels will no longer be discernible by the naked eye, however, even in this scenario there's only so much the density of the displays can be raised while being meaningful, past the point of balance between display and eye resolution it's unnecessary and in that limit there will still be a difference between a blurry and a crisp line that the industry will keep in mind and, until we reach such a technological singularity in which images presented in these devices are indistinguishable from real life, there are still many ways to optimize the design and strive for maximum sharpness, such as the aforementioned  responsive design and cutting edge technology like Scalable Vector Graphics, or SVG, for short, which is a vector rendering engine for web browsers that allows the creation of resolution independent images and is “browser agnostic”. So, to conclude, pixel perfection is not just a matter of technology, it’s the end result of a carefully considered design process which takes the screen’s pixel grid and size into account to better optimize the design process.

Hoping this comes as much of help to you as it has been for us, this is it for now, we’ll leave you with an incredibly useful video on SVG and pixel perfect optimization for retina displays.

ThemeShock

5 Responses to “Master pixel perfect design”

  1. ChloeNo Gravatar
    April 12th

    Very good post specially the effects of anti-aliasing. I would love to have more tutorials on creating pixel perfect images on small icons.

  2. adminNo Gravatar
    April 15th

    Hi, Chloe! We are really glad to see you liked this post… and we’re working on the next one right now! Thanks for your feedback. stay tuned ;)

  3. RUlliNo Gravatar
    April 15th

    Great Icon.for App

  4. dimaNo Gravatar
    June 2nd

    Interesting

  5. adminNo Gravatar
    June 17th

    indeed

Leave a Reply

*