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

free web hosting
Open Discussion > Xisto Network Sites > The GFXTrap Forum - Trap17 Graphics Site > Tutorials

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

rvalkass
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 tongue.gif

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.

 

 

 


Reply

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

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Similar Topics

Keywords : displacement, mapping, text, effect, site, design

  1. Photoshop -- Double Stroke
    Learn to create a neat-o text effect (2)
  2. Reflective Text
    For Photoshop! (6)
    1: Open up your canvas with the text on it. Duplicate the text layer. 2: Then go
    Edit>Transform>flip vertical 3. You ratserize the text layer. 4. then you take the rectanglar
    marqee tool, and make selection over the text (the duplicated one)about half ways up of the text 5.
    Then right click > feather > put about 5px. Now press delete. And there you go, reflective text
    You'll get something like this or even better. /biggrin.gif"
    style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />....
  3. Adding Shine To Text
    images say "Tiger Ads", but, the board is clsed, so, i'm r (4)
    OK, in this tut, I am going to show you how to add shine to any text. For this example I will be
    using the TigerAds affiliate button. (the board is since closed so, I'm not really advertising
    /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />) OK then,
    lets get started! 1. Open up the image that you will be using, this is mine: 2.
    Now that your image is open and making sure that its the .psd so you can edit the text on it. In
    your layers menu, hold down CTRL and click on the text layer so that only the te....
  4. Reflecting Text Tutorial
    Adobe Photoshop CS2 (5)
    Here you will learn how to create cool reflecting text effects! Step 1. Once your ready to add
    text onto your signature your ready to being. With your text tool type what ever it may be. I
    suggest for this effect your text be on something black And your text white. Step 2. Now we want
    to duplicate that layer to do this select the layer and hit ctrl+j. Step 3. OK now that we have two
    of the same layer select the duplicated layer and hit ctrl+t. Right click it and hit flip
    vertically. Step 4. You want to move it down just a bit. Make sure that nothing touches. ....
  5. How To Make Bloody Text
    (2)
    this is my very first tutorial for trap17 forums and i am putting up a very simple but nice tutorial
    on how to make bloody text using photoshop. open a new document with a white background and mode
    set to grayscale , now type whatever words you want using a thick font , i used arial black
    with the font layer selected while holding Ctrl press Enter to make a selction around the font go
    to Layer > Flatten image, after the image is flattened go to Select > Inverse the next step is to
    crystallize the text go to filter > Pixelate > Crystallize ( set the cell si....
  6. Harry Potter Text Effect
    Harry Potter Text Effect (16)
    Harry Potter Text Effect 1) Create a new image, or open an existing image you wish to put
    text on. 2) Select the text tool (Just Hit T) and type in the text that you want with the
    HarryPotter font 3) Go to Layer > Layer Styles > Blending Options, or jusr right click on the text
    layer and click Blending Options. 4) Next, tick the box that says Bevel and Emboss, and apply the
    following settings: 5) Now tick the box, Color Overlay and apply the following settings: 6)
    Next, tick the Stroke box, then apply the following settings: then you are finished&#....
  7. Fire Text Tut
    (6)
    This is my 1st picture tutorial so its not done propely will improve next time Part one is small i
    din check the size so pls bear wif it Part 1. Part 2. Part 3. Itsmyard ....
  8. Cool Photoshop Text Effects I Discovered
    Photoshop text effects i created... (2)
    Ok, well the other day i was making a video *dont ask why* and for the intro i wanted some pretty
    cool font, and font effects and so i experamented with Photoshop for a while until i came up with
    somthing i liked and i liked what i came up with so i think imma share it with people /biggrin.gif"
    style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /> First off i used the font
    Angryblue Available for download Here for PC's and Here For Mac's Now lets start off
    by getting a new or existing image, for existing image just open an existing imag....
  9. Text Bar Tutorial
    (1)
    ....
  10. [photoshop] Reflected Text Tutorial
    (11)
    I will teach you how to do a quick reflective text on your sigs and other graphic designs that have
    text on them. Step 1 Put Your text on your sig design Step 2 For Best effect the First letter
    of each word have a different color. Step 3 Go to layer then to Layer Styles and Choose
    Dafault Settings of Drop Shadow and the select stroke and select black and 1px Step 5 Now Make
    copies of your text and then go to edit > transform > Flip Vertically it should look like this.
    Step 6a Move the copy text as close as you can like so. Step 6b Now on your l....
  11. [photoshop]liquid Glow Text
    (13)
    Make a pretty glow-type liquidy border for your text! This is for people who use Photoshop. I
    have CS 2, but you can make it with older versions. 1. Open a new document (default PS size should
    be fine), and make the background black. 2. Using the text tool, write a largish word in white.
    Works best with bolder fonts - I used "vein" (from dafont.com) at 72px. You should have something
    like this: 3. Make a copy of the text layer by either dragging the layer over the New Layer
    button or right-clicking on the layer and selecting "Duplicate Layer". Right click the c....
  12. Grunge Text
    (7)
    In this tutorial i will teach you how to create a grunge text so watch and learn. 1.Make a
    backround and add a thick text.Impact and the Army texts work best they can be found at dafont.com.
    2.Now go to Layer>Add Layer Mask>Hide All. The text should disappear. 3.Now grab some good
    grunge brushes, set them to about 40 - 60 opacity but thats up and brush the text. 4.Heres my out
    come: ....
  13. Create Text With Images
    In Photoshop (13)
    I'll just show you all how to do this. It's actually pretty easy. 1) Open a new transparent
    document and use the type tool to create some text (use a big font with space between the letters).
    I will be using Uzusi: 2) Now hold in Ctrl while you click on the text layer. This should
    select your text: 3) Now with your text selected, all you need to do is copy an image you want to
    use to the clipboard. I am using this image, but you can of course use whatever you want. 4)
    After copying, go Edit -> Paste Into. My result now looks like this: 5) Click ri....
  14. Saint-michaels Adobe Photoshop Issue #1
    going to show some basic text affects (1)
    ok since im in the graphic mode im going to do a series of adobe ps issues for you noobs beginners
    intermidate advance and god like graphic designers NOTE THESE TUTORIALS ARE COMING FROM
    PIXEL2LIFE.com everything will be in quotes blah blah blah don't blame me if i miss something
    which i won't HA. but in all seriousness the graphics are copyrighted to the user but not the
    text. im like in the intermediate section since alot of the stuff i find or do is hard well for
    me it is well anyways lets start it off first tutorial im going to talk about is place text o....
  15. Flashing Text In Image Ready
    Learn this neat tutorial (6)
    Here is a tut for flashing text. What you will need: Photoshop ImageReady
    --------------------------- 1- First lets open up photoshop. Create a 400x100 image.
    http://img76.exs.cx/img76/5634/18rf.gif 2- Now pick the color black then click on the paintbucket.
    Click on the image so the background is black. http://img76.exs.cx/img76/1028/24nq.gif 3- Next
    get the text tool and click somewhere in the middle of the image. Make sure the color of the text is
    set to white or a different color that can be seen. Now type anything you want.
    http://img164.exs.cx/img164/437....
  16. Adobe Photoshop Fire Text
    (5)
    1. Create a new image, any size will do, but I used 400x150 (standard sig size) 2. Fill the newly
    created image with black 3. Create a new text layer with whatever text you want to use 4.
    Merge the text layer with your background layer (Click on your text layer, press Ctrl + E) 5.
    Filter, Stylize, Wind...Use Settings Below 6. Repeat by pressing Ctrl + F 7. Repeat steps
    5-6, changing the direction of the wind to Right 8. Now rotate the canvas 90 degrees CW 9.
    Repeat steps 5-7 10. Rotate the canvas 90 degrees CCW, this will return you to the origina....
  17. 3d Text In Photoshop
    (5)
    This tutorial will teach you how to make 3D text with Photoshop. 1. We would start with a simple
    New File of 280X150 pixels. Press D to set up the background and foreground colors to default. Press
    Alt+Backspace to make background black. Then with the help of the Horizontal Type Tool write your
    text in white color using such settings: font family - Garamond Narrow, font size – 60pt, font
    style – Bold. After accomplishing all this you will need to raster your image for further work go to
    Layer > Rasterize > Type to make it. 2. Choose Edit > Transform > Perspective to....
  18. Cool Things To Do With Text. [photoshop]
    (6)
    Cool Things to do with text! By shadow skazi Text is fun to play around with in Photoshop after
    you rasterize it. Let's look at what we can do with it after we rasterize it. To rasterize the
    text, go to Layer>Rasterize>Type Now we can do stuff to the text. First, we will start by
    stretching and skewing text. Go to edit>transform>skew. Grab one of the anchor points and move it
    around a bit, try combining the movement of two anchor points. After you've done this, press
    enter. Yay! We've got some...distorted text. This can look nice on signitures i....
  19. Grungy Text
    (5)
    Open up photoshop, and type something in black in all capital letters with font Arial Black 60px
    (The cloud layer is for something later). Rasterize the text later by going to
    Layer>Rasterize>Type Make a new layer, set your foreground color to white and grab your grunge
    brush (You can get one from www.photoshopbrushes.com) and start brushing the later, the secret is to
    only CLICK once. Now ctrl+click on your text layer in the layer pallette. Press shift+ctrl+I to
    inverse the selection. Click on your grunge layer and press ctrl+e to merge the text and the grunge.....
  20. [photoshop] Distorted/stretched Text Effect
    (8)
    I'm not sure if this is obvious to you all or not, but I decided to make a tutorial for it
    anyway. This tutorial is a lot shorter than my last C4D one, lol. You should end up with text
    looking like this at the end of your tutorial: 1. Firstly, type in your name or whatever, using
    the text tool. I used the BitDust Two font, at 36pt 2. Right-click the text layer in the Layers
    box. Then select 'Rasterize Layer': 3. Then go to Edit > Transform > Distort: 4. A box
    should appear around the text. Firstly click on the top-left point of the box, and drag ....
  21. [photoshop]
    How to make an icey text? (0)
    Step 1: Make a new file with contents white and mode ''grayscale''. Step 2: Typ
    some black text. Step 3: Go to Filter>Noise>Add Noise. Amount»145 and Distribution to Gaussian
    Step 4: Go to Layer>Flatten Image. Then go to Filter>Pixelate>Crystallize, Cell Size 3. Step 5: Go
    to Filter>Stylize>Find Edges. Then go to Filter>Blur>Gaussian Blur, Radius 0,8. Step 6: Go to
    Image>Rotate Canvas>90CW. Then Image>Adjust>Invert. And hen Filter>Stylize>Wind ( Method: Wind,
    Direction: From the Right ). Step 7: Go to Image>Rotate Canvas>90CCW. Then Image>Mod....
  22. Photoshop - Ghostly Text
    (3)
    Step 1 Open up a new canvas in Photoshop, make it relatively large. (400x500 should do fine) Give it
    a black background and move on to the next step. Step 2 Create a new text layer, and use a basic
    font. I used AnimeAce, Bold, 100pt. (Times New Roman looks nice, as well) Make it white, the merge
    the text layer with the black background. When you're done, move on. Step 3 This step requires
    a filter. Go into the Filter menu, then into the artistic menu. Select Underpainting, and use the
    default settings. When thats done, move on to the final step. Step 4 (final)....

    1. Looking for displacement, mapping, text, effect, site, design

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for displacement, mapping, text, effect, site, design

*MORE FROM TRAP17.COM*
advertisement



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



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE