Create Pixel-Perfect Assets For Multiple Scale Factors

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

View the article with images here http://www.smashingmagazine.com/2014/10/15/create-assets-for-multiple-scale-factors/

We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

Of course, Android developers have always had to deal with many different sets of assets. Still, designers are finding themselves questioning their production workflow. In this article, we’ll focus on iOS, but you could easily extend this approach to Android and the web. We won’t try to provide a silver bullet, and perhaps other ways might seem easier at first, but this article lays out a solid workflow that scales up for big projects.

First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.

A unified icon document has the advantage of keeping everything together in one file, allowing you to see how well your icons and assets harmonize.

If you’re designing for iOS 7 and above, then you might think that 1x versions aren’t needed anymore. However, you’ll still need them for devices such as the original iPad Mini, the iPad 2 and potentially Android and the web.

Set Up Photoshop

First, I’ll show you how I set up Photoshop. If you know what you’re doing, you can use other settings. But for those curious about how I like to work, this is it:

1. Disable eye candy like “Animated Zoom” and “Flick Panning.”
2. Disable “Snap Vector Tools and Transforms to Pixel Grid.”

The first point is a matter of personal taste, but not following the second point can get in your way when you’re trying to be precise with the Direct Selection tool.

These selections will help you working precise with the Direct Selection tool. (View large version)

Then, I’ll configure the Move tool (V) to select layers. You don’t need to check “Auto-Select” because you can select a layer automatically by pressing theCommand key while clicking. Disabling this option protects you from moving layers unintentionally.

Configure the Move tool (V) to select layers. (View large version)

Feel Free

First and foremost, I believe that design and production are two separate phases.When your creativity is flowing, you shouldn’t worry much about production constraints.

Design at your favorite resolution (perhaps 2x), and lay out using the dimensions of a device you’re familiar with. But definitely use a real device, and use apps like Skala Preview and xScope to mirror the design live on your device. You should not be working with apps unless you are constantly checking the design on a real device.

Tidy Up Those Vectors

As noted, I’ll assume that you’re designing your icons in Illustrator. Before copying them to Photoshop, you’ll need to tidy them up. Use Pathfinder to add and subtract paths until you have a single shape.

If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop. (View large version)

On the left above is a complex icon made up of multiple shapes, including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the “Minus Front” button in the Pathfinder panel. Then, select all shapes and click “Unite” to combine them into one.

Now, copy the path to Photoshop, and paste it as a shape layer.

Paste your path as a shape layer.

If your shape ends up a mess, that means you didn’t tidy the vector graphic properly.

Align Forces

When you paste the icon in Photoshop, it might look something like this:

When you paste the icon in Photoshop you will probably see those gray pixels around the shape. (View large version)

When you zoom in close on the icon, you will probably see those gray pixels around the shape. Those “partial pixels” occur if a shape does not fill an entire pixel. We don’t want any of those.

We want to start working from a 1x version of the icon because, when tidied up properly, you will be able to scale this version up to 2x and 3x without any problems. If you did the original design in 2x, then you’ll need to scale the shape down to 50%.

Now it’s time to align the horizontal and vertical lines to the next full pixel. It’s OK if curves and diagonal lines don’t fill up entire pixels.

Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points, and use the arrow keys to move these points between two pixels.

Note: The closer you are zoomed in (use Option + Shift + mouse wheel), the more precisely you will be able to move the anchor points.

The anchor points of the bottom and the right side are now aligned to the pixel grid.

All partial pixels are gone.

Do A Check-Up

Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, then align them as described above. If everything checks out, then scale the shape down to 20%.

Remember: From now on, you should always scale proportionally from the upper-left corner, and always make sure that the X and Y values are round numbers.

If you see partial pixels, then align them as described above. (View large version)

Scale It

Let’s see how different resolutions of our icon work out. Select the 1x version (V, then Command + mouse click), and duplicate the icon (Option + click and drag) to a position next to the 1x version.

Scale the duplicated icon up to 200% proportionally from the upper-left corner. The 2x version should show no new partial pixels. It should only be bigger.

To keep things simple, we will assume you are happy with the 1x and 2x versions and that you now want to see the 3x one.

Duplicate the 2x version (Option + click and drag), move it off to the side, and then scale it up by 150%. (So, 200% × 150% = 300%)

Later in this article, I’ll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x versions, then you know now that 2x and 3x versions can be generated from the 1x version without any problems.

Go ahead and delete the 2x and 3x versions — we will be generating them automatically.

Generate And Enjoy

Photoshop has a built-in tool called “Generator” that automatically renders a shape layer to multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.

In this case, it should look like this: cover.png, 200% cover@2x.png, 300% cover@3x.png

The commas separate the versions, and the percentage tells Photoshop the amount of scaling.

The commas separate the versions, and the percentage tells Photoshop the amount of scaling. (View large version)

Now, activate Generator.

Activate Generator. (View large version)

Generator will create a folder next to your PSD file and will automatically save PNG files to it when you save the Photoshop document.

Generator will automatically save PNG files when you save the Photoshop document. (View large version)

To add a new scale factor at a later point in time, you simply have to alter the layer’s file name.

Get Creative For Different Resolutions

Modifying artwork for different scaling factors is a common practice because you can show more detail in a 2x graphic than you can in a 1x version.

In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.

Create different icons for different resolutions. (View large version)

Obviously, you wouldn’t delete the 2x version because it is different from the 1x. Create an extra group for the 2x version, and give it a layer name that is compatible with Generator. Because you’ve already scaled the 2x version in Photoshop, don’t add “200%.”

To end up with a 3x version after working in 2x, you’ll have to scale by 150%. So, you would add this number to the 3x file name.

To end up with a 3x version after working in 2x, you’ll have to scale by 150%. (View large version)

Size Matters

Making the 2x versions of your assets exactly two times larger than the 1x assets is absolutely critical. Sometimes this is harder to do than you think. Consider this keyboard:

Making the 2x versions of your assets is sometimes harder to do than you think. (View large version)

For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys were to thin, so I used 2 pixels.

When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4 pixels wide, which looks a little too wide.

But with 3-pixel-wide keys, the distance between all of the keys changes. To keep everything symmetrical, we need to make the keyboard 1 pixel shorter. And because we can’t scale 3 pixels by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.

To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.

To fix the export size of our 2x asset, we can add a layer mask. (View large version)

Generator will always use the dimensions of a layer mask if one is present. (View large version)

Summary

Hopefully, the methods described here will simplify your workflow. As you can see, creating pixel-perfect assets for different screen sizes and densities isn’t such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.

DOWNSIDES OF THIS APPROACH

• Assets are stored at 1x in the Photoshop file.

UPSIDES OF THIS APPROACH

• Create multiple image assets from a single shape layer, potentially saving yourself a lot of time in the future.
• Icons are all in one document.
• Generating assets for other scale factors from your PSD becomes easy for other people.
• Seeing which resolutions of an icon need special attention becomes easy for other designers.

Geometry in UI Design

I found myself using geometry while designing user interfaces quite often, so I decided to share a simple example I was working on the other day.

Aligning interface elements in Photoshop is pretty easy as it comes with the pre-defined aligning options. And for the 95% those are all you really need. What can you do in those 5% examples when you can’t use these options? Well, it actually depends a lot on what you’re working on. Let’s see a specific example.

Aligning an Icon to the Center of…

the quarter of a circle. This was my most recent example when I had to use geometry to get that pixel perfect UI element.

I was working on a confirmation window, which was inside a circle. Yes, we’re trying out all sorts of cool stuff at wondermags. What we want to do is ask the user if he’s sure of the action he’s about to execute. We give him an explanation of what will happen and options to confirm or cancel.

Here’s a quick sketch for this window:

A very rough sketch :)

So the problem we’re trying to solve here is how to properly align the two icons to the center of each of the buttons at the bottom half (confirm and cancel). If you use the align to vertical and align to horizontal center in Photoshop, this is what you’ll get:

Icons are not properly aligned to the actual center of the buttons.

Now this doesn’t look right at all and it certainly looks very strange to say the least. Photoshop aligns it like this because it still treats it as a rectangle, not a quarter of the circle (there’s no difference for Photoshop).

For Photoshop, this is still a rectangle.

---

Square Area is the Answer

I was thinking, what would be the easiest and most precise way to align it right to the actual center. Here’s where geometry comes handy. I figured that the key here could be the square area of the quarter of the circle. All I had to do is calculate the square area of it and draw a rectangle with the same square area to use as a guide. But first, I had to find out what dimensions I had to use.

This is the square area that interests me (dashed area).

The formula for calculating square area of a circle is A=π*r^2. But in my case I was only using quarter of the circle. So my formula was:

A = π * r^2 / 4

π is a standard which is 3.1416 and r is the radius, which in my case is 145 pixels (also half of the width of the circle).

I made the calculations and the square area of the rectangle I had to draw was 16,513 pixels.

But the square area info doesn’t help me much. I can’t draw a rectangle in Photoshop so that I would set the square area of it. What I need is the width of the rectangle. And to get it, I just had to add the square root to my formula.

A = √(π * r^2 / 4)

The end result is 128.5 and lots of decimals. Now I could draw a square on top of my quarter of the circle with width set to 128 pixels and align it to the top left corner. The center of this square is the actual center of my button. This is what my icon needs to be aligned to.

Rectangle with the same square area as the quarter of the circle.

I aligned the icon to the horizontal and vertical centers of the guide rectangle on top of my circle.

Aligned the icon to the center of the guide square.

Applied the same process for the other button and that’s it. Pixel perfect alignment, pixel perfect user interface design.

Pixel perfect UI.

---

Here’s the comparison of before and after:

Before and after: wrong and right.

Conclusion

I would like to highlight two major points of this article. One is that geometry and mathematics in general can help you a lot in pixel perfect user interface design and web design. You just have to find the right way to figure it out.

The other one is that if you do something, do it properly. If you have to design an interface, go for the pixel perfection or don’t do it at all. This is what separates average interface designers from the best ones. Put some extra work in it, even more than necessary if you can.

Try, fail, think, learn.

Source

85,794 Rubik's Cubes

Cube Works Studio is best known for their toy-based artwork, particularly the pieces in which they twist Rubik’s cubes and organize them into pixelated portraits and landscapes. In the past few years, the small Toronto-based collaborative set two unique Guinness World Records by creating the world’s largest Rubik’s Cube mosaics, first The Last Supper (+4,000 cubes) in 2010 and then The Hand of God (+12,000 cubes) in 2011.

Most recently, the team set a new record by exceeding all of their past feats. They constructed this Macau Mural, which stands over 13 feet high and 200 feet wide and uses 85,794 Rubik’s Cubes to form the skyline of Macau, China. Across the course of a few months, the graphic designers sketched out the plan, twisted the cubes, and installed the completed mural at the Macau waterfront. Creative Director Josh Chalom says, “Our works are meant to inspire, unite and invoke a sense of nostalgia by using common, tangible objects and methods to create impressive and entertaining works of art that can be appreciated and enjoyed by all.”

Check out the really great time-lapse video, below, that shows the installation of the completed mural. It’s great fun to see how the piece comes together, cube by cube!

If you are interested in these incredibly playful and unique designs, you might like this list of 20 Most Cool and Unusual Portraits.

 
Cube Works Studio website

Source

Pixel Perfect Precision Handbook

Article: Source

Good pixel practice vs bad pixel practice

We love pixels! They’re the building blocks of all the visual design we do here at ustwo™, but are so often relegated to mere afterthought in the excitement of working with colours and styles. We induct all our designers into the school of pixels with our Pixel Perfect Precision™ (PPP™) guide.  The aim of the PPP™ document is to give pixels the care and attention they deserve, to make sure we get the simple things right before moving onto the detail.

Why is this important though? Isn’t it a waste of time to worry about every last pixel on the page? Like a lot of things in life, when something’s done right it should be invisible, but when it’s done badly it becomes an annoyance.

Users usually see your product even before they start interacting with it and as with everything, first impressions count. Blurred edges, objects that jump in position between pages, and colour mismatches are just a few things that a user will notice and become distracted by, even subconsciously. If your designs aren’t done properly it can leave them with a poor impression of the product, and potentially, of your brand. PPP™ ensures that designs are created to the highest quality, organised neatly and delivered correctly.

So where did PPP™ begin? Back in the early days of ustwo™, instead of forwarding an email describing how to set up colour profiles correctly, we created a small document detailing these instructions, and this is still the first chapter of our PPP™ guide.

The first version of the PPP™ document

Before long bits and bobs were added until the document had blossomed to over 80 pages! From all the content distinct chapters were created, such as Pixel Precision, Techniques, Organisation and Naming & Export; the Naughty & Nice theme was established to highlight the difference between OK and great practices.

The second version of the PPP™ document

For the second anniversary of the original PPP™ a redesign was decided upon to freshen up the style and to keep it more within our guidelines for documentation. Coincidentally, towards the completion of this Apple released iBooks Author—an opportunity too good to miss! Previously, PPP™ was distributed via PDF which always seemed ironic—PDF, a format more comfortable in inches and millimetres, tasked with guiding users in the dark arts of pixel craft! However up until this point, there was no better way to share this with our designers. This new iBooks format seemed perfect for delivering the PPP™: portable, interactive and able to deliver pixel perfect images, so we started working on a version instantly.

The latest, and most pixel perfect version of PPP™

In addition to being able to create pixel perfect digital content, iBooks Author allows us to share PPP™. We’re distributing PPP™ right here (21mb download) as a learning resource for all levels of designer. From Junior to Creative Director we’re confident there’s a process or tip that can be picked up in there! And as employers, we’d love for some of the information here to make its way into university courses as graduating students are often strong in ideas and motivation but haven’t been taught the finer details. 

PPP™ is a constant work in progress, with new pages and sections already planned for the future; part of the excitement is that as we constantly learn we’re always thinking of new content to add to it. But it’s not supposed to be gospel either—there are many other equally valid ways to handle the methods outlined in there, which we’re always interested to find out more about. So if you’ve got any better solutions, or any other comments about it, then please get in touch!

Download the PPP™ iBook here.To view it on your iPad, drag the unzipped PPP™.ibooks file to your iTunes and sync with your iPad.

Drag PPP™.ibooks to iTunes and synchronise with your iPad to read

Update:  For those that live in the cloud, the .iBooks link of the file can be found here (~14mb). This link can be opened straight on your iPad. And by popular request, for those without iPads, a PDF is available here (~15mb). Note that the scripts and example files are included with the original iBook archive in the main post above.

Pixels ( Vector / Raster )

Article Source: Click Here

In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually extremely important. This is something everyone should know, especially people who are not designers.

Most icons and logos are stored in vector image files that specify perfect mathematical representations of their shapes. Unlike JPG and PNG images, vector graphic files don’t tell the computer how to display their contents in pixels; for a vector graphic to be displayed, the computer has to perform a translation from the mathematical vectors into something that can be displayed with pixels.

This translation process is relatively simple: the computer takes vector lines, lays them on top of a pixel canvas, and then fills in each pixel that the lines enclose. The result looks like this:

The S vector path is perfectly smooth because it is defined using math that is not constrained by display technology. The rasterized S has jagged edges because there are simply not enough pixels to faithfully show what the vector lines represent. Display technology is the limiting factor here, and it has been for many decades. To get around the problem, computers use a signal processing technique called antialiasing, which hacks your brain into perceiving more definition than can be displayed on the screen.

A gift from signal processing

Antialiasing repurposes pixels into building blocks that approximate whatshould be displayed on the screen instead of what is displayed on the screen. Instead of filling in boxes (pixels) with “on” or “off” states based on how they are enclosed by vector lines, antialiasing uses some visual and perceptual tricks to get closer to the real mathematical image. The most common trick uses things called half-pixels, which are pixels at the edges of paths displayed at different intensities around shape edges, to mimic the effect of having higher resolution. Here’s what antialiasing with half-pixels does to our S glyph:

As you can see, some of the pixels that were not quite enclosed by the vector path are now displayed as shades of gray. When you zoom out, those different intensities simulate the look of a sharp edge. These half-pixels can fill in gaps that solid “on” pixels cannot. But don’t let this trick fool you; the antialiased S is still not actually sharp. Antialiasing is a hack. It tricks the brain into perceiving a sharp shape when in fact it is looking at a gooey form. This is why reading on Retina displays feels so much better; you’re not looking at blurry shapes.

Until we have Retina displays everywhere, we’re going to have to live with antialiasing techniques. The problem is that computers are terrible at doing it automatically. Because the computer doesn’t know what is in the resized image, it doesn’t know where to optimize using half-pixels. This is why I included manually antialiased images with the Markdown Mark. Look at the demonstration below. The right side of the image shows icons that were automatically antialiased by Photoshop and the left side shows the manually fitted ones I included with the Markdown Mark:

The difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that’s two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.

Let’s get a closer look so you can see exactly how the problem is presented in pixels on the screen. The top image in the figure below, which was fitted by a human, shows the correct border size of 3 pixels, while the computer-resized image shows 3.3 pixels. Zoomed out, the 30% half-pixel makes the edge look blurry (this is the 66x40 version of the Markdown Mark from above).

Also notice that similar issues occur when computers antialias typography. I pixel-fitted the M glyph to solid edges in my version, while the computer made poor choices in its attempt to maintain ratio at the expense of clarity.

Fitting

Now that you’ve seen the importance of pixel-fitting, you probably want to know how to do it yourself. If you’re not a designer, it’s not entirely straightforward and it requires a bit of patience and knowledge of the vector tools in image editing software like Photoshop. But the process is easy to describe: after you resize a vector image onto a raster plane (like a Photoshop canvas), you should zoom in to the pixel grid and manually refit the paths to pixel edges where it makes sense. In Photoshop, you should use the Direct Selection Tool to select the vector edges and then nudge them slowly until they fit perfectly to the edges of physical pixels. This only really works to sharpen straight lines and to define the furthest edges of rounded paths. To display a curve, you have to use antialiasing because there are simply not enough pixels to show a soft curve on the screen (see the very first, jagged S image above).

Sometimes, the difference is incredible. For example, here is Hulu.com’s logo, taken directly from the website. It is a badly antialiased graphic that is seen by millions of people every day:

The top image is the logo currently live at Hulu.com. The bottom version is a pixel-fitted mockup that I made (I probably overcompensated, which resulted in some lost some detail in the P and S). The difference is obvious. A closer look makes the human changes even more apparent:

The Hulu logo is a gooey, blurry mess that is seen by millions of people every day. Because it is at the top of every page on the entire site, it sets the tone for the quality of the experience. It should have been pixel-fitted.

What this means

Using automatic antialiasing when resizing vector graphics leaves a lot of important decisions up to computer graphics software. While the results are generally decent, they’re not perfect. So, for important icons and logos– really, for all rasterized vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.

We’re slowly starting to see displays with higher pixel densities that can more faithfully reproduce vector paths on the screen, like Apple’s retina displays. But they’re not widespread, and most software doesn’t optimize for those kinds of screens. Until they are commonplace, pixel-fitting is an essential task.