Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

• By Karsten Bruns


• October 15th, 2014


• IconsPhotoshopSVG


• 8 Comments

The 6 Plus is a initial iPhone that sports a “Retina HD” arrangement — a sharpest arrangement Apple has ever made. It army designers to yield an additional set of picture resources to developers to compare that sharpness.

We indispensable usually one set of resources for a strange iPhone adult to iPhone 3GS. And when iPhone 4 came out with a Retina display, we also indispensable 2x resources — images twice as detailed. Now, with a arrangement of a 6 Plus being even some-more minute than that of a iPhone 4, we will also need to yield 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

Of course, Android developers have always had to understanding with many opposite sets of assets. Still, designers are anticipating themselves doubt their prolongation workflow. In this article, we’ll concentration on iOS, though we could simply extend this proceed to Android and a web. We won’t try to yield a china bullet, and maybe other ways competence seem easier during first, though this essay lays out a plain workflow that beam adult for vast projects.

First off, your idol sets should be vector-based. The proceed described in this essay focuses on generating mixed item versions from a singular matrix figure in a Photoshop request that contains all of your icons.

A one idol request has a advantage of gripping all together in one file, permitting we to see how good your icons and resources harmonize.

If you’re conceptualizing for iOS 7 and above, afterwards we competence consider that 1x versions aren’t indispensable anymore. However, you’ll still need them for inclination such as a strange iPad Mini, a iPad 2 and potentially Android and a web.

Set Up Photoshop

First, I’ll uncover we how we set adult Photoshop. If we know what you’re doing, we can use other settings. But for those extraordinary about how we 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 initial indicate is a matter of personal taste, though not following a second indicate can get in your approach when you’re perplexing to be accurate with a Direct Selection tool.

¹

These selections will assistance we operative accurate with a Direct Selection tool. (View vast version²)

Then, I’ll configure a Move apparatus (V) to name layers. You don’t need to check “Auto-Select” since we can name a covering automatically by dire a Command pivotal while clicking. Disabling this choice protects we from relocating layers unintentionally.

³

Configure a Move apparatus (V) to name layers. (View vast version⁴)

Feel Free

First and foremost, we trust that pattern and prolongation are dual apart phases. When your creativity is flowing, we shouldn’t worry most about prolongation constraints.

Design during your favorite fortitude (perhaps 2x), and lay out regulating a measure of a device you’re informed with. But really use a genuine device, and use apps like Skala Preview and xScope to counterpart a pattern live on your device. You should not be operative with apps unless we are constantly checking a pattern on a genuine device.

Tidy Up Those Vectors

As noted, I’ll assume that you’re conceptualizing your icons in Illustrator. Before duplicating them to Photoshop, you’ll need to neat them up. Use Pathfinder to supplement and subtract paths until we have a singular shape.

⁵

If we pattern your icons in Illustrator, we need to neat them adult before duplicating them to Photoshop. (View vast version⁶)

On a left above is a formidable idol done adult of mixed shapes, including a white figure to transcribe transparency. For a idol on a right, we subtracted a white rectangle from a black one behind it. Do this by selecting a dual rectangles and dire a “Minus Front” symbol in a Pathfinder panel. Then, name all shapes and click “Unite” to mix them into one.

Now, transcribe a trail to Photoshop, and pulp it as a figure layer.

Paste your trail as a figure layer.

If your figure ends adult a mess, that means we didn’t neat a matrix striking properly.

Align Forces

When we pulp a idol in Photoshop, it competence demeanour something like this:

⁷

When we pulp a idol in Photoshop we will substantially see those gray pixels around a shape. (View vast version⁸)

When we wizz in tighten on a icon, we will substantially see those gray pixels around a shape. Those “partial pixels” start if a figure does not fill an whole pixel. We don’t wish any of those.

We wish to start operative from a 1x chronicle of a idol because, when tidied adult properly, we will be means to scale this chronicle adult to 2x and 3x but any problems. If we did a strange pattern in 2x, afterwards you’ll need to scale a figure down to 50%.

Now it’s time to align a plane and straight lines to a subsequent full pixel. It’s OK if curves and erratic lines don’t fill adult whole pixels.

Use Photoshop’s Direct Selection apparatus to symbol a organisation of misaligned anchor points, and use a arrow keys to pierce these points between dual pixels.

Note: The closer we are zoomed in (use Option + Shift + rodent wheel), a some-more precisely we will be means to pierce a anchor points.

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

All prejudiced pixels are gone.

Do A Check-Up

Now, make certain all anchor points are on a grid by scaling your 1x chronicle adult to 500%. If we see prejudiced pixels, afterwards align them as described above. If all checks out, afterwards scale a figure down to 20%.

Remember: From now on, we should always scale proportionally from a upper-left corner, and always make certain that a X and Y values are turn numbers.

⁹

If we see prejudiced pixels, afterwards align them as described above. (View vast version¹⁰)

Scale It

Let’s see how opposite resolutions of a idol work out. Select a 1x chronicle (V, afterwards Command + rodent click), and transcribe a idol (Option + click and drag) to a position subsequent to a 1x version.

Scale a repetitious idol adult to 200% proportionally from a upper-left corner. The 2x chronicle should uncover no new prejudiced pixels. It should usually be bigger.

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

Duplicate a 2x chronicle (Option + click and drag), pierce it off to a side, and afterwards scale it adult by 150%. (So, 200% × 150% = 300%)

Later in this article, I’ll tell we what to do if we are not happy with a results. But if we are happy with a 2x and 3x versions, afterwards we know now that 2x and 3x versions can be generated from a 1x chronicle but any problems.

Go forward and undo a 2x and 3x versions — we will be generating them automatically.

Generate And Enjoy

Photoshop has a built-in apparatus called “Generator” that automatically renders a figure covering to mixed picture versions. To do that, we have to emanate a covering organisation and give it a special name: a record name and scale cause for any version.

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

The commas apart a versions, and a commission tells Photoshop a volume of scaling.

¹¹

The commas apart a versions, and a commission tells Photoshop a volume of scaling. (View vast version¹²)

Now, activate Generator.

¹³

Activate Generator. (View vast version¹⁴)

Generator will emanate a folder subsequent to your PSD record and will automatically save PNG files to it when we save a Photoshop document.

¹⁵

Generator will automatically save PNG files when we save a Photoshop document. (View vast version¹⁶)

To supplement a new scale cause during a after indicate in time, we simply have to change a layer’s record name.

Get Creative For Different Resolutions

Modifying design for opposite scaling factors is a common use since we can uncover some-more fact in a 2x striking than we can in a 1x version.

In a following example, a 1x chronicle of a idol contains only a singular eighth note, since a 2x chronicle contains a beamed note.

¹⁷

Create opposite icons for opposite resolutions. (View vast version¹⁸)

Obviously, we wouldn’t undo a 2x chronicle since it is opposite from a 1x. Create an additional organisation for a 2x version, and give it a covering name that is concordant with Generator. Because you’ve already scaled a 2x chronicle in Photoshop, don’t supplement “200%.”

To finish adult with a 3x chronicle after operative in 2x, you’ll have to scale by 150%. So, we would supplement this series to a 3x record name.

¹⁹

To finish adult with a 3x chronicle after operative in 2x, you’ll have to scale by 150%. (View vast version²⁰)

Size Matters

Making a 2x versions of your resources accurately dual times incomparable than a 1x resources is positively critical. Sometimes this is harder to do than we think. Consider this keyboard:

²¹

Making a 2x versions of your resources is infrequently harder to do than we think. (View vast version²²)

For a 1x chronicle (the smaller keyboard on a left), we motionless that 1-pixel-wide black keys were to thin, so we used 2 pixels.

When we scale that chronicle adult (marked in pinkish in a keyboard on a right), we finish adult with black keys that are 4 pixels wide, that looks a small too wide.

But with 3-pixel-wide keys, a stretch between all of a keys changes. To keep all symmetrical, we need to make a keyboard 1 pixel shorter. And since we can’t scale 3 pixels by 1.5 but finale adult with hairy graphics, we also need a special 3x version.

To repair a trade distance of a 2x asset, we can supplement a covering mask. Generator will always use a measure of a covering facade if one is present.

²³

To repair a trade distance of a 2x asset, we can supplement a covering mask. (View vast version²⁴)

²⁵

Generator will always use a measure of a covering facade if one is present. (View vast version²⁶)

Summary

Hopefully, a methods described here will facilitate your workflow. As we can see, formulating pixel-perfect resources for opposite shade sizes and densities isn’t such a duty when we use matrix graphics to your advantage and let Photoshop do a grunt work.

Downsides of This Approach

• Assets are stored during 1x in a Photoshop file.

Upsides of This Approach

• Create mixed picture resources from a singular figure layer, potentially saving yourself a lot of time in a future.


• Icons are all in one document.


• Generating resources for other scale factors from your PSD becomes easy for other people.


• Seeing that resolutions of an idol need special courtesy becomes easy for other designers.

(ml, al)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-photoshop-settings-opt.png


2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-photoshop-settings-opt.png


3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-move-tool-opt.png


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-move-tool-opt.png


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-pathfinder-opt.png


6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/10/03-pathfinder-opt.png


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-blurry-asset-opt.png


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-blurry-asset-opt.png


9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-scale-opt.png


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/10/08-scale-opt.png


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-layer-naming-opt.png


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/09-layer-naming-opt.png


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-asset-generator-opt.png


14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/10-asset-generator-opt.png


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-finder-opt.png


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/11-finder-opt.png


17. 17 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/aee13_12-asset-canvas-opt.png


18. 18 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/aee13_12-asset-canvas-opt.png


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-layer-naming-opt.png


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/13-layer-naming-opt.png


21. 21 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/92cd0_14-keyboard-problem-opt.png


22. 22 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/92cd0_14-keyboard-problem-opt.png


23. 23 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/f1669_15-vector-mask-opt.png


24. 24 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/f1669_15-vector-mask-opt.png


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-vector-mask-layer-opt.png


26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/16-vector-mask-layer-opt.png

↑ Back to topShare on Twitter

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors