Draw a tangent line in Illustrator

Draw a tangent line in Illustrator

Tangent lines are easy to draw in Adobe Illustrator. In this quick tutorial we'll use an easy method for drawing perfect tangent lines every time.

In geometry, a tangent line (or simply tangent) to a plane curve at a given point is the straight line that "just touches" the curve. Tangent lines help give your icons and illustrations a symmetrical and modern look.

To begin, use the Ellipse Tool (L) to draw a circle. Constrain the proportions by holding down the Shift Key as you create the shape.

Ellipse Tool
Next, with the Pen Tool (P), draw a long line. Hold down the Shift Key so the 2 points align vertically.

Pen Tool

Tangent Line Tutorial 01

Select both shapes. From the Align Window, select Horizontal Align Left.

Align Left

Still in the Align Window, select Vertical Align Center.

Align Center 

Your objects should look similar to this:

Tangent Line Tutorial 02

Select the line. Go to the Object Menu > Path > Add Anchor Points.

Add Points

This will add one point in the center of your line:

Tangent Line Tutorial 03

Select both shapes. From the Tools Panel, select the Rotate Tool (R).

Tool Panel - Rotate

Rotate both shapes:

Tangent Line Tutorial 04

Using the Direct Selection Tool (A), select one end of the line and delete it.

Direct Selection Tool

Tangent Line Tutorial 05

Now, let's delete a portion of the circle shape:

Tangent Line Tutorial 06

Select the overlapping anchor points and Join them: Object Menu > Path > Join.

Now your shape should look like this:

Tangent Line Tutorial 07

That's all there is to it. Now you've got a straight line that extends perfectly from the curve. This simple method will save you tons of time in the long run and really makes nice curved lines. 

Examples of tangent lines

Using the shape we created above, select the Reflect Tool (R), and make a copy:

Tangent Line Tutorial 08

 Select both shapes. From the Pathfinder Window, select Divide.

Divide

Delete the unwanted shapes until you see this:

Tangent Line Tutorial 09

 Try using tangent lines in other icons:

Tangent Line Tutorial 10


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →

Why attractive design works better
Why attractive design works better

It's no secret that people are drawn to attractive things. Keep reading to learn more about why attractive design is so important.

Continue Reading →

Here's what you need to know about brand psychology
Here's what you need to know about brand psychology

Branding is important to any business. So it's important to understand what attracts people. Read on to learn what you should know about brand psychology.

Continue Reading →