Web Development: How to Create a Nautical Tattoo Font

How to Create a Nautical Tattoo Font

Final product image — What You'll Be Creating

In this tutorial, I would like to show you how to create a nautical-looking font using Sketch. We will make use of simple shapes and the Vector tool along with Borders and Layer Styles to quickly create the nautical font.

For more inspiration on how to adjust or improve your final nautical flag alphabet font, you can find plenty of nautical or tattoo fonts at GraphicRiver.

1. Set Up Your Document

With Sketch open, the default view already has an infinite Artboard. Since we are not creating anything that is a specific size, we can leave this as is. We will, however, be working with a grid, so let's turn that on at this time.

On the top Toolbar, select View > Grid Settings and change the values as seen below.

2. Create Your First Letter of the Nautical Flag Alphabet Font

Step 1

In order to make my job easier, and inspired by some old nautical fonts, I've sketched some ideas that I would like to work from. This will help keep the theme of the nautical font even and provide a jumping-off point to start the vector process.

It isn't perfect, but it doesn't need to be. During the vector process, I even changed my mind about certain flourishes and shapes. These sketches are just there to provide a guide for my nautical sea font.

Step 2

From my sketches, I can see that all of my nautical font characters are made up of a wide bar and a stroke to complete the shapes. I've decided that I want this wide bar to be two squares on my grid wide and eight squares tall. Making it 50 x 200 px.

In the case of the letter "A", this bar will be skewed slightly, so I found it easier just to create a custom shape using the Vector tool (V). With the Vector tool selected, click on an intersecting grid point to start your shape.

Next, count two squares to the left and click to create another point. Go over two squares and up eight and click to create another point. Now count over two squares to the right and click to make a point. Lastly, click on the starting point to close the shape.

Step 3

Now let's create the other diagonal line that makes up the "A". Sketch has a Line tool that would be nice to use. However, this tool doesn't seem to play well with the grid, and lines drawn with this tool don't automatically snap into place. So we'll skip using this tool and make our lines using the Vector tool (V).

With the Vector tool (V) selected once more, click on the top of the grid where the wide shape comes to a point, and then go down to the bottom and over three squares and click once more. You can then press Return on the keyboard to set the path.

Step 4

We'll now create our crossbar and serifs. Using the the Vector tool (V) again, click and create horizontal lines across the middle of the pyramid shape. Since it is eight grid squares high, this means the center will be four grid squares up or down. As for the serifs, these will hang over one grid square on each side.

3. Apply the Nautical Font Styles

Step 1

The majority of our letterform is a simple stroke, but the wide bar needs to be styled to match our retro nautical tattoo theme. I'll be working in a nice aqua blue color, but feel free to use any color you choose. In the Layers List (leftmost pane), select all of the simple stroke layers, and then in the Inspector (rightmost pane), adjust the Borders section as seen below. If there are any fills, please be sure to remove them at this time.

With the strokes still selected, move to the Appearance section. Open the Layer Style menu and click Create New Layer Style to save the stroke as a preset for easier access later on.

Step 2

Now select the wide bar shape, and this time we will be adjusting the Fill, Borders, and Inner Shadows elements. First, apply the saved Layers Style from the Appearance section. This will automatically apply the blue stroke for your selected shape.

The Fill will be a gradient. If you click on the fill icon, the Fill Color panel will fly in, and you can adjust these settings. From this panel, select Gradient, and a preset gradient will appear on the shape.

In order to edit a gradient, you will have to look on the Artboard at the shape, and you will notice two circle icons at the top and bottom of the shape in a straight line. By default, the top circle icon is selected, so if you change the color/opacity it will only affect that point. For now, let's set it to flat white with 100% opacity. On the Artboard, click the bottom circle icon and adjust the color to the same one as your stroke from earlier.

Step 3

Zoom in on your Artboard so you are in the center of the bar shape, and drag the circle icons from the top and bottom of the gradient towards the middle. If you hold Shift, the icon will move vertically without straying. Do this so they meet and make a horizontal line of your border color and white.

Notice in the screenshot that this line is not exactly centered with the grid. I wanted the color to stop in line with the border of the crossbar.

Step 4

With the gradient the way we want it, press the Back button at the top of the Inspector and then adjust the Inner Shadows sections as outlined below. Once you're done, this will be the first letter from your nautical-looking font.

With these settings in place, save it as a new Layer Style in the Appearance section, as you did with the plain stroke.

4. Create the Nautical Flag Alphabet Font

Using our initial sketch as a guide and our new Layer Styles, we'll continue creating the other letters in our nautical font. You should find this a quick and easy task as a lot of it will be repetition of the aforementioned steps.

I'll assume you know how the alphabet looks, so rather than walking you through each letter, I'll stick to the major letter shapes that use different tools and techniques. Once you get used to these tips and tricks, maybe you'll be able to add the nautical font numbers on your own.

Step 1

To create the "B", we'll need to make a rectangle that is 50 x 200 px. This will be the main stem of the "B". To do so, select the Shape menu icon and choose the Rectangle tool (R) and draw your shape. Then add the Layer Style with the gradient fill.

Step 2

To create the bowl of the "B", we'll use the Rounded tool (U) and draw a rounded rectangle that is 150 x 100 px with a radius of at least half the height, so 50. You can adjust this in the Inspector sidebar.

Step 3

With the rounded rectangle we just created still selected, enable the Edit tool from our Toolbar at the top and click on the top left point to select it.

Now, in the Toolbar, a new set of options will become available. Among them you will see our 50 px corner setting. Click in that text box and change it to 0. This will remove the rounded corner from that top left corner. Go ahead and repeat this for the bottom left point as well.

Step 4

Go to Layer > Path > Scissors and click on the flat edge on the left to remove it. We will be using this tool a lot, so it may be in your best interest to save it to the Toolbar. To do so, right-click on the Toolbar or visit View > Customise Toolbar… and drag the tool to the Toolbar in a position that feels comfortable to you.

Select the Edit tool once again and click the bottom left point and drag it so it is no longer intersecting the stem of our "B". Now apply our simple stroke Layer Style. You can now finish it up by repeating these steps to create the bottom bowl shape and using the Vector tool to add an extra serif in the middle of the "B" stem.

Step 5

Our "C" is pretty simple. It is basically a circle, but we've added in our stem to fill it out a bit. Select the Oval tool (O) and create a circle that is 200 x 200 px.

Step 6

With the Rectangle tool (R), draw our main rectangle shape like earlier and align it to the left of the circle. Now Shift-click both shapes and go to Edit > Combine > Intersect or choose Intersect from the top Toolbar. You can now fill it with our gradient Layer Style.

Step 7

Draw another circle the same size as last time and place it over the shape we just created. Select the Edit tool and hover over the circle edge, and you will see the cursor change to a pen icon with a "+".

Where the path intersects with the grid, click to create a new point both above and below the center point. Select the Scissors tool and remove the paths between these two points you just created to create an opening. You can now apply the simple stroke Layer Style and add in your serifs.

Step 8

Following the above steps, you should be able to create the letters "A" through "R". It's pretty much just lather, rinse, repeat, following the theme and basic letter forms. The "S" is a bit different, however, so I'll explain that now.

To keep things in line, I decided to use the same angle as the letter "A" for all the other slanted letters, such as the "V", "W", and "X". However, this angle was a bit too harsh for the "S" and the "Z". So I've drawn a new angle for the "S" in this step. The block is still two grid squares wide, but instead of being three across, it is now four. So, as we did for the "A", select the Vector tool (V) and create your angled block as seen below.

Step 9

Select the Rounded tool (U) and draw a rounded rectangle that is 150 x 200 px with a radius of at least half the width, so 75. Now Shift-click both shapes and go to Edit > Combine > Intersect or choose Intersect from the top Toolbar. You can now fill it with our gradient Layer Style.

Step 10

Enable the Oval tool (O) and create two circles that are 150 x 150 px and place them directly over the previous shape, aligning one to the top and one to the bottom. Then select the Edit tool and hover over the circle edge, and you will see the cursor change to a pen icon with a "+".

Where the circle intersects with the underlying shape, click to create a new point. Select the Scissors tool and remove the paths between these two points you just created to create a semicircle. You can now apply the simple stroke Layer Style and add in your serifs. Do this for both the top and bottom circle, and your "S" should be complete.

Step 11

The "Y" is a custom shape drawn with the Vector tool (V). You can see the steps below on how to create it.

Step 12

Finally, for the "Z", I felt the angle was too steep, so I elongated it as we did for the "S", only I made this one a bit more pronounced. Feel free to play with it to your liking, but for me I went over five grid squares and then added the stems and serifs to finish it off.

Arr, "X" Marks the Spot, Matey!

I hope I was able to show you a few time-saving techniques for reusing simple styles. Once you have the nautical font letters created, you can group the different elements together so that you can copy/paste the letters to form words and sentences. Challenge yourself and add the nautical numbers to the font. Stay tuned for future tutorials on how to use this nautical font in fun and crafty ways.

Feel free to adjust the final design and try different nautical font styles. You can find some great sources of more inspiration at GraphicRiver, with interesting solutions to create nautical sea fonts or tattoo fonts.

Nautical Fonts From Envato Elements

Cut out the hassle of creating old nautical fonts from scratch. Explore our amazing collection of fonts from Envato Elements to create your own designs!

Dark Seas - Five Styles!

This font comes with five styles that pair seamlessly together, creating the ultimate tool to give your designs clarity, style, and impact.

Burford Rustic Extras

Burford Rustic is a weathered and textured alternative to the Burford Family. It works the same way as Burford as a layer-based font family, but with some style variations and new layering options. It includes 20 font files, starting with four texture variations from Black to Bold, Light, and Ultralight. It also includes an outline and two inline weights. Additionally, it offers three line weights (light, medium, and bold) for top layering options.