Displacement Mapping Text An effect I used on my new site design

[rvalkass 5]

This tutorial will focus on how to create an image similar to the one seen on my blog. The basic technique relies on something called a displacement map. A displacement map makes other parts of an image appear to fit the contours and shading of another part. In my example here I have made the (rather uninventive) name of my site fit the cliff-face in the image.

 

 

Start off with the base image you want to wrap the text on to. Ideally it should have some good contrast, yet the contrast should not change too suddenly, otherwise you get very jagged results. I spent quite a while selecting this image and tried a few before it, including a puddle, a hill, some clouds and a render I created. None worked that well, and it will take a few tries to find an image that works effectively. I finally plumped for this image from SXC.

 

 

Open in up in Photoshop (this should work in other editors, but my instructions will refer to PS) and go to the Channels palette. Make sure you are editing in RGB mode (you should have 4 channels: RGB, Red, Green and Blue). Click each of the greyscale channels until you find the one with the most contrast in the area of the image you want to use. I often find this to be the Red channel, but maybe that's just me.

 

 

Right click/Control Click on the channel you have selected and click on Duplicate Channel. Set the destination to a new document, and click OK. This will be the displacement map that we use later on. Depending on the dimensions, resolution, level of detail and quality of your image you might want to apply a gaussian blur, just to soften any sharp or detailed contrast areas. Save this new document. The file type is not really that important, but as it will never be viewed, a .PSD is probably a good idea. Name it something useful, such as dispmap.psd and remember where you put it. You can now close your displacement map.

 

 

Enable all the channels of your original image by clicking the RGB channel. Flip back to the Layers palette and create a new blank layer. Put whatever it is you want to fit to the contours of the image on to this layer. I have added the text Rob's Blog. Make sure that if you do use text you rasterise it (right click/control click and select Rasterize Layer).

 

 

Here comes the clever bit! With this layer still active, go to the Filter menu, pick Distort and then Displace... In the dialogue box, make sure the settings are the same as I have them here, then click OK:

 

 

In the new dialogue box that now appears you are asked to choose your displacement map. Go to where you saved your displacement map and load it up. After a few seconds your layer should warp on to the contours of the displacement map.

 

 

Now, to get the effect I have on the text, duplicate your displaced layer. On the bottom displaced layer set the opacity to 30% and the blend mode to Overlay. On the upper version, set the blend mode to Overlay but leave the opacity at 100%. Then open the oversized dialogue box that is Blending Options. Go to the Inner Shadow section and fill out the following settings:

 

 

Viola! One displacement mapped image. This can be used to create all sorts of weird effects, and once you have grasped the basics it opens up a whole new world of more realistic-looking weird situations

 

In my final image I have added a reflection for that added realism, but perhaps that is a tutorial for another day if you cannot figure it out.

 

 

On my website, Rob's Blog, I have also sliced the image and added some links down the side to create a sort of navigation page.

[MetalGear 0]

it's nise efect man there is some mistake but it's good maybe someone will learn something new