Creating vector backgrounds with Illustrator CS3

[Flep]

Hi all !

One more tutorial about Photoshop CS3.

This time we will use Adobe Illustrator CS3 to create vector backgrounds.

After we saw how to use the pen tool, can get into something more fun.

In this tutorial we will go through the process of creating trendy and interesting vector backgrounds which will prove to be a very useful resource when creating content in Flash CS3 and websites.

 

The first thing we want to do when opening up Illustrator is set our document in Web mode with RGB colors – this is extremely important when working with Illustrator since it’s not as easy to switch between RGB and CMYK effectively as it is in programs such as Photoshop.

Also remember that in this particular case, the document size in pixels is not very important – being this a vector design you can always scale the file up to match your needs:

The first thing we' ll do is create a nice gradient for our background.

Create a rectangle filling up the stage and choose a nice gradient to go with it in the gradient panel:

Let' s add some decorations with the pen tool and choose a white color, with a 55% transparency applied to it.

The shapes you see in the next pic are actually the same shape duplicated (you can easily duplicate shape by holding down ALT on the keyboard while dragging the shape around with the selection tool) and reflected vertically.

To reflect a shape, just right click on it with the selection tool and go to "Transform -> Reflect" and select vertical in the popup dialog box.

To add a transparency to your object just select your object and open the transparency panel, which you can find right under the gradient panel.

You might also want to play a bit with the transparencies of the object to add some depth to the background, in this example we used a 55% transparency for the first object and an 80% transparency for the second one:

Let' s duplicate these two shapes and move them slightly to add some movement to these decorations:

To add some variance we will create a shape that follows loosely the lower-positioned decoration and add a gradient similar to the one used as a background.

The gradient used in this example has the same colors as the one in the background, but it has an inverted angle.

The gradient used in the background has an angle of 90°, the one used in this shape has an angle of -90°.

I also applied a slight transparency (80%) to it.

Once you create this shape, you will want to send it below the decorations we created the pen tool, you can do that by right-clicking on it and selecting "Arrange -> Send to Back" and then "Bring Forward":

As you can see this simple operation adds a great deal of variance to our image.

Let' s further add some decorations by creating a white circle with an 80% transparency.

We will then duplicate this circle and position it exactly over the first one and with our direct selection tool (A on the keyboard) we will drag the top anchor point down a bit to create this effect:

We will then proceed to duplicate this decoration a few times, change its overall transparency, rotate and resize it so we get something that looks like this:

Let' s now add some shapes with the pen tool and fill them up with the same gradient as the background, but with the angle changed to suit our needs.

Position these shapes underneath every other decoration, but obviously above the background:

Let' s add some further white decorations by creating a white rectangle with a 25% transparency and duplicate it positioning the duplicates over the originals and resizing them as needed.

Let' s then add some text to give our image some context:

Source file: