Paths

• Offset Path
• Really useful with multiple strokes applied to an object
• Outline Object & Outline Stroke
• Useless, probably broken

Pathfinder

Similar functions on multiple objects as the Pathfinder Window, plus a few unique ones which only work on grouped objects:

pathfinder_fx.ai.zip

Rasterize...

• Takes the object and turns it from a vector into a bitmap. Pretty much the opposite of what you should do.

Stylize

fx_stylize.ai.zip

• Drop Shadow
• Feather
• Inner Glow
• Outer Glow
• Round Corners
• Scribble

SVG Effects

Scalable Vector Graphics (SVG) is a method of using vector graphics on the web as a file format. Cool stuff, but it's really about the saving something in an .svg file. The filters work in that format for use on the web.

svg_fx.ai.zip

Actual SVG graphic in a browser

<img src="http://www.khazar.com/star-blur.svg" />

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg 
     version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 100 100" 
     style="enable-background:new 0 0 100 100;" 
     xml:space="preserve"> 
    <filter id="AI_GaussianBlur_4"> 
        <feGaussianBlur stdDeviation="4"></feGaussianBlur> 
    </filter> 
    <symbol id="star" viewBox="-67.74 -64.42 135.48 128.85"> 
        <linearGradient 
            id="SVGID_1_" gradientUnits="userSpaceOnUse" 
            x1="0" y1="55.6988" 
            x2="7.294410e-15" y2="-63.428"> 
            <stop offset="0" style="stop-color:#F9ED32"/> 
            <stop offset="1" style="stop-color:#BE1E2D"/> 
        </linearGradient> 
        <polygon 
            style="fill:url(#SVGID_1_);
                  stroke:#2E3192;
                  stroke-width:5;
                  stroke-miterlimit:10;" 
            points="0,56.42 14.31,12.9 60.13,12.74 23.16,-14.33 37.16,-57.95 0,-31.15 -37.16,
                   -57.95 -23.16,-14.33 -60.13,12.74 -14.31,12.9 "/> 
     </symbol> 
     <use xlink:href="#star" 
          width="135.48" height="128.85" 
          x="-67.74" y="-64.42" 
          transform="matrix(0.6147 0 0 -0.6147 50 49.5171)" 
          style="overflow:visible;
                filter:url(#AI_GaussianBlur_4);"/> 
</svg> 

Warps

warps_2.ai.zip

Hint: Hide Edges first with Menu > View > Hide Edges

Getting a half-arc and other fanciness

asymmetrical_warp-outlines.ai.zip

Combining Effects

fx_combo_2.ai.zip

Symmetrical Patterns

Source shape

Go to Menu > Objects > Pattern > Make

Set parameters:

• Name: Staggered Circles (or whatever you want)
• Tile Type: Hex by Column
• Width/Height: fiddle with until you get the kind of overlap you want
• Overlap: Right In Front, Bottom In Front

Result of settings.

Click "Done" at the top of the window when finished:

Pattern applied

To resize a pattern, double-click on the Scale tool with the object selected and turn off "Scale Strokes & Effects" and "Transform Objects" but turn on "Transform Patterns" then type in a scale value (shown here as 25%):

This only works in the "Scale" dialog.

To reposition a pattern within a shape, hold down the   `    key (above the TAB key). Drag the shape or use the cursor keys.

Other kinds of patterns

A hexagonal non-overlapping pattern

Build the hexagon with:

1. Polygon tool, 6 sides, shift to make parallel to the artboard
2. With smartguides on, shift-drag a vertical line from center top to center bottom
3. With Menu Transform Rotate, copy 60° line twice
4. Three ways to divide up into segements:
1. Pathfinder panel: Pathfinder Options: Divide to "Divide" shape
2. Shape Builder tool
3. Live Paint)
5. Get rid of strokes (if they're there), and fill each divided section with a color

Create the pattern with
Menu > Pattern > Make:

Pattern applied and scaled:

Pattern shifted for exact fit with  `  key
(works with cursor keys too).

Modify the shape until if fits the pattern the way you want. The key is to turn on "Transform Pattern Tiles" in the Preferences dialog:

Menu > Illustrator (Mac)/ Edit (Win) > Preferences > General... Transform Pattern Tiles

An Irregular Pattern

This is probably better done with Repeat > Grid, but if it needs to be asymmetrical (objects overlap at different distances on each side), this is about the only way to do it

Create a set of guides outline a 100pt x 100pt square

Create objects inside the square and passing the edge of the square
(Add a background color too, if you want one)

Create quads from the objects that pass the edge of the square using Menu > Object > Transform > Move... with x and y offsets of 100/-100 and the copy button in the dialog

The rule is that any object passing an edge must be added on the opposite side, exactly 100pts away from the original object

Create a 100pt x 100pt no-fill no-stroke rect over the artwork and use it for a mask

Select the masked object and create the pattern with it with these settings:

Result:

Note that this could be done in any rectangle as long as you repeat your quads with the same dimensions as the rectangle

Practical Artbrush (practical_artbrush.ai.zip)

Practical Pattern Brush

More here and on the web

Pattern Brush

• Really complicated, possibly too much for this course.
• Here's a nice set of brushes from different vendors.
• But remember, you can't use stuff made by other people for this class...
• Demo on making a pattern brush (Ace) ivy_pattern2.ai.zip