finished_robots1
AGKdesign.net – Silverlight Services

Last week I uploaded the Silverlight section to my site, I spent a fair bit of time working on using vector graphics in the design and also only using the Expression Suite and Visual Studios from Microsoft.
Since then quite a few people are asking how to do graphics similar to the ones on my site, so I thought I would throw together a quick tutorial on how it was all done.
First thing to note about vector graphics…. They take time, the longer you spend refining them, the better the result will be! So don’t rush them!!!
All my vectors were created in Expression Design and exported into blend, but most of the same rules should apply if your using illustrator as well.

OK lets get into it.

First step is to sketch up an idea, don’t just try and jump in with a vague idea of what you want, it barely ever works unless your really really really pro!
here is my sketch of some robots chilling out on some weird looking leaf things I guess.

robot_sketch

I did my sketch in pencil and then had to go over the lines with a Fine Liner  pen before I scanned it into the computer.
You scan should be pretty big, it’s always good to have a large image to work with.

Next up drag your picture into your vector program (Expression Design in my case)

singlerobot

First up I have blocked out the shapes of the first robot. The way to do this is grab your pen tool, and start drawing out lines, using your splines to make the nice curve.

spline

To create a spline, when using the pen create a new point by clicking, hold and drag to create spline.

pen_tool PEN TOOL – Use this to create your initial shape and splines. (practice using the pen tool and getting good at creating different shapes and splines)

directselect DIRECT SELECT TOOL – Use this to modify the points of your shape and refine your splines.

robothead

By layering shapes over and over to create a deep and rich final image.
Quick tip: To make the process a little faster, use CTRL + [ or ] to move objects backwards or forwards in the stack.

shapes

Ok so I have my basic shapes “penned” out and basic colours added.

gradients

Next refine your colours and add gradients to the image, this gives it a bit more depth but there is still something missing.

Adding the stronger shadows gives your image that real vector appeal. There are 2 ways you can do this:

shadow_harsh

First way is to zoom in very close and pen out a new black shape over the top, then turn the opacity down low.

The other option is duplicate the shape you wish to add shadow or depth to, change its colour to black, and then use the direct selection tool to move the points around.

directduplicate

Tip: If you are using the direct selection tool to refine and edit your shapes, and you come across a point that doesn’t have the extended splines, to add them in use the Convert Anchor Point tool

convertanchor

Find this under the pen tool with heaps of other great tool to help you with your drawing.

And I guess that’s about it, just keep playing with shadows and different shapes and colours, I added some crosses and circles to the image as contrast and some power cords for the robots.

finished_robots

At this point I exported the design to XAML (File > Export) and brought it into blend as a user control, where I created the rest of the site.

Hope this helped

Alex

Advertisements