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

Stunning 3d text in Photoshop with a realistic water effect

2. Shiny 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

Would you like to know how to create this effect in 5 minutes? Well it is a pretty easy effect to create. This tutorial should give you some ideas on how you can layer color with some photoshop effects to create interesting images for backgrounds or desktops or for use in designs.

Final Color Effect

The image below is the starting point for this effect. It should come of some surprise that we are using this flower graphic. In reality you can use any kind of image with a lot of dark and light areas, so if you want to go ahead and use an image of your choosing. If you download the tutorial file at the end of this tutorial, you will find the same flower image used here. (Flower photographed by me and can be found in larger sizes here: flower graphic).

Original Flower graphic

Open the flower image in Photoshop. To get ready for this tutorial, ensure your Toolbar and Options bar are showing by going to the “Window” menu and then make sure “Tools”, “Options” and “Layers” are checked, meaning they are visible.

In the “Filter” menu go to [Blur->Motion Blur] menu and click “Motion Blur”. Ensure that the “Angle” setting is set to “90″ and that the distance setting is set somewhere close to “400″. This will be the base of our final color effect.

Motion Blur

Click the new layer button in the “Layers” palette to create a new layer above the existing one.

Click the new layer blutton on the bottom right

Now that you have a blank layer to work with, ensure the new layer is selected in the layer menu and then go to your toolbar and click the gradient button which looks like this:

After you have clicked the gradient button in the toolbar, click the gradient dropdown in the control bar (Located right below your menu). Click the rainbow gradient on the bottom left of the gradient dropdown.

Gradient dropdown box

Ensure that the layer you created before is still selected. Now drag the mouse from one end of the image to the other end of the image. Your image should look like the image below.

This is How the Gradient should look

Now set the layer’s blending mode to “Overlay” using the blending mode dropdown in the “Layers” pallette as shown below. Then make a third layer in the same way we made a new layer before.

Set the blending mode to "Overlay"

With the third layer selected, go to the “Edit” menu in the main menu and click “Fill”.

Click Fill

The “Fill” dialog will show up. Select “Color” in the “Use:” dropdown. The color picker will pop up, select a black color in the color picker.

The "Fill" window

You will notice that the third layer is filled with black, this is correct. Next click the eraser button in the toolbar. It looks like this:

Once you have clicked the eraser, click the “Brush” dropdown in the control bar as shown below. Set the “Master Diameter” to 400 px and the “Hardness” to 0%. This will give you a large blurred eraser brush.

The Brush Dropdown

Using the eraser, drag along the top part of the black to reveal the image below it. Your image should now look like the image below with the exception of the large circle which indicates the eraser brush.

Your image should now look like this

Finally, set the black layer’s opacity to somewhere around 60%.

Set the layer opacity to 60%

Your image should look like the final image.

You can use these techniques to create many forms of color and look, just alter the image used at the beginning or try a different filter than “Motion Blur”.

Resizing images in photoshop is a subject that a lot of people ask questions about. Resizing is very easy with the newer versions of Photoshop.

The correct way to resize an image is through the Image Size window. Go to the main menu then [Image->Image Size] a window with various settings will appear:

When resizing an image you need to determine whether you are enlarging it or reducing it’s size. Using the wrong settings for either can result in non-optimum image resizing.

1. Ensure that the “Constrain Proportions” settings is checked “on”

This will ensure that when you resize your image, it won’t get stretched in any way while resizing the image. If you want to change the image proportions, you can do this later using the crop tool or the canvas size window which I will mention later in this tutorial.

2. Ensure the “Resample Image” setting is checked “on”

When Resample Image is set to on your image actually changes size when you change the image dimensions under “Width” and “Height”. If you try to resize the image with the Resample Image unchecked the only thing that will change is the resolution.

A note on resolution: The resolution of an image can be changed without resampling the image. If you change the resolution without “Resample Image” setting on, all this will do is change the width and height of the image in inches (or whatever measurment you set it to). The images pixel count will remain exactly the same. When the Resample Image setting is on the images pixel count will change. I will illustrate this below.

As you can see, the “Resample Image” setting is important when you want to resize an image.

3. Decide if you want to “Scale Styles”

If you have an image with 1 layer, you can ignore this setting. The “Scale Styles” setting tells Photoshop whether to scale styles on layers. For example, you can put styles on layers, Stroke, Bevel, Drop Shadow, Etc.

If Scale Styles is on, strokes and drop shadows settings will increase appropriately to the new size. If you have a small image with a 1 point stroke and you scale it up, the stroke will get thicker in the correct proportion. If you resize the image with “Scale Styles” off the stroke will remain at 1 point no matter  how big or small you make the image.

The above image illustrates the use of the “Scale Styles” setting. As you can see, this setting is only important if your image has layer styles in it.

4. Set the correct scale setting

Choose from the dropdown a correct scale setting. I will list the settings and when they should be used:

Nearest Neigbor: Use this setting when sizing images with hard edges. Images with solid colors and sharp lines will best be resized with this setting. Do not use this setting for Photographs.

Bilinear: Some pictures can be upsampled pretty well with bilinear interpolation. But we usually use one of the bicubic options below instead.

Bicubic (Best for smooth gradients): Bicubic is the best for photographs and smooth colors. Photoshop gives you 3 different bicubic settings. I suggest using either of the 2 below for resizing your images unless you have a lot of smooth areas in your image with blurred adges.

Bicubic Smoother (best for enlargement): Use when enlargement of images, using this setting will produce the best for making images and photos larger because it smooths out the image a bit to produce better detail quality.

Bicubic Smoother (best for reduction): Use when reducing the size of images, using this setting will produce the best results for making images and photos smaller because it keeps the feeling of the original sharpness of the image.

5. Set the new size for your image and press OK

You can change the size of your image in numerous areas. You can change any of the numbers under “Pixel Dimensions” and any of the areas under “Document Size”. You can change any one of these settings to change the image dimensions. Now click OK and your image will be resized.

Image resizing Summary

1. Ensure that the “Constrain Proportions” settings is checked “on”
2. Ensure the “Resample Image” setting is checked “on”
3. Decide if you want to “Scale Styles”
4. Set the correct scale setting
5. Set the new size for your image and press OK

An additional Note: You can resize images in your Photoshop file by using the Free Transform tool, be sure to set the correct Image Interpolation setting by going to “General” in the Preferences Window and choosing the right setting as gone over under step 4 above. When resizing with the Free Transform tool hold down “Shift” to keep the image proportions the same (Prevent stretching the image).

Now that I have shown you how to properly resize an image in Photoshop I will show you how the Canvas Size window works, so you know the difference.

Canvas Size Window

The Canvas Size Window allows you to crop an image using the width and height dimensions.

The canvas size window is much simpler than the Image Size window.

First change the width and height to be larger or smaller.

Next set the anchor where you want it. If the anchor is in the center, the width or height will be added or removed equally around the image. If the anchor is on the right in the middle, any changes to the width will happen to the left of the image. You have 9 different anchor positions depending on what you want to do with the image.

Finally, pick a color in the Canvas extension color area. This will set a color to any area you add to the image (See example below)

Below is an example of using the Canvas Size window to alter the left side of an image.

This image shows the original image on the left. The image in the center shows area added to the image with the Canvas Size (Red area added). The image on the right shows the left side of the image cropped with the Canvas Size Window.

Canvas Resizing Summary

1. Change the width and/or height dimensions
2. Set the anchor where you want it
3. Pick a color in the Canvas extension color area
4. Press OK

I ran across  a great resource for anyone who has a website (most everyone these days). The resource is a website that analyzes your website in minutes. I found it extremely revealing with regard my websites and how I can improve them.

Most SEO analyzing websites spit out a ton of confusing information that can be overwhelming if you are just trying to get some pointers on what to adjust or where your site can be improved.

Additionally, I just ran across a web client of mine who was asking a lot of questions about how to improve their website, I went through their site and gave them a list of things to improve. I later found this resource, tried it out and found gave similar instructions that a real person would give.

The website is websitegrader.com.

Website Grader will ask you for various information, but all you have to enter is your website url and a report will be generated pretty fast. Below are some of the pieces of information they give you about your site.

• Metadata, alt tags and heading tags
• How many Inbound links your site has
• Social media information, twitter and bookmarking popularity
• Conversion forms
• Overall traffic rank
• The reading level of your page content
• If you have a blog, that can be rated with http://blog.grader.com/ (same company)

Additionally they will give you an overall website grading from 0 to 100. The grading is not as important as the information it gives you about various parts of your sites presence on the web.

I suggest giving it a spin. Additionally, please let me know if it helped you out.

Website Grader.com has some great articles on omptimizing your website and increasing visitors:

• Website Redesign Tips
• Twitter Optimization
• A Great SEO Optimization Summary
• Lead Generation

I am releasing these free wood textures for use in designs. These are High-Resolution and are under the Creative Commons License. All of these textures are original and Photographed by me. If you use my textures, please link to my site.

These textures can be downloaded in different sizes by clicking on the links below.

Free Texture: Cross section of a wood log.

Free Texture: Detail of the top part of an old whiskey barrel.

Free Texture: Detail of an old red barn.

Free Texture: High detail of uncoated wood.

Free Texture: High detail of dark rough tree bark.

Free Texture: Varnished aged wood paneling.

This is my first set of free grunge textures. I just got a new camera and have decided to release grunge textures and some free photo stock. These textures are grungy and rough and can be used in any of your designs.

The next set of high-res textures I hope to release is wood detail. I find myself needing wood texture often, so I feel I should release a set of those as my next textures. I hope to have time to release a set of free images weekly.

If you wish to share these with others, please link to this post and not directly to Flikr. And of course let me know what you think by commenting below.

Note: To download, click on a texture photo and you will be directed to flikr where you can download the original texture size or smaller versions.

Free Texture: Extreme grunge paint texture.

Free Texture: Rough, grunge bumpy stone texture.

Free Texture: Grungy painted aged wood.

Free Texture: Grunge concrete texture.

Free Texture: Rough, Grunge paint splash concrete.

The Illustrator Pathfinder pallette is a simple and Powerful set of tools for manipulating shapes and creating other shapes from multiple shapes. I use illustrator on my Job all day; I find myself using the Pathfinder at lease once for each job I do.

I will first take you through the general information on how to use the Illustrator Pathfinder Pallete. I will then list all of the buttons with a description and a visual before and after.

Illustrator Pathfinder Basic Tutorial:

The Pathfinder palette is very simple to use. Each of the buttons interacts with 2 or more shapes. Each button has a very specific action. These buttons can be confusing because some of them do the same thing. I show examples later in this tutorial which aim at showing the differences between each button.

To begin, I will show you how to use the first button “Add to Shape Area” to make an obect out of a number of different objects.

1. Make a new Illustrator document and draw a circle, a long rectangle and then 2 smaller rectangles like the object you see below (The idea here is to make a simple “key shape” from multiple objects, using the pathfinder)

2. Click the “Add to Shape Area” button.

3. Click the “Expand” button. You will notice that all of the shapes are merged, but when you select the object you see all of the shapes that were there before. Clicking the “Expand” button permanently joins all of the shapes as one. You don’t have to press “Expand” after using the Pathfinder tools, only use it if you want to permanently join the shape so you can do other pathfinder operations with it (Which we will be doing in the next steps).

The shape will now look like this:

4. Draw a smaller circle inside the large circle (or handle) of the key shape.

5. Select both shapes and press the second pathfinder button “Subtract from shape area”.

Now we have a key shape made from various simple shapes. It’s a pretty simple shape — but this is a start. I will publish some advanced pathfinder tutorials in the future.

I am including the tutorial file here for those who don;t want to draw the shape, just do step 2, 3 and 5 with this file:

Note: There is a file embedded within this post, please visit this post to download the file.

Examples of each button in the Pathfinder:

Add to Shape Area:

All selected shapes are combined into one shape with the top shape’s style (All style attributes from the top shapes i.e. color, stroke, etc)

Subtract from Shape Area:

Bottom most shape is eaten away by any number of shapes above it. Bottom shape keeps it’s style and all top shapes dissapear.

Intersect Shape Areas:

Intersects 2 overlapping shapes to leave intersected area as a shape. Resulting shape keeps the top shapes style. This tool does not work well with more than 2 shapes. If more than 2 shapes are used all shapes disappear after clicking the “Expand” Button.

Exclude Overlapping Shape Areas:

Works with 2 or more shapes. Any overlapping areas are removed and any areas not overlapping are kept. Style of topmost shape is applied to the resulting shape.

Divide:

All of the buttons in the second row “Pathfinders” create multiple objects grouped together. In my examples of these buttons, I have ungrouped the shapes and moved them apart so you can see the resulting shapes.

The Divide button of the pathfinder divides all of the overlapping shapes. This button can be used with 2 or more shapes. All divided shapes keep the visible style of the top overlapping shape.

Divide is a Pathfinder tool that I personally use a lot.

Trim:

I am using more shapes here to show the difference between “Trim” and “Merge”.

Trim keeps all of the top shapes intact while trimming all overlapping shapes out of the bottommost shape.

Merge:

Merge does the same thing as trim with the exception that any overlapping shapes that have the same style as the bottom shape are merged with the bottom shape. Any overlapping shapes above the bottom shape that are not the same style as the bottom shape are kept in tact and are trimmed out of the bottom shape.

Crop:

The crop tool only interacts with the topmost shape and the bottommost shape. If you selected 5 different shapes, this tool will only leave the intersection of the topmost and bottommost shapes with the style of the bottommost shape. In addition to this, it will leave the non-overlapping section of the topmost shape (with no stroke or fill).

Outline:

Outline can work with 2 or more shapes. Outline takes all shapes and cuts each shape at the intersecting points. This results in no overlapping lines. All lines are separated at the overlapping areas. I suggest trying this one out, un-grouping it and then separating the elements.

Minus Back:

Minus back only works with 2 shapes, the topmost shape and the bottommost shape. It minuses the bottommost shape from the topmost shape. This button seems like it should be in column one with the “Shape Modes”.

I have been working with Illustrator for some time and I have had a lot of people ask about problems with the color black. There are several problems that can crop up when using black in Illustrator, understanding how to use the “Appearance of Black” settings should help clear this up. As a note, this setting also shows up in Adobe InDesign and is imporant.

What do the “Appearance of Black” settings mean in human terms?

Appearance of black is a setting in Adobe Illustrator that allows you to change how the color black is shown on your screen and how it is output to your printer and exported RGB images.

What is “Rich Black”? Rich black is a deep black that is very dark. Regular black is a very dark grey. The difference mainly matters in printing. A typical rich black mixture might be 100% black ink, and 50% of each of the other three inks (Cyan, Yellow and Magenta).

When you use the “Black” swatch in Illustrator, you get regular black (100% Black and 0% CMY).

Setting these preferences in Illustrator

Choose Edit > Preferences > Appearance Of Black (Windows) or [ application name ] > Preferences > Appearance Of Black (Mac OS).

1. Choose an option for On Screen:

Display All Blacks Accurately: This setting will show all blacks acurately seen in the image below.

Display All Blacks As Rich Black: This setting will show all blacks as rich black, even if they are not rich black.

2. Choose an option for Printing/Exporting using the above reference:

Output All Blacks Acurately:
When printing to a non-PostScript desktop printer or exporting to an RGB file format, outputs black colors as seen above. This setting allows you to see the difference between pure black and rich black.

Output All Blacks As Rich Black:
When printing to a non-PostScript desktop printer or exporting to an RGB file format, outputs pure CMYK black as jet black (RGB=000). This setting makes pure black and rich black appear the same.

Other Issues with black in Illustrator:

Placed Photoshop files with black backgrounds when placed over vector black can sometimes create a problem. If you are having a problem where the black in your Photoshop file doesn’t match the black in your illustrator file, try the steps below. Additionally illustrator images not being pure black in Photoshop can relate to this information.

Use the Eyedropper tool in Illustrator to make the vector black the same color as the Photoshop black. To do this, select the black vector shape and then select the Eyedropper tool, click the Eyedropper tool on the black from the placed Photoshop file.

That should clear up the problem.

As a final note regarding colors when printing: Always consult the printer for each type of printing you are doing. Rich black and other color settings will most likely be different for each printer and print provider.

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):

Yahoo Search (Entire page):

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.

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.

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.

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 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.

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.

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.

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.

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.