Angled Backgrounds in Illustrator

    ●   Create an abstract background for your composition using this simple technique.

    ●   Then, paste your Portrait over the background to create the most interesting work of art.

Learn About:

Scissors ToolLive Paint ToolSwatches Swatches

  •   This tutorial is part of the CD Cover, Picture Perfect Portrait Project, and the Art Genre Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

abstract background

Step #1: Set up your Illustrator document ~

Start with a print document of 8.5 x 11″- change the color mode to RGB - and set the Raster Effects to medium.

Step #2: Lines ~

Grab the Line Segment Tool or hit the keyboard shortcut (\)…

… then draw a bunch of diagonal lines across the entire artboard.


Step #3: More Lines ~

Now draw a bunch going the other way …

more line

Step #4: Even More Lines ~

Draw a bunch of lines in all four directions …

Step #5: Remove Small Shapes ~

Some of the lines may be so close that they should be combined. Get the Scissors Tool or hit the keyboard shortcut (c) …

scissors tool

… and, using Scissors and the Direct Selection Tool (a) direct selection tool select the tiny lines and merge them to with their neighboring elements to create larger unique shapes.

Step #6: Swatches ~

Click the Swatches icon or go to: Window > Swatches

… click on the Swatch Libraries menu …

… and go to: Gradients > Color Harmonies or any other library you want.

Step #8: Drag the Colors into Swatches ~

To make this work, you've got to drag the colors into Swatches. Click on the first swatch in the group …

… and then, holding click on the last swatch to select them all.

Now you can grab the whole group and drag them into Swatches.

OR - Just click on the folder of the swatch (if there is one) and drag it.

Step #7: Live Paint Bucket ~

Hit the keyboard shortcut: Cmd(⌘)+A to Select All and go to: Object > Live Paint > Make

live paint make

… and then get the Live Paint Bucket tool or hit the keyboard shortcut (k)…

live paint bucket

… hover over the shape with the Live Paint Bucket and click …

… scroll through your swatches by hitting the Arrow Key right arrow key

… and fill the Live Paint area with color of your choice by clicking.

Step #8: Stroke ~

Once you get all your shapes filled, try deleting the Stroke to see if you like the way that looks. Hit the keyboard shortcut: Cmd(⌘)+A to Select All

select all lines

… and turn the stroke off.

stroke off

Step #9: Portrait ~

If you are working on the Picture Perfect, this might make a great background. Copy your portrait, paste it over your lines and then open the Transparency panel.


Change the Blending Modes to find an interesting look.

Step #10: These next steps are ONLY for web designers ~

Go to: File > Save for Web … and save the file 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 #11: 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 #12: Open your body Tag in CSS~

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the body tag:

body tag

Select Background and attach the image …

Last Step: Save and Attach ~


save as

Attach it!

  •   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/how-to-create-a-colorful-abstract-poster-in-illustrator