Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner to Intermediate
• Estimated Completion Time: 30 minutes

Introduction

I decided to create a stained glass effect when I saw one very beautiful Tiffany lamp. And, although it might be easy to create a mosaic with Illustrator raster effects, I thought it would be better to make it a different way. The simple method I describe in this tutorial involves only a few tools. Also, you’ll get better results with a reference image – whether it’s your own sketch, a photo, or any other image you like.

Step 1

Let’s open Adobe Illustrator and create a new document. Make it default A4 paper size (210×297 mm horizontal), but your image may be created in any size. I set it to RGB color mode, but you can choose CMYK if you prefer.

Now we’ll need a reference image, and you need to know something about it. Resolution and quality doesn’t matter, it can be a small photo. For a stained glass effect it’s better not to choose high-frequency images, which means images with many small details, or with very distant objects.

It’ll be rather hard to reproduce tiny areas with so many glass pieces (you’ll have to create each of them). Thus, city landscapes or detailed portraits are not the best choice. Choose a low-frequency image like a still life, flowers, or a landscape. See the examples below.

Step 2

Okay, when the reference image is chosen, place it in your document (File > Place). I used a great photo “Spring bouquet” that the Russian photographer Nattalia Shloma kindly allowed me to use in this tutorial. She has some amazing flower compositions that are perfect for stained glass effects.

Position and scale the placed image to your liking, so that the main object is in the center. Then click twice on the layer in the Layers panel (F7) and rename it to “photo.” Check the “template” option, also enter 100% in the Dim To field. This way the image will be visible even in outline mode.

I left some blank space to fill it with glasswork later, and I also decided to crop it with a clipping mask. Simply create a rectangle the same size as your document, select both the rectangle shape and the image, and then press Command + 7.

Step 3

Now create a new layer and name it “Glasswork.” Choose the Line Tool (\) and make sure your bottom layer with a reference image is locked, so you don’t accidentally select it. Colors do not matter now, you’ll change them later, so you can choose a vivid stroke color to work with.

Now it’s time to create the basic shape of the glasswork. This is the most time-consuming part of tutorial and requires some patience. Draw the rough draft of the glasswork, so that the lines are the borders between glass pieces.

Start creating lines that follow the main objects in your image. Make sure that every line touches either another line or the image border with its endpoints. You are making future glass pieces, keep it in mind – so the idea is to break the surface down into separate objects. Avoid open line ends, it’s very important, so overlapping is the key!

Turn on smart guides (Command + U) for help. This way you’ll see where the lines intersect. You don’t have to copy the reference image exactly. I decided to make the table flat and clean, dropped the fallen tulip, and change the vase shape.

Step 4

The flat areas like the wall or table will consist of larger glass pieces, while smaller objects (flowers and leaves) need more detailed work. Try to draw lines that roughly follow the borders of every object. Remember: It’s better to create smaller glass pieces where we do not actually need them, than to create one huge piece where we need more detail.

Here I replaced the mimosa with more simple leaves to avoid too much small detail. You can switch to outline mode (Command + Y) if the line color disturbs you. That’s what I have for now.

It’s easy to know you’re ready for the next step: just turn off visibility of the bottom layer, and you’ll see if the lines look recognizable. Make sure every important object of your reference photo has the appropriate glass piece bounded by lines on the top layer.

Check twice that the lines touch each other or the image border. Correct gaps and any points that are bit over the border – just move them into place with the Direct Selection Tool (A). You’ll be able to correct it later though.

Step 5

Once the lines’ draft looks OK, select all the lines you created (you can simply click the circle beside the layer name in the Layers panel). Now choose the Warp Tool (Shift + R) and start deforming lines to make them wavy – begin with large glass pieces using the default tool size. When you come to working on smaller pieces, change the tool settings to a handle more subtle areas – click Enter and adjust intensity, simplicity, and size.

You can also change the Warp Tool size quickly by holding Alt and dragging inwards or outwards (to constrain proportions also hold Shift). Make the line work repeat the shape of image objects. You have to end up with something similar to the image shown below (I made the bottom layer invisible).

Step 6

Well, the last thing to do before adding color is to create a rectangle that will be the image border. Make sure it has no fill and it touches the lines so there are no gaps. Now, select the whole layer (lines and rectangle together), group these objects (Command + G) and give this group a 3pt stroke of light brown color (#BC8B0F).

Now you should make a copy of this group, we’ll use it later: press Command + C and Command + F. The copy appears above the original group. Hide it for now by pressing Command + 3 or clicking the eye icon beside the group copy in the layers panel. Below shows what it looks like with the bottom image turned off.

Step 7

Now we’ll add some color to our artwork: select the original group of line work and go to Object > Live Paint > Create (Alt + Command + X). This turns the group into a Live Paint Group – the bounding box around it might change a little. Now you can recolor the space between lines with the Live Paint Tool (K).

To choose swatches I suggest that you go to Window > Swatches Libraries and select the combination you like (I used the “Food” and “Nature” libraries). Simply click the color swatch as a fill color and bring the tool cursor to the area you want to paint, it will be indicated with a wide selection. Start painting the entire image with colors you like (don’t change the stroke color though).

Step 8

You may face some problems when painting your glasswork. If some areas appear as a single one due to gaps between lines, select the line endpoint with the Direct Selection Tool (A) and move it to close the gap.

If you feel that some lines are missing, draw new lines and deform it with the Warp Tool, then select both the new lines and the Live Color group and go to Object > Live Paint > Merge. The lines will be added to the group.

Keep painting your image – you can change the color of any piece in this group if you like with the same Live Paint Tool. Switch the bottom layer’s visibility off to check the fill of glasswork. Below is what I have so far.

Step 9

To complete the basic shape of glasswork, unhide the backup group you duplicated in Step 6 (press Alt + Command + 3). Select the duplicate and change its stroke to 2 pt and dark yellow color (#EAA00C). Now copy the group in front again (Command + C and Command + F) and give this one a 1 pt stroke and light yellow color (#FCD515). This way the glass borders look as if they are made with copper foil.

Finally, let’s crop the image. Draw the rectangle above the glasswork so that it covers the entire canvas (or you can copy one from the bottom layer). Make the layer a clipping mask (select the “Glasswork” layer in Layers panel and choose Make Clipping Mask in the fly-out menu). You can lock the “Glasswork” layer now, as the basic work is done.

Step 10

Create a new layer and name it “Realism” (as we’ll add some realistic details now). Create a rectangle that covers the whole canvas again (or copy the clipping path from the layer below). Duplicate it twice and hide the copies for a moment (Command + C and Command + F). Select the first one and make it’s fill 50% black with no stroke. Now go to Effects > Artistic > Sponge, enter these values:

• Brush size: 2
• Definition: 12
• Smoothness: 5

You can go to the Opacity panel now (Shift + Command + F10) and change the rectangle’s blending mode to Overlay. Now, with it still selected, again go to Effects > Sketch > Plastic Warp, and enter the following:

• Highlight strength: 9
• Detail: 5
• Smoothness: 11

It will create a nice glass texture. You can reduce it’s opacity for a more subtle effect. Also, if your document has different dimensions, you may want to change the effects’ settings a little bit.

Step 11

Unhide the first rectangle copy and fill it with a white to black radial gradient. Move the gradient’s center point with the Gradient Tool (G) wherever you want to imitate the light outside the glass window. Now change the rectangle’s blending mode to Soft Light.

Step 12

The image looks good already, but if you want to add extra lighting, select the third rectangle above two others, fill it with a gray color and turn it into a gradient mesh (Object > Create Gradient Mesh), enter 4 for rows and 6 for columns. Now change some point color to white, selecting them with the white arrow (A), and move some points and handles to create the shapes of the color transitions.

Now, again change the mesh mode to Soft Light and adjust the opacity if you want. This object imitates additional light sources outside a glass window. At this point I also changed the colors of the Light Paint group slightly. That’s it, below is my result.

Conclusion

In this tutorial we made a stained glass effect with simple method using several Illustrator tools. You can use most images for reference to create this effect, but try to avoid high-frequency pictures.

This method produces good results when created from scratch, as you can randomly make a line work and paint it as you like. Moreover, even the simplest ornament with this effect applied looks nice – look at the image below. Hope you’ve found something useful for yourself in this technique.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator Version: CS4 (but it should also work in earlier versions)
• Difficulty: Intermediate
• Estimated Completion Time: 30 min

Step 1

Create a new document (Command + N) for print in A3 (297mm by 420mm).

Step 2

Make a rectangle with the Rectangle Tool (M) that covers the whole artboard and make it black. While the rectangle is selected go to Object > Lock > Selection (Command + 2), which will lock the object so that you can’t select it.

Take your Pen Tool (P) and make a vertical stroke (click to make a start point, then click somewhere over or under the start point while holding Shift to make a vertical stroke). Make the stroke white and the fill blank. Set the weight of the stroke to 0,05mm.

If your units are set to something else, like points or inches, make sure that you type in “mm” behind 0,05, or hit Command + K. Choose units and display performance from the drop-down menu and change the units to millimeters.

Step 3

While your stroke is selected grab the Selection Tool (V), then hit enter and type in 0,05mm for horizontal and 0 for vertical. Click copy and hold Command + D (Object > Transform > Transform Again) for around 20sec, which will perform the Tranform Again command multiple times.

Step 4

While all of your strokes are selected, set the blend mode to Screen and Opacity to 8. Then group it (Command + G).

Step 5

Take your Pen Tool (P) and draw a shape that looks something like that shown below.

Step 6

Now for the magical step! Make sure that the shape you just made is on the top and click it, then hit Command + Shift + Right Bracket key (Object > Arrange > Bring to Front). Select the path and the strokes and go to Object > Envelope Distort > Make With Top Object (Command + Alt + C). Check that the Blend Fidelity is set to 100 (Object > Envelope Distort > Envelope Options, there you should set the Fidelity to 100).

Now that’s pretty cool, but if you take a closer look, you will see that the strokes are pretty clear. If you do not intend to make a stroke out of this you can fix it by clicking Effect > Blur > Gaussian Blur… and type in 7.0px, but since we are going to make a stroke out of it, we’ll do that later (shapes you want to turn into strokes can’t have effects like this one added).

Step 7

Now drag your smoke into the brushes panel. If you can’t see it then hit F5. Check the New Art Brush and hit OK.

Step 8

Name your brush whatever you want to, set the Direction to Up, and Method to Tints and Shades, then hit OK.

Step 9

Now you have your brush, but do you have something to use it for? If yes, remember to chose Effect > Blur > Gaussian Blur… and type in 0.7px when you have assembled your brush. If no, continue reading.

Take you Pencil Tool (N) and draw some letters, one letter at a time. Group them, add the stroke and set the stroke weight to 0,5pt.

Step 10

Copy your smoky letters (Command + C) and paste them behind (Command + B). Set the stroke weight to 3 pt. Now go to Effect > Blur > Gaussian Blur… and type in 7 px.

Yes, this is a Photoshop effect, so it will rasterize, but if you hit Command + K and check the Scale Strokes and Effects, then you’ll be fine when you want to scale it.

Final Image

I hope you learned something new, and that it will come in use sometime, if it does, I would love to see what you make out of it.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner to Intermediate
• Estimated Completion Time: 30 minutes

Introduction

Recently I was making a map in Adobe Illustrator that included a rail track and a road. I had to create the dynamic effect, so that both objects could easily change direction. Therefore, they should have constituted one path each. Of course, my first thought was to create brushes.

Still, I thought it would be quite a challenge to make a road and a rail track using no brushes or overly relying on effects. I wanted each one to consist of one editable path. After about 15 minutes the work was completed. I found a great way to create these objects with the help of the Appearance palette and multiple strokes applied. Can’t wait to share this information, so let’s get started!

Part 1: Road

The road is easy to create, so let’s start with it first. Open Adobe Illustrator and create a new document (Command + N), make it 1000px by 600 px, in RGB mode.

Step 1

We need an initial path to start with – so let’s create a straight line (\). Once the effect is ready we’ll save it and apply it to any other path later. Now the important thing is to imagine how your road looks from above.

We will create it with multiple strokes only, so the wider stroke will be at the bottom of the stack, all the others will be added above with the thinest one on top. Let’s make the base first: make your line no fill with a 100 pt wide stroke. Also, give it medium gray color (#666666 or K=60%). This will be the main road width.

Step 2

Now we need to make the road border. Select the line, go to the Appearance panel (Shift + F6), and here you’ll see all effects applied to it. There are only fill (none) and one gray stroke that we just applied.

Select the stroke now and drag it to the New button (or choose Add New Stroke in the flyout menu). The new stroke will appear on top and it will be selected. Change its color to lighter gray (#999999 or K40%) and change its width to 112 pt. Finally, drag the new stroke below the first one – here is the border.

Step 3

Let’s create a markup now. With the road selected, add a new stroke in the Appearance panel. Change it’s color to white, and give it 10 pt width. Now go to the stroke palette and check Dashed Line. Make the stroke 80 pt with a gap of 20 pt. The road basis is ready.

Step 4

Although the road looks recognizable, I think it really lacks realism. So let’s add some volume. Select the line, go to the Appearance panel and add a new stroke. Make it 114 pr wide, #666666 color (or K60%), uncheck the Dashed option and drag it to the bottom of the stack. Now this stroke is the outer side of the road border.

Step 5

For now you will have four strokes in the road’s Appearance panel. For the inner side of the border, choose the stroke which is 112 pt wide (second from the bottom) and drag it to a New button (do not forget to select the road here!). Give the new stroke a darker gray color (K=70% or #4d4d4d) and 104 pt width. This stroke is right on place, so we don’t need to move it.

Step 6

If your purpose is simple navigation or icon design, this road looks OK for it. Still I’d like to add some texture. Again, you know what to do, select the road, go to Appearance panel, choose our main gray 100 pt stroke (it is the second from the top) and add new stroke again. This is the last one – I promise. Now do not change it’s width. It will be the texture covering our main road surface.

With this new stroke selected, go to menu Window > Swatches Library > Patterns > Basic Graphic > Texture. In the pattern library select any irregular texture like Mezzotint Dot. The effect might look too harsh, so just go to the Opacity panel and reduce the stroke Opacity to 15%. You may also want to try other textures from this library, like Mezzotint or Intricate Surface, just choose what looks best for you.

Step 7

Finally, (with the road selected of course) change your top-most markup stroke’s blending mode to Overlay so that the texture shows through (or you may want to just reduce it’s Opacity to about 70%). For now you’ll have 6 strokes as you can see in the picture below.

Step 8

For those of you who want more realistic results I suggest you create your own pattern with irregular texture and replace the Mezzotint stroke with it. I made mine from a gray square run through Raster Effect of Texture > Grain, then expanded, ungrouped, live traced and saved it in swatches panel. Then select the road texture stroke and choose a new pattern swatch. You may also want to adjust the new pattern stroke opacity (I made it 30%).

The road is ready! Now you can save the resulted effect as a graphic style and apply it to any path. You can create anew curvy road with the Pen Tool (P), Ellipse Tool (L), or any other shape or path.

Part 2: Rail Track

As you may have guessed, the road was quite simple compared to what’s next – the rail track. It is rather hard to create without brushes or effects for those who are not familiar with Illustrator’s secrets. The tricky part lies in the double line of the rails. But I’ll show you how to make it with multiple strokes only.

Step 1

Again, draw a line (\). Let’s first make a basic shape of the rail track. Give your line a medium brown stroke color (I used #a67c52 – anyway, we’ll replace it with texture later) and assign it a width of 100 pt. Now go to the Stroke palette and make it dashed with 10 pt stroke and a 10 pt gap. Okay, so these are our future wooden sleepers (which is a rectangular object used as a base for railroad tracks, also called cross ties).

Step 2

Now we need to make the rails. With the line selected, go to the Appearance palette and add a new stroke. Give it gray color (#4d4d4d or K=70%), make it 60 pt wide and uncheck Dashed in stroke palette. This will be our rails. I know, it looks bad now, but be patient and move to next step.

Step 3

To actually make the rails, add another stroke to the line. Make it pink (or any other vivid color) and 40 pt wide. It should be on top. This stroke will serve as a kind of mask in the Appearance palette, and it won’t be visible. I only made it pink to quickly choose it later in the Appearance panel.

Step 4

Here comes the tricky part. Make sure the pink stroke is selected (it has to be after the previous step) and go right to the Opacity palette (or press Shift + Command + F10) and reduce its Opacity to 0%.

Now go back to Appearance panel and select the top-most line that says Path. And now return to the Opacity panel and click twice on the Knockout Group option so that it’s checked. Ta-da! The rails are ready! The pink stroke is a mask now knocking out all strokes below. Now you can put this rail track on any background and it will show through!

Note: You may notice that the ends of lines don’t look great. To fix it change the pink stroke’s cap style to Rounded the in Stroke panel.

Step 5

Unfortunately, the mask knocked out our sleepers as well, so we need to add them above. Duplicate the bottom brown stroke, drag it on top of the stack and change its width to 40 pt. For now you’ll have 4 strokes in the Appearance panel: brown 100 pt (bottom sleepers), gray 60 pt (rails), pink 40 pt (mask), and brown 40 pt (top sleepers). Congratulations, the basic rail track shape is ready!

Step 6

Now we’ll add some realistic details. Let’s improve our sleepers first. Select the bottom brown stroke of the rail track and duplicate it. Now select the bottom one of the same two strokes and change their color to dark brown (#42210b). Now change it’s width to 102 pt.

Finally, go to the Stroke palette and change the values of the dashed line to 11 stroke and 9 gap. Now all you have to do is make a copy of this stroke and drag it 3 strokes above to position it under your top sleepers. Of course, change it’s width to 40 pt.

Step 7

The rails lack realism as well, so let’s select the gray stroke in the middle of the Appearance stack and duplicate it (the copy appears above). Change it’s color to a darker gray (#333333 or K=80%) and make it 44 pt wide. This is the inner side of the rails. Duplicate it to make the outer side and drag it below the main rail stroke. Change its width to 64 pt. Now you have 8 strokes.

Step 8

This step is unnecessary, but you can do it to add one more detail – the joined rails. Duplicate the basic rail stroke (the gray one with 60 pt width). Give it a darker gray color (#1a1a1a or K90%) and make it dashed in the Stroke palette with a 1 pt stroke and 200 pt gap.

To add joint bars that fix rails, duplicate the new stroke and drag it below the main rail stroke (2 stokes down). Make it 68 pt wide and change the order of dashes to 11 stroke and 190 gap. The idea is to keep both newly created strokes together, so the sum in their stroke/gap numbers must be equal (1+200 = 11+190). This way rail joints and joint bars have the same position.

Step 9

OK, for now you’ll have 10 strokes, and that’s enough for our rail track. The only thing we need now is wood grain for the sleepers. Unfortunately, there are no default wood patterns in Illustrator, but we’ll find it anyway.

You can use any method of creating wood patterns, but I’ll tell you the easiest way. Go to Window > Brush Libraries > Border > Borders_Frames and open the brushes library. There are a few wood brushes here that might suit our sleepers.

Grab the Oak brush and drag it into your document (make sure no shape is selected, otherwise the brush will be applied to it). The group of shapes will appear – select it and press Shift + Command + G to ungroup. Now delete the corner part of the brush – and you end up with a simple wooden texture. Rotate the wooden group by 90 degrees (I just like it better this way) and drag it into your swatches palette. Double-click the new swatch and name it “Wood.”

Step 10

All you have to do now is select the rail track and replace the light brown strokes in the Appearance panel with the new wooden pattern. Select the stroke of the sleepers (second from bottom 100 pt) and click “Wood” in the Swatches panel. Do the same with the top-most stroke of 40 pt width. Well, your rail track is ready, and you can save it as a graphic style and apply it to any curve now!

Step 11

You will end up with 10 strokes for the rail track and 6 strokes for the road. We used 100 pt stroke width, but once you understand the idea, you can create the same effect for any stroke size. Still you’ll be able to scale current effects if you check Transform Strokes and Effects in the flyout menu of the Transform palette (Shift + F8). Don’t forget to save these stroke combinations as graphic styles to re-apply them later to any path.

Conclusion

In this tutorial we made a multi-layered effect of road and rail track using predominately the Appearance palette in Adobe Illustrator. To achieve it we used multiple strokes of different width, color, and type. We also exploited the knockout effect of the opacity panel for masking. Objects created with this technique can easily be edited, as the result consists of one path.

The method described above is great for creating any type of roads. On the example below I created 7 lines and applied various graphic styles that I made for rail track, road, wider street and boulevard. Every road is actually a single editable path. I hope you liked the effect and it inspires you with some great new ideas. Be creative!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator
• Version: CS3
• Difficulty: Intermediate
• Estimated Completion Time: 30 minutes

Step 1

Create a new document of approximately 600px by 580px size. Next, with the Line Segment Tool (backslash), draw a line of 600px length and stroke it with CMYK values: C=40, M=65, Y=100, and K=35.

Step 2

Select the line and go to Effect > Distort & Transform > Zig Zag. Enter the values as shown in red below. This will make a wave like effect as seen in liquids.

Step 3

The waves generated in a liquid vanish as they move outwards. For this, we will use some distortion. Select the line and go to Object > Envelope Distort > Make with Warp (Alt + Shift + Command + W). In the Warp Options, select the Fish effect with 50% bend. This will make the desired wave with vanishing ends.

Step 4

Select the wave and expand it using Object > Expand.

Step 5

Next, we will add a drop bounce effect. With the Direct Selection Tool (A), select the first anchor and drag it upward. With the Add Anchor Point Tool (+), add a couple of anchor points and adjust the handles to get the result shown below. You will see a King Cobra like anatomy. Keep a backup copy of this figure as we will use it later for the reflection.

Step 6

The base for our caramel effect is ready. Next, select the figure and go to Effect > 3D > Revolve. Click on More Options and enter the values as shown in the red regions below.

Step 7

Now we will add some reflection to the bouncing drop. Grab the backup copy of Step 5 and reflect it horizontally using Object > Transform > Reflect. Next, delete the region shown in red using the Direct Selection Tool (A).

Step 8

Select the reflected figure and go to Effect > 3D > Revolve. Enter the same values as in Step 6. Change the Shading Color to Custom and assign a white shadow.

Step 9

Position the shadow graphic in line with the bouncing drop. Next, adjust its Transparency to 20% and reduce its height to match with the perspective of the overall graphic.

After suitable positioning of the shadow, the final caramel effect will look like the one below.

Conclusion and Scope

The techniques covered in this tutorial are an effective use of built in Illustrator Tools. The Zig Zag, Warp and the Revolve Tool yields the ripple effect in less time and effort.

Below is a water ripple effect that I have created using the same technique. A mixed use of distort and warp options often yields creative results. We just need to experiment with them. I hope you enjoyed this quick and easy tutorial.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator
• Version: CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Step 1

Open up a new document and select the Polygon Tool. Click once on the artboard and choose Radius 50pt and Sides: 6 in the pop up window. Fill the polygon with an orange color.

Step 2

Select the Mesh Tool (U) and start adding mesh points. Click once on the top line of the polygon.

Step 3

Then repeat the step by clicking in the middle and on the right of the top horizontal line of the polygon as shown.

Step 4

Then click once right into the middle of the polygon with the Mesh Tool (U).

Step 5

Select the Direct selection Tool (A) and highlight the center mesh point, then fill it with a darker orange.

Step 6

Next, select each corner mesh point and fill it with a yellow.

Step 7

Start dragging each middle mesh point of each side of the polygon towards the middle until you create a similar star shape, just like you see in the image below.

Step 8

Let’s move onto the flower pedal creation. Select the Pen Tool (P) and draw a similar shape as shown in the image below. Fill it with 5% Black.

Step 9

Create another shape similar to the one shown below, which will be the bottom part of the flower pedal. Fill it with a pink or any other color of your choice. Then go to Effect > Stylize > Feather, then set the Feather amount to 5pt. Place it on top of the gray pedal.

Step 10

Apply mesh points to the pedal with the Mesh Tool (U). Select random mesh points and fill them with a darker gray.

Step 11

Select the smaller pink shape and make a copy. Then scale it down to about 75% of the original one. Fill it with a darker pink or a purple. Apply a Feather effect of 2pt.

Step 12

Group the flower pedal and the two small shapes together. Then select the grouped shape and Rotate (R) and duplicate it until you have six pedals.

Step 13

Select the orange shape from Steps 1-4 and place it on top of the pedals. Set the layer mode to 88% Opacity and apply a Feather effect of 5pt.

Step 14

Make a copy of the orange feather shape and scale it down.

Step 15

Create a rectangle and fill it with green. Then add mesh points with the Mesh Tool (U). Select random points and fill them with a darker or lighter green. This will be the backdrop.

Step 16

Group all the flower shapes together and make a copy. Then apply a Gaussian Blur effect of 21 pixels.

Step 17

Place it on top of the backdrop.

Step 18

You can add some text on the right.

Step 19

Make a copy of the blurred flower, scale it down and place it to the right of the bigger one. Set the layer mode to 20% Opacity.

Step 20

Make another copy and apply a stronger Gaussian Blur of 65 pixels, then place it on top of the big flower. Set the layer mode Opacity back to 100%.

Step 21

I started adding some Opacity Masks to the original non-blurred flower and placed several into the background in order to create a sense of depth of field. will explain how in the next step.

Step 22

Take a copy of the original flower and apply an Opacity Mask. Select the Opacity Mask window (Black square).

Step 23

Create a circle that is bigger than the flower and fill it with a black to white linear gradient.

Step 24

Add another smaller ellipse on top with a black to white gradient. This will hide the edges of the pedals. Remember, we are still in the same Opacity Mask.

Step 25

Leave the Opacity Mask. Place another original flower on top. We want to add another Opacity Mask.

Step 26

Repeat Step 24 and apply another Opacity Mask. As you can see, the image is set up with several flowers placed on top or behind, scaled down or blurred. This will create the illusion of a depth of field and it makes it much more interesting.

Conclusion

Voila, that’s it folks. Opacity Masks can be difficult to understand, but they can help to create some awesome effects. Just remember that black hides and white reveals and always make sure that you are in the active Opacity Window and that you leave it by clicking on the layer window next to it.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate to Advanced
• Estimated Completion Time: 1.5 hours

Step 1

Create a new document 11 inches by 8.5 inches. It can be CMYK or RGB, whichever you prefer. Before beginning, set up a color group of about eight different blues. I will refer to these colors as “1″ for the lightest, “8″ for the darkest, and the others numbered accordingly.

Step 2

Draw a square the same dimensions as your artboard, and fill it with a medium blue from your color group. Go to Object > Create Gradient Mesh, then enter 6 rows and 6 columns.

Step 3

Now manipulate the mesh points to create an amorphous, abstract background. Click individual mesh points and color them with different blues from the color group. It doesn’t have to be complicated. This will serve as an out-of-focus landscape or cityscape in the distance.

Step 4

Lock the layer with the background on it, and create a new one above it. Draw several circles of various sizes, and place them randomly above the background. Fill the circles with some of the lighter blues, and change the Opacity to 60% – 80%. These circles are meant to look like lights in the background.

Place lighter circles over the lighter areas of the mesh, and more transparent ones over the darker areas. Select all the circles and go to Effect > Blur > Gaussian Blur. Enter 4 pixels. Select a few circles and change the blur to 6 pixels.

This will give more depth to the “lights.” It’s okay if some of the circles fall off the artboard &mdash you can trim those later. The illustration should look like the image below.

Step 5

Lock the circles layer and create a new one above it. Draw an ellipse, and fill it with a four-stop radial gradient like the one below. Adjust the gradient so that the white is at the bottom edge of the ellipse. The Gradient Annotator in Illustrator CS4 makes this somewhat easier, but you can achieve the same result with earlier versions.

Step 6

Apply an Inner Glow to the ellipse, as below. Note: This step is optional. Raster effects may use more processing power, and thus slow things down. Proceed according to the speed of your computer.

Step 7

Draw a long, somewhat thin ellipse, and fill it with the lightest blue (Blue #1). Go to Effect > Warp > Arc, and enter the values below. This will be the highlight of the raindrop. Place the warped ellipse over the gradient-filled ellipse you just created.

Arrange it at the top and rotate it off-center. Enlarge or reduce it to fit the raindrop. When it looks good, go to Object > Expand Appearance. Apply a radial gradient to the highlight, as below, and change the Blending Mode to Screen.

Step 8

Duplicate the original ellipse, send it behind, and fill it with a subtle, dark linear gradient. Change the Blending Mode to Multiply and the Opacity to 80%. This will be the shadow of the raindrop.

Step 9

Duplicate the raindrop twice. Adjust the gradients on each; One will be a lighter version of the original, the other will be a darker version.

Step 10

Drag each drop into the Symbols panel. Choose Graphic as the Type, and name each new symbol if you like. I named mine “Droplet Light,” “Droplet Medium” and “Droplet Dark.”

Step 11

Now that you have the symbols created, tear of the Symbolism Tools by clicking and holding the Symbol Sprayer Tool (Shift + S). Move your mouse over the vertical tearoff bar, then release. This will make it easier to use the various symbol tools. Trivia: All the Symbolism tools start with the letter ‘S.’

Step 12

Select the Symbol Sprayer Tool, click on the lighter droplet symbol, and drag the cursor across the top third of the illustration. Spray a few symbols, then Command-click to deselect and start another group.

Loosely cover the top third with droplets. Do the same thing for the middle third, and the bottom third, using the respective droplet symbols for those sections (medium and dark).

Change the diameter of the tool, if necessary, by pressing the right and left brackets. You will end up with several symbol instances, and your illustrations should look something like the image below.

Step 13

Now select the Symbol Sizer Tool. Randomly click on the symbols to change their size. Hold down the Alt key to reduce the size. You want to end up with lots of different sizes of raindrops. It may take a few tries to get the hang of it. Try clicking directly on top of a droplet to change its size. To further randomize the symbols, use the Symbol Shifter Tool to move them around.

Step 14

You can duplicate individual symbol instances, and re-size them as a group. Try squishing some of the drops so they are longer than they are wide. It’s up to you how wet you want your window to be, so make as many copies of the symbol instances as you like, then rearrange them to look random and natural.

Once you’re satisfied with the raindrops, expand the Symbols by going to Object > Expand. This will result in individual symbols, so go to Object > Expand again to release the symbols to objects.

Step 15

You can now make final tweaks to the raindrops. Randomize the size and placement, and separate drops that overlap. Your illustration should look something like the image below.

Step 16

Now for some finishing touches. Make a new layer above the “circles” layer, and below the “drops” layer. Use the Blob Brush Tool (Shift + B) and draw a few loose drips, starting at the top of the page.

Fill the shapes with a dark gradient (Blue 8 to Blue 6), and change the blending mode in the Transparency panel to Soft Light. Adjust the gradients so that the drips fade into the window pane.

Conclusion

Press the right bracket key to enlarge the diameter of the Blob Brush and, if you like, draw other shapes or words on the window, as if you are making marks with your finger on a wet window. Finally, trim off the circles and drips that extend beyond the artboard, and you’re done!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below are example effects we can achieve with this technique, and the final image in this tutorial follows. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Create a new document. Now use the Rectangle Tool (M) to draw a rectangle of 100px by 300px and fill it with your favorite color. There is no specific rule about the size. You may start with any approximate size and shape here; this is just the size I used.

Step 2

Grab the Knife Tool from the Tools palette and chop the rectangle in zigzag, up-down, left-right and any possible way (this is a freestyle step). Make sure you don’t leave any big part un-chopped. Our aim is to create a large number of tiny elements that are different in size and shape. The result should look something like the image below.

Step 3

Now let’s scatter the elements. Select the entire set and click once on the approximate center of the rectangle. Next, click on Horizontal Distribute Space in the Align palette with 0px spacing value. This will scatter the elements on a large area of your artboard.

Step 4

Zoom out to see the entire set of elements. Select half of the elements and drag them below the first half. Re-arrange them to form a roughly shaped square. You may resize the entire collection of elements to fit on your artboard.

Step 5

The base for our splatter is now ready. Select all the elements and click on Object > Transform > Transform Each (Alt + Shift + Command + D). Enter 30px each for Horizontal and Vertical Move. Enter 30 degree for the Rotation and enable the Random option. Now click on Copy. (Note: We are applying the transform effect on individual elements. So, do not group the elements).

Step 6

Now, without clicking elsewhere, press Command + D and repeat pressing it 25 to 30 times until you see a dense result like the one below. (You may encounter a slower performance due to increase in number of anchor nodes. Once the high resolution raster file is exported, we need not worry about the performance).

Step 7

The grunge is ready. Next, we will add some ink flows and splatters to use this result for a Stencil effect. Use the Pencil Tool (N) to draw some rough shapes to show the ink flow. Fill them with the same color as that of the grunge.

Step 8

With the Pencil Tool (N), draw some more lines and stroke them with the Ink Splatter brush. You can find it in Window > Brush Libraries > Artistic > Artistic_Inc. Here, I have used Ink Splatter 3.

Step 9

Next, draw a background rectangle and fill it with your favorite color. Add text on the top of all objects. I have used the Stencil Std Bold font for a nice stencil effect. Use the color of text that is the same as that of the background color.

Conclusion and Scope

The technique used in this tutorial is very easy and requires less time to obtain the result. Since the output depends on the manual chopping of the shape; the end result is dynamic in shape and size. It involves some randomness so you won’t make the exact same grunge in two different trials.

Every time, the end result will be different in appearance and size. This yields unique grunge designs on each trial. You can use the result in poster designs, T-Shirts, grunge texts and backgrounds. You may also give it a try on making a Galaxy, sand effect, and scattered diamonds. Thanks for your valuable time. Hope you enjoyed this quick and easy tutorial.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

The texture added is similar to the name of the effect (scribbles), but there is a great deal of variance you can control, and you can add a random feel as well. Let’s take a close look at how to use this effect and how you can get creative with it!

Final Image Preview

Below is one of the designs from the final set of Photoshop Brushes we’ll be working towards in this tutorial, after explaining how the Scribble Effect works in Illustrator. Want access to the full Vector Source files (and ABR brushes file), as well as downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Program: Adobe Photoshop CS4
• Difficulty: Beginner – Intermediate
• Estimated Completion Time: 1 hour

Introduction

In this tutorial we’ll take a close look at every option within the Scribble Effect menu. Then I’ll show you how to apply it to a rectangular design and a simple flower design. I’ll even walk you through how to create a set of Photoshop brushes which use this effect.

Since the Scribble Effect can produce interesting textures, which can appear hand-made, it serves as an excellent tool to create an interesting stamp brush for Photoshop. I created a set of Scribble brushes using this method recently for Psd Plus, and you can see the results in this release Floral Scribble Photoshop Brushes – Psd Plus Pack.

Keep in mind there is a whole lot more you could potentially create using this effect. You could use the Scribble Effect to create hatch like patterns to shade your character designs, childlike scribbles, and more. The video tutorial Check out the Scribble effect in Illustrator from the Creative Suite Podcast showcases this tool and gives a few tips on possible uses such as Flash animations, which really broadens the scope of creative possibilities. This is one of those tools that once you open it up makes you want to play with it. The results even feel playful, so experiment away!

Illustrator CS4 comes with a set of Scribble Effects that you can open up and use, or just analyze. Notice that many of them have more than one scribble effect applied (as shown in the Appearance panel below). You can see there are two fills both with Scribble Effects applied here. You can open up these by going to Windows > Graphic Style Libraries > Scribble Effects.

Background

Before looking at Scribble Effects it’s a good idea to have an understanding of what Effects are in Illustrator, and the advantages they offer over using Filters. You should also have a basic understanding of what Appearances are and the options that the Appearance Palette offers.

There is an article called Working Most Effectively with Effects over at the Layers Magazine site. It even uses the Scribble Effect for many of the examples, and is a great article to read to understand effects before continuing on with this tutorial. Also, while limited, it would be a good idea to read what Illustrator help has to say on Creating a sketch using the Scribble effect. Now let’s get started!

Section 1 – Exploring the Scribble Effect Options

In this section of the tutorial, we’ll explore each option that the Scribble Effect offers and give visual examples that will demonstrate how to use these and make all the settings clear. After going through this quickly you’ll understand how to use this tool fully – the settings will no longer be a mystery.

Step 1 – Global Installed Settings

First up, there are quite a few options under the Settings tab within Scribble Options. These are global settings, which are basically pre-made Scribble Settings. Getting started by taking a look at these settings is excellent. It shows a good diversity of options available and interesting scribble results. Take a look at all of them, note the changes of each option, various characteristics of each scribble, and be sure to check Preview so you can view them without needing to apply. Below are a few examples.

Step 2 – Angle

The angle option is simple to understand. It controls the angle of the scribble lines. Also, notice that whenever making a change to this, or the following options, that the Settings drop-down list changes from Default to Custom, which indicates you are creating a unique Scribble Effect at that point. Notice the change the angle has to the effect, as demonstrated in the examples below.

Step 3 – Path Overlap and Variation

Moving the Path Overlap slider towards the Inside moves the area the scribble effect is applied to further inside the shape (see first image below). Whereas, moving the slider toward the outside will apply the scribble lines past the shapes outer dimensions (see second image below). Path Overlap controls the amount the scribble lines stay within or extend beyond the path boundaries.

Applying the effect to the center keeps the effect applied to the outer edge of the shape, however increasing the variation means that the path will vary based on the amount you turn it up. Variation controls the lengths of the difference in scribble line lengths relative to each other. In the last example below the Variation is increased enough that it goes both inside and outside the shapes edge.

Step 4 – Line Options: Stroke Width

The stroke width functions in the way you would expect. It works in the same way as the stroke panel; it changes the scribble line width. Increasing or decreasing the size of the stroke will apply the change to the single long line that makes up the scribble effect. A few examples are shown below.

Step 5 – Curviness and Variation

Curviness manipulates the amount the scribble lines curve before they reverse direction. The first example below shows the default curviness, which is set relatively low, and the second shows the curviness turned up all the way.

The Curviness Variation controls how different the scribble line curves are relative to each other. Notice in the first image below how the lines look relatively the same, as Variation is set to 1 there; it looks clean. In the last example below variation is turned up all the way, and notice how different all the lines look compared to each other; it looks a bit messy.

Step 6 – Spacing and Variation

Spacing controls the amount of space between scribble line folds. Notice how extreme the spacing changes are by just increasing the Spacing slider from 5px to 24 px in the example below.

The Spacing Variation controls how different the amount of space is between scribble line folds. Notice how different the first and last images are in the example below. Turning the Variation up creates areas of differing spacing between each line – the spacing is no longer uniform.

Now Put it All Together

Putting it all together is all about experimentation. Now depending on the project, you may have a variety of outcomes you’d like to create. Below are a couple examples using multiple settings in combination, which also demonstrate how setting can work together and effect each other. In the first example below the spacing is decreased dramatically, which necessitates decreasing the stroke width as well, otherwise it would end up as a solid mass. The second example is just a random experiment.

You may also want to save some of these experiments as Graphic Styles, so you can use them again later. Once you’ve created a Scribble Effect that you like, drag it into the Graphic Styles palette, then click the arrow button in the palette’s top-right corner and choose Save Graphic Style Library, which will add this as a new collection.

Section 2 – Applying Scribble Effects and Making Photoshop Brushes

In this section, we’ll learn how to apply the Scribble Effects to a simple diagonal pattern made up of multiple rectangles of varying sizes. Then we’ll create a small sample set of Photoshop brushes.

Step 1 – Create a New Document

Let’s create a new Illustrator document (I’m using Illustrator CS4) at the size you want your maximum brush size to be at, which in this case will be 2500px by 2500px. Now create a basic rectangle filled with black and no stroke at a size of your preference, then create a handful of other randomly sized rectangles as well.

Step 2 – Rotating, Copying, and Arranging

Rotate these shapes by selecting the Rotate Tool (R), then hold down Shift to constrain and rotate 45 degrees as shown. Now copy the shapes and paste into a layer named “Rectangle_1.” Continue to copy, paste, and arrange the shapes until you create a composition you like. You can also change the size of the rectangles or add more as needed. Keep in mind, you can always change this later on.

Step 3 – Experimenting with Scribble Effects

Now experiment with various scribble effects until you make one that you feel would be a good Photoshop brush. We’re working with black in this tutorial, but Photoshop brushes can interpret a full grayscale, so keep that in mind with your own designs.

Below is a scribble effect I’m happy with to use for a set of brushes. Notice how the patterns interact with each other as they overlap, which is cool and you can experiment with that – even playing directionality of lines into each other. You could create moire effects this way for example. Here though we’re keeping everything going straight at a 45 degree angle, as indicated in the screenshot of the Scribble settings.

Keep in mind, this is a live effect so we can manipulate the Scribble Effect at anytime. In order to manipulate this effect do so through the Appearance palette, as shown below. Don’t go to Effect > Stylize > Scribble, as that will apply a second instance of a Scribble Effect to your shapes.

Step 4 – Create More Designs

Now create quite a few more designs of varying rectangle shapes. A good set of Photoshop brushes should have 15 or more designs that work together as a set visual, but are each distinct as well. For the purposes of this tutorial though, I’m just going to add a couple more, which are shown below. So, we’ll be working with a set of three for this tutorial. I’ve placed these designs on new layers named “rectangles_2″ and “rectangle_3″ to keep things organized.

Step 4 – Turn These Designs into Photoshop Brushes

Now copy the “Rectangles_1″ design, which has the live Scribble Effect applied to it. Fire up Photoshop (I’m using Photoshop CS4). Open a new Photoshop file (Command + N). Photoshop should automatically detect the size of the copied design, which should be a little smaller than 2500px by 2500px for this design, as the rectangles don’t reach all the way to the layouts edges. Be sure to Name the file appropriately, in this case it’s named “rectangle_1.”

With this new Photoshop document open paste the “Rectangles_1″ scribble design. A popup dialogue comes up. It’s fine to choose Pixels in this case, then hit enter to apply the paste.

Now select the Brush Tool (B). Go up to the Brush Tools Settings at the top-left of Photoshop’s interface. Click the drop-down arrow to open the Brush Preset Picker. Within the Picker there is a small arrow in the top-right corner. Click that and choose Preset Manager.

Within the Preset Manager brush area hit Command + A to select all the brushes, then click Delete. This will remove the brushes from the Brush Preset Picker, as shown in the last image below, but doesn’t delete the ABR files of these brushes, as long as you have those files saved.

Now got to Edit > Define Brush Preset and save the brush as “Rectangle_1.” Now we have our first brush created.

Go ahead and follow the same copy, paste, and define brush preset workflow to create the rest of your brushes. In this case, we’re creating brushes: “Rectangle_2″ and “Rectangle_3″ as shown.

Step 5 – Export Your Final Photoshop Brush Set

Now click and open the Brush Preset Picker, then click the arrow in the top-right corner, and click Save Brushes as shown. Save the brushes with the name “rectangular_angled_brushes,” which creates the ABR file. This file can be saved, given to friends, or sold, and loaded into any other Photoshop of the same version (CS4 in this case).

Information on Design Scalability

Keep in mind that when creating these types of brushes, they don’t scale well, even though they are based on vector designs. They are used more like stamps in Photoshop. So if you design huge 2500px by 2500px brushes, then they are great for large-scale work, or for applying large textures, or big backgrounds.

If you want to create these brushes for smaller scale work, or smaller scale use, then you should create them in Illustrator at the scale you plan to use them at. If you need to use them at 600px by 600px size for example, then it’s best to design at that size first in Illustrator.

You may think that you could create them big, export the EPS files and then scale to any size, but it doesn’t work that way. This is because the brushes are made of lines, and when those lines get smaller they blend together and it drastically changes the character of the design, even in vector format, let alone as pixel brushes. The best solution is to plan the design at the size you will be exporting the brushes to.

Section 3 – Quick How to Create Floral Scribble Brushes

In this section, we’ll take a quick look at the process I used to make Floral Scribble Photoshop Brushes – Psd Plus Pack. The actual brush creation is the same process, so we’ll just review the vector techniques and Scribble Effects applied.

Step 1 – Create an Oval and Spin It

First of all create an oval that is about half the size of your document size. Use the Direct Selection tool to manipulate the shape of the oval to look more like a petal.

Now with the shape selected, grab the Rotate Tool (R), hold down Alt and click below the petal shape, which will open up the Rotate settings dialogue box.

Insert a degree to spin the petal. It’s good to pick something divisible by 360, which is a full circle. Use 45 degrees, which will give use 8 petals total once competed. Now click OK. Go ahead and hit Command + D six more times to complete the floral shape creation. Select All (Command + A), then copy and paste, which will center the shape on the canvas, as long as you have your canvas centered. Go ahead and hold down Shift (to constrain the scale) while you have this shape selected, and scale the size to your preference.

Step 2 – Give the Flower an Organic Feel

Use the Direct Selection Tool to manipulate the points and handles of each flower. You may also want to scale and move them around a bit using the Selection Tool. The goal here is to give each petal more of an organic feel and to finalize the floral shape. You can see I made quite a few changes to the final flower design.

Step 3 – Apply the Scribble Effect

Go ahead and apply the Scribble Effect to the flower design using the settings shown below, or choose your own settings. The final Scribble Flower is shown below.

Now you can apply the same process to create more floral patterns, or use other floral designs as the base to apply the Scribble Effect to. Once you have a good size collection, go ahead and apply the same steps as in Section 2 to make a set of brushes.

Conclusion

Armed with knowledge of how Scribble Effects work in Illustrator, jump in and make your own effects. Have fun applying these effects to your vector creations. It’s an interesting tool to play with and a quick way to add texture. Also, for your Photoshop work, don’t be shy to create your own brushes. As demonstrated, the process is really simple.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Create a new document 400 pixels square. It can be RGB or CMYK.

Place a photo into the document. For this illustration, I’m using a tightly-cropped square portrait. Uncheck the Link button, in the Place dialog, so the photo will be embedded. If you forget this step, simply go to the Links panel and embed the image.

Step 2

Make sure the photo is 400 pixels by 400 pixels. If necessary, you can resize it in the Control Panel. The beauty of this technique is that you can start with a less-than-perfect photo and get a nice result.

Step 3

With the image selected, go to Object > Create Object Mosaic.

Step 4

Enter one tenth the size of the full image in the Number Of Tiles section. Since the image is 400 pixels by 400 pixels, the number of tiles will be 40 and 40. Check Delete Raster in the Options section.

Step 5

The resulting mosaic will look like the image below.

Step 6

Ungroup the mosaic. You should be able to select individual squares. Now go to Effect > Convert to Shape and choose Ellipse…

Step 7

In the Shape Options dialog, enter 10 pixels for the Width and Height (400 pixels by 400 pixels, divided by 40 rows and columns). That’s it, you’re done!

Step 8

For a finishing touch, I like to place a black square behind the mosaic. Choose the Rectangle Tool (M), and click once on the artboard. Enter 400 pixels by 400 pixels for the size, fill it with black, and send it behind the mosaic. The final image is below, but for some variations carry on with this tutorial.

Variations

1. Effects

You can apply additional effects to the circles, such as Roughen, Tweak and Scribble. You can even apply a 3D effect (but be prepared to wait a while for it to render)!

Apply different effects and use the Appearance panel to turn them on and off and experiment with different combinations.

2. Offset Path

For additional texture, first expand the ellipses by going to Object > Expand Appearance. Next, with the objects still selected, go to Object > Offset Path. Enter a negative value (I used -2 pixels).

With the smaller circles still selected, change the blending mode to Overlay. Try applying a Roughen effect to the offset circles, which will look like daubs of paint on top of the original circles. Again, experiment and have fun!

Conclusion

Have fun applying these techniques with your own images!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.