Aug 15, 2012

The Retina MacBook Pro: Detailed Observations

The Retina Macbook Pro really is Apple’s best Mac ever. Even after using it for just a couple of days it’s very clear how advanced it is and how it really is a ‘no compromise’ machine. In a way only Apple can, every detail has been considered, and every design decision has been made for a user-benefitting purpose.

• The Retina display is definitely the flagship feature. With an astounding resolution of 2880 x 1800 at 220 ppi, everything that’s been optimised looks absolutely amazing: text looks like print in a high-quality magazine, photos show extreme levels of detail, and curves show no signs of jagged edges at all. I’ve spend quite a lot of time just marvelling over all the detail in the UI.

Retina MacBook Pro Menu Bar

Retina MacBook Pro Dock

However, having said that, anything that hasn’t been optimised really isn’t usable. Most Mac apps haven’t been (yet). Chances are at least a few of the apps you use frequently still need Retina graphics. For me, the #1 app I want Retina-optimised is Photoshop. Because it’s a graphics app, it especially is definitely not usable in its current state.

The iPhone 4, iPhone 4S, 3rd generation iPad and 4th generation iPod touch all have Retina displays too (at higher pixel densities, to accommodate for the differences in normal viewing distance). When compared to a non-Retina Mac, the Mac’s display definitely looks very much subpar. The Retina display MBP, however, really puts other Mac displays in their place. Perhaps this is because it’s much easier to draw direct comparisons between a Retina Mac and a non-Retina Mac as both run the same OS, and have the same UI. Retina iOS devices never made my Mac’s screen look bad, they just showed that it wasn’t as good as it could be. The Retina display MBP does. All other computer displays look horribly fuzzy and pixelated to me now, even when I’m not doing a direct comparison.

It’s not just the pixel density, either. It’s also the colours. The Retina MBP can display 8-bits of colour at each channel (red, green, and blue). Non-Retina Mac laptops can only display 6-bits of colour at each channel, making for far fewer colours overall — 16,777,216 versus 262,144 to be exact. To make up for the lack of colours, 6-bit displays use dithering to trick the eye into thinking they can display more colours than they really can. Dithering, however, is no match for the real thing — the colour range on the Retina MBP is simply far better than on other MacBooks.

The Retina MBP display also is the first IPS display Apple has ever used on a laptop, so all 16.7 million colours still look great even when viewed from extreme angles. Compare this to non-Retina MacBooks, where the colours get washed out from any angle other than straight on.

Read More

May 29, 2012

8 Simple Photoshop Tips You May Not Know

I love learning new ways to do things in Photoshop. I don’t like spending more time than necessary doing anything, so I greatly appreciate any tip I learn or discover that allows me to work faster and more efficiently. In this article, I’m going to present you with 8 simple tips that I use daily in my Photoshop workflow.

1. Stretch the Gradient Editor window for easier gradient editing

Complex gradients can be quite tricky to edit, especially if the Gradient Editor window is small. Clicking the right stop is sometimes impossible if there are two (or more) stops very close together. The solution? Stretch the window. The gradient bar stretches to match, and the stops are given a bit of space. This makes editing much easier, and will prevent the anger and frustration that ensues when you mess up a gradient because you accidentally clicked the wrong stop.

It took me a while before I discovered this tip, but in retrospect, it does seems quite obvious.

2. Layer Panel options

Open the Layer Styles flyout menu by clicking the button in the top right corner of the Layer Styles panel, and select ‘Panel Options’. There are a couple of things that you should change in here. Firstly, I recommend you uncheck ‘Expand New Effects’. This helps keep your document somewhat tidy — Layer Styles and other effects like Smart Filters will automatically be collapsed beneath their layers, rather than taking up valuable screen real-estate. If at any point you do need to see them, simply press the disclosure triangle on the right hand side of the appropriate layer. In CS6 you can Option + click any disclosure triangle to show or hide all effects for all layers. I should point out that when I refer to ‘hiding’ or ‘showing’ effects, I’m not talking about hiding or showing them within the document — I’m just referring to whether or not they are visible in the Layer Styles panel.

The second option you should uncheck is ‘Add “copy” to Copied Layers and Groups’. This will prevent the word ‘copy’ being added to anything you duplicate — meaning that you won’t end up with layers called ‘Layer 1 copy 3’ or similar.

Lastly, while I recommend you keep thumbnails turned on, I will point out that if you ever need to move large bunches of layers or groups you may want to turn them off — doing so will make moving much easier (drag lag is reduced).

Read More

May 9, 2012

Photoshop CS6, Illustrator CS6 & Fireworks CS6: Graphics Quality

Marc Edwards of Bjango recently wrote an article comparing the rendering quality of Adobe Illustrator to Photoshop, tested using Illustrator CS5 and Photoshop CS6. Which app produced the best results? Photoshop, without a doubt. I encourage you to read his article if you haven’t already to see for yourself.

With the release of Illustrator CS6, I wanted to know if anything had changed. Because Fireworks is also frequently used by screen designers, I decided to include it in the tests (version CS6 as well).

Shape Antialiasing

No changes here. Illustrator still has a nasty habit of creating stray pixels, especially on the right side of the shape.

Here’s Photoshop’s results:

Not only do the circles have smoother antialiasing, they also have no stray pixels. Very important when doing pixel-perfect work.

And here’s Fireworks’ results:

Fireworks’ circles look very similar to Illustrator’s in terms of smoothness, but are at least rendered correctly.

Read More

May 1, 2012

Sketch 2 Graphics Quality

There’s a lot to like about Bohemian Coding’s Sketch 2, but there’s also a lot of things that aren’t quite up to scratch. It was released earlier today and I immediately downloaded it and have been playing around with it for several hours. Like most UI designers, the main app I use for my design work is Photoshop, so that’s what I’ll be comparing it to in this article.

Most of my issues with the app aren’t missing features, so it’s already off to a good start there. The main issues I have with it are to do with how well these features perform when compared to Photoshop. And yes, that does matter — a lot.


Unfortunately, gradients in Sketch frequently suffer from heavy banding:

This is a big deal. Gradients form the foundation for a lot of UI work, so they really need to be perfect.

Now, it’s worth pointing out that this does seem to be a bug, rather than an inherent problem. If you start with a large shape, gradients look smooth, and will stay smooth even if you decrease the size of the shape:

However, if you take that same shape, with its perfectly drawn gradient, and export it — this is what happens:

As you can see, banding starts to occur again. This sort of thing is certainly not what you want happening to your perfectly designed UI or website graphics.

Hopefully these gradient issues will get fixed in the next update.

Read More

« To the past Page 1 of 2
A simple blog about design and technology, written by Daniel Cooper. Subscribe via RSS.