Feed Me

Icon

Seth Taylor Graphic Design

Get ready to vector your retinas

The MacBook Pro with Retina Display changed more than your appetite for resolution; it will change the way many people view the web. Because its resolution (around 300 dpi) is so much higher than most (72/96 dpi) screens, many websites will either look too small or many sites will begin to get fuzzy looking. (example below)

There’s a few ways to compensate. The way that will be discussed here is to use .svg for images where possible. SVG or Scalable Vector Graphics have been around since 1999 but have limited adoption for web use until recently. As usual, Internet Explorer lags in adoption, but the good news is that according to wikipedia, IE9 supports the basic svg feature set.

UPDATE:  added .png example – thanks for the suggestion Chris!

These two images are both generated from Adobe Illustrator. The one on the left is our rusty-dusty .jpg format, the middle a transparency supporting .png while the one on the right is an crisp and smooth and transparency supporting .svg. What? You say they look the same? We say, right you are!

.jpg example (file size: 4,329 bytes)    svg 40 x 68

But wait and see what happens when you start to scale the exact same files.

.jpg example (file size: 4,329 bytes)     svg 40 x 68
Fuzzy Wuzzy was a jpeg (or png).

The imagse on the left and in the middle is what your website will look like on a HiDpi screen like the Retina, whereas if you use .svg icons, navigation elements, and other graphics your site can stay clean, large and crisp.

And, because I love you and don’t want your websites to gain any weight, check out the file size on these images.

40px by 68px JPG: 4,329 bytes
40px by 68px PNG: 937 bytes
40px by 68px SVG: 1,273 bytes

You may be saying, but that’s barely a 4k footprint for file size for a .jpg That’s true. However the beauty of the .svg is that you can scale the dimensions indefinitely and it still maintains it’s original file size.

1000px by 1700 px JPG: 134,505 bytes
1000px by 1700 px PNG: 49,075 bytes
1000px by 1700 px SVG: 1,273 bytes

There’s a lot we could talk about to properly prepare svg files and how it will affect your website of the future. Feel free to reach out in the comments below or @stotion on twitter.

Protip: As of the writing of this post, WordPress doesn’t natively support the .svg file format. So, like the Zelda guru says “It’s Dangerous To Go Alone, Take This …  SVG Plugin

Yesterday, Chris gave a great presentation about the new navigation on the Apple.com navigation menu at Eli Kirk (where we’re coworkers constantly tweaking the web).  It’s sporting a svg sprite with subtle dimensionality effects. It’s a well-crafted and not-too-hard-to-recreate example.

Adobe Illustrator gradient on a path tutorial

illustrator_gradient_on_a_path

Because a good friend asked me how to do this, I figured I’d make a tutorial on how to draw a gradient along a path in Adobe Illustrator. Please let me know if you have any questions.

If you appreciate this tutorial, please consider my app ›› MeetingCalc for iPhone Shows You How Expensive Those Boring Meetings Really Are.

UPDATE:

A few people have asked about how to make a spiral shape. The preview is below and you can download the illustrator file here.

tutorial and example preview download

 


Categories