Você está na página 1de 27

Step 1:

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

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.

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.

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

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

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

Step 7:
On the Shadow Options, uncheck Shadow to turn off the effect.

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.

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:

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.

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).

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.

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

Step 15:
Set its Layer Transparency to Multiply with 20% Opacity.

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

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.)

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:





This is how a letter should look like:

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.

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:

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.

This should be the result:

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.

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.

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

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.

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

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

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.

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%.

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:

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).

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%.

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.

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:

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.

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

Read more: http://www.webdesign.org/photoshop/3d-effects/3d-typography-tutorial-using-