SEARCH
  Tutorials Photoshop Tutorials 3D Effects 3D Typography Tutorial using Xara3D and Photoshop

3D Typography Tutorial using Xara3D and Photoshop

3D typography has become very popular. You can see countless of such artworks in many media. It is largely used for advertisements and many form of entertainment.

There are many ways on how to create a 3D text design and the methods are just accessible to everyone - programs like 3DS Max, Cinema 4D, Maya, Blender, etc. All we need is creativity and a bit of patience in learning to execute ideas into 3D. In this article, we'll walk you through the step-by-step process on creating a simple typography with this 3d text Photoshop tutorial and by using Xara3D software. We hope you enjoy this tutorial.

Xara 3D

Step 1:

Open Xara 3D for the base text. We used Xara 3D Version 6 for this Typography.

img

Step 2:

Select the Text Options Button (Alt+T) to type in your Text and click Ok. We used "You The Designer" as a sample text. The font used was Kyrilla Sans Serif Black from UrbanFonts.com.

img

Step 3:

Set the design to plain text by clicking the first X button on the lower left side of the window. To change the the text's position, drag the text to rotate and Alt + Drag to reposition.

img

Step 4:

You can notice that the rotation angles are indicated on the lower right corner. For "You The Designer", rotate and angle to 25�?�º : - 26�?�º : 0�?�º

img

Step 5:

On the right panel, select Extrusion Options and change its Depth to 60. Choose Gloss and enter 20 as Outline Width.

img

Step 6:

On the Bevel Options, select Curved on the list and choose Round. Type in 35 as Bevel depth.

img

Step 7:

On the Shadow Options, uncheck Shadow to turn off the effect.

img

Step 8:

To change the highlight colors, click on the Show/Hide Lighting (Ctrl + Tab) on the upper part of the window. It's indicated as a light bulb button.

img

Step 9:

The window now shows you detailed lighting using 3 arrows. Drag the arrows to change the lighting position. Double-click each arrow to change the color of the lighting. You can follow the exact color details as shown below:

img

Step 10:

Press Ctrl + Tab to see the preview of the text, save the project and export it as PNG. To do this, go to File > Export. Select "True color 24-bit" and save it as PNG file.

img

Step 11:

Do the same steps with the letters ".COM" with rotation angles -50�?�º : -30�?�º : 0�?�º which you need to save in a separate file.

Open Adobe Photoshop. This is where we will enhance the design of the texts.

Adobe Photoshop

Step 12:

Create a new file in Photoshop. The document is sized to 1500 x 1300 (but you may crop the document in the future).

img

Step 13:

Create a Background layer.  Add a layer style and choose Gradient Overlay. Choose the gradient style Black to White and adjust the Angle to 101.

img

Step 14:

For a textured background effect, duplicate the background layer and choose Filter > Render > Clouds.

img

Step 15:

Set its Layer Transparency to Multiply with 20% Opacity.

img

Step 16:

Open the PNG files exported from Xara3D. Copy and Paste them on the document.

img

img

Step 17:

Now we will be creating the letter face. There are two ways to do this 1) using Pen (trace the letters) or 2) Text tool (type the letters and just adjust them to fit the base by selecting Edit > Scale/ Skew/ Perspective.)

img

Step 18:

We're now going to apply the glossy effect on the face. We need 4 Layer styles to achieve this. Select Add Layer Style and apply the following settings on each letter:

DROP SHADOW:

img

BEVEL AND EMBOSS:

img

BEVEL AND EMBOSS > CONTOUR:

img

GRADIENT OVERLAY:

img

STROKE:

img

This is how a letter should look like:

img

Step 19:

Apply the same effect to all letters. We just changed the colors for the letters "u" and ".COM" under the Gradient Overlay style.

img

Step 20:

If you want a mirror reflection effect below the texts, repeat the steps in Xara 3D (Steps 1 - 11) and import the PNG into the document. Just change the rotation angles so the text would look like a mirror reflection. You should come up with this result:

img

Step 21:

Apply Gradient Overlay to the reflection layers then select the Black to Transparent gradient. Make sure to change the angle so the gradient colors will appear diagonally.

img

This should be the result:

img

Step 22:

For the shadow and blur effect, duplicate the layers ".COM" and "YTD 3D" three times. 1 duplicated layer is for the shadow and the other 2 layers are for the motion blur effect. To avoid confusion, you can rename the layers like illustrated below.

img

img

Step 23:

On your keyboard, hold on the CTRL key and click the "YTD 3D Shadow" layer. The exact shape of the text will be highlighted.

img

Step 24:

Press Shift + f5 or go to Edit > Fill > and choose Black.

img

Step 25:

The YTD Shadow layer is then filled with Black. Move the layer using the Move Tool so it will appear like a shadow behind the text.

img

Step 26:

Apply Gaussian Blur on the YTD Shadow layer by choosing Filter > Blur > Gaussian Blur. Adjust its radius to 10.

img

Step 27:

Set the Layer Opacity to 20%. Do the same procedure to the ".COM Shadow" layer.

img

Step 28:

Now we proceed to the Motion Blur effect. Select the first duplicated layer named "YTD 3D Blur 1?. Then go to Filter > Blur > Motion Blur. Enter 10�?�º for the Angle and 123 as Distance. Set the Layer Transparency to Soft Light with 75% Opacity.

img

Step 29:

Next is the second duplicated layer named "YTD 3D Blur 2?. Again, go to Filter > Blur > Motion Blur and set the angle to 90�?�º with 123 Distance. Change the Opacity to 40%.

img

Step 30:

Follow the same steps of Motion Blur to the Layers ".COM Blur 1? and ".COM Blur 2?. Just change the Angle according to the position of the text. Here is the result:

img

Step 31:

We will apply a bit of separation between the text and the background. To do this, create 2 white ellipse symbols and place it behind the 3d texts. Rotate the symbols using using Free Transform (Ctrl + T).

img

Step 32:

Apply Gaussian Blur by selecting the 2 ellipses and go to Filter > Blur > Gaussian Blur. Rasterize the shape when you are asked to then set the radius to 50. Set the layer's transparency to 40%.

img

Step 33:

To add finishing touches, we will add Photoshop Brushes to the background. For this typography, we used Euphoria Brushes from Brusheezy.com. Apply different strokes and opacity to achieve an abstract design.

img

Step 34:

We're almost done! Let's apply a different color theme for this document by Creating a new fill or adjustment layer located on the Layers panel. Make sure you put this layer on the top of all layers. Modify the Curve for individual channels by dragging the lines. Set its Opacity to 75%. For the Curve setting, you can follow the graph below:

img

img

Step 35:

To make the image more detailed, let's sharpen the whole document but you need to flatten all the layers first, so make sure to save the editable file before doing so. To flatten the image, go to Layers > Flatten Image. Then to sharpen it a bit, go to Filter > Sharpen > Smart Sharpen. Set the amount to 145 and radius to 0.5.

img

That's it! This should be our end result.

3D Typography

subscribe to newsletter