Mesh Tool Shapes in Illustrator

    ●   Create some funky shapes using gradients, the Mesh Tool, and Blending Modes for the background of your project.

Learn About:

Envelope Distort - Make with MeshBlending Modes
Envelope Distort - Make With Warp

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

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

… click on Swatch Library menu …

… go to: Gradients > Color Harmonies and pick one.

Step #3: Drag out a Rectangle ~

Get the Rounded Rectangle Tool

… and drag out a rectangle with your color harmony.

Step #4: Envelope Distort ~

With the object selected, go to: Object > Envelope Distort > Make with Mesh

… leave the defaults settings and hit OK.

Step #5: Adjust the Mesh ~

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

… and distort the shape using the mesh points.

Make other shapes like this using different gradient colors:

Step #6: 3rd Shape ~

Make another Rounded Rectangle Shape, only this time, go to: Object > Envelope Distort > Make with Warp

… pick a style and hit OK.

Step #7: Feathering ~

With the object still selected, go to: Effect > Stylize > Feather and feather the edges a little:

Step #8: Drag the Shapes~

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

… drag the shapes so they overlap and arrange them to your liking.

Step #9: Transparency and Opacity ~

Click Transparency or go to: Window > Transparency

… and change the Blending Mode until you get something you like.

Also, experiment with lowering the Transparency (if necessary …)

Step #10: Duplicate the Shapes ~

Select all the shapes by hitting Cmd+A and then duplicate them by clicking and dragging while holding

Using all these techniques: Rotate, Duplicate, Tweeking, Blending, Feathering - repeat until you've covered your background completely with an interesting abstract look …

Step #11: 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 #12 thru #14 are ONLY if you are making a background for a web page. Otherwise, save your work as an .ai document here.



(Optional Last Steps) #12: These next steps are ONLY FOR WEB DESIGN ~

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 #13: 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 #14: Open your body Tag in CSS~

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

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