iLogo from
mike kerr on
Vimeo.
Bunny the web designer has a new computer with a high resolution screen - but there's a problem.
Last fall I upgraded to a retina screen MacBook Pro. As advertised the clarity and detail of the screen is pretty impressive. But one thing not advertised is that to get the most out of the screen, applications and some parts of the internet itself need to be upgraded. Graphics such as gifs, jpegs, and pngs which were previously web-optimized for lower resolution screens often look blurry when viewed on a retina screen.
For photos or continuous tone illustrations, this isn't as noticeable an issue but logos, graphic elements, or vector illustrations often look fuzzy - and this goes for applications too. Some programs like Photoshop and Illustrator have been upgraded recently, but you can visit quite a few fortune 500 companies on the web and will find many with blurry logos when viewed on a new MacBook Pro (and a retina iPad too).
For design and illustration this may be an issue if your trying to show off your work to perspective clients who are viewing it on a retina screen. The way I've been getting around this is to upload higher resolution images and then resize them down to fit using CSS. Example, if I previously had a 600 x 400 pixel I would re-upload it as a 1200 x 800 pixel image and use CSS to display it down again at 600 x 400. A downside to this approach is obviously larger files, which can mean a slower loading website. It's a bit of a dilemma!
If you have a retina screen you should be able to see the difference with the images on the right. The first is a 400 pixel image and the second a 200 pixel image. It's subtle but it is there.
The animated illustration features some low-fi CG I've been having fun experimenting with. You can see it in hi resolution (not so blurry!) on my Vimeo page: https://vimeo.com/62300309
