Squares for Backgrounds in Illustrator

    ●  Create an abstract background of square shapes for your project using rectangles, filters and swatches.

    ●  Then, IF you are making a web page, use it for your background.

Learn About:

Swatches Rectangle tool psuedo class

  •   This tutorial is used in the Picture Perfect, CD Cover Design, Shadow Life and the Art Genre Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open Illustrator ~

Open YOUR PROJECT in Illustrator

    ●   If you are working on the
CD Cover Project open that ...

    ●   OR, if you are working on the
Picture Perfect Project
open that ...




   ●   OR, if you are working on
Shadow Life Project open that ...

… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …



Make a New Layer and drag it below the other layers …

If you are making a web page background, you will need a New Document …

Step #2: Swatches ~

Click the Swatches icon or go to: Window > Swatches

… open the Swatch Libraries menu

swatch libraries menu

… go to: Gradients and pick a color scheme - any one.

Step #3: Make some Rectangles ~

Get the Rectangle Tool or hit the keyboard shortcut letter (m) …

rounded rectangle-tool

… and create a series of rectangles on top of each other in varying sizes and shapes.

Step #4: Change the Colors ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

… and pick colors from the swatch library you selected to re-color the rectangles.

Step #5: Select all the Shapes ~

Hit Cmd (⌘)+A cmd e + a key to select all your shapes …

… click Stroke so it is the Foreground color …

… and change the stroke color too.

Also, you can change the Stroke Weight here, to make the lines bigger if you want.

Step #6: Transparency ~

Select all your sapes AGAIN, and clic Transparency or go to: Window > Transparency

… scroll through the Screen Blending Modes

… find a Blending Mode - like Difference - or ANYTHING that gives you an interesting blend with the objects behind.

Step #7: Duplicate the Shapes ~

Hold alt-option key and drag to make duplicates of all the shapes:

Step #8: Rotate the Shapes ~

Then you can go to: Object > Transform > Rotate - insert 180 for angle - and if you click Copy it creates a rotated duplicate.

Using these thechniques, cover the entire artboard with your shapes.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #9: Adding Randomness ~

Select all the shapes AGAIN and go to: Object > Transform > Transform Each.






Check the Preview and Random boxes, change the settings to your liking.






There are no exact numbers – just mess with sliders until the rectangles look random enough for you.


Step #10: Brushes ~

With all your shapes still selected, open Brushes

… and click the Brush Libraires Menu.

Try the Artistic Charcoal brush if you want, but choose any brush you like!

Or try any other natural-looking brush.

Step #11: Roughen ~

Hit the keyboard shortcut: Cmd(⌘)+A again to select all and go to: Effect > Distort & Transform > Roughen. Choose your own settings - you can always edit the settings in the Appearance panel.

Step #12: Drop Shadow ~

Select the text and go to: Effect > Stylize > Drop Shadow - and Outer Glow, plus any other Effects you want!

Step #13: Blur and Feather ~

Select the lines and go to: Effect > Blur > Gausian Blur and adjust the blur to your needs …

… and lastly go to: Effect > Stylize > Feather and try that.

Last Steps: Save and Attach ~





STOP HERE - steps #14 thru #16 are ONLY if you are making a website. Otherwise, save your work as an .ai document now.


Step #14: These next steps are ONLY FOR WEB DESIGN ~

If you're saving the image for a web page background, go to: File > Save for Web … and save it as a .jpg

Lower the quality of the image until the size is below 100 kilobytes, on average.

Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.

Step #15: Root Folder ~


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

and put the file in the root folder of your project …

Step #16: CSS Styles Panel ~

Double-Click to open your styles sheet …

… Double-Click body

… select Background and attach the image.

Last Step: Save Your Project & Attach ~

If you're working on your website background, upload to the server and post the link to your site.

Or, if you're making a background for some other project, go to: File > Save as … and save your work as an .ai file.

Attach it and continue working …

  •   ALWAYS save your projects using the following naming convention:

  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.

  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.

Other Resources: http://blog.spoongraphics.co.uk/tutorials/create-a-vibrant-abstract-vector-design-illustrator