LATEST BLOG

Recreate The 9rules Logo

Dec 02, 2009 by Angelo

The famous 9rules logo was created by the genius Mike Rundle and is one of my favourite logos ever designed. The logo wants to represent something “organic” or “always changing” hence the 9 layered leaves or petals. I’m going to show you how to recreate it using Adobe Illustrator CS4 and its all-too-powerful Pen Tool.

Let’s fire up Adobe Illustrator and create a new document. Using the Pen Tool (P) let’s draw our first leaf shape.

Let’s give it a fill colour using this hex code #9CCE2E.

Create a 2nd layer and draw the second leaf. I like to disable the fill colour when drawing with the Pen Tool so I can see clearly.

Fill it with this hex code #A0DD36.

Create a 3rd layer and draw your third leaf. You can try to copy the 1st leaf (CTRL+C) and paste it to front (CTRL+F). Then rotate it (R) to the left and resize it down while holding SHIFT.

Fill it in with this hex code #FFEC00.

Create a 4th layer and draw our fourth leaf or you may copy (CTRL+C) the previous leaf and paste it to front (CTRL+F) and rotate it (R) to the left.

Then fill it with this colour #FFEC00.

Create a 5th layer and copy (CTRL+C) our previous leaf and paste it to front (CTRL+F). Hold down SHIFT while we resize it down. It may benefit you if you use the Direct Selection Tool (A). Click on one of the anchor points on your newly pasted leaf. You should see 2 handle bars which you can play with to adjust the shape or curvature of your leaf.

Fill it with this colour #F7AC16.

Create a 6th layer, copy (CTRL+C) the previous leaf and paste it to front (CTRL+F). Adjust the size and its curvature using the same technique. Then colour it in with #F96114.

Only 3 more leaves to go! We’re almost there. Create a 7th layer and draw a new leaf.

TIP: Each leaf should have at most 2 anchor points only. Otherwise stop now and start again. Practice makes perfect.

Then we fill it with #70CE34.

Create our 8th layer and draw a new leaf. Again you can try to copy (CTRL+C) the previous leaf and paste it to front (CTRL+F), rotate (R) and resize it while holding down SHIFT to constrain the proportions. Use the Direction Selection Tool (A) if you need better control.

Then we fill it with #BFBB1F.

Create a 9th layer and draw our last leaf in. Again you can try to use the copy, paste, rotate, and resize techniques already mentioned above.

Do try to get the hang of the Direct Selection Tool (A) for better curvature control via the handle bars. Then fill it with #588E03.

Alright we got all 9 leaves done! Now for the stem. Use the Pen Tool (P) to carefully draw up our stem. Try to get it with 4 anchor points. Colour it in with #588E03.

Our final illustration!

I used Adobe Photoshop for my finishing touches.

Create a new document with a transparent background. Give it a radial gradient with these colours #074166 to #000000 (black).

Go back to Adobe Illustrator and make sure all layers are unlocked. Select all (CTRL+A) and copy (CTRL+C). Paste it as a Smart Object in Adobe Photoshop.

Hold down the SHIFT and resize with the mouse as needed. Press ENTER to place the file.

Add a Layer Style and select Stroke. Change the stroke size to 10px, position of outside, blend mode to normal and colour to white.

Great work! We’re done!

NOTE: The colours including the geometrical value of the shapes used in this tutorial are not the exact match of the original design.

DOWNLOAD TUTORIAL FILES

Written by Angelo Beltran

Angelo Beltran is a freelance designer who writes about almost everything design related. He is passionate about branding and corporate identity. Go and follow his tweets over at Twitter.