Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 11 2013

10:00

Freebie: Three Noupe Wallpapers in Retina Resolution by WallpaperFX


  

Did you ever want to be reminded of your favorite design magazine each time you look at your computer desktop? Don’t deny, we know you did. WallpaperFX, our friends from Romania, took the challenge and created three great wallpapers in full Retina resolution of 2880 x 1800 pixels. Use them freely and adjust them to your liking. It’s better to scale a large image down, then to scale a small image up.

May 21 2013

14:55

The Right Way to Retinafy Your Websites

Making your website ready for Retina display doesn’t have to be a hassle. Whether you are building a new website or upgrading an existing one, this guide is designed to help you get the job done smoothly.


Make it Retina First

The easiest and most time-saving way to add Retina support is to create one image that is optimized for Retina devices, and serve it to non-Retina devices as well.

By now, every modern browser uses bicubic resampling and does a great job with downsampling images. Here’s a comparison of downsampling in Photoshop vs. Google Chrome, using an image from our Growth Engineering 101 website.

Growth Engineering 101

There are two ways to let the browser downsample images for you: img tags or CSS background images.

You can have img tags serve the Retina-optimized image, and set the width and height attributes to half of the resolution of the actual image (e.g. 400×300 if the image dimensions are 800×600).

<img src="http://www.example.com/Retina-image-800x600-2x.png" width="400" height="300">

If you use images as CSS backgrounds, you may use the CSS3 background-size property to downsample the image for non-Retina devices.

<div class="photo"></div>
.photo {
    background-image: url(Retina-image-800x600-2x.png);
    background-size: 400px 300px;
    background-repeat: no-repeat;
    display: block;
    width: 400px;
    height: 300px;
}

In both cases, be sure to use even numbers in both dimensions to prevent displacement of pixels when the image is being downsampled by the browser.


When Downsampling is Not Good Enough

Usually, browser downsampling should work quite well. That said, there are some situations where downsampling in the browser might make images blurry.

Here we have a bunch of 32px social icons.

32x32 px social icons

And here is how they will appear, when downsampled to 16px by Photoshop’s as well as Google Chrome’s bicubic filter. It seems that we get better results from Photoshop in this case.

16x16 px social icons - Transparent BG - Chrome vs Photoshop 16x16 px social icons - White BG - Chrome vs Photoshop

To get the best results for our users, we can create two versions of the same image: one for Retina devices, and another one that has been downsampled by Photoshop for non-Retina devices.

Now, you can use CSS media queries to serve Retina or non-Retina images, dependent upon the pixel density of the device.

/* CSS for devices with normal screens */
.icons {
    background-image: url(icon-sprite.png);
    background-repeat: no-repeat;
}
/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .icons {
        background-image: url(icon-sprite-2x.png);
        background-size: 200px 100px;
        background-repeat: no-repeat;
    }
}

If you use a background color for small icons, on the other hand, downsampling by the browser works rather well. Here is the same downsampling example with a white background.

16x16 px social icons - Zoom 200%

Polishing Your Downsampled Images

If you’re still not satisfied with the results from Photoshop’s downsampling, you can go the extra mile and hand-optimize the non-Retina version to get super crisp results.

Below are some examples of images from the Blossom product website that I hand-optimized for those who are still on non-Retina devices.


Borders and Strokes

Here’s an example of downsampling issues with hairlines, where I re-draw the lines of the downsampled image.

Borders and Strokes - Teaser Image

View the Retina Version of this Image on Dribbble.

Borders and Strokes - Photoshop vs Chrome Borders and Strokes - Photoshop vs Hand

Text

Next, we come to an example of downsampling issues with text. In this case, I manually re-wrote the text “Feature Pipeline” to make the result as crisp as possible.

Text - Original

Retina Version
Text - Photoshop vs Hand Text - Photoshop vs Chrome

When details, crisp fonts, and clean hairlines are important, you might want to go the extra mile.


Try to Avoid Images

The main disadvantages of rasterized images are their considerable file size and that they don’t scale well to different sizes without affecting the image quality. Great alternatives to rasterized graphics are CSS, Scalable Vector Graphics (SVG), and Icon Fonts.

If you have any chance to build the graphical elements for your website in CSS, go for it. It can be used to add gradients, borders, rounded corners, shadows, arrows, rotate elements and much more.

Here are a few examples of interaction elements in Blossom that are implemented in CSS. The subtle gradient is powered by CSS gradients, and the custom font in use on this button is Kievit, served via Typekit. No images.

CSS Solution - Button

In the following screenshot, the only two images used are the user avatar and the blue stamp. Everything else – the circled question mark, the dark grey arrow next to it, the popover, its shadow and the arrow on top of it – is pure HTML and CSS.

CSS Solution - Popover

Here, you can see how projects in Blossom appear. It’s a screenshot of a project’s website used as cover on a stack of paper sheets. The paper sheets are implemented with divs that are rotated using CSS.

CSS Solution - Stack

Also, the circled arrow in the right-hand side of the screenshot below is pure CSS.

CSS Solution - Circled Arrow

Tools

Here are some awesome tools that will help save time when creating effects with CSS.

Scalable Vector Graphic

The primary advantage to SVG is that, unlike rasterized graphics, they scale reasonably well to various sizes. If you’re working with simple shapes, they typically are smaller than PNGs. Often, they are used for things like charts.

Icon Fonts

Icon Fonts are frequently used as a replacement for image sprites. Similar to SVG, they can be scaled up infinitely without any loss of quality and are usually smaller in size, when compared to image sprites. On top of that, you can use CSS to change their size, color and even add effects, such as shadows.

Both SVG and Icon Fonts are well supported by modern browsers.


Retina-Ready Favicons

Favicons are really important for users who need an easy way to remember which website belongs to which browser tab. A Retina-ready Favicon will not only be easier to identify, but it will also stand out among a crowd of pixelated Favicons that haven’t yet been optimized.

To make your Favicon Retina-ready, I highly recommend X-Icon Editor. You can either upload a single image and let the editor resize it for different dimensions, or you can upload separate images optimized for each size to get the best results.

X-Icon Editor

How to Make Existing Images Retina-Ready

If you want to upgrade a website with existing images, a bit more work is required, as you’ll need to re-create all images to make them Retina-ready, but this doesn’t have to waste too much time.

First, attempt to identify images that you can avoid by using alternatives like CSS, SVG and Image Fonts, as noted previously. Buttons, Icons and other common UI widgets usually can be replaced with modern solutions that don’t require any images.

In case you actually need to re-create rasterized images, you’ll of course want to return to the source files. As you might assume, simply resizing your rasterized bitmap images to be twice as big doesn’t get the job done, because all of the details and borders will become pixelated.

No need to despair – image compositions which mostly contain vectors (i.e. in Adobe Photoshop or Illustrator) are quite easy to scale up. That said, don’t forget to verify if your Photoshop effects in the blending options, such as strokes, shadows and bevels, still appear as you intended.

In general, making Photoshop compositions directly out of vectors (shapes) and Photoshop’s Smart Objects will save you a great deal of time in the future.


How to Optimize the File Size of Images

Last, but not least, optimizing the file size of all images in an application or website could effectively save up to 90% of image loading times. When it comes to Retina images, the file size reduction gets even more important, as they have a higher pixel density that will increase their respective file sizes.

In Photoshop, you can optimize the image file size, via the “Save for Web” feature. On top of that, there is an excellent free tool, called ImageAlpha, which can reduce the size of your images even more with just a minor loss of quality.

Unlike Photoshop, ImageApha can convert 24-bit alpha channel PNGs to 8-bit PNGs with alpha channel support. The icing on the cake is that these optimized images are cross-browser compatible and even work for IE6!

You can play around with different settings in ImageAlpha to get the right trade-off between quality and file size. In the case below, we can reduce the file size by nearly 80%.

Image Alpha

When you’re finished setting your desired compression levels, ImageAlpha’s save dialog also offers to “Optimize with ImageOptim” – another great and free tool.

ImageOptim automatically picks the best compression options for your image and removes unnecessary meta information and color profiles. In the case of our stamp file, ImageOptim was able to reduce the file size by another 34%.

Image Optim

After we updated all assets at Blossom.io for high resolution displays and used ImageAlpha and ImageOptim to optimize the file size, we actually ended up saving a few kilobytes in comparison to the assets we had before.


Save Time, Read This Book

Retinafy.me - Retinafy your Websites and Apps

If you want to learn more about how to get your apps and websites ready for Retina displays, I highly recommend “Retinafy your web sites & apps”, by Thomas Fuchs. It’s a straight-forward step by step guide that saved me a lot of time and nerves.


Awesome Retina-Ready Sites on the Web

Kickoff
http://kickoffapp.com/
LayerVault
http://www.layervault.com

Apple
http://www.apple.com

Panic

http://www.panic.com

Thanks for reading! Any questions?

September 03 2012

07:00

Showcase of 40 Insanely Detailed iOS Icon Designs

iOS icons have come a long way since the birth of the iPhone. Not only are they now shared between iPhone and iPad, with the introduction of retina displays the resolution of the these icons is so high it allows the designer to incorporate some unbelievable detail. This post showcases some of the most detailed iOS icons on the web, with some even crossing into the realm of hyperrealism.

Sandwich iOS icon by Ryan Ford

Sandwich iOS icon by Ryan Ford

Toybox icon by Julian Frost

Toybox icon by Julian Frost

Unlaced App Icon by Ryan Ford

Unlaced App Icon by Ryan Ford

Tiki Kingdom App Icon by Fabricio Rosa Marques

Tiki Kingdom App Icon by Fabricio Rosa Marques

Broadcast iOS App Icon by Román Jusdado

Broadcast iOS App Icon by Román Jusdado

Mophie Outdoor iOS App Icon

Mophie Outdoor iOS App Icon

Treasure Trouble iOS App Icon by Michael Flarup

Treasure Trouble iOS App Icon by Michael Flarup

Cigar Box iOS Icon by Konstantin Datz

Cigar Box iOS Icon by Konstantin Datz

History of Rock App Icon by Michael Flarup

History of Rock App Icon by Michael Flarup

Journal iOS Icon by Román Jusdado

Journal iOS Icon by Román Jusdado

ProPlayer iOS App Icon

ProPlayer iOS App Icon

Record Player Icon by Iasha Simonishvili

Record Player Icon Design by Iasha Simonishvili

Veggie Meals iOS Icon by Max Rudberg

Veggie Meals iOS Icon by Max Rudberg

On this day iOS App Icon

On this day iOS App Icon

Nikon Camera iOS Icon by Gianluca Divisi

Nikon Camera iOS Icon by Gianluca Divisi

Game App Icon by Aleksandr Novoselov

Game App Icon by Aleksandr Novoselov

iOS Icon Design by Konstantin Datz

iOS Icon by Konstantin Datz

iOS Game Icon by Ratmotion

iOS Game Icon by Ratmotion

Record Player iOS Icon by Román Jusdado

Record Player iOS Icon by Román Jusdado

Physique Workout Tracker by Román Jusdado

Physique Workout Tracker Icon by Román Jusdado

Coffee Lovers Icon by Aditya Nugraha Putra

Coffee Lovers Icon by Aditya Nugraha Putra

Good Music iOS App Icon Design

Good Music iOS App Icon

InstaGenius App Icon Design by Artua

InstaGenius App Icon by Artua

Coach’s Eye iOS App Icon

Coach's Eye iOS App Icon

Camera App Icon by Aditya Nugraha Putra

Camera App Icon by Aditya Nugraha Putra

Boxing Glove iOS Icon by Konstantin Datz

iOS Icon by Konstantin Datz

Bacon Diet App Icon by Ryan Ford

Bacon Diet App Icon by Ryan Ford

Baby Accordeon App Icon by Serg

Baby Accordeon App Icon by Serg

Alarm Icon by Eddie Lobanovskiy

Alarm Icon by Eddie Lobanovskiy

Tape Icon Design by Sosoa

Tape Icon by Sosoa

Weather App Icon by Dash

Weather App Icon by Dash

Pizza App iOS Icon by Ryan Ford

Pizza App iOS Icon by Ryan Ford

Wee Rockets iOS App Icon

Wee Rockets iOS App Icon

App Icon by Jackie Tran

App Icon by Jackie Tran

Poker Club iOS Icon Design by Ruaridh Currie

Poker Club iOS Icon Design by Ruaridh Currie

Darth Vadar Icon by Michael Flarup

Darth Vadar Icon by Michael Flarup

Stormtrooper Icon by Michael Flarup

Stormtrooper Icon by Michael Flarup

Lendthing iOS App Icon

Lendthing iOS App Icon

November 17 2010

14:41

Designing for iPhone 4 Retina Display: Techniques and Workflow

Advertisement in Designing for iPhone 4 Retina Display: Techniques and Workflow
 in Designing for iPhone 4 Retina Display: Techniques and Workflow  in Designing for iPhone 4 Retina Display: Techniques and Workflow  in Designing for iPhone 4 Retina Display: Techniques and Workflow

The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail — twice the detail horizontally, and twice vertically. For developers only using Apple’s user interface elements, most of the work is already done for you.

For those with highly custom, image-based interfaces, a fair amount of work will be required in scaling up elements to take full advantage of the iPhone 4 Retina display. Scaling user interfaces for higher detail displays — or increasing size on the same display — isn’t a new problem. Interfaces that can scale are said to have resolution independence.

In a recent article, Neven Mrgan described resolution independence: “RI [resolution independence] is really a goal, not a technique. It means having resources which will look great at different sizes.” If it’s a goal, not a specific technique, then what techniques exist? How has Apple solved the problem in iOS?

Fluid Layouts

While apps that take advantage of Apple’s native user interface elements require a lot less work when designing for the Retina display, we’re here to talk about highly custom, graphic-driven apps that need a fair amount of work to take full advantage of the Retina display.

While not strictly a resolution-independent technique, using a fluid layout can help an app grow to take advantage of a larger window or screen by adding padding or by changing the layout dynamically. A lot of Mac, Windows and Linux apps use this method, as do some websites.

This is partially how Apple handled the difference in resolution from iPhone to iPad — a lot of UI elements are the same pixel size, but padded to make use of the extra screen real estate. The status bar is a good example of this. It works because the pixel densities of the iPhone 3GS and iPad are similar (163 ppi vs 132 ppi).

Lockscreen in Designing for iPhone 4 Retina Display: Techniques and Workflow
Full view

Fluid layouts work when the change in density is minor, but aren’t any help with the iOS non-Retina to Retina display transition (163 ppi to 326 ppi). The image below demonstrates what would happen if an iPhone app was simply padded to cater for the higher resolution display of the iPhone 4. Buttons and tap areas would be the same size in pixels, but half the physical size due to the higher pixel density, making things harder to read and to tap.

Phone-app-fluid in Designing for iPhone 4 Retina Display: Techniques and Workflow
Full view

Just-in-time Resolution Independence

Another approach to handling widely different resolutions and pixel densities is to draw everything using code or vector-based images (like PDFs) at runtime. Without trying to stereotype anyone, it’s usually the approach engineering-types like. It’s clean, simple and elegant. It lets you design or code once, and display at any resolution, even at fractional scales.

Unfortunately, using vector-based images tends to be more resource-hungry and lacks pixel level control. The increase in resources may not be an issue for a desktop OS, but it is a considerable problem for a mobile OS. The lack of pixel level control is a very real problem for smaller elements. Change an icon’s size by one pixel, and you will lose clarity.

Timer-icon in Designing for iPhone 4 Retina Display: Techniques and Workflow

Neven emphasizes in his article that:

“…it is simply not possible to create excellent, detailed icons which can be arbitrarily scaled to very small dimensions while preserving clarity. Small icons are caricatures: they exaggerate some features, drop others and align shapes to a sharp grid. Even if all icons could be executed as vectors, the largest size would never scale down well.”

Although here he is talking exclusively about icons, his description is apt for most UI elements. The decisions involved in scaling are creative, not mechanical. Vector-based elements aren’t suitable for all resolutions, if you value quality.

Ahead-of-time Resolution Independence

The best quality results — and the method Apple chose for the iPhone 3GS to iPhone 4 transition — comes from pre-rendered images, built for specific devices, at specific resolutions: bespoke designs for each required size, if you will. It’s more work, but pre-rendering images ensures everything always looks as good as possible.

Apple chose to exactly double the resolution from the iPhone 3GS to the iPhone 4, making scaling even easier (different from the approach of Google and Microsoft — notice that this article is not relevant to the latest version of Microsoft’s mobile OS — proving yet again that controlling the entire stack has huge advantages).

Double in Designing for iPhone 4 Retina Display: Techniques and Workflow

Currently, there are three iOS resolutions:

  • 320 × 480 (iPhone/iPod touch)
  • 640 × 960 (iPhone 4 with Retina display)
  • 768 × 1024 / 1024 × 768 (iPad)

In a few years, it seems highly likely that the line-up will be:

  • 640 × 960 (iPhone/iPod touch with Retina display)
  • 1536 × 2048 / 2048 × 1536 (iPad with Retina display)
  • Some kind of iOS desktop iMac-sized device with a Retina display

There are significant differences between designing iPhone and iPad apps, so completely reworking app layouts seems necessary anyway — you can’t just scale up or pad your iPhone app, and expect it to work well or look good on an iPad.

Building Designs That Scale

Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution.

When it comes to building UI elements that scale easily in Adobe Photoshop, bitmaps are your enemy because they pixelate or become blurry when scaled. The solution is to create solid color, pattern or gradient layers with vector masks (just make sure you have “snap to pixel” turned on, where possible). While a little awkward at times, switching to all vectors does have significant advantages.

Before anyone mentions it, I’m not suggesting any of the methods are new; I’m willing to bet that most icon designers have been working this way for years. I’ve been using vector shapes for ages too, but the Retina display has changed my practice from using vector shapes only when I could be bothered, to building entire designs exclusively with vector shapes.

I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).

Iconpsd in Designing for iPhone 4 Retina Display: Techniques and Workflow
Full view

More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer. Be careful when pasting into Photoshop, as the result doesn’t always align as it should — it’s often half a pixel out on the x-axis, y-axis or both. The workaround is to zoom in, scroll around the document with the Hand Tool, and paste again. Repeat until everything aligns. Yes, it’s maddening, but the method works after a few attempts. Another option is to zoom in to 200%, select the path with the Direct Selection Tool, and nudge once, which will move everything exactly 0.5px.

Complex in Designing for iPhone 4 Retina Display: Techniques and Workflow
Full view

Even more complex objects requiring multiple colors get drawn in Illustrator to the exact pixel size, and then pasted into Photoshop as a Smart Object. It is a last resort, though — gradients aren’t dithered, and editing later is more difficult.

If you need to use a bitmap for a texture, there are three options: use a pattern layer, a pattern layer style, or build a bitmap layer at the 2× size and turn it into a Smart Object. I prefer to use pattern layer styles in most cases, but be warned: patterns are scaled using bicubic interpolation when you scale the entire document, so they become “softer.” The solution is to create two versions of each pattern, then to manually change pattern layer styles to the correct pattern after scaling — a little tedious, but totally do-able approach.

Delete in Designing for iPhone 4 Retina Display: Techniques and Workflow
Full view

Scaling Up

At this point, your document should be able to scale to exactly double the size, without a hitch.

Scaling2 in Designing for iPhone 4 Retina Display: Techniques and Workflow

I have a Photoshop Action set up that takes a History Snapshot, then scales to 200%. That means, previewing at the Retina display’s resolution is only a click away. If you’re feeling confident you’ve built everything well, you should be able to scale up, edit, then scale down and continue editing without degradation. If you run into trouble, a Snapshot is there to take you back. Using one document for both resolutions, means not having to keep two documents in sync — a huge advantage.

Actions2 in Designing for iPhone 4 Retina Display: Techniques and Workflow

A word of warning: layer styles can only contain integer values. If you edit a drop shadow offset to be 1 px with the document at 2× size, and then scale it down, the value will end up as 1 px because it can’t be 0.5 px (a non-integer value). If you do require specific changes to the 2× version of the Photoshop file, you’ll have to save that version as a separate file.

Exporting, Exporting, Exporting

Now for some bad news: exporting all the images to build an app can be extremely tedious, and I don’t have much advice here to assist you. As my documents act as full screen mockups, they’re not set up in a way that Photoshop’s Slice feature is any use. Layer comps don’t help either — I already have folders for each app state or screen, so switching things off and on is easy.

The best export method seems to be: enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

The problem is amplified when saving for the Retina display, where there are twice as many images and the 1× images must match the 2× images precisely.

The best solution I’ve come up with so far:

  • Build your design at 1×
  • Use Copy Merged to save all the 1× images
  • Duplicate the entire folder containing the 1× images
  • Use Automator to add @2x to all the filenames
  • Open each @2x image and run the “Scale by 200%” Photoshop action. This gives you a file with the correct filename and size, but with upscaled content
  • Scale your main Photoshop design document by 200%
  • Use Copy Merged to paste the higher quality elements into each @2x document, turn off the lower quality layer, then save for the Web, overwriting the file.

In some cases, Photoshop’s “Export Layers To Files” can help. The script can be found under the File menu.

Mac Actions and Workflows

All the Actions and Workflows that I use myself can be downloaded from the blog post link below. The Automator Workflows can be placed in your Finder Toolbar for quick access from any Finder window, without taking up any space in your Dock.

Download: Retina Actions and Workflows.zip

Promo-2x in Designing for iPhone 4 Retina Display: Techniques and Workflow

Fortunately, iPhone creators chose to exactly double the resolution for the iPhone 4, and for using ahead-of-time resolution independence. As complex as the process is now, things would have been far worse if they had chosen a fractional scale for the display.

Related Posts

You may be interested in the following related posts:

(rs) (ik) (vf)


© Marc Edwards for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Display, iPhone4, mobile, Retina, techniques, Workflow

September 27 2010

07:10

35 Stunning HD Retina Wallpapers for iPhone 4

The wallpapers made for the previous versions of iPhone won’t look good on it. We have looked and looked, and we have found these stunning wallpapers for iPhone 4. These iPhone 4 wallpapers are going to rock your iPhone.

View and Vote


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl