Tutorial for my Tattoo Artist

Designs, Teaches

I got a new tattoo recently and my tattoo artist was amazing. She chatted happily and even though I must have only been on the table 15 minutes tops we covered a range of topics.

I love hearing about how other people use technology, especially other artists. A tool I rarely use can be the holy grail for another user. Strategies I’ve honed within my field, come to be of use in theirs.

So, a quick tutorial I’m told many a tattoo artist will love me for:

Creating perfect text on a path in Adobe Illustrator.

I won’t be covering all the basics of Illustrator in this tutorial, but I will be discussing some general tips for using the Pen Tool and Type on a Path Tool.

1) First, we’ll need to define a path for the base design.
In my example I’ll be putting text on an infinity curve.

2) Let’s start with a circle (L) then remove the curve from only the top point using the Anchor Point Tool (SHIFT + C)

3) Stretch your new raindrop shape vertically with your Regular Selection Tool (V)

4) Use your direct select tool to select only the two side points (A) pull those points down to get a better teardrop.

5) Rotate your new shape 90 degrees, duplicate and flip to create an infinity symbol.

6) This shape will be your base design. We’ll almost always need to offset this path to create the correct path for our text to follow.
Keep in mind this base path can be created using any method you’re comfortable with.

7) With the base path you wish to put text on selected, Open the Object menu > Path > Offset

8) You only need to offset your path a tiny bit to get the text to sit above the line. This distance is most dependent on the stroke weight of your base design and whether you are offsetting inward or outward.
Keep in mind positive offset will create a new shape larger than your original and a negative offset will make a smaller shape

9) You should now have two paths on the right side, One that is your base design and one that will be used for your Text Path. Make sure you only have the Text Path shape selected, then activate your Text on a Path tool (buried beneath the regular Text Tool in the toolbar)

10) Click once on your Text Path with your Type on a Path Tool. The stroke and fill will disappear and be replaced with some filler text and control handles. I guarantee it will look odd and probably be no where near correct initially.

11) Type the words you need to follow the path and ESC + V to get back to your regular selection tool. You will see 3 thin lines extending from the path up toward the text. These control the width and direction of your text. Puling the middle bar into the center of the shape will flip the text to inside the shape.

12) Dragging the other two vertical bars on the text path will change the start and end point of of the valid text area.
If you see a red plus sign on your text path, you have overset text that does not fit inside your defined start and end point.

13) You did it! Now you are ready to choose fonts and make final adjustments to how the text sits on the path. Below you will find some general recommendations for finalizing the design.

General Type on a Path Adjustment Tips

  • The more complicated your shape, the simpler the font that should be used.
  • Curving around a hill shape will make the text feel tight. Curving around a dip will make the text feel more spaced out. Adjust the Tracking and Kerning to account for this.
  • Tracking (Character Panel) adjusts the spacing across the whole text.
  • Kerning (Character Panel) adjusts the spacing between two specific characters. (ALT + Arrows when in the text box)
  • Add extra Kerning to spaces that sit on a curve to make sure words don’t run together.
  • The taller the letters the more they’ll warp along a curve.
  • You can continue to adjust the path that the text is using with your Direct Select Tool (A)

General Illustrator Tips

  • Use the Width tool to create custom path profiles (SHIFT + W)
  • For more complicated shapes you may want to use the Pen or Pencil tool to create the path but you might want to duplicate only a small section of that path to use for your text.

Video Tutorial Coming…Eventually!

More JustCole Blog Posts

List of every website I’ve made

I've been making websites for a while, a few are lost to a mystery thumb drive at the bottom of a drawer somewhere. There are also some websites not included in this list that I substantially modified or maintained for years but did not build originally. Also, I don't...

How to: Photoshop Layer Masks

Photoshop Layer Masking is a tool that feels really complicated at first, so many users avoid learning them. This tutorial aims to lower that barrier and make them more understandable while showing real world use cases to better show the power of this tool. Jump to:...

Spring 2023 Classes

Before you start a website - Starts April 3rd The first steps of getting a website going are often filled with more stress and struggle than you expected. This course will help prepare you for what to expect when starting a website. From purchasing a domain to...