Advertisment
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.
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!
Thank you very much for this great tutorial, it was very help full, good written and easy to understand! Hope to read more from you.
Cheers Yves
Good site. The useful has replenished a lot of. I wish the further advancement I Can tell with confidence that the resource will develop
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] July 2009Stex treadmill / Good News BlogFebruary ” 2007 ” Sue Heintze's BlogUnique 3D Text – Xara 3D + Photoshop Tutorial | Graphic and …Precor 846I-R Recumbent Bike ReviewBombergerPT: Blog: Save Your Joints!My Beautiful Creations: In [...]
Great reading! Thanks for sharing
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial | Graphic and …Precor 846I-R Recumbent Bike ReviewBombergerPT: Blog: Save Your Joints!My Beautiful Creations: In The River2nd Chances: Do Any of Us Have Enough Of IT?David AdewumiEvil Slutopia: Shopping for Fitness is More Fun Than Actual …Running Bébé: My So-Called Race ReportFashionista Fitness: The Best Workout for You | The Style …Markus Random Thoughts : Sears Black Friday 2008 Advertisement [...]
wow Great article, thanks!
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
3D
nodi´s last blog ..গৌরনদীতে যাত্রা শিল্পীদের ওপর হামলায় ৫ জন আহত
xara 3d soft
Thanks a lots for the tut but can u pls help me with the Xara 3D? Everytime i use it,the background always displayed the “X3D Demo” text.
Here’s one exp >> http://upnhanh.sieuthinhanh.com/userimages/images/sieuthiNHANH20100103253nzliodrkzt108439.jpeg
I just can’t make it disapear.Could u help me out?
I LOVE THIS, BUT I WOULD LOVE TO FILL THE LETTER FRONTS WITH DIFFERENT TEXTURES, HOW DO I DO THIS PLEASE?
I have just got Xara6 and cannot remove the logo to start a new file, help please
[...] Unique 3D Photoshop Tutorial [...]
Go to madmediamonkey.com
it has cool free stuff
I saw an article today that hopes these types of devices or applications may be the saviour for the newspapers. I still have my doubts because you don’t need a kindle to get your news, it’s still free online.
very nice tut.
thanks..
I have to agree I tried that other tutorial before I found yours and could not get my text from Xara to PS. It was saving it as an index file which was locked. In the other tutorial he does not explain how to export the file. Thanks for the tut, it has opened a new way of designing for me.
Such a lovely, nice, great effect.
I mostly like the purple background and the letter “y” with it’s green effect and low white brushes is soo great.
Thank you very much for this nice effect, I will try to do it on my own :)
The .psd files are missing. But great tuto anyway
Murat Demir´s last blog ..Etat des lieux du Web 2009 par Akamai
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Photoshop Tutorial [...]
FGDYRU
Stunning tutorial
thanks from the http://www.photoshopcs5.co.uk/ team
very nice! thanks for tuts
kalendh
Stunning work. I’m going to try and work through it in my own time. I’m a little out of my depth here because I’m new to all of this Photoshop stuff but jumping straight in is the best way to learn.
Chris Jones – iPhone3GS´s last blog ..iPhone app saves UK users £250,000 in two weeks!
[...] 11. Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
Wow, i think i have some kind of special interest for anything related to 3d, games, animations, videos, films, and this is amazing, im trying it and will write the results here. Amazing and complete information dear colleage. Best wishes
Tanhee´s last blog ..Burning Rubber 3
Thanks for sharing this…
Neo´s last blog ..Eels wydaje nową płytę
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
nice tutorials. Thanks a lot for sharing this tutorials. now we use 3D text effects for this Xara 3D and photoshop tools in designing.
I have downloaded the letters and tried to open them in Photoshop.
By copy and paste them just like it is explained in the tutorial.
But it didn’t worked.
Can I use photoshop CS4 for this?
Or is this not the right one?
Thanks for explaining about Xara 3D and photoshoop tutorial here I t will be useful for me in the future.
[...] Unique 3D Text – Xara 3D + Photoshop Tutorial [...]
Xara 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..
hey hey does anyone one know how i can make my logo image 3d? on xara i only know how to make it a texture. if any one knows how to make the image 3d and rotate please let me know heres the image url
http://viewmorepics.myspace.com/index.cfm?fuseaction=viewImage&friendID=81646081&albumID=756850&imageID=5248204
and if anyone can make it 3d and rotate it for me i would be VERY GREATFUL thanks
http://viewmorepics.myspace.com/index.cfm?fuseaction=viewImage&friendID=81646081&albumID=756850&imageID=5248204