Design a Stunning Futuristic 3D Logo

Gabrielle Gosha
Tweet

If you are a company or business, you almost certainly have a brand already. If you don’t, I recommend you stop reading this now and go and get one. Remember that having a brand is extremely important, especially when you are trying to distinguish your products and services. And, of course, the centerpiece of any brand is its logo.

There are a lot of ways to go about creating your logo, but one thing is for certain: you want it to be distinct and eye-grabbing. In other words, you want people to notice it, gather an impression, and remember it later. A great way to make your logo stand out is by making it 3D, and while there is a craze for flat design at the moment in the design community, 3D elements still have their place among the rest.

In today’s tutorial, I am going to show you how to create a simple but stunning 3D logo by using only Photoshop. So, let’s get started.

Step 1

To start on our logo, we first need to create a new file. Set up your canvas so that it is 600px wide and 400px tall. You can leave the resolution at 72dpi.

step1

Step 2

Make a new layer and name this layer “Orb”. Select your circular marquee tool and create a fairly large circle in the middle of your canvas. Fill your selection with color #77d7ff and, once you’re done, deselect your image.

step2

Step 3

Change your background color to #000000 and keep your foreground color as #77d7ff. Double-click on your “Orb” layer to access the “Blending Options” menu. Select the box for “Gradient Overlay,” and then change the settings to reflect the image below.

step3

Step 4

To continue giving our orb a more round shape, go back to “Blending Options” once more and select the box for “Inner Shadow.” Enter the same same settings as shown below and press OK for the changes to take effect.

step4

Step 5

Create a new layer and with the pen tool and make a curved arc across the surface of the orb. Look below for clarity.

step5

Fill the new path with color #008aff.

step5-1

Make sure you are on the orb layer and select the white space around it. Go back to your newly-created curve and delete the excess that hangs off past the orb.

step5-2

Step 6

With your curved layer selected, access the “Blending Options” menu once again. Check the box for “Bevel and Emboss” and use the settings shown in the image below. Press OK when you’re finished.

step6

Step 7

On a new layer and create another curved shape, but this time with a rounded tip. Make sure this new shape is placed on the right side of the orb.

step7

Fill your new path with color #008aff and, just like before, select the outside of your orb layer and then delete the excess of your newly-created shape. Look below for clarity.

step7-1

Step 8

Access the “Blending Options” menu to add “Bevel and Emboss” to your larger curved shape. Change the settings so that they match the following.

step8

This is what your image should now look like.

step8-1

Step 9

We need to add a gradient to this portion of the curve, so after making sure your foreground is color #008aff and your background is #00000, once again go to your “Blending Options” menu, but this time select “Gradient Overlay.” Use the settings shown below and press OK.

step9

The curved portion of your orb will now look more round.

step9-1

Step 10

Create a new layer and with the circular marquee tool, and create a small circle in the middle of your orb. Make sure it does not touch the edges of the curves. Fill the circle with color #77d7ff. This will be your indent.

step10

Next, add “Bevel and Emboss” to your circular shape by entering the values in the image below. Press OK when finished.

step10-1

This is what your image should now look like.

step10-2

Step 11

On a new layer directly on top of your “Indent” layer, and use the circular marquee tool once more to create a smaller circle in the middle. Make sure that you can see a good amount of your indent. Fill your selection with color #ff6c00.

step11

Step 12

Change the background color to #ffbb03 and leave the foreground color as is. Go to the “Blending Options” menu and apply “Gradient Layer.” Make sure that your gradient reflects your chosen foreground and background colors. Use the settings shown in the image below. Press OK once you’re finished.

step12

This is how the mini orb should now look.

step12-1

Step 13

To continue giving our mini orb a round look, go back to the “Blending Options” on the same layer and select the “Inner Shadow” box. Use the following settings.

step13

Now, check the “Drop Shadow” box and use the settings below.

step13-1

Your mini orb should now look 3D like this.

step13-2

Step 14

Begin working on the orb’s platform by first making a new layer and using the rectangular marquee tool to draw a skinny rectangle underneath the orb. Make sure to leave adequate space between the two elements. Fill the rectangle in with color #ffbb03.

step14

Next go to “File” > “Transform” > “Distort” and change the perspective of your rectangle to give it the appearance that it is the top of the box. Press Enter when finished so that changes take effect.

Step 15

Make a new layer and with your foreground color set to #ffcb17, use the polygonal lasso tool to create the front of the box.

step15

Step 16

Use the same method as above to create the side, but this time make sure the color is #ffc600.

step16

Step 17

So that the orb appears to be floating over the platform, create an oval in a new layer and fill it with color #000000.

step17

Change the opacity to 50% and create a Gaussian Blur on the new oval with an 8px blur.

step17-1

Step 18

You will need to create a shadow for the platform as well. Make sure you use the rectangular marquee tool and place this new layer below the box layer elements. Use the distort tool as needed and, just like before, change the opacity to 50% and apply an 8px Gaussian Blur to the shadow.

step18

Step 19

Create a new layer and make a small ring in the center of the mini orb. Add a 2px stroke it to using color #ff6305.

step19

Then, add a white circle to overlap the top-left part of the ring.

step19-1

step19-2

Step 20

Finish your logo up by adding a white glow behind the orb to make it pop. You can now then resize and move your logo as well as add in your desired text and a colorful gradient background.

finish

Download the PSD File

Conclusion

As long as businesses and companies still exist, the need for logos will stay constant. Designing the perfect logo is far from a walk in the park, but once you learn several design techniques, the task will become easier the more you practice. When designing your logo, you should take into consideration your business’ or company’s name, the target audience, and the services offered. Then, see if you can perhaps implement those ideas and connotations into your design. You’ll want to make sure your logo isn’t too busy though. Get your creative juices flowing and remember to always scribble down those unexpected logo ideas just in case.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Hedie

    Great tutorial! Question on creating a 3D logo in Photoshop though: what about when you need the logo file to be vector for printing large items?

    • http://digifaceproject.wordpress.com Gabrielle

      Hi Hedie thanks. You should be able to take your PSD file and pull it into Illustrator, from there you should be able to convert it to a vector by using the live trace function. Also don’t forget if you’re printing you need to make sure your resolution is 300dpi or larger. Hope that helps!

      • http://achmadbisri.net Achmad Bisri

        I think livetrace is not good enough, for logo it is better works on vector format from start by using Adobe Illustrator or Corel Draw. And for logo tracing VectorMagic is the best as far as I know , but it is for flat logo, for complex logo with gradient like this I doubt it.

        Or any tips how to get great result using live trace ?

        • http://digifaceproject.wordpress.com Gabrielle

          Hi Achmad, I think live trace varies depending on the logo but like you said VectorMagic is good to use and there is always the option of building your logo directly in Illustrator.

          I tried live trace on this particular logo in Illustrator and found that I got pretty decent results when going to Tracing Options and applied the following settings:
          Mode: Color
          Palette: Automatic
          Max Colors: 256
          Blur: 0
          Path Fittings: 2
          Minimum Area: 0
          Corner Angle 20

          If you or anyone else has a better method please do share them!

          • Aaron

            I’m sure paying clients would be perfectly content with ‘pretty decent results’! Especially if the logo they are paying for looks anything like this one.

          • http://digifaceproject.wordpress.com Gabrielle

            Thanks Aaron!