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.

Slash bash, custom type

Have you ever seen the capitals of Fette Fraktur? Eww. I thoroughly enjoyed customizing the S and B of the Slash Bash pumpkin party poster. Also, if you get the chance, we’d love to see you at the third annual Slash Bash. RSVP here.

The text deets.

 

 

Jam the River

Jam the River poster design

We just finished the posters for an upcoming event in the Provo Shops at the Riverwoods.

We developed the name, copywriting for promotion, visual style, and radio ad messaging. By the way, it’s going to be a lot of fun. Bring your family.

Credits
Copyrighting: Kevin Brimhall, Seth Taylor, Brandon Jeppson
Design: Shawn Murdock, Ashley Polinski
Creative Director: Seth Taylor
Client: The Shops at the Riverwoods

Display font (work in progress)

Create-a-font-in-30-minutes exercise. It’s a display font, not meant for body text. I included a few alternate characters. Inspiration came from the cross hairs in my camera view finder.

Real Audio logo design

logo design for Real Audio

Real Audio Logo concept

Rejected logo for an Home Theater installation company. They really liked it though, just didn’t make the final cut.

Concept combines the nautilus shell and an HDMI connector. I chose the Nautilus shell because it has a fibonacci sequence which infuses art and science — and many people have enjoyed the experience of listening to the ‘ocean in a shell’

Designed while at Eli Kirk. Check out our new site.

Data backup workflow for photo and video

Even though files can be oversized, backup can’t be overemphasized. Here’s how Chase does it.

Chase Jarvis TECH: Complete Workflow and Backup for Photo + Video

type touch-up

Occasionally, I get my hands on some anchor points that need a better foundation. Such was the case for a recent client project. The guilty font was none other than Quicksand. It’s a trendy free font right now. The main problem with the font is the lack of optical balancing in the letter forms. I’ve included an enlarged view of the previous form (pink) and the optically adjusted form (blue). Whenever you have an arm or bowl of a letter meet a vertical stem, it’s tasteful to have some tapering in the connecting area so the font doesn’t feel too clunky. Especially at small sizes, the font will tend to look muddy or heavy.

You can see the full update here.

Categories