Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator

How to Design a Lighthouse Logo (With Examples!)

by
Read Time:13 minsLanguages:
Final product imageFinal product imageFinal product image
What You'll Be Creating

In the following tutorial, you will learn how to create a lighthouse logo design using basic vector shape-building techniques in Adobe Illustrator.

If you don't have the time to learn how to create a lighthouse logo, you can always try Envato Elements. There you can find plenty of lighthouse logo ideas or nautical logo symbols to choose from. Here's an abstract lighthouse logo template that you can easily edit.

abstract lighthouse logoabstract lighthouse logoabstract lighthouse logo

If you're a visual person who prefers video tutorials, we've got you covered as well. The Envato Tuts+ YouTube channel has a fantastic selection of tutorials, including this new video on how to make a lighthouse logo design in Illustrator:

And if you're looking for more nautical logo design tutorials, don't forget to check this one out:

What You'll Learn in This Lighthouse Logo Tutorial

  • How to set up a grid in Illustrator
  • How to create and edit vector shapes
  • How to create a lighthouse logo design

What You'll Need

You will need to download the following font in order to complete this nautical logo:

1. How to Create a New Document and Set Up a Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, set both Width and Height to 850 px, and then click that Advanced Options button. Select RGB for the Color Mode and set the Raster Effects to Screen (72 ppi), and then click the Create button.

Enable the Grid (View > Show Grid or Control-") and Snap to Grid (View > Snap to Grid or Shift-Control-"). You will need a grid every 5 px, so simply go to Edit > Preferences > Guides & Grid, and enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-" keyboard shortcut.

You can learn more about Illustrator's grid system in this short tutorial from Andrei Stefan: Understanding Adobe Illustrator's Grid System.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don't forget to set the unit of measurement to pixels from Edit > Preferences > Units. All these options will significantly increase your work speed. Now that you're set, let's start work on the nautical logo.

illustrator new documentillustrator new documentillustrator new document

2. How to Create the Tower of the Lighthouse Logo

Step 1

Pick the Rectangle Tool (M) and use it to create a 95 x 210 px shape. Keep this rectangle selected and focus on the Appearance panel.

Select the fill and make sure that the color is set to white (R=255 G=255 B=255) and then select the stroke. Replace the existing color with R=1 G=20 B=96 and move to the Swatches (Window > Swatches). Click that New Swatch button to quickly save the color as you'll need this dark blue many times throughout this tutorial.

Return to the Appearance panel and click that Stroke button to open the Stroke fly-out panel. Increase the Weight to 5 pt, and don't forget to check that Align Stroke to Inside button.

Switch to the Direct Selection Tool (A) and focus on the top of your rectangle. Select the left anchor point and drag it 20 px to the right, and then select the right one and drag it 20 px to the left, as shown in the second image.

rectangle trapezoidrectangle trapezoidrectangle trapezoid

Step 2

Pick the Rectangle Tool (M) and use it to create two 95 x 40 px shapes. Fill both rectangles with your saved color from the Swatches panel, and place them as shown in the first image.

Switch to the Selection Tool (V), hold down the Shift key to select both of these rectangles, and go to Object > Compound Path > Make (Control-8) to turn them into a single compound path.

Reselect the trapezoid shape made in the previous step and press Control-C > Control-F to add a copy in front. Select this copy along with your compound path, open the Pathfinder panel (Window > Pathfinder), and click the Intersect button.

pathfinder intersectpathfinder intersectpathfinder intersect

Step 3

Focus on the bottom of your trapezoid shape and pick the Rectangle Tool (M). Use it to create a 5 x 10 px shape, fill it with dark blue, and place it as shown in the first image.

Switch to the Direct Selection Tool (A) and use it to select the top anchor points. Remember to hold down the Shift key to easily select more than one anchor point. Move to the control panel and set the Corner Radius to 2.5 px.

Keep this shape selected and go to the Appearance panel to apply a stroke. Set the Weight to 4 pt and use that same dark blue for the color, and then open the Stroke fly-out panel to check that Round Join button.

rectangle corners radiusrectangle corners radiusrectangle corners radius

Step 4

Pick the Selection Tool (V) and make sure that your blue window shape is still selected. Hold down the Alt key and simply click and drag your selected shape to duplicate it.

Select this copy and replace both fill and stroke color with white, and then place it as shown in the first image.

Add another three copies of this window shape and place them as shown in the second image.

multiply window shapemultiply window shapemultiply window shape

3. How to Create the Top of the Lighthouse Logo

Step 1

Pick the Rectangle Tool (M) and use it to create a 55 x 20 px shape. Fill it with dark blue and place it as shown in the first image.

Using the same tool, create a 5 x 10 px shape, fill it with white, and place it as shown in the second image. Keep it selected and go to Effect > Distort & Transform > Transform. Set the number of Copies to 4 and drag the Move-Horizontal slider to 10 px, and then click OK to apply the effect.

rectangle multiplyrectangle multiplyrectangle multiply

Step 2

Make sure that the white rectangle made in the previous step is still selected, and go to Object > Expand Appearance.

Press Control-8 (or go to Object > Compound Path > Make) to turn the resulting group of shapes into a compound path, and fill it with white.

Switch to the Direction Selection Tool (A) and use it to select all those top anchor points, move to the control panel, and set the Corner Radius to 2.5 px.

corners radiuscorners radiuscorners radius

Step 3

Pick the Rectangle Tool (M), use it to create a 65 x 5 px shape, and place it as shown in the following image.

Keep this rectangle selected and focus on the Appearance panel. Again, apply your dark blue for both the fill and stroke, and then open the Stroke fly-out panel.

Increase the Weight to 5 pt, set the Alignment to Outside, and don't forget to check that Round Join button.

rectangle strokerectangle strokerectangle stroke

Step 4

Pick the Rectangle Tool (M) and use it to create a 55 x 25 px shape. Fill it with dark blue and place it as shown in the first image.

Using the same tool, create two 10 x 25 px shapes and a 15 x 25 px shape. Fill all three rectangles with white and place them as shown in the second image.

rectanglesrectanglesrectangles

Step 5

Keep focusing on the white rectangles made in the previous step and pick the Direction Selection Tool (A).

Use it to select all those top anchor points, move to the control panel, and set the Corner Radius to 5 px.

corners radiuscorners radiuscorners radius

Step 6

Pick the Rectangle Tool (M) and use it to create a 65 x 5 px shape. Fill it with dark blue and place it as shown in the first image.

Keep it selected, switch to the Direct Selection Tool (A), and move to the control panel to set the Corner Radius to 2.5 px.

rectangle corners radiusrectangle corners radiusrectangle corners radius

Step 7

Pick the Rectangle Tool (M) and use it to create a 55 x 35 px shape. Fill it with dark blue and place it as shown in the first image.

Keep it selected, switch to the Direct Selection Tool (A), and move to the control panel to set the Corner Radius to 27.5 px.

roofroofroof

Step 8

Pick the Rectangle Tool (M) and use it to create a 15 px square. Fill it with dark blue and place it as shown in the first image.

Keep it selected, switch to the Direct Selection Tool (A), and use it to select the top anchor points, and then go to Object > Path > Average. Check that Both box and click OK to quickly turn your square into a triangle.

Continue with the Delete Anchor Point Tool (-) and simply click the top corner of your triangle to remove one of those two overlapping anchor points. Reselect the Direct Selection Tool (A), use it to select the remaining top anchor point, move to the control panel, and set the Corner Radius to 2 px.

triangle illustratortriangle illustratortriangle illustrator

Step 9

Pick the Rectangle Tool (M) and use it to create an 85 x 15 px shape. This time, remove the fill color and add a dark blue stroke. Place this rectangle as shown in the first image, and set the Stroke Weight to 5 pt.

Continue with the Direct Selection Tool (A), click and drag across the right side of this new rectangle to select it, and then press the Delete key to remove it.

Keep the resulting path selected, return to the Appearance panel to open that Stroke fly-out panel, and check the Round Cap button to add a bit of roundness to the end points of the path, as shown in the second image.

path strokepath strokepath stroke

Step 10

Focus on the right side of your path and pick the Direct Selection Tool (A). Select the top anchor point and drag it 25 px up, and then select the bottom anchor point and drag it 25 px down.

Continue with the Rectangle Tool (M) and use it to create a 60 x 5 px shape. Fill it with dark blue, place it as shown in the third image, and don't forget to set the Corner Radius to 2.5 px.

edit pathedit pathedit path

Step 11

Select the path and the rounded rectangle added in the previous two steps, and go to Object > Transform > Refect. Check the Vertical box and then click that Copy button to duplicate your selected shapes.

Drag the copies to the left, as shown in the second image, and then select all four shapes and press Shift-Control-[ to easily send them to the back.

reflect duplicatereflect duplicatereflect duplicate

4. How to Create the Base of the Lighthouse Logo

Step 1

Pick the Rectangle Tool (M) and use it to create a 125 x 40 px shape. Fill it with dark blue and place it as shown in the first image.

Keep it selected, switch to the Direct Selection Tool (A), and focus on the top anchor points. Select the left one and drag it 5 px to the right, and then select the right one and drag it 5 px to the left.

Now, select both anchor points, and move to the control panel to set the Corner Radius to 10 px.

base shapebase shapebase shape

Step 2

Pick the Rectangle Tool (M) and use it to create an 15 x 25 px shape. Remove the fill color and add a white stroke.

Place this rectangle as shown in the first image, set the Stroke Weight to 5 pt, and align it to Inside.

Switch to the Direct Selection Tool (A) and select the top anchor points, and then move to the control panel to set the Corner Radius to 7.5 px.

lighthouse entrancelighthouse entrancelighthouse entrance

Step 3

Pick the Rectangle Tool (M) and use it to create a 235 x 90 px shape. Fill it with dark blue and place it as shown in the first image, and don't forget to set the Corner Radius to 10 px.

rounded rectanglerounded rectanglerounded rectangle

Step 4

Pick the Type Tool (T) and focus on the Character panel (Window > Type > Character) to set the settings for the text which you're about to add.

Select the Robinson font, set the size to 70 pt and the tracking to 30, and then click on your artboard to type in "LIGHTHOUSE". Make it white.

lighthouse textlighthouse textlighthouse text

Step 5

Make sure that your text is still selected and go to Type > Create Outlines.

Use the Selection Tool (V) to select the resulting group along with the rounded rectangle that lies in the back. Click this rounded rectangle to make it the reference shape, move to the control panel, and click those Horizontal Align Center and Vertical Align Center buttons to easily move your group to the center of that rounded rectangle. With this final touch, your lighthouse logo design is complete.

center textcenter textcenter text

Congratulations! You're Done!

I hope you've enjoyed this tutorial and can apply these techniques in your future projects. Once created, you might want to see how your design would look in real life. Check out this mockup from Placeit, and apply your lighthouse logo with just a few clicks.

Feel free to adjust the final lighthouse logo design and make it your own. You can find some great maritime logo ideas at Envato Elements, with interesting solutions to improve any marina logo design.

lighthouse logo designlighthouse logo designlighthouse logo design

Popular Maritime Logo Templates From Envato Elements

Envato Elements is an excellent resource for nautical logo symbols and lighthouse logo ideas. Here's a short list of some of the most popular maritime logo ideas that you can find.

Lighthouse Logo (AI, EPS, PDF)

Keep it sleek and simple with this stylish lighthouse logo. Just adjust the text and you're ready to print.

nautical vector compassnautical vector compassnautical vector compass

Lighthouse Logo Template (AI, EPS)

Add a bit of color to your brand using this colorful lighthouse logo design. As always, you can adjust the text and the colors however you wish.

maritime logo templatemaritime logo templatemaritime logo template

Abstract Lighthouse Logo (AI, EPS, PNG)

Looking for something very simple, but eye catching? This abstract lighthouse logo might be the perfect fit.

abstract lighthouse logoabstract lighthouse logoabstract lighthouse logo

Line Lighthouse Logo Design (EPS)

Keep it clean and simple with this line lighthouse logo design. Feel free to adjust the color of this logo, add your text, and you're done.

marina logo designmarina logo designmarina logo design

Lighthouse Logo Template

If you don't have the time to create your own lighthouse logo, you can always use a lighthouse logo template from Placeit. Here's just one of the many examples which you can edit with a few clicks.

nautical star compass logonautical star compass logonautical star compass logo
Advertisement
Did you find this post useful?
One subscription.
Unlimited Downloads.
Get unlimited downloads