What's my vector, Victor?

05/20/2014

Why Vector?

New devices, screens, and HDMI dongles emerge everyday that change the way we communicate our brand with our members. As a UX Engineer, I’m constantly looking for new ways to deliver graphical assets quickly and precisely (i.e. pixel perfect) across this evolving ecosystem. One of our favorite ways of solving this at Craftsy is using vectors! Vector assets are awesome and give us even more flexibility and can scale to a near infinite level of resolutions.

Curious about how to create vectors scalably? First create all of your icons as vector shape objects in Photoshop, you won’t be able to do much with bitmaps. I’ve been using this method from Marc Edwards at Bjango [details here: http://bjango.com/articles/actions/] Basically, you build the user interface at 1x and then export all the asset slices. Bjango has nicely provided a Photoshop script to scale the file (along with strokes and layer effects) to 200% and then export slices at 2x. This helps shorten the asset generation time. It’s a great process and I still fall back to this at any time I need to create images from vectors. Reminder: It’s important that while using vector assets you still keep a “master” file that you can generate new assets from.

But you ask “Mike, you’re a mobile designer. This sounds like a web process. How do you use vector assets in your iOS app process?”

Vectors on iOS

Using vectors on iOS can be a little trickier than a standard web process. Drawing vectors using Core Animation Layers doesn’t translate very well with standard vector drawing tools like Adobe’s Illustrator and Photoshop. Recently, we have been using an app called Paintcode. PaintCode is able to convert a Photoshop document full of vector layers into drawing code for Core Animation layers or a UIView. The application interpretation is great and it can even do mild graphic alterations. Our team has just barely scratched the surface of what this app can do with colors and blend modes but we may take advantage of those in the future.

Below is a screenshot of PaintCode with a Photoshop document opened up. Without doing any work, PaintCode shows all of the layers and vector path colors along with the generated bezier paths.

Paintcode-ui-comp

We use vectors for all of the video user interface elements and when any of those buttons are tapped we reuse the vector path over the video to reinforce the users action. Now we don’t have to worry about color, dimensions or even filesize and we’re able to create UI quickly.

ReflectorRecording-03

Download the Craftsy Classes app and see for yourself.

Comments (1)

Looks like a great tool, I'll be checking it out for sure.

The comments to this entry are closed.