We needed a fully vectorized version of our app icon so we recreated the original artwork using Artboard. Our icon is pretty detailed, so I thought I’d share the process of creating it. Our original (a raster version) was placed on the bottom layer for tracing. This isn’t a formal tutorial, but I sure hope you enjoy seeing how it was done! (See the photos on Facebook)
Here are the compass vectors with all the detail. After drawing the vectors, various styles (mostly different gradients and transparencies for the highlights) were applied.
A close up of the compass vectors.
The compass body.
Here is the pencil - it also has a fair amount of detail.
Close up of pencil.
For the reflection, I copied and grouped the pencil vectors, then made the styles have a lot of transparency. There is also a shadow object (not shown). The key here was the order in which I layered the drawing features - notice how the reflection is below the ruler?
The vector path was super easy - I just used a double-stroked path on a Bezier curve.
To make the hatch marks along the ruler edge, I made a custom style in the Style Inspector. First I drew five lines then copied them as a path decorator.
To add depth to the ruler, I've made some objects filled with transparencies and make use of Gaussian Blur core effect group.
The ruler itself is made of three shapes. After drawing the shapes, I used a linear gradient using semi-transparent colors on each. It takes a bit of patience to rotate the gradient length-wise on these long narrow shapes (closely spacing the gradient color-stops helps), but the results are amazing!
Here are the vectors used for the background image. Later, the clouds and background each have gradient fills applied. The top highlight uses a gradient with white to fully transparent.
The framework - literally!
