Random Free Vectors Part 2 - Rounded Squares

Posted on March 21st, 2007 by BittBox

Here is another example of a design play with a single shape. With a single shape, it’s possible to achieve very intricate designs, with a little layering, color, and path manipulation. I’ve been exploring simple shapes and layering lately, and again wanted to share with you a little super-simple inspiration.

Includes: - AI (2) EPS (1) SVG (1)

Tips for exploring this on your own:

How I made these Shapes:

1. Like I mentioned above, I just used a single shape over and over, a rounded rectangle, but I also combined a lot of paths to form some more complex shapes. Here’s how: Make a bunch of rounded rectangles on top of each other at different sizes, like this.

Random Free Vectors Part 2 - Rounded Squares

Now in the Pathfinder palette (window > pathfinder) Hit the “Exclude Overlapping Shapes” button, then immediately hit the “Expand” button. (or you can hold down option/alt while hitting the Exclude Overlapping Shapes button).

Random Free Vectors Part 2 - Rounded Squares

Illustrator subtracts all of the areas that were previously overlapped, and the expand button gets rid of the leftover paths and creates one simple compound path for you. Here is the result!

Random Free Vectors Part 2 - Rounded Squares

2. The same thing goes for the shapes that have only strokes, but we will use a different button in the Pathfinder. Create a bunch of rounded rectangles, overlap them and apply a stroke like this.

Random Free Vectors Part 2 - Rounded Squares

Now hit the “Add to Shape Area” button in the Pathfinder to combine all of the rectangles into a single path, then immediately hit “Expand” to get rid of the leftover paths.

Random Free Vectors Part 2 - Rounded Squares

Illustrator combines all of the shapes into a single path for you. Here is the result.

Random Free Vectors Part 2 - Rounded Squares

That’s it, pretty simple huh? Just a single shape tool, and a couple Pathfinder buttons, and you will be well on your way to some complex geometric patterns and designs in no time! Tip: Fill some of your shapes with the same color as your background to get a reverse or negative shape effect, without having to cut the shapes out of a path. (See my file)

Reference, and Further Reading:

Previous Post - Pathfinder: Explained

Glen, on March 21st, 2007 at 7:21 am

Nice, thanks
Liz, on March 21st, 2007 at 8:37 am

This is something I should play with a little more and I’m happy to report that I actually can once again. I don’t know if anyone else experienced anything like this, but I was devastated when my new MacBook Pro decided it wanted nothing to do with Pathfinder and systematically quit Illustrator (CS2) every time I hit any button in that palette. Last week, I tiptoed my mouse over to the palette not expecting anything and it added my shapes! I had given up after many months of this behavior, but hopefully I haven’t jinxed myself by talking about it because I really like your design idea and want to get in a little practice.
Brandon Hopkins, on March 21st, 2007 at 9:17 am

It looks like a building layout plan. Great as always!
gautch, on March 21st, 2007 at 9:42 am

Bittbox! What are you thinking?
Rounded Squares?
I though these were Squared Off Circles!

Nah I’m kidding. This is a great way to inspire people to take a trip across the Pathfinder!
Dave, on March 21st, 2007 at 6:37 pm

As always, awesome tutorial. One request though… could you possibly mention the context in which one could use your tutorials. For the conceptually challenged (me) this looks really cool, but I wouldn’t know what to do with it (or even start looking for someplace to look for it). Thanks again for sharing.
BittBox, on March 21st, 2007 at 10:18 pm

@Dave

I hate to list the ways to use this because there is no way to list them all but you could. . .
Use then as a low contrast background element in a header.
Rasterize your design and make a photoshop brush.
Use as a background shape behind some text in a poster.
Use it as a texture layer in an illustration.

or. . my favorite. . . clouds in an esurance.com tv commercial :)

You can really do anything, but the point here is essentially to experiment with making complex shapes out of a simple shape. Very Quickly. Without relying on searching the web for a free file. Sometimes the simplest answer is the best answer, and I tend to forget to think about the basics a lot of times. (repetition and variety, a very simple, basic design theory)

This post isn’t meant so much for you to take and use rounded rectangles in a design, as it is meant to make you think about some basic design theory/techniques to apply as needed in whatever design task you may have in front of you.

~BittBox
Geo, on May 18th, 2007 at 3:30 pm

bitt,

great. another awesome how-to. thanks. and thanks for the quick reply on my last post. do you get the email at “info@bittbox.com”? is bittbox a company or just your perosnal website. such a great resource.

george
BittBox, on May 18th, 2007 at 3:33 pm

Geo,

Reach me at contact@bittbox.com and this is a personal website from a single crazy designer.

~Bitt
aipig, on September 27th, 2007 at 11:26 am

Thanks for all the freebies
and for the inspiration!
Intenta » Blog Archive » Set de vectores Modern Arrows, on January 13th, 2008 at 9:10 am

[…] resto de los sets son:Random free vectors part 1 circlesRandom free vectors part 2 rounded squaresRandom free vectors part 3 flowersRandom free vectors part 4 wingsRandom free vectors part 5 […]
not found, on February 8th, 2008 at 2:10 pm

Not Found

The requested URL /wp-content/uploads/2007/03/random_squares_1.zip was not found on this server.

:)
BittBox, on February 8th, 2008 at 2:44 pm

Thanks!
I just moved servers and some of the files got lost in the mix.
Files replaced

~Bitt
Know it's ok!, on February 8th, 2008 at 9:46 pm

@ BittBox:

Thanks so much!

~The “not found” guy :p