Follow this tutorial and learn how to draw a biscuit style using only a path, the shape of each letter and nothing else.
If you are not familiar with this concept, here is another tutorial of mine where I create an avocado using only one shape. This time, we'll take it one step further and create a text effect, so instead of one path we'll have seven paths as the individual letters, but the concept remains the same. The appearances are “all in one”, and you won't use other shapes besides the seven letters, so prepare yourself for a lot of Appearance panel action. If you are intrigued and you love a good challenge, let's start!
If you are hungry for more vector food or maybe you need more text effects in your life, be sure to check out Envato Market for inspiration. You'll surely find what you're looking for there.
Tutorial Assets
To complete the tutorial, you will need the following assets:
- Geist Knt Font I, dafont.com
1. Start a New Project
LaunchIllustratorand go to File> New to open a blank document. Type a name for your file, set up the dimensions, and then select PixelsasUnitsandRGBasColor Mode. Make sure that Align New Objects to Pixel Grid is not checked.
Next, go to Edit> Preferences > General and set the Keyboard Increment to1 px, and while there, go to Unitsto make sure they are set as shown in the following image. I usually work with these settings, and they will help you throughout the drawing process.
2. Prepare the Letters
Step 1
Grab the Type Tool (T) and write “biscuit” on your artboard using the Geist Knt Font, with a size of 140 pt. Also, set the Tracking for the selected characters to 200 in order to get more space between the letters.
While the text stays selected, choose Expand from the Object menu and thenUngroup (Shift-Control-G). Now, select all the individual letters and take a look at the Appearance panel. Are your letters paths or compound paths? If the answer is compound paths, go to Object > Compound Path > Release.
Step 2
Focus on the letter "B". Take the Pen Tool (P) and draw a triangle using the three points indicated as reference (1). Move the triangle to the right side of the letter "C". Make a copy of this triangle for the letter "U" and then rotate and arrange it at the top (2).
Select the letter "C" along with the triangle and press Minus Front in thePathfinder panel. Repeat the same thing for the letter "U" (3).
3. Create the Biscuit Pattern
Step 1
Use the Ellipse Tool (L) and Rectangle Tool (M) to draw a circle and then a rectangle on top. Use the dimensions shown because the end result will fit perfectly with the size of the letters (1).
Now, select both shapes and press Intersect in the Pathfinder panel. Fill the resulting shape with the color of your choice (2). Finally, draw a rectangle between the two anchor points at the base (3).
Group (Control-G) the two shapes and name the group “big corner”.
Step 2
Next, draw a 16 x 16 px circle with the Ellipse Tool (L). Use the Direct Selection Tool (A) to select only the anchor point at the bottom and press the Delete key on your keyboard (1).
Still using the Direct Selection Tool (A), drag a selection over the two end points and go to Object > Path > Join (Control-J) (2). As a result, you will get a half circle (3). Draw a new 16 x 7 px rectangle at the base (4) and after that, select both shapes and press Unite in the Pathfinder panel.
Fill the resulting shape with the color of your choice (5).
Step 3
Drag the shape from the previous step into the Brushes panel and chooseNew Pattern Brush. In the Pattern Brush Options window, type a name for your new brush, leave the rest of the settings as they are, and hit OK.
Step 4
Let's get back to the letters. Take the “big corner” group and make a bunch of copies first. Rotate and arrange one in each corner of the letter "I" as shown in the close-up. Following this example, do the same thing for the other letters. Place the “big corner” on the outer corners of the letters, but not quite in all of them because that will be too much.
Step 5
Focus on the letter "I". Take the Pen Tool (P) or the Line Segment Tool (\) and draw a straight path between each “big corner”, following the edge of the letter. Stroke these four paths with the Biscuit edge Pattern Brush that you saved earlier. Keep the Stroke Weight at1 pt.
If your brush is flipped (waves on the inside, not on the outside), while the path is selected, double click on the brush stroke in the Appearance panel in order to open the Stroke Options window and checkFlip Across.
Step 6
Focus on the letter "B". Draw three straight paths between the “big corners”, on the left side, at the top and at the bottom. Give them a 1 pt Stroke with the Biscuit edge Pattern Brush and flip the brush if necessary.
In the smaller areas, draw a shorter path between the “big corners” and use the same pattern brush. Follow the shape of the letter and draw a few more short paths to complete the biscuit edge all around.
Step 7
Follow the sequence of images and create the biscuit edge for the rest of the letters. All paths have a 1 pt Stroke using the Biscuit edge Pattern Brush, and don't forget to flip the brush if necessary.
Step 8
Before you continue, zoom on each letter and check if there are any empty spaces between the strokes as shown in the close-ups. If there are, grab the Direct Selection Tool (A) and move the anchor points closer to each other to cover the empty space.
Step 9
Select one of the stroked paths and go to Select > Same > Stroke Weight. As a result, Illustrator will select all the paths for you. Choose Expand Appearance from the Object menu in order to turn the strokes into shapes.
Step 10
Select all the shapes that compose the letter "B" and press Unite in thePathfinder panel to turn everything into a single shape. Repeat the same thing for the rest of the letters.
Before you continue, make sure that the new letters are paths and not compound paths in the Layers panel. If they are, go to Object > Compound Path > Release.
4. Create the Biscuit Graphic Style
Step 1
It's time to create the actual biscuit style, and the appearances will be “all in one”. You won't need other shapes besides the seven letters.
Fill all the letters with the color indicated and after that, go to Effect> Stylize > Inner Glow. Apply the settings shown and hit OK.
Step 2
While all letters stay selected, go to the Appearance panel and press Add New Fill in order to add a new Fill attribute above the first one. Use the same color; then go to Effect > Texture > Texturizer and apply the settings shown below. Set this Fill to Blending Mode Multiply and 25% Opacity.
Step 3
With the letters still selected, add a New Fill and drag it to the bottom of the Appearance panel. Use the color indicated and then go toEffect > Distort & Transform > Transform. Apply a 2 px Vertical Move and hit OK.
Step 4
With the letters still selected, add a New Fill at the bottom of theAppearance panel and use the color indicated. Next, go to Effect > Distort & Transform > Transform and apply a 4 px Vertical Move.
Step 5
Now, select a 0.5 pt white Stroke (although for visual purposes I used red), and use the Ink Splats Scatter Brush that you can find in theBrush Libraries Menu > Artistic > Artistic_Ink. Double click in the Appearance panel on the brush stroke to open the Stroke Options window, and change the settings as shown below.
As you can see in the image, the splats go over the edge of the letters, and that is not what we want. We're going to fix that next.
Step 6
Select the letter "B" and also select the Stroke attribute in the Appearance panel. Now, go to Effect > Convert to Shape > Rectangle and set the Width to 85 px and the Height to 110 px. We're basically forcing the letter "B'" (only the stroke, not the entire shape) to transform into a rectangle which is smaller than the letter; therefore, the brush stroke will get smaller and will be concentrated in the center of the letter rather than near the edges.
Apply this effect to the other letters as well, but the size of the rectangle depends on the shape of each letter. The same dimensions,85 x 110 px, work for the letters "C" and "U", but for the letter "I" you need a thinner rectangle, about 15 x 110 px. Use 70 x 110 px for the letter "S" and 50 x 110 px for the letter "T".
At this point, the brush splats should not go over the edge of the letters, but if they still do, open the Rectangle effect again and choose slightly smaller dimensions.
Step 7
Reduce the Opacity to 15% for this Stroke attribute, and at this point the biscuit effect should look like in the next image.
Step 8
Add a New Stroke in the Appearance panel above the previous one. Use black, set the Weight to 0.5 pt, and use the Ink Splats Scatter Brush again. Open the Stroke Options window and change the settings for each letter as shown below.
Step 9
Now, we're going to force the black splats to stay inside the letters like earlier.
Select one letter at a time, and also the black Stroke attribute in theAppearance panel, and then go to Effect > Convert to Shape > Rectangle. For the dimensions of the rectangle, use the same values from the white brush strokes because if they worked there, they will work here as well. After you are done, set the Blending Mode toOverlay and reduce the Opacity to 20%.
At this point, you are pretty much done with the texture, and all you need are the little holes on the surface of the biscuit.
Step 10
The number of holes depends on the shape and size of each letter. Let's start with the letter "I" because it's the smallest and it will be easier at first.
While the letter “I” stays selected, add a New Fill and drag it to the top of theAppearance panel. Use a black to brown radial gradient; then go toEffect > Convert to Shape > Ellipse and apply the settings shown. This will basically force this Fill attribute to transform into a tiny 4 x 3 px ellipse in the center of the letter.
Step 11
With the letter “I” and the last Fill attribute still selected, go to Effect > Distort & Transform > Transform and apply a 10 px Horizontal Move. As a result, the tiny ellipse will move a little to the right.
Step 12
With the letter “I” and the last Fill attribute still selected, go to Effect > Stylize > Drop Shadow and apply this effect twice using the settings shown below.
Step 13
While the last Fill attribute is still selected, choose Duplicate Item from the upper right menu of the Appearance panel. As a result you will get a second tiny hole, but at the moment they overlap. Expand the new Fill attribute at the top, open theTransform Effect window, and change the Move Horizontal setting from 10 px to -10 px.
Step 14
Now, select the two Fill attributes (the two tiny holes) and chooseDuplicate Item again. As a result, you will get two new Fill attributes at the top (two new holes), but at the moment they overlap so you need to change the settings for the Transform effect.
Expand the new Fill attributes, open the Transform Effect window, and type -22 px in the Move Vertical field. Keep the Horizontal value the same because you just want to move the two new holes 22 px upwards.
Step 15
Select the last two Fill attributes and choose Duplicate Item again to get two new holes. Open the Transform Effect window and change the Move Vertical setting from -22 px to -45 px for both.
Step 16
Now, select the first two Fill attributes (the first two holes) and duplicate them. Expand the two new Fill attributes underneath, open the Transform Effect window, and type 25 px in the Move Vertical field for both.
Step 17
Select the last two Fill attributes and duplicate them to get two new holes. Expand the two new Fill attributes underneath, open the Transform Effectwindow, and change the Move Vertical setting from 25 px to 50 px for both. These will be the last two holes, and at this point the letter “I” is pretty much ready. We will add the shadow later in the tutorial.
Step 18
The same thing goes for the letter “B”, but you need to add more tiny holes because the surface is bigger than the letter “I”.
While the letter “B” stays selected, add a New Fill above the existing ones and use the same black to brown radial gradient. For the Ellipse, Transform andDrop Shadow effects, use the same settings shown earlier for the first hole on the letter “I”.
Step 19
Duplicate this Fill attribute (first hole) twice, and then open the Transform effect and change the Move Horizontal setting as indicated. As a result, you will get the other two holes on the left.
Step 20
Select the first three Fill attributes (three holes) and choose Duplicate Item again. Expand the new Fill attributes at the top, open theTransform effect, and change the Move Vertical setting from 0 px to-22 px for all three. This will move the three new holes 22 px upwards.
Step 21
Select the first three Fill attributes again and choose Duplicate Item. This time, change the Move Vertical setting from 0 px to -45 px in order to move the new row of holes at the top.
Repeat the same thing to obtain the other two rows of holes at the bottom, and always use the first three Fill attributes (first three holes in the center) to duplicate.
Step 22
Using the same technique, add the last two holes on the right side of the letter, and at this point the Appearance panel should look like in the image below. Magical, right? Everything is on the same path, and the main part of the Appearance panel consists of the holes in the biscuit.
I look forward to the time when Illustrator will let me write a custom name for each appearance just like the layers in Photoshop so I don't get tangled in my own work. It's hard to tell which hole is which, but you can use the Visibility eye to find them.
Step 23
Follow the technique explained above and add the tiny holes for the other letters.
Step 24
The last thing to do is to add the shadow. Select the first letter and take a look at the Appearance panel. Add a New Fill at the bottom and use the color black. While this Fill attribute stays selected, go toEffect > Distort & Transform > Transform and in the Move Vertical field type 4 px. Next, go to Effect > Stylize > Drop Shadow and apply this effect three times.
After you are done, repeat the same thing for the other letters.
Here are the settings for the three Drop Shadow effects:
Step 25
The biscuit text effect is ready now. If you go to View > Outline, you can see the shape of the letters and that there are no other shapes involved. All the appearances are on the same path.
5. Save the Biscuit Graphic Style
You can save this biscuit style for future use. Select one of the letters and press New Graphic Style in the Graphic Styles panel. Type a name for your style and hit OK.
You can apply this biscuit style to other shapes, but you need to make a few changes to rearrange the position of the holes because each shape is different. To do that, open the Transform effect under each Fill attribute and change the Horizontal and Vertical settings to move the holes to the correct spot. That's it.
Awesome Work, You're Done!
The Appearance panel can be magical, if you know how to use it to its full potential. I hope that you enjoyed this tutorial as much as I did. I am always up for a challenge.
Don't forget to show me your recreations of this biscuit text effect because I would love to see your work.
