Create diamond

Select the Rectangle tool and draw a square (hold down the Shift key). Select the Rotate tool and rotate the square 45° by holding down the Shift key while rotating. You can also just click the canvas after you have selected the Rotate tool, and enter the value of 45° in the popup window that appears and click OK. Resize the diamond shape using the Selection tool and by grabbing and dragging one of the shape's handlers. You need to hold down the Shift key (to keep the proportion) until top and bottom corner aligns nicely to the borders of your document.

Add gradient

Give the square a pinkish Linear gradient(RGB values used: R255, G219, B232 and R255, G0, B114)

Add transparency

Go to the Transparency palette and give the diamond an opacity of 25%.

Duplicate diamond

Duplicate the diamond by selecting the shape using the Selection tool (black arrow). Start dragging the shape to the right, now hold down the hold down the Option/Alt key, and right after also hold down the Shift key while you drag the duplicated shape perfectly horizontally towards the border of the document. You should have a nice overlapping diamond shape in the middle.

Group, duplicate and resize to 50%

Group both diamonds: go to Object > Group or hit Cmd/Ctrl + G. These 2 squares will be our 'object' we'll be working with now. Duplicate this object by pasting it in front: go to Edit > Paste in Front or hit Cmd/Ctrl + F. Now select the Transform tool and click in the center point of the object. In the popup window that appears, enter the value of 50% and click OK.

Flip vertically

Select the Reflect tool, click again in the center point of the object, select Horizontal Axis in the popup window and click OK.

Duplicate, duplicate...

Now play around with this object a bit more by duplicating it, scaling it etc. Try building up a balanced composition.

Arrange

Arrange your objects to your liking. Turn on Smart Guides (View > Smart Guides) so you can precisely align your different diamond objects. Try to create nice overlapping effects. Make sure everything stays well balanced. Even try to break the symmetric feeling of this object a little bit by moving some of them up, and then others down a bit. This needs a bit of experimenting. You could try using different colors if what you are making is not for valentine and add in other basic geometric shapes.

Create a heart shape

We need to create a heart shape that fits perfectly with our composition. Extra curviness would break the beauty of these straight geometric forms. So that's why we'll create the most basic heart shape using perfect 45° straight lines for the pointy bottom part.

1. Start by selecting the Ellipse tool and draw a circle (holding down the Shift key).
2. Make sure Rulers are on (View > Show Rulers or hit Cmd/Ctrl + R) and drag a vertical guide to the right point of the circle. With Smart Guides enabled (View > Smart Guides or hit Cmd/Ctrl + U) the guide should snap to the point.
3. Select the Line Segment tool from the Toolbox, hold down the Shift key while you draw a perfect 45° diagonal line. Select the line and move it so it aligns along the bottom left of the circle.
4. Go to View > Guides > Make Guides or hit Cmd/Ctrl + 5

1. Select the Pen tool from the toolbox and draw the bottom (point/triangular shape) part of 1/2 of the heart shape as shown in the image above. Use the guides you've just drawn and draw straight lines by just clicking. Make sure your path is closed.
2. Select both the circle and the triangle you've just drawn using the Selection tool (black arrow). Select the Reflect tool from the toolbox and click exactly on the vertical guide.
3. Select vertical axis and click the Copy button to duplicate the shape to the right.
4. Go to the Pathfinder palette and choose the Unite option. Circles and triangles should now be united as 1 path.

Add heart shapes

Play around with the heart shape by placing it on spots that makes an interesting composition. Use transparency to create overlapping effects.

Add background and text

Last but not least, add a subtle background. I've added a linear gradient background going from pink at the top to white at the bottom. I created a new layer below my composition to do this. Just draw a rectangle that matches the size of your document.

For the text, you can choose whatever you like of course, and you can also play a bit with transparency here. For my card I chose Gotham Black and Mrs Eaves Italic.

We'll be building the flag starting with the blue part, secondly the red part and last the white part with a 'ribbon' effect.

Starting with a brush stroke

I started from a Brush Stroke that I found in the Artistic Brush Library if I'm not mistaken. I've made it very tick and scaled it in the size that would fit perfectly for the size of the flag. I expanded the stroke via Object > Expand Appearance.

Minus Front

After duplicating the brush (so I have another one as back up), I drew a rectangle on top of the brush and moved it to the position so it covers the part of the brush I want to get rid off. I selected both and I chose Minus Front from the Pathfinder palette.

Deleting & recovering particles

I deleted all remaining particles and I also recovered the ones on the right that got lost while using the Pathfinder option from my original brush.

Apply blue gradient

I added a subtle blue gradient. The blue part is finished. I gave the layer the name Blue part.

Red part of the flag

I created a new Layer on top of the 'Blue part' layer and named it Red part.

Starting with a brush stroke

Then I pasted the original brush shape into this layer and flipped it vertically using the Reflection tool.

Minus front

Here I did the same like before. I drew a rectangle on top of the brush and moved it to the position so it covers the part of the brush that I wanted to get rid off. Then I selected both shapes and chose Minus Front from the Pathfinder palette.

Add red gradient

I added a subtle red gradient.

Finalize

Next I did a lot of tweaking with the Pen tool. This took a bit of time to get it perfect the way I wanted. First I deleted the vertical line that connects the top and bottom part of this shape and redrew this line by placing a lot of random points to make it very wobbly like the brush stroke. Next I also tweaked the ragged lines on the right to my liking.

White part of the flag

For the white part of the flag I created a layer that sits in between the blue and red part.

Draw a rough line

Just like with the red part I used a very rough line for the creation of the white part. This white part consists of 3 different shapes, starting with the back part.

Apply subtle gradient

To create the perfect depth, I added a subtle linear gradient going from white to 22% black.

Draw the in between part

Next I drew the middle part of the curl and I applied a radial gradient to create the perfect depth effect.

Draw the top part

Then I drew the last part to finish of the curl and I applied a subtle linear gradient. I moved the red part of the flag into position.

Done!

The flag is finished.

It is hard to believe but I started the illustration work for the new *me* in the Summer of 2008. Now we are more than a year later and I finally have something that I am very pleased with. You can't imagine how hard it is to combine client work, writing posts, tutorials and working on a next version of this blog. Many iterations have past the photoshop canvas before I got to a point that I really stand firmly behind.

One that didn't make it

This is one iteration that didn't make the cut.

Development

Currently I am at a point that almost all my templates have been coded. There is more to code because I have a few new things in the works. Personally I still feel there is a place for a blog that has *one* voice instead of multiple authors and posts that contains lists with 20 of this and 30 of that. We have enough of those! I hope that my new version will bring something new that will serve as a lighthouse in the sea of all the shouting. Most of those shout for attention and traffic and it is my goal to come out with something that is the opposite of that. Not sure if I'll succeed but hey at least I'll have tried :)

ExpresssionEngine

The next phase that I have to start is adding my templates to ExpressionEngine and making everything dynamic. Hopefully this will be smooth sailing and won't take up too much time. Speaking of EE...

Solspace

Mitchell from Solspace is celebrating his 37th birthday with a special 37% discount on all items in the Solspace shop. You'll have to be quick as it only runs today. I'm doubting on Tag 2.6.5. Have any of you used it? What is the most useful EE add on from Solspace that you are using now?

When?

That's the million dollar question :) I'm hoping to get it ready before I go to Leiden, NL for EECI2009, the first ExpressionEngine and CodeIgniter Conference. Not sure if that will be doable. Anyway things will be slow here until I am done.

A few themed moleskines are travelling around the world until the end of September. It's a creative project organized by the Culture Vulture. Each Moleskine has a theme. The Moleskine I received, with Jon's beautiful sketchalready drawn into it, has the theme 'My World'.

In October there is this UK event called the 'the big draw' where the Culture Vulture will host a party. All the Moleskine sketches and drawings will be featured on their website. You can already see the drawings in this Flickr group.

My drawing for 'My World'

At the time I received the Moleskine, my little friend Snootie just died. I was really sad and missed him so much. I still do each day. There are a ton of little things that make me think of him. I thought it would be perfect to draw an illustration around Snootie as he was such wonderful cat and meant a lot to me. He liked our backyard very much, and spent a great deal of his live playing in the grass jumping at everything that moves. You can't believe how much joy he brought, and how much fun we had watching him. Little Snootie meant 'the world' to Geert and me. He often caught us by surprise and made us laugh. This drawing is in honour of Snootie:

My Moleskine drawings are always drawn in phases. I draw when I find a moment (a few minutes) and a drawing always takes a bit of time. Sometimes I just start drawing, and have no idea what the final outcome will be. The ideas in my head are still vague. What I'll draw next just follows while drawing or just the next moment I continue. One night I really couldn't sleep, I was awake and thought of him. I felt too restless to fall asleep again, and so I started to write this text. The curvy lines were also drawn that night. These lines are there because I just love curvy lines. They don't particular mean anything, and are pure decorative. I thought they just form a nice composition. Design in general is such a big part of 'my world', and I guess the lines could represent that. In a last phase I wrote his name in different sizes and styling. I just love drawing text, and I secretly wish I was a typographer... but then again I need some serious exercise.

The Moleskine travels to...

I'll pass the Moleskine on to my friend Sylvie.

As you can see, 4 letters, 2 o's, a lot of roundness, ... First thing I often do for a type design is analyzing the letters I have to work with, try to find certain patterns. If there are double letters (2 o's, 2 t's , 2 l's etc.) can I create something fun with that? Can I create a ligature? Can I transform one of the letters a bit an integrate it with a symbol etc. There are many more ways than only this, but the typographic part is often one of the mayor routes you want to try out. The word 'loca' seems ideal for this type of execution. Lets get started :)

Draw 2 horizontal guides

Start by placing 2 horizontal guides that represent the height of the logo. Turn on Smart Guides (go to View > SmartGuides or hit Cmd/Ctrl + U).

Draw a circle

With logos like this one, everything starts with the circle of the 'o' and then you derive the other letters from the 'o'. Select the Ellipse tool. Click somewhere on the top guideline (as shown in the left image above), start dragging diagonally down right, now hold down the Shift key. Release the mouse, then the shift key, once you've reached the bottom guideline, as shown in the right image above.

Add thick black stroke

Give the circle a thick black stroke. I used a 40 pt thickness, but the value depends on how big your circle is.

Duplicate the circle

Select the Selection tool, select the circle (grab the bottom left segment), start dragging to the left, now hold down the Shift + Option/Alt key. Once you've reached the intersection as shown in the image above, release the mouse and then the keys.

Delete unnecessary segments

Select the Direct Selection tool. Click the top and right anchor point of the circle. Hold down the Shift key to select the 2nd point. Hit backspace to delete the selected path segment.

Drag horizontal guide for the letter L

If you know the basics of typography, than you know that round letters like an 'o' are always slightly bigger. Because they are round, they appear optical smaller (vertically) then straight letters like an 'l' for example. Because of this, we'll add another horizontal guide right on the spot as shown in the image above. This is where the anchor point of the top of the letter 'l' will end.

Draw the letter L

At this point we only have the rounded corner of the 'l'. Select the Pen tool and click in the top anchor point of the curved corner. Hold down the Shift key go to the intersection point of the guideline you've just drawn and click again. Now hold down the Cmd/Ctrl key and click somewhere outside the drawing area to end this path. Click in the right anchor point of the curve, hold down the Shift key again and click at the intersection of the bottom anchor point of the letter 'o'.

Adjust the kerning

The letters 'o' and 'l' are connected, but the letter 'l' looks way too wide, or the kerning (if you can call it that, in this situation) is too wide. Select the Direct Selection tool and drag a rectangle to select the 3 anchor points of the letter 'l' as shown in the left image above. Start dragging this segment to the right a bit (as shown in the right image above) while holding down the Shift key.

Duplicate the letter O

Select the Selection tool and select the letter 'o'. Start dragging the circle to the right while holding down the Shift + Option/Alt key as shown in the image above. Just like before, release the mouse first, than the keys.

Duplicate the letter O again

Repeat the previous action.

Create the letter C

Select the Direct Selection tool and click the right most anchor point of the circle. Hit the Backspace key to delete the path segment.

Select the Pen tool and click in the top right open anchor point. Hold down the Shift key and click again a little bit to the right (as shown in the image above). Now hold down the Cmd/Ctrl key and click somewhere outside the drawing area to end this path. Click in the bottom open anchor point, hold down the Shift key again to draw a horizontal line just like before, and click where you intersect the bottom point of the last circle (as you can see in the image above).

Adjust the kerning

Just like before with the letters 'l' and 'o' (which will change into an 'a' later), we only guess the spacing between the letters. So we have to adjust the kerning a bit again here to get this perfect. We do that by selecting the Direct Selection tool again and by dragging a selection around the 'o', making sure we also select the anchor point we drew to connect both letters. Now grab the path, hold down the Shift key and move the segments to the left a bit (for another reference of how far, see the next image to the left below).

Create the letter A

Now we'll turn the 'o' into an 'a'. First of all, add another horizontal guide to the bottom of the letters. This time you can aim for the very bottom, because we have already lines in place connecting the rounded letters and so we need to give the leg of the letter 'a' the same height. Select the Pen tool and click in the most right anchor point of the circle. Though, make sure you're not adding an anchor point. So make sure your Pen cursor has an x and not a plus sign. You can always temporary lock the circle by hitting Cmd/Ctrl + 2 (don't forget to unlock later via Cmd/Ctrl + Option/Alt + 2). Hold down the Shift key and click on the intersection below with the horizontal guide (see image below on the left).

Duplicate the layer

Grab the layer in the Layers palette and move it onto the Create New Layer icon to duplicate the layer.

Apply smaller white stroke

Select all paths in the duplicated layer by using the target circle icon in the Layers palette. Go to the Stroke palette and select a value that is about 1/4 of the size of the back stroke. I'm using a value of 10 pt. Now select the Stroke option in the Color palette and select white at the bottom right of the palette.

Expand to fill

With the white stroke still selected, go to Object > Expand... and click OK. The stroke is now turned into a fill. Now select all paths of the layer containing the black stroke by using the target circle icon in the Layers palette and do the same: go to Object > Expand... and click OK to turn the stroke into a fill.

Unite the L and O, then unite the C and A

Select the letters 'l' and 'o'. Go to the Pathfinder palette and choose the Unite option to merge the paths of both letters together to one object.

Now select the 'c' and 'a' and do the same: go to the Pathfinder palette and choose Unite.

Minus front

Now we'll make the logo transparent, meaning the white lines will become transparent holes instead of a white fill. Select both the white part and the black part of the letters 'l' and 'o' and choose Minus Front from the Pathfinder palette. Do the same for the letters 'c' and 'a'. We're almost there now. Only one last tweak left...

Move the letters CA into place

To create a more perfect and balanced connection between the letters, select the 'ca' part using the Selection tool and move them to the left, holding down the Shift key until you intersect and overlap the left most part of the letter 'c' with the most right part of the letter 'o' as shown in the image above. You should end up with a similar result as shown in the image below.

The final result

Hope you enjoyed the exercise and you can put this to good use for your designs.

Try out different things

Make sure to try out different stroke widths. You could try out an extra stroke and achieve this effect for example.

Select the Ellipse tool and draw a circle holding down the Shift key.

Fill circle with linear gradient

Fill the circle with a linear, vertical gradient (90° corner), going from light green at the bottom (R197, G227, B38) to dark green at the top (R68, G134, B58), with the position of the gradient slider located around 70%.

Add a second circle

Select the Ellipse tool again and draw a smaller circle on top as shown in the image above.

Vertically center the 2 circles

Vertically center the 2 circles by selecting both circles using the Selection tool, hold down the Shift key to select the second circle. Go to the Align palette and choose the Vertical Align Center option.

Minus front

With the 2 circles still selected, go to the Pathfinder palette and choose Minus Front.

Change opacity to Multiply

You should now have a crescent shape as shown in the image above. Make sure it is selected. Go to the Opacity palette and choose Multiply from the dropdown menu.

Duplicate rotate the crescent

Enable Smart Guides: go to View > Smart Guides or hit Cmd/Ctrl + U. We need to find the center of the circle, so we will end up with a circle shape again when we duplicate the crescent. Draw a vertical guide and a horizontal guide as shown in the image above. Use the points of the crescent so the guide will snap to it. Now select the Rotate tool from the toolbox. Alt/Option click exactly on the intersection point for the 2 guides. In the Rotate dialogue box enter 180° and click Copy to duplicate the original crescent shape.

Ring shape

A ring shape with a nice overlapping effect (because we use Multiply) should be the result. We are almost there now...

Rotate the ring 45°

The only thing left to do now it rotate the ring 45°. Select select the Rotate tool from the toolbox again and Alt/Option click exactly on the intersection point for the 2 guides again. In the Rotate dialogue box enter 45° and click OK. That's it! :)

Source file

This AI source file is for educational purpose only and is compatible with versions CS2 or later.

• Download the Illustrator source file from MobileMe

As you can see the heart shape is a compound path as there is a gap in the middle.

The screencast

If you combine this with the Text Wrap feature, by wrapping the text around the smaller heart we can solve this problem. Then of course we also need to make sure the gap is remained. Let me show you how you can do this...

• Watch the screencast from Vimeo
• Download the QuickTime movie from Vimeo (link bottom right)
• Download the QuickTime movie from MobileMe

Enjoy ;)