Unique 3D Text - Xara 3D + Photoshop Tutorial
So hello again! It’s time for my first tutorial Ī’ve ever been made. I actually hope You will enjoy this one, and that will encourage me to do some more. We will use Xara 3D to get 3D text effect, then export text to Photoshop and add some style there. If You haven’t got Xara 3D, You can download demo for free ( 15 days trial) and You can read my review about Xara and their pros and cons. And yeah, If You don’t want to download program I will give You *.psd file with text elements, so You can skip Xara part and get straight to Photoshop retouching part.
Advertismets
Before we start here is what we will be creating today :
Click on image to enlarge
1.Xara 3D tutorial part:
1. Okay, let’s open Xara 3D programm. By default there will be “X3D Version 6″
1.1.Click on the Text options, press CTRL+A to delete existing text and type T, choose font, You like and press OK.
1.2. Now we will change text a little bit -
1. Click on Text toolbar, to get off that rounded circle;
2.Click on Bold - to make text little bigger;
3.Click on Lightning to show lightning arrows;
4. Click on Bevel options to change default Bevel settings;
1.3.
1.3.1. Change bevel shape to rolled to add little bit emboss effect;
1.3.2.Click to Round to round corners a little bit;
1.3.3. Change depth to 10 - to soften a little emboss effect;
1.4. Okay, now we will play with lightning and 3D effects.
1.4.1. Click on Text as shown and move Your mouse cursor to add any 3D effect while it is exactly as You want;
1.4.2. Click on the arrows and move them around to get glossy view and better lightning, if needed;
1.5.Okay, We are done in XARA, now let’s export text to Photoshop:
1.5.1. Click File-Export or CTRL+SHIFT+E to get export view;
1.5.2. Choose where to save file,then do check everything like picture below, to add transparency choose *.png format and in the options click Transparent checkbox;
Do this with every letter, change 3D effects, maybe colors - play with options until You are satisfied. I got 4 png files at the end, one for every letter - T,Y,P,E.
2.Adobe Photoshop part
If You are starting just from now on - click here to get *.zip file with all 4 *.png files.
I will use many Photoshop keyboard shortcuts, if You want to learn about most useful ones, read my article - 48+ Greatest Adobe Photoshop Keyboard Shortcuts.
1.step
1.1.Create a new document, call it TYPE, I used 1000×750 size.
1.2.Open T document in photoshop, press CTRL+A to select all, then CTRL+C, open Your TYPE document and press CTRL+V to drop it in the document;
1.3. resize text with CTRL+T and holding ALT+SHIFT to resize from center point and to resize it proportionally, rotate it to get better result;
1.4. Repeat those steps for all 4 text documents until You got result similar like mine:
2.step
Now lets create some background,click on background layer to make it active:
1. Press G to activate gradient editor;
2.Click on radial gradient;
3.And then double click on the gradient editor, to get gradient editor;
4.Choose Foreground to background;
5.Use color codes to get output as mine:
copy those RGB codes and use them:
#f8b1d7
#8871a1
Now click and pull Your mouse like in the picture to get same result:
3.step
Now let’s add shadow to create more realistic effect:
1. Select all four text layers - easy technique is to select first layer, hold SHIFT and select on last layer You want to select, then right click and press duplicate;
2. Now press CTRL+E to merge those layers into one, rename it - shadow and move it below all text layers.
3. Hit D to reset foreground/background color;
4.CTRL+CLICK on the shadow layer to select it, then press ALT+DELETE to fill it with black color;
5. Hit CTRL+D to deselect layer;
6.Go to Filter–>Blur–>Gaussian Blur and type 10 to radius pixels, hit OK;
7. Change opacity to ~40% to soften shadow;
4.step
I added more shadow to make it more realistic, You can skip this step if You want:
1.Click on Elliptical Marque tool and change feather to 50px;
2.Hit D to reset background/foreground color;
3. Click CTRL+SHIFT+N to create a new layer;
4.Click and drag marque tool below the letters, then change opacity to ~20-40%;
5. step
In this step we will add some colors to actual text, I took idea here actually from Nick Ainley’s work -
1.Double click on T text layer to get blending options:
Check everything as in the pictures below, to get different colors just play with gradient overlay:
2. Okay, now You have one text nicely colored. To copy layer style –> right click on the layer - click “copy layer style”;
3.Click on the other text layer - right click and “past layer style”, just change gradient overlay colors to get different results;
My result is like this:
6.step
Okay now lets add some more interesting background and styling:
1.Download those curvy line brushes - of course, better is to make those curves in Illustrator and then just import to Photoshop, but I will not bother You to do it now. I am sure You want to get faster to the final illustration.
2. Load brushes into just by double clicking and find them clicking F5 - to get brushes panel.
3.Click CTRL+SHIFT+N to create new layer and move it to top of all layers.
4. I used white background color.
5. Now change opacity to ~60-70% and click E, to grab eraser tool and erase few places to get effect that those lines are rambling through the letters:
Do this in big zoom ( click ALT+ Mousewheel to zoom in/out), so You can erase lines more precise:
Repeat those steps, add some blending options to get Your own unique results!
This is my final result:
If You couldn’t do something, check out my *.psd file - click here to download.
If You couldn’t do anything - please ask, I will be here to help You!
This is my first tutorial, so I want to ask You, or anybody wants to see tutorials like this in future?
And after complains about tutorial freshness I’ ll link to Nik Ainleys post which is likely similar like mine.
Didn’t meant to do so, but ok - You’ll better read his tutorial if You know Photoshop and Xara 3D good enough, You can read there nice techniques how to polish 3D text in Photoshop.
I think my tutorial is more for beginners explaining and telling step-by-step what to do and also I am trying encourage You to download Xara and at least try it!
So here compare tutorials and take Your pick.
Dominik
T10
valery
Аркадий
replicabestwatches
tip
intatuixtup
david
azwinner
great tut! That’s your first? Awesome!
adelles last blog post : Inspire yourself with Graffiti Art
@adelle totally, yes..:) Thanks!
Thats your first tutorial Adelle? Thats quite impressive, i was expecting a normal photoshop begginner text effect for a first tutorial, but you have kind of made it much more complicated (in a good way) but anyways, amazing tutorial, their wasn’t one step in that guidance I never understood at all, very well explained. Hope to see more tutorials from you Adelle!
@Antonwoods my apologies, but this is my first tutorial not Adelle’s..:) It’s hard to read if review is adressed to other person, but anyway I appreciate Your comment!
Nice tutorial Dainis, I’ve seen this kind of thing a few times before but I think yours is the best explained. Hopefully we’ll see some more tutorials from you soon
ps. Nik Ainley has been Xara 3D’s best marketing tool
Rosss last blog post : Stylish Floral Typography
Really Nice Effect, good tutorial thanks.
Great tut Dainis. Nicely explained.
Look forward to seeing a lot more =)
Best of luck.
~Jay
Fantastic Dainis! Very well explained, and great result.
@Ross I really appreciate Your words! If there is so much good words, I will surely keep creating new tutorials
I think Nik was one of the first who used this technique, totally agreed! 
@Max thanks for passing by! You’re welcome.
@Jay thanks!! There surely will be more
@beets again thanks for Your great words!
Very nice!
Jankos last blog post : Turn postcard photo into a stunning comment form using CSS
nice Dainis:) that tut is hot;)i like it.keep up the good work buddy!!!
Ronald
NaldzGraphicss last blog post : Create a Billiard Balls in Photoshop
@Janko Thanks!
@Ronald I really appreciate Your words, I will
You too keep up ,see you!!
Great tutorial! I’m hoping to use this to help create my own stuff very soon. Thanks
Wow, Cool tuts.. I can’t wait to try this tutorial. I want to create those 3D text since i saw Nik Ainley design. I’ll try this tut tonight =) bookmarked!! & Subscribed!!
@CoolProducts Thanks! You just need to try! If You can’t do something just ask!
@Tay Zar Yeah, Nik Ainley’s designs are just amazing! Thanks!!! Good luck!
I use Paint Shop Pro XI, can you change the brushes into images so i can use them. thankx. i think u can see my email, if not it is jon.watkins@yahoo.com. Thankx again.
Jonathan actually those brushes I used are just for example - You can use any brush You want with this technique.
Great tut, very detailed with a great outcome!
Matthew Heidenreichs last blog post : Retro Dark Blue Header Design
I kind of figured that, but when doing a tutorial for the first time, I like to, follow exactly as possible. Does that make any sense? I mean, besides using paint shop pro, i would like to do exactly what you’re doing, substituting when necessary.
@Matthew Cheers! Hope You will learn something new too!
@Jonathan I understand You, but in this case no matter which kind of curves You use, so I just found free vector swirly curls resources, You can grab from:
http://www.deviantart.com/#catpath=resources/vector&order=9&q=swirls
@Dainis Graveris thankx.
[...] Unique 3D Text - Xara 3D + Photoshop [...]
thanks a lot… for a very nice tutorial… I hope you make more tutorial
Dainis Graveris, very much thanks bro…
You’re welcome
Sure thing I will create some more 
[...] 11. Unique 3D Text - Xara 3D + Photoshop Tutorial [...]
[...] Eine kleine Ausnahme bilden der Text von The Creativity Wallpaper und das Ergebnis von dem Unique 3D Text, bei dem Xara 3D und Photoshop zusammen spielen. Xara 3D ist eine auf 3D-Schrift spezialisierte [...]
[...] Unique 3D Photoshop Tutorial [...]
[...] Ver Tutorial [...]
I’ve been trying to export that x3d file, and tryed to save it but it doesn’t work for me. I don’t get the export window as you do, it only shows a normal save as window and if i try to save this as PNG, JPG or any other format it doesnt work.”what the..”am supposed to do about this. anyone having a clue?
I’m so stupid, I did forget to name the file. Sometimes i just wonder what this head is for? thanks
Huh, so You solved the problem or I need to check it again???
yes I did solve it. apparently I forgot to name the file and it was doing nothing. spoke to soon, anyway thanks for the great post. I’m going to experiment on this for a while.
my result
[URL=http://img363.imageshack.us/my.php?image=3dshitcopypb3.jpg][IMG]http://img363.imageshack.us/img363/6263/3dshitcopypb3.th.jpg[/IMG][/URL][URL=http://g.imageshack.us/thpix.php][IMG]http://img363.imageshack.us/images/thpix.gif[/IMG][/URL]
[...] Vous vous êtes surement rendu compte de l’augmentation des créations graphiques à base de typographies 3D. Dans cet article, vous trouverez de très bons tutoriaux afin de réaliser ce type de créations. Cliquez simplement sur une image pour vous rendre au tutoriel correspondant [...]
[...] Unique 3D photoshop tutorial [...]
[...] Unique 3D Text - Xara 3D + Photoshop [...]
[...] Unique 3D Photoshop Tutorial [...]
[...] 个性的3D Photoshop文字特效教程 [...]
Thanks a lot, i was looking this kind of tutorial TYPO so long.
Thanks again,
Stefan
3DS Max Tutorialss last blog post : How to create 3D flash photo gallery
thank u r information
it very useful
[...] Unique 3D Photoshop Tutorial [...]
Thank you so much for this wonderful tutorial. Well explained & easy to follow, thank you.
This tutorial is indeed nice. But the bad thing its almost completely stolen from a designer. I hate this crap.
Why do u STEEL a tutorial and repost it with your own things? and dont give credits to the original tutorial. for all ppl who are interested in finding the original tutorial watch on
http://www.shinybinary.com/
Thanks people for good words!
@Jeroen before You start to yell about tutorial You could compare those tutorials and I mentioned Nik Ainley excellent pick of blending tools too, if You read carefully. I did and explained everything from Xara 3D until Photoshop, opposite to following tutorial. Enjoy!
I tried this tutorial last night. You can check my outcome here. Anyway, Thanks for tutorials.
Oh, that’s really good
Glad someone really downloaded Xara 3D 
[...] Unique 3D Photoshop Tutorial [...]
Great tutorial Dainis! Have been using Ulead’s 3D product, but have to remove background in Photoshop (not too hard to do, but I like that you can export transparent in Xara as you show). Cool brushes you pointed out too, thanks again!
Now I’m off to check out your business cards post!
Dean Kennedys last blog post : Rhythm of Three
[...] is 3d text tutorial…. Unique 3D Text - Xara 3D + Photoshop Tutorial | 1stwebdesigner - Love In Design ~~Be strong now, because things will get better…. it might be stormy now, but it can’t rain [...]
Jeroen’s words were a little harsh, but the point is, Dainis, your tutorial was inspired by Nik’s design. Perhaps a nod to him and his tutorial mentioned at the beginning would have be more appreciative of others’ artwork?
@Htoo Tay Zar - nice outcome! Thanks for showing Your outcome
@Dean Kennedy Thanks, I like easy transparency creation too in Xara 3D, also color settings are very interesting.
very excellent keep it up ..
Text Effects last blog post : 20+ Great Photoshop Text Effect Tutorial
[...] es un efecto que he estado observando mucho últimamente, en 1stwebdesigner.com hay un buen tutorial que me sirvió de inspiración para escribir este, el único inconveniente es [...]
wow gr8
[...] blog Photodesigners ha hecho un buen trabajo de adaptación y traducción de un tutorial visto en 1stWebDesigner sobre el famoso efecto de texto 3D con algunos toques [...]