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.
✓ Live Paint Bucket✓ Blend Options ✓ Ellipse Tool✓ Effects
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 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.
✓ 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 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 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.
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 …