Whether you are trying to create a shiny new icon, give your app a little designer flair and excitement, create yourself a logo, here are some tips and tricks when working with vectors in Expression Design.
1. Shine
Shine is the oldest vector trick going around but it can add an element of realism to any graphic and it’s ever so easy.
There are a few different types of shine you can add to an object. The first is a flat shine - add this to your logos and other objects to give a flat yet glass appeal.
To achieve this effect, you want to apply it only to half of your object, so we will simply create another shape over the top of the black monitor surface using the pen tool - You will notice a slight curve to one side of the object, but this is optional and still looks great if the curve is left out.
The real trick behind making a great looking flat shine is to get your gradient right. So add a gradient to your new shape and make each stop white. Now change the stop alpha on the second stop to be about 10 to 20 percent visible. Then use the Gradient Transform tool (G) to edit the angle of your gradient till you get the desired look. Edit the angle by clicking (and holding) to create a start point and dragging to where you want the gradient to end.
Tip: try adding a 1 or 2 pixel padding around the shine from its parent object to enhance the effect even more in some cases.
The other shine I have used is a spot shine. Use this to give elements a glossy effect rather than a glass effect and maintain the depth of your object. It works best on objects with bends or curved edges. For example, the tentacles and droplets in my picture or something like a balloon.
It’s a simple shape created with the pen tool that follows the curves or shape of your object. Try experimenting with thin, thick, and even clones of your original shape (such as a droplet)
Vector tip: to get sharp points at each end of your object, set a spline point near the middle of your object to create the curve of your object, allowing you to have a sharp point at the "turning point."
2. Simple shapes to create awesome logos
There is so much power using simple shapes in Expression Design along side the ability to combine, subtract and manipulate. Creating the SilverZine logo took only seconds. I used 8 circles, the Path Operation “Back Minus Front,” and some clever gradients.
First create a circle. Then copy and paste it to create a second circle. Then overlay the second circle to create a crescent moon shape. Select both circles, then select Object > Path Operations > Back Minus Front. This deletes the second circle and anything it overlapped on the first circle.
> Back Minus Front > 
Copy and paste your first crescent moon, and rotate it so its point sits about half way down the first object.
To create the other side, grab both your crescents, copy and paste them, rotate and resize till they fit just nice.
To add the final touch and create a deep 3D look, add some gradients. The only thing to remember is to use the gradients as if they were lighting on your logo, so where the top object overlaps, your bottom object should be darker that the object overlapping it.
By this stage your logo should be looking pretty good. Play around with getting the gradients and colours just right.
Check out these 2 posts of you want to learn more:
Clever Gradients
Complex Vector Shapes
3. Shape explosions and twirls
Explosions and twirls are a great way to add a bit of excitement but they may not make it into your designs for a business application. In a banner or art for a website however, they can add that final missing element.
Shape explosions are a whole bunch of shapes that look like they are exploding or pouring out of something. Great for adding colour and a bit of surrealism to a design, I have used simple crosses in my explosion, but be sure to try out everything you can think of, including mixing and matching shapes and colours.
So to get started with your explosion, create your first shape, add colours and gradients to it, then copy and paste, resize, rotate and edit the colour.
Repeat.
Once you start to build up shapes, grab a few and copy and paste. This will make the whole process a little quicker. After the first few shapes, you will start to pick up speed pretty quickly.
Tip: Expression Design has a handy skew tool available. When you have an object selected, your cursor changes to the skew icon when you are just outside the bounding box on any point that isn’t a corner. Try adding a skew to some of your objects to give a little more depth to your explosion.
Twirls are great when you want to add colour and a surreal effect. Use them as vines that wrap around an object, tentacles that grow out of something, or just to fill out your design.
To create a twirl, grab your pen tool, and create a smooth curved path. Make sure your end point doesn’t have a spline to create a pointed effect at the end (we learned about that in the shine section). Then follow your path back along its curves slowly getting further away. These can take a little practice to master and get the right distance between your pat,h but just remember you always have your direct selection tool to fix it later.
You will notice that my twirls don’t actually go behind the screen in my image. This is because it would be impossible to make the path go from behind an object and then in front, so we cheat a little and make the twirl end right up against the object. Try and get this as close as possible without any gaps.
To add the shadow on the twirl, create another shape with the pen tool by following the edge of the twirl as closely as possible (zoom in to do this). Then using the same technique as before, follow the path back to the start. Make this shadow object black and reduce the opacity to get the desired colour and effect (reducing the opacity rather than having a solid colour will hide some of the points where it's not aligned perfectly).
Tip: Try meshing your twirls and explosions together to create some really awesome abstract creations.
4. Glow, shadows, and reflections
Glows, shadows, and reflections can add that final touch to any design or application, but the key is subtlety. Most people believe you need strong shadows and reflections because people won’t notice them otherwise. But adding a very light shadow or a slight reflection to your object can make a massive difference even if people don’t notice its there. Shadows and reflections are an everyday part of our lives. We see them all the time, so we might not notice them in a design, but sub-consciously it will heighten the effectiveness and realism of the overall design.
Using simple shapes such as a circle, and creating a radial gradient from black to transparent, this can be used as a simple shadow like seen under the monitor and text in my image.
Using that same technique with a bright colour will create a nice glow around an object as seen under the image on the monitor.
As for reflections, I copied and pasted the original twirl, moved it behind the object (crtl + [ or ] moves your objects backwards and forwards in the layer order), and then manipulated the points using the direct selection tool. I left the low points the same but slowly moved the points away from the original object to create and effect that the twirl is getting further away from the screen. Finally I changed the opacity to transparent, around 10%.
And that’s my round of up some of the great vector techniques you can use when creating layouts, UIs, icons or even creatures like my little xamling here.
Thanks for reading.
About the Author
Alex Knight
Alex is a Graphic Designer who can't get enough of Silverlight. He spends his days designing websites and application UI/UX for AGKDesign and Objectify, as well as maintaining SilverZine.com and his own blog. If you would like to catch up with him, here are some links that might help:AGKDesign.twitter | AGKDesign.blog | AGKDesign.net | AGKDesign.silverlight
