Veerle's blog

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Jan 27

Illustrator full spectrum spirograph

2009 at 10.17 am posted by Veerle Pieters

In my previous Illustrator tutorial I showed you how you can create a diamond flower using different transparency modes. With this tutorial we’ll stay within the same area of spirographs. Today’s article is completely inspired by Mr. Spirograph himself Andy Gilmore. His work is stunning and very inspirational. He does magic starting from simple shapes and ends up with a remarkable complex composition. I e-mailed Andy to ask permission if I could write a tutorial on one of his creations. Andy replied that it is always interesting to see the many ways that an image can be built. Let’s get started.

First of all I should point out to you that this is one of way of how you can create these kind of shapes. Also, this shape is not a 100% exact copy of Andy's creation, but it's close. I just tried to find a way so I can explain things in an easy understandable manner.

Prepare color palette

First you'll need to do some preparation work. For this shape we need to create 36 color swatches going from bright yellow, to orange, red, purple, blue, green. Keep in mind that there is a smooth transition between each color swatch. Make sure the very last yellow-green swatch will give a smooth transition to the first yellow swatch.

Create the shape to duplicate

Draw a circle using the Ellipse tool, holding down the Shift key. Give the circle a bright yellow fill. Make sure to turn on Smart Guides: View > Smart Guides. To switch them on and off use cmd/ctrl + U. It is also recommend to turn on Snap to Point: View > Snap to Point.

Select the circle at the middle left point, hold down the Shift + Alt/Option key and drag/duplicate the circle. Drag the circle to the right until you reach the center point of the original circle. Release the mouse.

Select both circles, go to the Pathfinder palette and click the Interset option. For CS3, please hold down the Alt/Option key or click the Expand button after you have clicked.

You should now end up with a shape as shown in the image above.

Adjust transparency value and mode

Go to the Transparency palette and adjust the value of 100 to 25. Change the mode from normal to Multiply.

Start rotate and duplicating the shape

Select the Rotate Tool (R), hold down the Option/Alt key and click exactly on the most bottom anchor point of the shape. Enter a value of 10 as degrees (360°/36) and click the copy button.

Respect the creator and his work

Being inspired by his work or his technique is fine, but do not steal or copy. Inspiration should lead to new ideas, new creations. I invite you to experiment with different shapes, different patterns or try out different angles and color combinations. All his work is copyright protected and may not be copied or used in any way without his permission.

Result of my experimentation

I thought, since I always stress out experimentation is vital, I share what I've created. Once I was playing around with this Transform Again technique, I was thinking why not try out Transform Each instead and see where I end up. Here is the result of some of my experimentations :

Start with a simple square. Copy and rotate at -10° and scale 85%, 8 times in a row. You end up with 9 squares in total. Then rotate the entire shape at -10°. Use a transparency of 10% in Multiply mode.

Start with a triangular shape. Copy, rotate at 12°, scale at 115% and move -10 mm horizontally and 10 mm vertically, 10 times in a row. You end up with 11 triangle shapes in total. I've used different colors with a transparency of 40% in Multiply mode.

Start with the same triangular shape. Copy, rotate at 18°, 6 times in a row. You end up with 7 triangle shapes in total. I've used different colors with a transparency of 100% in Screen mode. This way the overlapping area in the center is white.

Start with 3 overlapping circles. Draw one and rotate/duplicate the circle at 120°. Group the circles and copy, rotate at 48°, 2 times in a row. You end up with 3 circles shapes in total (each shape containing 3 circles). I've used different different colors (radial gradients) for each with different transparency values and transparency modes.

Want to learn more?

A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.

Wow, because of you, I’ve started learning Illustrator for finalising my architectural presentations. It’s great what fantastic results can be achieved with just a few simple tools and piece of imagination :).

excellent write up - I am using gimp so it is a little cheaper for me and a little harder to find my way. But I was successful you could say. I ended up trying difference variations of colors to end with and the green is good and so is the blue (but than you have to start with green or you end up creating what I like to call ... the catastrophe theory. love the references and I am dying to see your tutorial on gilmore’s http://www.flickr.com/photos/birdbrid/3220525876/ - tried the black backdrop on this tutorial and cutting out the middle…wow - that turned out ugly but yours looks great like always.

19

Dean Thu Jan 29, 2009 at 11.19 pm

The one at 18 degrees looks absolutely superb (as they all do). Bravo!

I’ve never really persevered with Illustrator, I’ve never had the desire. Veerle, you just inspired me! :)

Veerle Pieters Sun Feb 1, 2009 at 05.18 pm

Could you add some information or provide a pointer on the prep work involved for “Prepare Color Palette”?

You use the sliders in the Color palette to form each color. You choose a color mode in the palette menu first. You access the palette menu when you click the arrow button in the top right corner of the palette. You could choose RGB. Once you’ve formed your color, you drag the swatch (the square representing the fill on the left of the palette) into the Swatches palette. Another way would be to open one of the color libraries that come with Illustrator and drag the swatches from the library into the Swatches palette. Go to the Swatches palette menu (arrow in top right corner) and choose Open Swatch Library > Scientific >Split Complimentary. This library should give you a good start. Hope this helps you out.

You can also use the blend tool to achieve this effect. It’s a little quicker as you create a arc path align the blend to path and use steps in between the make shapes.

Yes that’s true, good point ;) For those who are interested, I’ve written an article about this tool a while ago together with the Distort Zig Zag Effect. You can create surprising effects if you experiment with one of these.

“Copy and rotate at -10° and scale 85%, 8 times in a row. You end up with 9 squares in total”: is there a way of doing these two steps simultaneously? so I can repeat the steps by just hitting cmd+d? or how do you do the repeating?

It’s all done in 1 action. You select your shape and you go to Object > Transform >Transform Each. There you can enter, the rotation and scaling values and if the shape needs to move vertically or/and horizontally. Once you hit the ‘copy’ button, you hit cmd+d to repeat the step. Hope this answers your question ;)

I finally found some time to do this. I was able to recreate the first spyrograph, and do the color palette pretty closely, but my oranges and yellows were not quite as bright as yours, for some reason. Then I tried to do the sqaure one, but had a similar problem to Brigit, above with understanding how the rotation and the expansion to 85% are done at the same time. Because I am on a PC, the MAC shortcuts aren’t the same, so it is a little guess-work for me as to which keystrokes I should be using. I also tried the last one - with the large circles, and couldn’t quite get the overlaps at the right angle, but managed to do the rest.

These are beautiful designs. So neat how you created the other three ideas from the first one! I saw this example on another web design company’s portfolio, and had to share this with you. It is a logo design for a CD that is coming out - read and be sure to look at all of the examples in the viewer/window.

It is a very similar to these spyrographs! I liked how they put the white shape with the eight rounded points in the middle of it, and was wondering again, how to create shapes like that. I tried with pucker & bloat, starting with a star shape and a cirlce to see if I could get the points, but didn’t quite do it right… you wouldn’t know how they did that particular shape would you? ; )

Well, anyway, this was a fantastic tutorial - I am going to see if I can do the square again. Knowing when to expand the square to 85% - after the rotation of 10%, I would assume? Do you do this within the transform menu, or the rotation menu? Thanks again for another fantastic tutorial!

30

Veerle Pieters Wed Feb 18, 2009 at 07.41 pm

I liked how they put the white shape with the eight rounded points in the middle of it, and was wondering again, how to create shapes like that. I tried with pucker & bloat, starting with a star shape and a cirlce to see if I could get the points, but didn’t quite do it right… you wouldn’t know how they did that particular shape would you? ; )

You need to break the shapes apart using the Pathfinder option Divide. Then you delete the inside parts of the object to achieve this flower effect. However, if you break the object apart into separate pieces, you end up with duplicate shapes stacked on top of each other. I don’t know a solution to avoid this. You could delete the duplicates, but then you loose your transparency mode effect. What I usually do is, delete the shapes on top of each other, so I’m left with only one. Then I simulate the ‘mode’ effect by reapplying a color in normal transparency mode. So it looks equally the same only no special transparency mode has been applied to it.

Thank you for the link. That is indeed a very nice example ;)

31

Jackie Wed Feb 18, 2009 at 07.57 pm

Thanks very much Veerle! You are an expert on Illustrator. I will try this out at some point to see if I can create that shape again. I tried Pathfinder Divide on something else, and saw that it did break the shape apart, so will try to see if I can delete the duplicate shapes - sounds complicated, though.

32

Victoria Sat Feb 21, 2009 at 11.19 pm

Thanks for this tutorial. It`s great!

33

Maarten Wed Feb 25, 2009 at 09.24 am

Very inspiring blog, Veerle. Gaaf werk. Inspiring tutorial as well! These effects are even easier to create in Inkscape using the “Create tiled clones” function. (under the edit menu).

Here’s how
1. Create the “leave”. Choose “unset” fill by right-clicking on the fill color at the left-bottom of the window.
2. Select the leaf and click on it again: drag the center of rotation downward
3. Choose Edit » Tiled clones.