Aug 25
Illustrator: Abstract Vector Art
This Adobe Illustrator tutorial will show you how to create an abstract art that can be used for wallpaper, website header or background images. It is fun and easy. You will learn how to use the Warp and Twirl tool to create abstract vector art in minutes. Users with basic skills should be able to handle this tutorial. To continue on this tutorial, you need Adobe Illustrator CS or above.
Understanding The Tools (Warp and Twirl)
Run Illustrator and create a new document, 8 x 10 inches, CMYK color mode. Double click on the Warp tool icon (on the toolbar) to activate the option panel. The setting I have is: width 1.4", height 1.4", and intensity 50%.

We will be using the Warp tool a lot, so tear off the tool set for quick access. Click and hold on the Warp tool icon until you see a dropdown panel, click on the Tearoff icon.

Warp Tool
Draw a box with the Rectangle tool. Select the Warp tool and the box. Drag your cursor above the object. Notice how the object warped based on your mouse movement.

Create another box. Now, go crazy and keep on spinning your mouse around the shape.

Remember: your result will look different than mine due to your settings and mouse movement.
Twirl Tool
Draw a rectangle box. Select the Twirl tool. With the box selected, press and hold your cursor above the box. It will twirl the object continously.

Create another box. This time, quickly drag the mouse in zig zag movement.

Let’s Begin
Delete all the test objects. Create a big rectangle shape to cover the document canvas. Fill it with blue gradient. Lock this layer.

Create a new layer. Draw two long rectangle shapes. Fill one with black color and another with magenta gradient. With both rectangle objects selected, use the Twirl tool and quickly spin the mouse across.

Rotate the object in 45 degree and place it in the upper right corner.

Draw a red circle. Select the Twirl tool. Press and hold on the object until you get a sun-looking circle. Place the circle in the back.


Draw another circle and fill it with red-orange gradient. Select the Twirl tool and quickly drag on its edge and place it above the sun shape.


Glowing Effect
Create a circle and fill it with radial gradient. In the gradient slider, select yellow for one end and black for another end (make sure the black is C=100, Y=100, M=100, K=100). Set the blending mode to Screen.

Duplicate the glowing circle. Shrink it a bit and shift it up. Change the yellow color to white.

Smoke-Like Shape
Create a rectangle shape. With the Twirl tool, randomly drag and spin the mouse back and forth to create a smoke-like shape. Fill it with white color.

Fire-Ball-Like Shape
Randomly draw 4 circles in different sizes. With the Twirl tool, drag the mouse in spiral movement.

Create another set of twirling shapes with the Twirl tool. Then fill it with orange-red gradient.

Electric-Like Strokes
Create a thin long rectangle shape. Use the Twirl tool, quickly drag the mouse across the shape in zig zag movement.

Then fill them with various color.

Overlay Circles
Draw various size of circles and send them to the back. Fill them with gradient and set the blending mode to Multiply.

Dark Glowing Circles
Create two circles and fill them with blue-white radial gradient. Send them to the back. Set the blending mode to Multiply.

Touch-Up
Look around the artwork, find the un-smooth shapes, smudge it with the Warp tool. Make them look rounded and liquified.

Final Remarks
I have only used the Warp and Twirl tool in this tutorial. Don’t forget to try out the Scallop, Crystallize, and Wrinkle tool. Play around with the tool options and shapes. You don’t have to start off with the rectangle shape, try the star or irregular shapes. They can also be used for creating texturized patterns.

30 Flash-Based Photography Sites CSS: Design Out Of The Box
Comments
Pages: 10 9 8 7 6 5 4 3 2 1 » Show All
There are 95 comments (+Add)
Pages: 10 9 8 7 6 5 4 3 2 1 » Show All


95 jeprie http://desaindigital.com
January 7th, 2010 at 3:15 am
wow! great tips. never tough about this simple step.
94 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:57 am
喜欢你们的设计与技术,常来看看
93 DarkenedSoul http://www.psyched.be/wordpress
December 31st, 2009 at 10:46 am
And again: simple but handy! i’m really going to tear this site inside out
92 ShelGfx
December 21st, 2009 at 3:44 pm
thanks for this tutorial.. it was really helpful
91 Awesome games http://www.ultima-arcade.com
December 13th, 2009 at 9:39 am
Real real great job ! I want stuff like this !
90 Ben
December 8th, 2009 at 5:44 pm
Awesome. I always wondered how you achieved this effect in your art. I had concluded it must have something to do with using a tablet or other piece of hardware/software I didn’t have access too. Very excited to start playing around with this effect!
89 EastFilters http://www.eastfilters.com/
December 7th, 2009 at 12:11 pm
http://www.eastfilters.com
Auto Filters, Replacement Elements For Fuel Filters, Turbine Fuel Filters, Replacement for Fuel Filters, Air Filters, Filter Water Separators, Fuel Purification Systems, Engine Fuel Filters, Gasoline Engine Fuel Filter, Diesel Engine Fuel Filter, Trailer Engine Fuel filter, Engine Fuel filter, Car Filter, auto fuel filters, Truck Fuel Filter and Motor Yacht parts.
88 klix
December 5th, 2009 at 2:45 am
nice enger
87 klix
December 5th, 2009 at 2:45 am
wanna learn
86 Jodi http://bestsites4professionals.com
December 4th, 2009 at 2:44 pm
You are awesome!! I have had the whole cs4 suite for awhile and have been terrified to try illustrator or fireworks, I just use dreamweaver and photoshop. I’ll have to give it “whirl”……..