Unique 3D Text – Xara 3D + Photoshop Tutorial
Dainis GraverisSo hello again! It’s time for my first tutorial I’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.
Before we start here is what we will be creating today:
Click on image to enlarge
1.Xara 3D tutorial part:
- Okay, let’s open Xara 3D programm. By default there will be “X3D Version 6″
- 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!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
zenaire
Posted 896 days ago 52Xara is new one of course but looking at your work I must need that. I will try the demo first of course. Thanks to them who introduce us to some amazing software..The thanks goes to you too..
Dainis Graveris
Posted 929 days ago 51@Rusli Zainal sure, just make sure you link to this page as original and give credits – then it will be okay.
@Alex i didn’t understand you, maybe you need to use another font or you just didn’t check all settings carefully in xara 3d before exporting on PS?
Rusli zainal
Posted 953 days ago 50Dainis, I am planning to translate this tutorial and publish it in my blog so will be benefits for other who dont speak english, I’ll let you know when translation is ready, and will ask your permission, thanks
.-= Rusli zainal´s last blog ..Kontroversi SEO Kontes =-.
psdlovers
Posted 957 days ago 48thanks for the tutorial…but can i share it on my site? ill give you full credits.
Dainis Graveris
Posted 957 days ago 49@psdlovers sure thing, just don’t forget about linking and credits and I don’t think we’ll have any problems :)
Gus Yehia
Posted 997 days ago 47reading and practising it, great work, mate
Gus Yehias last blog post : Is sulumits retsambew an alien?
Denise
Posted 1011 days ago 46this is so awesome TnQ so much…the best tut I’ve seen on this 3d font effect…great stuff!!!
Denises last blog post : New Release day @PDW!!!
zeta
Posted 1025 days ago 45You have nice writing skills!
I enjoyed very much the use of shortcuts, every tutorial should be written that way.
Very nice effect!
please show me some more!!
Zeta
jose
Posted 1025 days ago 44hello thank you very much for tutorial
but idon’t have photoshop i need to make the letters FPOC
please if you do for me thank you thank you
Lawrence77
Posted 1103 days ago 43hi friend,
i think you remember me… :)
There are lots of spam comments in your blog, try to stop that by anyone of the method!
thanks..
Lawrence . J
Jene
Posted 1107 days ago 42This is a great tutorial, step by step and explained well. There is nothing more frustrating than getting half way through a tutorial only to find you don’t understand something or there is a step missed. Thank you and I look forward to more tutorials from you.
Kirsten
Posted 1116 days ago 41Just so you know you’re out of bandwidth so I wasn’t able to download the 3d text file, but great tutorial nonetheless :) Thanks!
Dainis Graveris
Posted 1119 days ago 40@Penske there is also option – Fit to width, and max font size 288pt to me. Maybe You did something wrong in export settings?
You put file size to “Current windows size”, maybe you’ve got user defined size and it’s small, I can just guess too. Check out step 1.5.2.
Penske
Posted 1119 days ago 39Yeah I did… it only let’s me go to 400%! Once I go that big then go back to photoshop, I get the same problem… it’s beating my brains out! I have no clue how to fix it or what’s wrong!
Penske
Posted 1120 days ago 37I had a problem… after I saved the .PNG image I opened photoshop, new document, opened .PNG image, then tried to import it to the new document…unfortunately the letters came out real small on the new document… if I try to expand/resize the letter it’s really pixelated! What am I doing wrong or what can I do to correct this?
Dainis Graveris
Posted 1120 days ago 38@Penske You should just create bigger letters while working still in XARA, just use bigger font size.
Text Effect
Posted 1161 days ago 36very excellent keep it up ..
Text Effects last blog post : 20+ Great Photoshop Text Effect Tutorial
Dainis Graveris
Posted 1172 days ago 35@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.
Austin Shaffer
Posted 1172 days ago 34Jeroen’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?
Dean Kennedy
Posted 1177 days ago 33Great 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
Dainis Graveris
Posted 1197 days ago 32Oh, that’s really good :) Glad someone really downloaded Xara 3D :)
Htoo Tay Zar
Posted 1197 days ago 31I tried this tutorial last night. You can check my outcome here. Anyway, Thanks for tutorials.
Dainis Graveris
Posted 1201 days ago 30Thanks 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!
Jeroen
Posted 1203 days ago 29This 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/
HENNA
Posted 1205 days ago 28Thank you so much for this wonderful tutorial. Well explained & easy to follow, thank you.
Matthew
Posted 1214 days ago 27thank u r information
it very useful
paul
Posted 1220 days ago 26yes 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.