Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create an Embroidered Patch Style with Adobe Illustrator

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Bring a little bit of nostalgia to your designs with a set of embroidered patch style pictograms. In this tutorial you will learn how to layer fills, strokes and special effects in the Appearance Panel to create a complex embroidered patch image using just one circle and a few shapes. Let's begin!


Note: Because this patch is being used as a web graphic we will be creating it in pixels and at a small scale. If you want to make this effect for a larger graphic or for print then you will need to scale the Appearance options accordingly or flatten the image once you're finished and scale it from there.


Step 1

Let's get started! First, open Adobe Illustrator and make a new document that's 160px by 160px, RGB and 75ppi, click OK.



Step 2

Select the Ellipse Tool (L) and Option + Click onto the artboard to bring up the size options. Set the Width and Height to 140px, click OK.



Step 3

Open the Align Settings (Window > Align) and with the Ellipse selected, chose Align to Artboard and align the Ellipse vertically and horizontally with the artboard.



Step 4

Go to the Appearance Panel (Window > Appearance) and set the Ellipse to have no fill and a 3pt line in a mid tone color (I've used a warm orange - #F7941E) set the Cap and Corner to Round.



Step 5

Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Distort & Transform > Zig Zag. Set the size of the Zig Zag to 6pt and click OK.



Step 6

Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Distort & Transform > Transform. Set the Horizontal and Vertical Scale to 103% and Move Horizontal and Vertical to 1.4px, click OK.



Step 7

Select the stroke in the Appearance Panel and click the "Duplicate Selected Item" icon at the bottom of the Panel. Make sure the new stroke is above the first one you made, chance the color to be slightly lighter than the first color (I've used a light warm orange - #FBB040).

Open the Stroke Settings by clicking on the drill down menu and click on the Transform Settings. Change the Horizontal and Vertical Scale to 100%, click OK.



Step 8

Select the last stroke you made in the Appearance Panel and click the "Duplicate Selected Item" icon at the bottom of the Panel. Make sure the new stroke is above the first one you made, change the color to be slightly lighter and brighter than the second color (I've used a warm yellow - #FBDC6F). Reduce the weight of the stroke to 0.25pt, click on the Zig Zag options and change the size to 3px.



Step 9

Select the last stroke you made in the Appearance Panel and click the "Duplicate Selected Item" icon at the bottom of the Panel. Make sure the new stroke is above the first one you made, change the color to be slightly lighter and brighter than the third color (I've used a light yellow - #FFE395).

Increase the weight of the stroke to 0.75pt, click on the Zig Zag options and change the size to 6px. Check that the Transform Effect setting is set to Horizontal and Vertical Scale at 100%, click OK.




Step 10

Select the last stroke you made in the Appearance Panel and click the "Duplicate Selected Item" icon at the bottom of the Panel. Make sure the new stroke is above the first one you made, change the color to be slightly darker than the third rest of the colors (I've used a mustard brown - #BA6F18). Increase the weight of the stroke to 1pt.



Step 11

Click on the Zig Zag options and change the size to 3px, click OK.



Step 12

Change the Transform Effect settings to Horizontal and Vertical Scale at 95% and Horizontal and Vertical Move at 0.7px, click OK.



Step 13

Make sure your grid is set to pixels, you can do this by going to Settings > Guides & Grid and changing the Gridline to be every 10px and the Subdivisions to be 10px. Make the grid visible ( View > Show Grid) and snap the shapes to the Grid (View > Snap to Grid).

Now we will make the fabric fill for the badge. Make a new Layer and lock the previous layer before you start this step. Take the Rectangle Tool (M) and Option-click on the artboard. Set the Rectangle to have a width of 4px and a height of 1px, click OK.


Select the Rectangle and Option + Mouse Drag the shape to make a copy. Make two copies, one next to the other. This is the first row of rectangles that will make the pattern. In the example image below the middle Rectangle is a lighter gray so you can see how it is placed. Your Rectangles can be any color at this stage, we will color them with a gradient later.


Select two Rectangles that are next to each other and Option + Mouse Drag the two shapes to make a copy in the middle of the first row of rectangles. This is the second row of rectangles that will make the pattern.


Select all of the rectangles (5 rectangles) and Option + Mouse Drag the five shapes to make a copy below the first two rows of rectangles. This is the third and fourth rectangles that will make the pattern.



Step 14

Open the Gradient Panel (Window > Gradient) and fill the rectangles with a beige/brown Linear Gradient, one dark one light. You can see the distribution of the gradients in the image below.



Step 15

Draw a Rectangle with zero fill and zero line, covering the pattern using the two bottom rectangles as a guide. Click into the layer you are working on and you will see that the rectangle in its own layer (highlighted in blue). Take this layer and drag it below the objects that make up the pattern.



Select all of the Rectangles and drag them into the Swatches Panel, draw a large square and fill it with the swatch you have just made. If the pattern is made properly you will have a seamless pattern that looks similar to the image below. If the pattern isn't working properly, go back to the previous step and make sure that the see through rectangle is correctly positioned below the gradient rectangles.



Step 16

Turn the pattern layer off and go back to the Patch. Select it and add a new fill to the bottom of the Appearance (you can do this by clicking on the Add New Fill icon at the bottom of the panel). Click into the Fill options and chose the pattern you made in the previous step.


Add a new fill above the fabric pattern and fill it with a light tan color (I've used #C69C6D). Click into the Fill options and set the Opacity to 65%, this will soften the pattern a bit and allow you to play with the intensity without having to change the gradients.


Select the pattern layer and Alt + Click with the Rotate Tool (R) to bring up the Rotate Options. Set the Angle to -20 and uncheck Objects so that only the Pattern will be changed. Click OK.



Step 17

The Patch is now looking almost complete. To make it appear to be a bit more realistic, Select the pattern fill in the appearance panel and add a Drop Shadow. Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Stylize > Drop Shadow. Set the X and Y offset to 7px, the blur to 5px and the Blending Mode to Multiply, click OK.



Step 18

Now we will add the inner stitching. Add a white Stroke to the top of the Appearance, and click into the stroke options. Set it to 1px. Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Path > Offset Path. Set the Offset to -10px, click OK.


Once again, Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Distort & Transform > Transform. Set the Scale to 100% and the Move Horizontal to 1px and the Move Vertical to 2px. Click OK.


Open the Stroke settings, click Dashed Line, and make the Dashes and Gaps 6pt each. Then change the Cap and Corners to Rounded.


Finally, Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Stylize > Drop Shadow. Set the options to Mode, Normal - Y and X Offset, 0px and Blur 1px. Click OK.



Step 19

Duplicate the Dashed Line appearance and change the Transform Effect to have a Rotate angle of 45°, click OK.



Step 20

Now we will add some lighting effects to the patch. First, make a new fill layer above the other appearance settings. Click on the "Fx" icon at the bottom of the Appearance Panel and navigate to Path > Offset Path. Set the Offset to -11px, click OK.


Fill this layer with a radial gradient that goes from a warm beige/orange to transparent white. Use the Gradient Tool (G) to position and adjust the radial at the top left side of the patch.


Set the Opacity of the Radial Fill to 25%.



Step 21

Duplicate the Radial Fill Appearance and change the gradient to have a mid brown color, use the Gradient Tool (G) to position the Radial Gradient at the bottom right side of the patch.




Step 22

Zoom out and take a look at the patch. If it's a bit dark, or you would like to make it look a bit glossy, then add a final Stroke to the top of the Appearance (duplicate one of the previous Zig Zag strokes and move it to the top of the Appearance Panel). Open the Zig Zag Options, change the size to 8px, and the ridges per segment to 100. Click OK.


If there's a Transform Effect applied to the Stroke, change the Move settings to 0px, and the Horizontal and Vertical scale to 101%.


Open the Opacity settings, change the Blending Mode to Screen and the Opacity to 40%.



Step 23

You are now finished with the Patch settings. Creating different colors is simple, all you need to do is change the colors of the ZigZag lines. Make sure you save the Appearance by selecting the Patch and clicking on the New Graphic Style icon at the bottom of the Graphic Styles panel.



Step 24

Now we will make the Embroidered image. Using Steps 13 to 15 as a reference, go back to the Pattern Layer and make a grid of gradient filled rectangles that are Cream and Beige in color. Create a pattern from the rectangles and go back to the Patch Layer.




Step 25

Using the Pen Tool, draw the shape you want to use on the patch. Make sure there are no corners on the image as it can distort the stitching pattern. I've used the Envato Logo.

Select the shapes of the image and apply a new Appearance. The Appearance is a 36% Opaque White Fill at the top, the fabric pattern in the middle, with a mid brown fill at the bottom. Also an Offset Path ("Fx" icon at the bottom of the Appearance Panel and navigate to Path > Offset Path. Set the Offset to 3px, click OK.)



You can easily change the shade of the fabric fill by changing the color of the fill on the top layer of the Appearance Panel.




Step 26

To complete the image on the patch, we will apply a cross stitch line to the top of the shapes. First, create a small cross with the Pen Tool (make sure the line has rounded ends) and drag it into the Brushes Panel. Set the Brush to Pattern Brush and set the Fit to "Stretch to Fit". Set the Colorization Method to "Hue Shift" (This will allow you to color the line any color you like), click OK.

Select the first section of your shape and make a copy above with Command + C then Command + F. Now Clear the appearance from the shape (click the fly-out menu at the side of the Appearance Panel and click on Clear Appearance).

Set the line of the clear shape to the cross stitch Pattern Brush and change the color to match your image, I've used white. Save the cross stitch line appearance to the Graphic Styles Panel and copy the next section of the image (Command + C then Command + F). Now click on the Cross Stitch Line Appearance in the Graphic Styles Panel to apply the stitch effect. Repeat for the rest of the shapes.




Conclusion

And there you have it, a 100% vector embroidered patch. It's lots of fun to make the different designs. Play around with the color combinations of the line and fills to come up with your own unique designs. Have fun!



Advertisement