July 7, 2006

My Own Little Lego Challenge

So a short while ago, my dear buddy John Nack (Product Manager on the Adobe Photoshop team) posted on his blog about a Photoshop tutorial that he had found online on how to use Photoshop to create a lego brush. That's right, it's a not a typo -- a LEGO brush (not a LOGO brush).

I take one look at the tutorial and wonder to myself what such a tutorial was doing in Photoshop, when it clearly could be done in Illustrator. Especially when you consider that the legos themselves were imported from 3D software in this particular tutorial (so where's all the fun?). And besides, you know how I get when I see people using Photoshop for things that can be done better in Illustrator...

Now, I'm fully aware that building lego pieces are beyond the capabilities of Illustrator's 3D effect (sadly, Adobe Dimensions COULD indeed build them), but I still took the challenge upon myself to -- at the very least -- duplicate the effect created in the Photoshop tutorial -- all while staying completely in Illustrator, from start to finish.

The first problem was creating the legos themselves. In Illustrator's 3D effect, it's impossible to have two objects pierce one another, and so to create the look of a lego, I create a rectangle and extruded it. Then I created separate circles and extruded those. I used the Isometric position settings so that it would be easy to match the correct angles of all thet objects, and then I simply overlayed the circles on the rectangle.

Now that I had the lego complete, I was able to create other lego shapes as well. To create the hollow-looking circles on top of some of the lego pieces, I used a revolve with an offset setting rather than use an extrude. It was actually pretty easy to create many of these shapes.

Great! Now that the legos were done, I was able to define each logo as a Symbol. Then I used the Symbol Sprayer tool to create a symbol set full of legos.

Even though my favorite color is yellow, I still had to match what I had seen in the Photoshop tutorial, and so I used the various Symbolism tools to adjust the individual symbol instances.

In the end, John Nack was right -- drawing with legos in Illustrator brought back fond memories of the hours and days I spent building my own little worlds with the lovable colorful interlocking plastic blocks. Now -- if only I could create a Lego Spongebob with Illustrator...

Anyone have any other creative ways to create such legos in Illustrator? I'd love to hear if you do...


Erin Sparling said...

So this reply isn't so much about different ways of making bricks, but instead using them to build things.

In this image, you can see lots and lots of bricks. But if you look at the outline view, you can see that the whole thing is made of blends.

I drew a quick brick by itself, and made a symbol of it. Then I made a few blends between two instances of the symbol, and set the blend options to specific distance, and the height of the side of the brick.

When I wanted say, for example, a 12-high stack of bricks, I would drag the top part of the blend to be exactly 12 inches from the original position (or use the move command), and it creates the stack of bricks for me automatically.

Unfortunately, there is some weird error going on here that I can't figure out right now, where the spacing doesn't seem to be exactly 1 inch, and thats why the bricks don't line up from column to column. Just wanted to throw this out there, see if anyone else has ideas along these lines.

Teri Pettit said...


Try removing the spine path and see if that makes your bricks line up better.

When there is a spine path, what it does is divide the path up into pieces (if it is a straight line they will always be of equal length), and then position the center of the bounding box of each blend step at those points along the spine. But it may be that the center of the bounding boxes is not really the point that you want to be positioned along the straight line between them.

If there is no spine path, it instead blends each anchor point in a straight line to its mate, and then just leaves them where they fall. The blend steps as a whole are not moved.

Enrique Flouret said...

Hello Mordy.

I must first tell you that although you didn't like it, it's an honor that my tutorial is being referenced by you. Please, let me explain the reasons why I made this tutorial. Sorry for my English, my native language is Spanish.

Photoshop users love brushes. In fact we die for brushes. Brushes are fun, creative, and also ludic. And the stranger the set, the better it is.

But what you misunderstood about the tutorial is that I'm not showing how to build the Lego bricks (which would be a daunting task in Photoshop). I'm showing how to build a set of brushes based on a pre rendered Lego bricks image and, additionally, I give some tips on how to use Photoshop CS2 brushes set. Remember that my web site is about Adobe Photoshop.

Besides Photoshop users, I wanted to target Lego fans by using official lego 3d models, not just blocks with studs (this tutorial was highly appreciated in a Lego community web site).This feature added some "cult" flavor to the tutorial. Also I was showing my visitors that there is free software to do professional, yet fun, lego sculptures.

So, you shouldn't be concerned about my tutorial. It is great that you show how Illustrator deals with the same stuff, and better in some cases (Photoshop lacks a spry tool). Those who own a copy of Adobe Illustrator will be delighted with your tutorial. But those who only own a copy of Photoshop won't have the chance.

Having said that, I love your tutorial and hope I didn't bother you with this explanation.

Thanks again,

Enrique Flouret, Arch.
Site Manager
The Photoshop Roadmap

Mordy Golding said...

Enrique! I hope there are no hard feelings. Please understand that I loved your tutorial -- it was so original!

My "issue" is mainly that there are so many Photoshop tutorials out there and few people even mention programs like Illustrator or InDesign. So when I saw your tutorial using Photoshop, I saw an opportunity to show others how it might also be done in Illustrator.

I certainly did not mean to play down your tutorial, and your reasoning for creating such a tutorial is completely valid.

If anything, I owe you for the inspiration and challenge! Maybe we can share additional tips and techniques between both of our sites!

Enrique Flouret said...

Hello Mordy (oops, you caught me pressing F5 like crazy!).
No hard feelings at all, in fact, as I told you, it was an honor to see my tutorial mentioned by a important person in the Adobe software industry.
I'm not used to write a lot. And worse if I have to do it in another language, so that's why I took a minor subject, like building a set of brushes, and wrapped it up with some fun stuff like Lego bricks.
I was an Illustrator power user (and absolute fan) until version 6, and then stopped using it at all, so I'm not aware of the newest features. I will have to take a closer look.
If you allow me, I will add your tutorials to my database and publish a link to them at the Art and design section of my site. And I will gladly let you know each time I publish a tutorial. And if you find it interesting, perhaps you can show us how can that be achieved in Illustrator. That's a great idea.


Philippe JACQUES, alias "MagiSign" said...

On the same theme, I invite you to take a look on the French forum "http://www.lalogotheque.com/forumde/index.php?showtopic=7013"

Anandrine shows there its own Legoman created with Adobe Illustrator in 2D.

This is a nude guy, so she invites and challenges anybody to deliver dress for him !


Philippe JACQUES, alias "MagiSign"

Anonymous said...

More information on isometric position settings, please.

Fielden Lundy

Jonno566 said...

I've managed to create a standard brick no problem, but if possible could anyone offer any advice on how to make the ramp or curved peices etc?

Any help would be greatly appreciated.