Since the inception of Naruto in 1995, Manga author Masashi Kishimoto has given us a story for the ages. Naruto is filled with memorable characters, deep and detailed lore, fantastic fashion design, and of course a huge variety of iconic logos. From family crests to guilds and powers, every symbol in Naruto has a special meaning.
Today, we’ll use Adobe Illustrator to design the Naruto logos that made this ramen-eating ninja a worldwide phenomenon.
Do you prefer video tutorials? Then don’t miss this new video from the Envato Tuts+ YouTube Channel to learn how to draw the Naruto logo in Illustrator, and everything about the Naruto symbol meanings:
Jump to content in this section
What You’ll Learn in This Naruto Logos and Symbols Tutorial
- How to make the Naruto logo
- How to make the Naruto Shippuden logo
- How to create the Naruto headband logo
- How to create the Naruto Akatsuki logo
- Naruto symbol meanings and more details
What You’ll Need
You will need the following resource in order to complete these Naruto signs and symbols:
1. How to Make the Naruto Logo
The original Naruto name logo made its debut on the cover of the first chapter published in 1999 and has remained unchanged ever since.
Notice how the colors in the gradient can also be found on his hair, clothes, and eyes. The Naruto design background of the logo has a pink spiral which—apart from being the Usumaki’s clan crest—also represents the character’s love for ramen and the popular “narutomaki” ingredient that gives the series its name. See? Everything is connected.
Step 1
Now that we’ve learned about the Naruto symbol meaning, let’s start the logo! Press Control-N to create a new document. Select Pixels from the Units drop-down menu, set the Width to 850 px and the Height to 600 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 Create. Now that you’re set, let’s learn how to draw the Naruto original design logo.
Step 2
Pick the Ellipse Tool (L) from your toolbar and then focus on the color settings. Select the stroke and remove the color, and then double-click the fill and replace the existing color with R=237 G=130 B=178.
Move to your artboard and simply click on it to open the Ellipse window. Set the Width to 570 px and the Height to 175 px, and then click OK to create your new shape.
Keep it selected and focus on the Control panel (Window > Control). Make sure that the Alignment is set to Artboard and then click the Horizontal Align Center and Vertical Align Center buttons to easily move your shape to the center of the artboard.
Step 3
Make sure that the Ellipse Tool (L) is still active and use it to create a 480 x 145 px shape. Again, use those Horizontal Align Center and Vertical Align Center buttons to center this new shape.
Use the Selection Tool (V) to select both of your shapes, open the Pathfinder panel (Window > Pathfinder), and click Minus Front.
Step 4
Pick the Ellipse Tool (L) and create a 400 x 125 px shape. You can use the Eyedropper Tool (I) to easily fill this new ellipse with the color of your other shape. Once you’re done, center this ellipse.
Reselect the Ellipse Tool (L), use it to create a 300 x 95 px shape, and don’t forget to center it.
Step 5
Pick the Selection Tool (V), hold down the Shift key, and click the two shapes made in the previous step to select them. Once they’re selected, move to the Pathfinder panel and click that Minus Front button again.
Step 6
Reselect the Ellipse Tool (L), create a 240 x 75 px shape, center it, and don’t forget to fill it with that same pink.
Once you’re done, select all your shapes and go to Object > Compound Path > Make (Control-8) to turn them into a single compound path.
Step 7
Make sure that your compound path is still selected and go to Effect > 3D and Materials > 3D (Classic) > Rotate (Classic). Set the settings as shown below and click OK to apply the effect, and then you can go to Object > Expand Appearance to expand it. Now, we can move on to adding the Naruto font.
Step 8
Pick the Type Tool (T) and focus on the Control panel to set the settings for the text that you’re about to add.
Just select the Ninja Naruto font and set the size to 170 px, and then click on your artboard to type in the Naruto name.
Step 9
Keep your text selected and go to Type > Create Outlines to turn your text into vector shapes.
Keep the resulting group of shapes selected, open the Gradient panel (Window > Gradient), and click that Linear Gradient button to apply a linear gradient for each of your letter shapes.
Make sure that the Angle is set to 0 degrees and then focus on the gradient sliders. Double-click the left one and set the color to R=249 G=177 B=1, and then double-click the right one and set the color to R=231 G=15 B=3.
Step 10
Since we don’t have a Naruto font generator, let’s start shaping this font. Make sure that your group of letter shapes is still selected, and add a copy in front (Control-C > Control-F).
Turn this new group of shapes into a single compound path (Control-8) and fill it with R=9 G=58 B=142.
Step 11
Make sure that your blue compound path stays selected and press Control-[ to easily move it behind the original group of letter shapes.
Move to the Appearance panel (Window > Appearance), select the existing fill, and go to Effect > Path > Offset Path. Increase the Offset to 12 px and set the Joins to Round, and then click OK.
Step 12
Keep your blue compound path selected and make sure that the fill is still selected, and then go to Effect > Distort & Transform > Transform. Set the number of Copies to 30 and drag both Move sliders to 0.5 px, and then click OK.
Step 13
Make sure that your blue compound path is still selected, keep focusing on the Appearance panel, and click Add New Fill to add a second fill for your shape.
Select this new fill and set the color to white (R=255 G=255 B=255), and then go to Effect > Path > Offset Path. Set the Offset to 6 px and the Joins to Round, and then click OK. This will be your Naruto name logo.
2. How to Make the Naruto Shippuden Logo
Shippuden is a Japanese term that is made up of two concepts: “shippu” (meaning swift, strong wind) and “den” (which translates as “legends” or “chronicles”). This gives us something like The Hurricane Legends or Hurricane Chronicles.
If we consider that Naruto’s last name “Usumaki” means swirl, then it makes perfect sense for Masashi Kishimoto to have used this as a title for the second portion of the series and also to include it in the Naruto original design. Let’s remember that, amongst his many powers and techniques (especially Rasengan and Wind Shuriken) the element of wind occupies a special place, therefore tying everything together.
Step 1
Now that you’ve made the classic Naruto design logo, let’s see how you can use it to create the Naruto Shippuden logo.
First of all, select your blue compound path, focus on the Appearance panel, and replace the blue with black (R=0 G=0 B=0).
Step 2
We don’t need a Naruto font generator when we have skills. Pick the Type Tool (T) and focus on the Control panel. Keep that Ninja Naruto font selected but lower the size to 80 px. Again, click on your artboard and type in “SHIPPUDEN”.
Using the Type Tool (T), you need to select each letter indicated in the following image and lower its font size to 60 px. Once you’re done, use the Selection Tool (V) to place this new text roughly as shown below.
Step 3
Keep your “SHIPPUDEN” text selected, and remove the existing text color. Move to the Appearance panel and click that Add New Fill button to add a new fill for your text. Select it and apply the linear gradient shown below. Make sure that the Angle is set to 90 degrees.
Step 4
Make sure that your “SHIPPUDEN” text stays selected and keep focusing on the Appearance panel.
Add a second fill and drag it below the existing one. Select it and set the color to black, and then go to Effect > Path > Offset Path. Increase the Offset to 10 px and set the Joins to Round, and then click OK. Be sure that your black fill is still selected and go to Effect > Distort & Transform > Transform. Set the number of Copies to 10 and drag both Move sliders to 0.5 px, and then click OK.
Step 5
Make sure that your “SHIPPUDEN” text stays selected and keep focusing on the Appearance panel.
Add a third fill and drag it between the existing ones. Select it and set the color to white, and then go to Effect > Path > Offset Path. Increase the Offset to 5 px and set the Joins to Round, and then click OK. This will be your Naruto Shippuden logo.
3. How to Create the Naruto Headband Logo
There are many headband logos present in the Naruto design universe, and they all represent the allegiance or belonging of a ninja to a specific group or village. In this case, we’re talking about the most recognizable of all, the Konohagakure or ” Hidden Leaf Village” symbol, a leaf.
Given to every shinobi that graduates from the academy, the Konoha headband features a simple yet interesting Naruto design. It was made by Madara Uchija and Hashirama Senju when they founded the village…. or by Masashi Kishimoto, the author.
Step 1
Press Control-N to create a new document. Keep the existing settings and 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 gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid, 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 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.
Step 2
Pick the Ellipse Tool (L) from your toolbar and then focus on the color settings. Select the fill to remove the color and keep the stroke color set to black.
Move to your artboard and simply create a 235 x 225 px shape—the grid and the Snap to Grid should make it easier. Keep in mind that you can check the Info panel to see exactly when you get to the desired size.
Step 3
Keep using the Ellipse Tool (L) and create a 175 x 165 px shape. Set the stroke color to red so that you can differentiate it from the other shapes.
Use the Selection Tool (V) to select both of your ellipses and click the larger one to make it the reference shape. Move to the Control panel and click the Horizontal Align Center and Vertical Align Bottom buttons.
Step 4
Reselect the Ellipse Tool (L), create a 105 px circle, and set the stroke color to blue. You can hold down the Shift key as you click and drag to easily create a perfect circle.
Use the Selection Tool (V) to select this blue circle along with the red ellipse, and then click the red ellipse to make it the reference shape. Move to the Control panel and click the Horizontal Align Center and Vertical Align Top buttons.
Step 5
Reselect the Ellipse Tool (L), create a 55 px circle, and set the stroke color to green. Keep it selected and go to Object > Path > Add Anchor Points.
Use the Selection Tool (V) to select this green circle along with the blue one, and then click the blue circle to make it the reference shape. Move to the Control panel and click the Horizontal Align Center and Vertical Align Bottom buttons.
Step 6
Pick the Line Tool () and use it to create an 80 px vertical path. You can hold down the Shift key as you click and drag to easily create a vertical path. Place it exactly as shown in the first image and add a simple black stroke.
Switch to the Direct Selection Tool (A), select the top anchor point from your vertical path and drag it 95 px to the right. Again, keep in mind that you can hold down the Shift key as you drag this point to constrain its movement.
Step 7
Select your line along with the largest circle and click the Outline button from the Pathfinder panel (Window > Pathfinder).
Press Shift-Control-G to Ungroup the resulting group of paths and reapply that black stroke.
Step 8
Select the path highlighted in the first image and simply press the Delete key to remove it.
Using the Direct Selection Tool (A), select the anchor point highlighted in the second image and delete it.
Select the remaining path highlighted in the third image and also delete it.
Step 9
Using the Direct Selection Tool (A), select the two overlapping anchor points (highlighted in the first image) and press Control-J to Join those two paths (Object > Path > Join).
Step 10
Pick the Direct Selection Tool (A) and focus on your red path. Select the leftmost anchor point and press the Delete key to remove it.
Step 11
Continue with the blue path, select the rightmost anchor point, and Delete it.
Step 12
Move to the green path, hold down the Shift key so you can select the four anchor points highlighted in the following image, and then Delete them.
Step 13
Use the Selection Tool (V) to select all the paths that make up your design and press Control-J to Join them.
Step 14
Make sure that your path is still selected and focus on the Control panel. Open the Stroke fly-out panel to increase the Weight to 15 px, and then check those Round Cap and Round Join buttons.
Step 15
Pick the Rectangle Tool (M), use it to create a 50 x 145 px shape, and place it as shown in the first image. Keep the stroke settings that you used for the main shape.
Keep focusing on this rectangle and switch to the Direct Selection Tool (A). Select the bottom-right anchor point and drag it 110 px to the right, and then select the top-right anchor point and simply Delete it.
Step 16
Keep focusing on the path made in the previous step, select the top anchor point, and drag it 50 px to the right, as shown in the second image.
Step 17
Select all the shapes that make up your Naruto headband logo, and go to Object > Path > Outline Stroke to expand the strokes.
Keep the resulting shapes selected, and merge them using the Unite button from the Pathfinder panel. Fill the new shape with R=73 G=79 B=84.
Step 18
Keep your Naruto logo selected, add a 10 px stroke, and apply the same color that’s used for the fill.
Step 19
Make sure that your Naruto logo is still selected, and go to Effect > Distort & Transform > Roughen. Enter the settings shown below and click OK.
Step 20
Make sure that your Naruto logo is still selected, and go to Object > Path > Outline Stroke. Merge the resulting shapes using that same Unite button from the Pathfinder panel.
Step 21
Pick the Rectangle Tool (M) and use it to create a shape that covers your entire artboard. Fill this rectangle with R=188 G=192 B=208, and then you can press Shift-Control-[ to move it behind your Naruto headband logo.
Step 22
Select your Naruto logo and go to Effect > Stylize > Inner Glow. Set the settings as shown below and click OK.
Step 23
Make sure that your Naruto logo is still selected and go to Effect > Stylize > Drop Shadow. Enter the settings shown in the following image and click OK. Now you have the Naruto original design for the leaf.
4. How to Create the Naruto Akatsuki Logo
The Naruto symbol meanings aren’t complete without this. Akatsuki translates as “Dawn” or “Daybreak”, which is exactly what the rogue shinobi of this group wanted to bring upon the world—albeit with darker undertones.
Composed of various village deserters that experienced the horrors of war first-hand, the Akatsuki chose to identify themselves by using a red cloud multiplied over their long dark cloaks, symbolizing the “Rain of Blood” that fell over Amegakure (Hidden Rain village) during its wars. So it’s a strong reminder of their suffering.
Step 1
Press Control-N to create a new document. Keep the existing settings and 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 gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid, 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 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 see how you can create this Naruto Akatsuki logo.
Step 2
Pick the Ellipse Tool (L) from your toolbar and then focus on the color settings. Select the fill to remove the color, and double-click the stroke to replace the existing color with blue.
Move to your artboard and simply create a 165 x 160 px shape—the grid and Snap to Grid should make it easier. Keep in mind that you can check the Info panel to see exactly when you get to the desired size.
Once you’re done, move to the Appearance panel (Window > Appearance). Increase the stroke Weight to 16 px and lower the Opacity of your shape to about 25%.
Step 3
Using the Ellipse Tool (L), create a 155 x 185 px shape and place it exactly as shown in the following image.
Step 4
Continue with the Ellipse Tool (L), use it to create a 160 x 170 px shape, and place it exactly as shown below.
Step 5
Use the Ellipse Tool (L) to create a 135 px circle and place it exactly as shown below.
Step 6
Again, use the Ellipse Tool (L) to create a 130 x 140 px shape, and place it as shown in the following image.
Step 7
One more time, use the Ellipse Tool (L) to create a 150 x 230 px shape, and place it as shown below.
Step 8
Focus on your last created ellipse and pick the Line Tool (). Use it to create a 210 px horizontal path and place it exactly as shown below. You can add a red stroke to make it more visible.
Step 9
Make sure that your horizontal line is still selected and go to Effect > Distort & Transform > Zig Zag. Enter the settings shown below and click OK, and then go to Object > Expand Appearance.
Step 10
Select your wavy line along with the ellipse that lies behind it, and click the Divide button from the Pathfinder panel (Window > Pathfinder).
Press Shift-Control-G to Ungroup the resulting group of shapes, and then select just the top shape and delete it.
Step 11
Focus on your topmost ellipse and pick the Ellipse Tool (L). Create a 145 x 130 px shape and change its stroke color to red.
Use the Selection Tool (V) to select this red ellipse along with that topmost ellipse. Click the latter to make it the reference shape, and then click the Horizontal Align Center and Vertical Align Top buttons from the Control panel.
Reselect the Ellipse Tool (L), create a 90 px circle, and change its stroke color to black.
Use the Selection Tool (V) to select this black ellipse along with the red one. Make the red one your reference shape and then click the Horizontal Align Left and Vertical Align Center buttons from the Control panel.
Step 12
Move to the rightmost blue ellipse and reselect the Ellipse Tool (L). Create a 115 x 100 px shape, make it red, and align it as shown in the first image.
Pick the Ellipse Tool (L) again, create an 80 px circle, make it black, and align it as shown in the second image.
Step 13
Reselect the Ellipse Tool (L) to create an 80 px circle, make it red, and align it as shown in the following image.
Step 14
Select all your blue shapes and merge them using the Unite button from the Pathfinder panel. Switch to the Direct Selection Tool (A), select the anchor points highlighted in the second image, and simply Delete them.
Step 15
Make sure that the Direct Selection Tool (A) is still active and use it to select the anchor point highlighted in the first image. Move to the Control panel and set the Corner Radius to 5 px.
Step 16
Focus on your topmost red circle, use the Direct Selection Tool (A) to select the two anchor points highlighted in the first image, and Delete them.
Continue with the black circle, select the top anchor point, and Delete it.
Step 17
Select both paths resulting from the previous step and press Control-J to Join them.
Step 18
Continue with the red circle, use the Direct Selection Tool (A) to select the two anchor points highlighted in the first image, and Delete them.
Move to the black circle, select the two anchor points highlighted in the third image, and Delete them.
Step 19
Select both paths resulting from the previous step, and press Control-J to Join them.
Move to the remaining red circle, use the Direct Selection Tool (A) to select the bottom anchor point, and Delete it. Select the remaining path and replace the red stroke with a black one.
Step 20
Reselect that main cloud shape and focus on the Appearance panel. Increase the Opacity to 100% and change the stroke color to white.
Step 21
Make sure that your cloud shape stays selected, and keep focusing on the Appearance panel. Select the fill and set the color to R=241 G=72 B=65, and then add a second stroke using the Add New Stroke button.
Drag this new stroke below the fill, select it, set the color to R=29 G=34 B=44, and then increase its Weight to 28 px.
Step 22
Make sure that your cloud shape stays selected and keep focusing on the Appearance panel. Select the existing fill and duplicate it using the Duplicate Selected Item button.
Drag the new fill to the bottom of the Appearance panel, select it, and go to Effect > Path > Offset Path. Set the Offset to -15 px and click OK, and then go Effect > Distort & Transform > Transform. Just drag that Move-Vertical slider to 50 px, click OK, and go to Effect > Blur > Gaussian Blur. Set the Radius to 15 px and click OK, and then return to the Appearance panel to lower the Opacity of this bottom fill to 50%.
Step 23
Finally, select those black paths and focus on the Control panel. Increase the Opacity to 100% and change the color to white, and then open the Stroke fly-out panel to check that Round Cap button.
Congratulations! You’re Done!
Here is how your Naruto signs and symbols should look. I hope you’ve enjoyed this tutorial and can apply the techniques of recreating the Naruto original design in your future projects.
Just make sure you don’t cross paths with a Konoha ninja cosplayer if you’re planning to use the Akatsuki cloud over your clothes!
Feel free to adjust the final designs and make your own versions. You can find some great sources of inspiration at Envato Elements, with interesting solutions to improve your Naruto name logos.
Popular Assets From Envato Elements
Envato Elements is an excellent resource for any type of designer. Here’s a short list of some of the most popular fonts that you can find.
Disordered Font
Take it to the next level with the Disordered font. This complex font includes standard and alternate glyphs, ligatures, and multilingual characters.
Kust Brush Font
Check out this amazing handwritten typeface. The letters were drawn on hard paper with a thick brush using pure black ink and then turned into this amazing font.
Heavyrust Font
Keep it smooth and simple with the Heavyrust font. On top of this main style, you also get a rough style, as well as ligatures and swashes.
Peaceful Island Font
Go fresh with this amazing brush font. This playful, handwritten font could be the perfect choice for logo designs, brand imagery, merchandise, social media posts, and more.
Mortea Brush Font
Here’s another beautiful handwritten brush font. This versatile design can be used in posters, graphics, social media designs, logos, promotional designs, and anything that needs a casual look.
Want to Learn More?
The journey doesn’t stop here! We have loads of tutorials on Envato Tuts+, from beginner to intermediate level. Take a look!