Developing For .NET

At the end of part 2 of this series we had the beginnings of a new logo.  In this article we are going to learn how to edit existing art on the artboard using Guidelines and Shape editing.  We’ll also explore adding Visual Interest by using Gradients and Effects.  Here is the image we left off with:

Using Guidelines

As you can see, our cross shape is pretty rough and leaves a little to be desired.  Let’s start by cleaning that up.  First, I want to make the edges straight.  Doing this by sight requires much keener vision than I have, so I’m going to get a little help in the form of Guidelines.  Guidelines are helper objects that provide straight references, like the row and column delimiters of a grid.  They only show up during design and are not visible on the final image.  To view a guideline, you must have “View Guides” turned on.  Right click on the artboard and make sure “Show Guides” is checked.  You can also find this in “View->Show->Guides” or use the Ctrl-; shortcut as a toggle.  After making sure they are turned on, you can drag a horizontal guide from the top ruler or a vertical one from the left ruler: just click and drag out of the ruler and drop it on the artboard.  To move a guide that has already been added, use Alt-click to grab the guide.  To delete a guide grab it and move it off the artboard.  Try it out by drawing a few guides over the cross sections:

Guidelines are visually useful, but in a scenario like this we can make them even more useful by enabling “Snap To Guides”.  This will allow us to drag points and elements near a guideline and their position will automatically snap in place.   This is going to be incredibly useful for making our cross sections straight and parallel.  To turn this on, right-click the artboard and make sure “Snap to Guides” is checked.  Or, like before, you can go to the View menu and check “Snap to Guides” (Ctrl-Shift-; shortcut).  Now that the guides are all ready to go, let’s edit the cross shape.

Shape Editing

We can edit any shape by altering it’s individual points, adding points, or removing points.  To control individual points, we need to select them using the “Direct Selection” tool.  You will find it represented by the white arrowhead in the second tool group from the top of the toolbar.  You can also activate it by the shortcut key ‘A’.  Go ahead and select the tool and then click anywhere on the cross:

You will see that the shape is outlined (probably in Red since this is layer 1 – but more about this in the next article) and all the points are visible as colored dots.  You may have also noticed that somewhere on the line is also an arrow pointing the direction of the path: that is not important for our purposes, for now I just want you to know why it is there.

To manipulate a point, click it with the Direct Selection tool activated.  All the other points will change to white filled while the selected point will remain solid.  You can now move the point, wither with the mouse or the arrow keys on the keyboard.  Do this with one of the points close to the center of the cross, and when you drag it near the intersection of the guidelines you will see it jump to that point.  It should look something like this:

You can go ahead and do this with the rest of the points: drag them to the logical locations on the guidelines.  Actually, in showing this to the client (my wife), she wanted the top and bottom ends of the cross canted in the opposite direction, so you can go ahead and drag them around until they look something like this:

Skews and Rotations

So, not bad, but the cross is perfectly plumb and level while the rest of the text is italicized. To fix this, we’ll skew the cross.  Skews and rotations are easily done right on the artboard.  First, switch back to the Selection tool (the black arrow) and select the shape.  A bounding box should appear around the shape with 8 grab points (each corner and each center).  Now move your mouse over the grab points and you should see the mouse cursor change.  Over the corners you will get the rotation cursor, and over the centers you will see the skew cursor.  To affect either one of these, grab and move the cursor.  For this exercise, grab the top cursor and skew it to the right until it appears to be at the same angle as the italicized text.

For the official version, there is one other change I made to the cross. Compare the foot of the cross to the foot of the “n” next to it and you’ll see they do not match.  I want the cross to look like it fits in, so I used the Bezier tool to alter the shape of the foot of the cross to match the others.  This is beyond today’s scope, but I will cover some more advanced drawing techniques in a later article.  For now, remove (or hide) the guidelines, zoom back out and see where we are:

Adding Visual Depth

Now it is time to start adding some visual interest to our art.  There are lots of ways to do this, but Visual Depth is one of the more effective ways.  To give something the illusion of depth, we will add a few lighting tricks.  An easy way to add lighting to something is to use a gradient fill.

Apply a Gradient

Select the Ellipse background shape.  In the color manager, make sure you have the background fill button selected.  Now select the Gradient Fill button in the Appearance tab (the one with the black and white stripes).  This will probably turn your background to a black and white gradient, but we’ll fix that momentarily.  You should now see the Gradient Stop bar beneath the color pallete, and it should have a black box on the left end and a white box on the right.  When you select one of those boxes, that is the color fill you will be working with.  Select the black box and move around the color pallete until you get back to our original background color (or reset it manually to RGB 71-135-103).  Now select the White gradient stop and do the same, only this time select a lighter version of the same shade.  The trick here is to be subtle: the effect we want is of light and shadow.

Now for something cool: once the gradient fill colors are selected, you can alter how they are applied by using the Gradient Transform tool.  It looks like a big arrow and should be 2 tools beneath the text tool on the toolbar.  Select it, and then click and drag inside your artboard to apply the gradient.  Try it a few times and you’ll see that the angle, length, and placement of the gradient transform all affect how the gradient is applied.  Drag it until you have a pleasing effect of lighter green in the upper left and darker green in the lower right.

Bevel Effect

We are going to give the art some depth by adding a beveled border around the ellipse.  To do so, we first need to have a border: select the ellipse and click on the Stroke button above the color palette.  Select a golden color (I used RBG 167-167-17) and a stroke width of 25.  This will give some nice heft to the border. [Note: if you do this but still see no border, check the Stroke Style drop down under the color palette.  It is probably set to None, so try changing it to a simple line.]

At this point, we can start to play with some pretty powerful stuff called Effects.  Effects are like little built in routines that can add all sorts of goodies to our art.  Full coverage of effects is well beyond my experience, but suffice it to say that a little experimentation will be worth your while.  In this exercise we are going to use a few simple effects to really make our art shine.

With the border of the ellipse selected, you should see an Effects panel beneath the Appearance panel on the right.  In the bottom border of the panel are several icons: Click “fx->Effects->Bevel” and watch as Design applies the effect to the art.  Effects are drawn live (and in other software I have seen them called ‘Live Effects’) so it may take a second for the changes to complete.  The more effects and more complicated the art, the longer they will take to redraw: don’t panic, all is well!  Once added, you will see some options available for tweaking the bevel effect.  To match my settings, do the following: Width = 2; Contrast = .3; Softness = .6; Profile = Bulge Up; Light Angle = 142.  You will see that every time you change an effect setting, the art redraws.  If you’ve entered my settings, you should have something like this:

Drop Shadow Effect

One last thing we’ll do to add some depth is include a drop shadow on the text.  Select one of the text objects.  Go to the Effects panel and select “fx->Drop Shadow”.  Again, you can play around with the settings, but to match mine enter these values: Softness = 1; Offset = 1.5; Opacity = .6; Light Angle = 315.  Now apply the same Effect to the other Text element and the Cross shape.

Conclusion

If you’ve been following along, we should now have a pretty decent logo with some nice visual depth:

Now, I recommend that you go and play with some of these cool features!  Make some art, be wild, and have fun.  In the next installment we’ll discuss Layers and Exporting to XAML.  Until then, happy drawing!