Summary:

Radial Circle using Live Paint in Illustrator

    ●  This is a great way to learn the Live Paint Tool and get other valuable experience with Illustrator.


Learn About:

Live Paint BucketBlend Options Ellipse ToolEffects

  •   This tutorial is part of the Art Genre, CD Cover and "What in the World?" Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open a New Document in Illustrator ~

If you have nothing, open a New Document in Illustrator with approximately these settings:


Step #2: Make A Circle ~

First set your Fill to none none and stroke to Black (you can change these colors later) …

… get the Ellipse Tool or hit the keyboard shortcut letter (L) …

… and drag out a small circle while holding to keep it perfectly round.


Step #3: Duplicate the Shape ~

With the object selected, go to: Edit > Copy (or hit the keyboard shortcut: Cmd+C), and then go to: Edit > Paste in Front (or hit the keyboard shortcut: Cmd(⌘)+F) …

… then, holding pull the shape out. Alt (⌥) + Shift keeps the shape perfectly round while at the same time making it expand from the center. Good thing to know.


Step #4: Blend Options ~

Hit the keyboard shortcut: Cmd(⌘)+A to select everything and go to: Object > Blend Options

… select Specified Steps and set the number to whatever you want.

specified steps

Now go to: Object > Blend > Make or hit the keyboard shortcut:

Alt (⌥)/Option + Cmd(⌘) + B


Step #5: Pen Tool ~

Get the Pen Tool or hit the keyboard shortcut letter (p) …

… and draw a wavy line starting from the center.


Step #6: Rotate Tool ~

Get the Rotate Tool or hit the keyboard shortcut (r) …

… holding alt option key click the center point of the line.

Now set the Angle to approxiamtely 18 ° and hit Copy.

Now you have 2 lines rotating out from the center.


Step #7: Cmd+D More Lines ~

Hit the keyboard shortcut: Cmd(⌘)+D to repeat the lines all around.


Step #8: Expand ~

Select everything by hitting the keyboard shortcut: Cmd(⌘)+A and then go to: Object > Expand


Step #9: Swatches ~

Click the Swatches panel and locate the Swatches Libraries menu in the lower-left …

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

… then when you find a Gradient scheme you like, click on the individual color swatches to place them into your main Swatches menu.


Step #10: Live Paint Bucket ~

Get the Live Paint Bucket or hit the keyboard shortcut (k) …

… and click inside the boxes to activate Live Trace.


Hit the Right-Arrow key to scroll through the colors faster …


Add lots of different colors and gradients all around.


Step #11: More things ~

Hit the keyboard shortcut: Cmd(⌘)+A + to "Select All" and turn off none the stroke (try it and see if you like it) …

… also, select all and go to: Effect > Artistic > Film Grain and see if you like it.

Experiment! Try different stuff! Try: Effect > Artistic > Smudge Stick too …


Step #12: Make a Rectangle ~

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

… draw a box staying inside the 4 corners of the circle.


Step #13: Selection Tool ~

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

… and select both shapes by Shift + Clicking them.


Step #14: Clipping Mask ~

Right-Click and select "Make Clipping Mask."


Step #15: Crop ~

Now get the Artboard Tool or hit the keyboard shortcut Shift+O

… and crop your your image as square as possible.


Step #16: Save for Web ~

Go to: File > Save for Web … and save your document as a png-24 and save it in the root folder for this project.


Step #17: Use the image IN YOUR PROJECT ~

REMEMBER: This assignment will not be accepted unless it is published IN YOUR PROJECT.


If you're working on the CD Cover Project, open that and place the image on a new layer, stretching it to fit with the Free Transform Tool (keyboard shortcut letter (E).

Change the Transparency to interact with your other backgrounds.


Step #18: If you're working in Dreamweaver, open your HTML Tag ~

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


Step #19: Background Image Properties ~

Select Background and attach the image …

… set Background-repeat to no-repeat

… set Background-attachment to fixed

… set Background-position (X) to center

… and set Background-position (Y) to top or center.


Step #20: Background Cover ~

Open your CSS styles panel …

… and double-click your styles.css file to open it.

open-styles-sheet.png


Step #21: Scroll Down ~

Find your HTML code:


Step #22: Insert the CSS ~

Copy this code …

		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;

… and paste it so it looks something like this:


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link to your site …

Other Resources: http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-cool-abstract-radial-pattern-design and https://css-tricks.com/perfect-full-page-background-image/