<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar/33827473566918593?origin\x3dhttp://poptuts.blogspot.com', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>


POPTUTS tutorials



more?

POPTUTS ! was founded on the 19th of June, 2010 by Ariel. This website is no longer producing new tutorials, but feel free to continue finding help or tips to making graphics using the articles already posted. Rules below still apply. The purpose of this site is to teach beginner and advanced users of Photoshop/MS Paint the shortcuts and cheats of making graphics. Contact me.

RULES If there are any mistakes in the tutorials, or if you have a question, please contact me. You don't know how many hours of hard work I've put into these tutorials, so please refrain from stealing, redistributing, copying or claiming the images and text as your own. You're welcomed to comment on the tutorial you used to show me what you've made.



HOW TO CG 3D TEXT
In Photoshop CS4
A tutorial by Ariel

If you want to make your text look as if it's popping out of the screen, then you're at the right place. I won't be explaining all of the Photoshop basics here -- you have to be familiar with it or else you won't be able to understand the tutorial.

Before & After


Step 1
Open up Photoshop, then open up a fresh, new canvas.

Step 2
Click the Text Tool and type in the text in whatever colour and size you want. I've chosen the font Sniglet.
[click - pop up]

Step 3
Zoom in by hitting the Ctrl and + keys. Click on the Brush Tool. Change the colour of your brush to a slightly lighter colour than the base colour of your text.

Step 4
On a new layer, colour the top part of the text, where the "sunlight" will be reflected.
[click - pop up]

Step 5
Repeat Step 4 for a better effect. If you want your text to be shiny, add several different sizes dots of a near-white to each letter.
[click - pop up]

Step 6
To add more depth to your text, we're going to have to add shadows to it. Use the eye dropper tool on the base colour of your text, and then darken it. Use that colour to colour the ends of your text. When shading, make sure you colour the edges of the text to give it a "popping effect".
[click - pop up]

Step 7
If necessary, repeat Step 6 and add another layer of a darker shade on top of the lighter shadow.

Step 8
Hold down the Ctrl key while selecting the text layer and the 3D effects layer. Right click on the selected layers and click Merge Layers. Then, delete the Background Layer, to get rid of the white background. Now you have a transparent background!

Step 9
Right click Layer 1 and click Blending Options. Tick Stroke, which can be found on the bottom left side of the pop up. Change the outline to white, and make the size : 4.
[click - pop up]

Step 10
You can choose to stop here, or continue for a second outline.
Save and close your text graphic as .png. Then re-open it again in Photoshop. Right click on the layer, click Blending Options >> Stroke. Change the outline colour to the same as your base colour for your text. The ideal size for the second outline would be 1 px.
[click - pop up]


TA-DA!
A pretty, shiny, 3D text graphic to put anywhere on your site.

0 Comment(s) | Leave A Comment?
basecodes * beyondretro