Cool Web Design Effects Tutorials

A 3D Flag

By Daniel Piechnick

It's easy to make a coloured block of text, or a simple diagram (e.g. a flag), but how can you make it look like it's actually real? It's not difficult once you know how - just follow these steps:

Take your object (in this case, the Australian flag), and make some space around it, using the "Canvas Size" option.

Now make a new image, the same size as your first image. Select the "Gradient" tool, and edit the gradient. Put in lots of markers, as I've done in the image (this will make your gradient produce black and white bars).

Hold down Shift, and apply the gradient across your new image.

Go to Filter > Blur >, Gaussian Blur, and blur your image a little. This image is now your "Displacement Map" -- save it (I generally use the name "dispmap.psd").

Now go back to your original image, and go to Filter > Distort > Displace, and enter 0% in "Horizontal Scale" and 5% in "Vertical Scale". Using greater percentages will make the waves bigger -- experiment until you're happy with the result. When it asks for a file, select your displacement map. This will distort your image depending on how dark the displacement map is at that point.

Next, grab your displacement map image and drag it onto your new image. Use the arrow keys to nudge the displacement map until it covers the whole image.

Select the displacement map layer, make it into an "Overlay" layer, and reduce its opacity (around 75% is good). Voila! You now have a funky flag!

Compare this image to the first one, and you'll really notice the difference! This technique can also be used to make realistic curtain, ribbon, and banner graphics. Have fun!

Daniel runs Pegasus Web Design Resources and works as a professional Web designer in South Australia.