Lately, I’ve been somewhat caught by the fun of creating a unique twitter bird for every project that I do which has twitter feeds. Twitter birds, can anyone think of anything more fun?
Ok, I’m sure you can, but I decided to kick off my tutorial section of FacingBlend with a fun and easy to create twitter bird done within Expression Blend 3.
Please click on the “More” below to view the entire tutorial
This tutorial requires you to have Expression Blend 3 installed. You can obtain this by clicking here. I recommend the Expression Blend 3 + Sketchflow trial. You get 60 days to use Expression Blend and if you have the time, its well worth it.
Open Expession Blend 3 and start a new Silverlight 3 project. This will default you to having a Grid called LayoutRoot with a width of 640 and height of 480. Because all of this will be done vector based, it really doesn’t matter what size we start with – it will be resizable larger or smaller while maintaining the integrety of the image. I’m going to just leave this at the default.
On the left side of the screen you’ll find your tools which act quite similarly to the more commonly used graphic tools such as Adobe Photoshop.
If the ellipse isn’t already selected, hold your left mouse button down on the shape which is active (could be rectangle, line, or ellipse) and then select the ellipse tool.
With the ellipse selected, click and drag on the design canvas while holding down the shift key to create a perfect circle. With the circle selected, go to the properties tab (on the right of MS Blend screen) and tell the fill brush to be a gradient.
Most likely, this will default your gradient to a vertical gradient set from Black to White and your circle will look similar to this:
Ok, now that we have the gradient brush applied, you’ll need to change the gradient type to radial by clicking the icon shown below:
Now its time to add some color more fitting to a twitter bird. To change the color stops, its as easy as clicking directly on the color stop and either adding the markup in or selecting the color using the visual editor. I set my color stops to #FF2BA8D4 and #FF065890. If you’ve never used blend before, you might notice that there are 2 additional characters in the color hex than you’re used to. That’s because we also have an Alpha channel which allows us to set gradient transparency/opacity values directly on the color stops. The first 2 characters after the # designate the opace levels, FF being 100% alpha.
Your gradient should look something like this (nix the huge green characters):
It still doesn’t look right. We’ll need to use the gradient tool to fix it. In my opinion, this is one of the most powerful and useful tools in Expression Blend and makes manipulating gradients easier than anything else that I’ve used.
Click on the gradient tool on the left toolbar . With this selected, you’ll be able to easily and quickly manipulate the gradient. This is also where some confusion is initially experienced because it adds control boxes around the object which appear to be resizing tools. The cool part about this is that the resizing is for the gradient range, not for the object itself.
All of the points above can be used to manipulate the gradient (the circles along the arrow line can be manipulted as well – these represent where the color stops reside on the item) and how it is overlayed upon the object. Manipulate the gradient so that it looks something like this:
This looks fairly good for now. Before going on to do anything else, lets name this Body. You may do this by clicking on the first field in the Properties tab, just above the color brushes, type in the name and hit enter.
Creation of Wings
Now that the body has its base, its time to create the wings. These could go either way, pointing up, or flipped to point down – you could also play around with them having one up and one down making it look as though the bird is waving. For this tutorial, I’ll have them pointing up. Click on the ellipse on the toolbar to the left of the screen and draw an oval. You’ll notice that the new shape has automatically applied the same gradient that had been applied to the body. If that is not the case, delete the elipse, click on the “body” and then try again. This time it should use the gradient with the oval. Create a second and place it somewhat above and rotate it slightly so that it looks something like this:
Now is a good time to familiarize yourself with the Objects and Timeline menu. To the left of the screenshot above, you’ll see what I’m talking about. This acts very similarly to the layers in Photoshop, however, the order is exactly opposite. In photoshop, objects furthest to the top are designated as being the front-most layer. In Blend, its the other way around, the further down it is designates the order.
Now, click on the two ellipses, but start by clicking on the one that is in the center, hold the shift or ctrl key down and select the one on the bottom. Now, right click on the bottom most elipse in the Objects and Timeline menu, hover over Combine, and click on Subtract(as illustrated below). If done in the correct order, the oval ellipse which visually is higher than the other has been subtracted from the lower oval ellipse, and that lower ellipse has turned into a path.
Select the resulting path, copy and paste it twice. Once you’ve done this, click on the main selection tool (or just hit the V on your keyboard) on the left toolbar (its the one with the black arrow icon). Move the 3 newly created paths until they’re arranged similar to below:
On a quite note of suggestion – I held the shift key down and resized the top one so that it was a touch smaller than the other two.
Now there’s an issue – the left wing that we just created is on top of the body. Easy way to fix that – go to the Objects and Timeline – click on the ellipse named Body and then hold down the control key and hit the ] until the body is in front of all of the left wing parts. If you’re not comfortable with using hotkeys, you can also click on the Objects->Order->Bring Forward menu at the very top. There is yet a 3rd way, which will bring the object to the forefront of all objects, and that is to either select the Bring to Front in the objects menu, or by using the hotkeys ctrl+shift+]. Your Objects and Timeline should look something like this:
Now, select all of the paths which are “behind” the Body ellipse, copy and past. With them all still selected, look to the Properties tab on the far right of your screen. Scroll down until you find the Transform menu. Click on the flip transform and select the horizontal flip.
With the wing parts of the newly flipped wing still selected, hold down the shift key and drag them over to the other side of the Body ellipse. If the wings are on top of the body, go back to the Objects and Timeline, select the body and bring it to the front (ctrl+] until its in front of everything or ctrl+shift+] once). It should look something like:
Creation of the Eyes
We are once again going to use the ellipse. Create an ellipse similar to what you see below:
Now – we don’t need a gradient. In the Properties menu, select the Solid Color Brush. Typically, this will default to black. Either sellect the top-left most spot on the color editor, or type directly in the hex #FFFFFFFF and hit enter. You should now have something that looks similar to this:
Take this Ellipse, copy it and paste another copy of it. Hold down the shift and move it over so that you have something that resembles this:
Oh, the nose? Ignore that. I went out of order. I’ll cover that later. Now, create a new ellipse while holding the shift down while dragging out the circle. Go to the solid brush and make the new ellipse black (Hex: #FF000000). Copy this newly created circle (ellipse) and paste a copy of it. Hold the shift down while dragging it over to the other eye. This should result in something that looks similar to this:
Creating the Beak
I said I’d get to the beak, see? There’s a heading for it. This is where you may need a bit of experience with the path tool. Below is what my beak looks like with all of its anchor points. I purposefully didn’t make everything perfect – it didn’t look quite right to me. The beak and the eyes can be done in many different ways and these tiny modifications can make a huge difference. Do what you want – make it different.
The Gradient Stop colors I’ve used are: #FFE28500 and #FFE28601. With the gradient tool, modify the gradient stops to look something similar to below:
Select the Ellipse tool and create an oval approximately over the top right of the bird’s head.
Press V and when the transform controls appear, rotate the ellipse so that it more properly aligns with the head. Lights don’t tend to be directly above objects, so instead of putting it directly in the center, I’m setting mine a little off to the right.
It is now time to change the black into something that looks shiny. With the black elipse still selected, go to the brushes and select the gradient brush type. A linear gradient should be used here. On both color stops, use the color #FFD7F3FF – however, set the left most Alpha to 10% and the right most to 60%. You should see something that looks similar to this:
When I had the colors set, the spot didn’t look quite right, so I rotated it a tiny bit as well. Another thing that I noticed was that now that the shine spot is up top, the bottom of the bird looks wrong. Its brightness is perfectly vertical, but the shine spot is not – and its not intense enough either. To fix this, click on the Body ellipse and then select the gradient tool. Rotate it so that the gradient of the body is angled in a similar angle as the shine spot. This fixes the angle but doesn’t fix the intensity. I really like the current colors, so instead of modifying the colors here, I’m adding a new color stop. This is quite easy to do. By clicking on the gradient itself (in the Properties panel), holding the mouse button down and dragging it down just below the gradient – a new color stop appears.
To give this just the right touch, I decided to use a hint of green. The specific color being #FF88BF2CB. I’ve also expanded the gradient range so that the colors blend more nicely Below you can see just how far its been expanded.
A Bit of Dimension
So far, everything that we’ve done can be done with any of the versions of Expression Blend. So if you’re still on Expression Blend 2, you could follow – but here is where expression blend 3’s features differ . Drop-shadows. Blend 3 fully supports this! Let’s use it – first, click on At the top left of your screen you’ll see various tabs, Projects, Assets, States, and Parts. Click on Assets and click on Effects and select DropShadowEffect. The default – looks horrible. We need something a bit more subtle. Below are the settings I applied:
The color, you can click on, use the dropper from there and select the darker areas of the bird.
Now – the wings seem as though they might benefit from the same shadow – except, there’s a problem that needs to be tended to. The Objects and Timeline is a complete mess. Before we can go any further, this needs to be cleaned. How I organized these is by type – left wing, right wing, eyes, etc. Multiple select the objects that you wish to group together, right click on them ones you’ve selected them and group them into a canvas or grid. Below is how I’ve organized everything.
Applying the shadow to the wings is simple. To the left of the Body ellipse is a little triangle/arrow. Clicking on this displays the DropShadowEffect. Click on this, copy it. Now click on the LeftWing canvast and past. Do the same for the RightWing canvas.
– Aside from the text, that’s it!
After adding text and a little gradient effect which closely mimics the twitter style, the resulting product is:
Coming soon – the next tutorial will be published using this twitter bird to create a button which sends the the visitor to your twitter site – from your Silverlight page and with all of the characteristics of a button.