10 Original 3d Text Tutorials

3d text in Photoshop can be tough, especially making a really nice looking composition. I have looked around the web and I have seen a lot of 3D text that is 3D, but it doesn’t quite blow you away. Below you will see 10 different ways to make 3d text that are stunning.

Click on each title to view the tutorial on how to make that effect. You can click on the images themselves to see a larger version of the image.

1. 3d text with a splash of awesome

3d Text with water
Stunning 3d text in Photoshop with a realistic water effect

2. Shiny colorful 3d text

shiny and colorful 3d text
Create this stunning colorful and shiny text effect with this Photoshop tutorial

3. Realistic Grassy 3d text

Create this visually engaging nature themed 3d text effect

4. Ice Flavored 3d text poster

Create this delicious thirst quenching ice 3d text effect

5. Explosive 3d text design

3d text effect that is so explosive, when your boss sees it you might get a raise

6. Shockingly real 3d text

Why is there a huge piece of text on my couch? Find out in this Photoshop tutorial

7. Sparkly glass 3d text effect

Less is more with this clean and elegant 3d glass text effect created in Photoshop

8. Clean 3d text with highlights

Great 3d text with highlights (3d highlights, not the Ryan Seacrest ones)

9. Painterly 3d text in Photoshop

This 3d text effect looks painterly but can also look a bit like ice

10. Elaborate organic 3d text effect

Design Basics Part 1: How to design

Design. How do you design something that apeals to the person looking at it and achieves the goal you are trying to achieve?

Well, lets look at the goal of a good design, the main goal would be to communicate to the viewer the idea you want to communicate. This may be indirect, very direct, or even hidden.

Take the Google home page for example, what are they trying to communicate with the design? Well each person who saw it might tell you what they get, but what I get is “simplicity” the design communicates that to me and I myself like a search engine that is simple so I use Google like so many others.

Google Search (Entire page):

Google search home
Yahoo Search (Entire page):

yahoo

If you wanted to communicate that your website has many different services and show that on your homepage, you might get a design like Yahoo where the home page is so loaded that to me it overwhelms me. Someone else who might like lots of links might really enjoy the design. Thats the point, you want to communicate your message with the design.

For your design to be a success, you would want to communicate the message that will pull peoples interest (People that you are selling to) and then deliver your product. As an illustration: You want to design something that sells computers. You design something that looks old fashioned, the only people you will be selling to is people who like old fashioned things – not computers. Doing this, you will lose sales and the design is a bomb (Not the Bomb, like it should be).

To be successful to sell computers you would have to do a design that communicated what a person buying a computer likes about a computer, to find this out you need to survey those kind of people and find out what they like. But surveying is a whole additional subject. Once you have surveyed and found out what the people who would like computers like about computers that makes them interested in buying computers you can do the design correctly. You then do your design in a way that communicates what would make the person buy.

Knowing the data mentioned, you can do a successful design, providing you know the basic rules and techniques of the area you are working in. The basic rules and technical skill in the area you are working in are necessary to do a good design.

Here are some examples of the technical skills necessary for some areas of design:

Book cover design:
Basic design rules
Photoshop or Indesign (Or any of the programs for designing images)

Internet design:
Basic HTML (So you know what can be done)
Photoshop or ImageReady
Flash (for designing Animations)

Interior Book Design
Photoshop
Indesign or Quark
Basics of Typesetting and Typography

The better you know your technique, the better you can execute your ideas for the medium being designed for.

9 Simply fancy JQuery plugins

I just stumbled on this great website which has very useful and simple jquery ajax applications. I will review each here in a simple way so you can see all of the useful information. This website shows a video tutorial, a text tutorial and a demo for each of the ajax applications.

Please keep in mind that you should use these design elements sparingly and tastefully. Using too many effects in your webdesign can be tacky and detract from the overall design.

To begin, here is the website: http://jqueryfordesigners.com/

Ajax image carousel

This creates an endless carousel with an html list. It also displays a very smooth scrolling effect. This is very simple to set up and uses jquery. Here is an image showing the carousel. View the code and tutorial here.

Jquery Ajax Infinite Carousel

Ajax smooth slidedown

This shows you how to make a smooth div slidedown effect without the initial jump. This can be used for many cool ajax effects. View the code and tutorial here.
Ajax smooth slidedown

Ajax smooth data changer

This creates a panel that automatically switches out a list of divs. A very nice effect for blog or website sidebars that want to show rotating pieces of information in an attractive way. View the code and tutorial here.
Smooth data changer

Ajax Smooth Image Fade

I myself have always wondered how to do the smooth image crossover fade and this tells you how to do it. The effect is very nice on buttons, menus and even images on display. View the code and tutorial here.
Ajax Image Fade Effect on a menu

Ajax Sliding Tab Effect

This is a great effect for teb boxes. I see it cropping up all over the web now days. Use it for tabbed browing of information or even arrow based browsing (arrows on the left and right). View the code and tutorial here.
Ajax Tabbed Slider

Very Sleek Tooltip Bubble

Very nice use of the JQuery puff effect. This shows an informational popup over the area you want when the user mouses over the area specified. Good for tooltips, information divs and any other popup application. View the code and tutorial here.
Sleek Ajax Coda Tooltip Jquery

Loading a Large Image with Ajax

You have seen progress indicating gifs show up while a large image is being loaded. Ever wonder how to do this? This tutorial tells you how to do this and have complete control over how the image loads. I do not have a picture of this as this tells you how to load any image with ajax. View the code and tutorial here.

Slideout Side Menu Effect

If you have been to the Apple website recently you might have seen this in action. This gives you an interactive side menu. When a user hovers over one of the menu dividers — that menu shows up. Very nice effect (play around with the demo). View the code and tutorial here.
Apple style Ajax Slide out Sidebar Effect

Ajax for Instant & Server Side Form Validation

Most of the new “Web 2.0” websites have very fluid forms. This is because of the fact that you can lose user’s interest in registering or even buying if it is too hard to fill out the form. I myself have left websites because I found it very hard to get the form to validate. This tutorial shows you how to make a form that validates on the fly, including doing server side calls for user names and such. Quite useful for streamlined user registration. View the code and tutorial here.
Ajax form validation jquery
There more tutorials and demos on this site regarding Ajax and JQuery. The ones selected here were selected because I thought they could be very easy and useful for web designers who want to have a design edge without haveing to spend too much time coding ajax effects.