How to create a mysterious poster design with 3d text

How to create a mysterious poster design with 3d text

Today we will learn together how to realize a marvelous poster design using Photoshop and Illustrator. I’ll show you some useful IIlustrator tricks to create the 3D text effect of the piece, then we will switch to Photoshop to complete the scene with textures and color corrections. This tutorial is very simple to follow, so I suggest also to beginners to give a try.

Preview:

Click on the image for a larger preview

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Are you already a member? Login to download the PSD file.
Support resources
Step 1

Let’s start from Illustrator. Create a new document and write “lost” using a bold sans serif font. Mine is Myriad Pro (Default), but you can experiment with a different one (I suggest you to try with a very bold font like Mod).

new document in Illustrator

Step 2

We have to duplicate the text “lost” many times horizontally and vertically; a trick for you: go to Effect>Distort&Transform>Transform, enter 20 copies and move the text horizontally for 46pt.

transform 1

Step 3

At this point we need to duplicate the entire line of text vertically. Before applying again the Transform filter, we need to expand the text. So go to Object>Expand Appearance. Then switch to the Transform effect and this time move it vertically (-16pt). Finally go to Object>Expand Appearance to expand the text again after the second transformation.

transform 2

Step 4

Write again the word “lost,” this time increase the font size (around 200pt). Then go to Type>Create outlines to turn the text in shapes.

Step 5

Now we need to remove the the word “lost” (great) from the repeating grid of small “lost” words. To do this, start selecting the grid of words and go to Object>Compound Path>Make, then select both the grid and the large LOST word and press the Minus Front button from the pathfinder window.

minus front

Step 6

We are ready to give depth to the grid. Firstly switch the grid color from Black to White, then go to Effect>3D>Extrude&Bevel and enter the following values:

Why do I have to switch the grid color from black to white? Because white, once given depth with the 3d Illustrator tool, will be turned in a greyscale 3d object whose color will be more easy to customize later in Photoshop.

Step 7

Let’s switch to Photoshop. Create a new document. Mine is 1920×1200 px at 72 pixels/inch of resolution since it is destined to be a wallpaper. From Illustrator copy the 3d text (ctrl+C) and paste it in Photoshop (ctrl+V) as a smart object.

Step 8

Select the background layer, grab the Paint bucket tool (G) and fill it with black.

Now we have to modify the colors of the 3d text. So select its layer and go to Image>New Adjustment layer>Gradient map and add a gradient going from #0f0e0f to #727272.

Since we want to affect only the 3d text with this adjustment layer, add a clipping mask by holding down alt and clicking between the adjustment layer and the 3d text one (a little arrow will appear near the gradient map layer – into the layers window).

Step 9

To darken the edges of the composition, create a new layer, grab a large soft (hardness 0%) brush and paint over them.

darken the edges

Step 10

The text is too clean in my opinion. To dirty it, we can use one of our resources: download our scratched metallic textures, choose the item you prefer from the pack, then paste it into the Photoshop canvas and desaturate it by pressing shift+ctrl+U.

Set the layer blending mode to overlay and reduce opacity to 40%.

Step 11

The center of the composition is too dark. To lighten it create a new group and set the blending mode to overlay. Create a layer inside the group, grab a large soft white brush and click over the center:

add light to the scene

Step 12

I don’t like this black/white color combination. So, to add more color, let’s create another gradient map adjustment layer and place it on top of all the other layers. Add a gradient going from blue (#002874) to yellow (#f9e600) and set the layer to overlay with opacity 35%.

Step 13

The tutorial could stop here, the result looks cool in my opinion. At this point of my work I asked Piervincenzo for a critic and he suggested me to add the photo of an island to the background to enrich the scene. Nice idea! Download this photo of an island and place the image between the 3d text and the background layer. Press ctrl+T to activate the free transform tool and re-size the photo.

Step 14

With the eraser tool (or a layer mask if you prefer), eliminate the exuberant part of the island photo:

Step 15

The last touch is to remove the texture’s effect from the island photo. Select the texture’s layer, ctrl+click on the 3d text thumbnail (in the layers window), and add a layer mask by pressing the apposite button in the layers window. In this way we will retain only the area of the texture that covers the 3d text. Finito!

Here is the result of our efforts:

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Are you already a member? Login to download the PSD file.

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Sebastiano

Howdy! I'm a self taught graphic designer who loves to create amazing stuff using every kind of media. I'm currently living and working in Italy.

68 Comments

(+add yours)
  1. Nice tut, keep it up but some mad abduzeedo.com styles on that would look great! Like grunge etc..

  2. So beautifull

  3. Great result and great tut… Thanks for sharing!

  4. Hi folks,
    Thanks for you appreciations. I’m planning to do more tutorials on text effect

  5. Can anyone make this work for me? I can’t make it :(

    I want PLAY text like 7 step picture… Thanks a lot ;)

    Send me the picture: riccardomessina[@]ymail.com

  6. GFXnoob:)

    Hello,
    I’m at Step5, but Object>Compund Path is greyed out, am I missing something? Thanks

    • Hi,

      Select the path and set the fill color to black

      • Tim

        This did not help. Still no luck.

    • Niels

      Try to ungroup everything, it’s possible you have to do it multiple times until you can’t do it anymore, then right click:create outlines and afterwards you can make the compound path

  7. This is a really interesting effect!!!thanks for sharing

  8. Darren Johnston

    This is amazing, exactly what I’ve been trying to do. However,
    I’m a rookie to Illustrator and can’t seem to get past step 5.
    Whenever I select the “Minus Front button from the pathfinder window” nothing happens. I created my outlines of text, then selected Object>Compound Path>Make, then clicked Minus Front… but no empty space is left after using Minus Front button. Anybody know what I’m doing wrong?

    • Hi Darren,

      Try to expand the grid (object>Expand) and then use the minus front button

  9. Darren Johnston

    Sebastiano,
    Thank for the reply! Still not working. When I write the large LOST am I to create a text box and write the large LOST directly over the small losts?

    When I try to make Compound Path out of the small losts it says “Can’t make a compound path. All objects in a comound path must be paths, and they cannot be brushed or be part of an object.”

    Sorry to both you again! I’m really trying to figure this out.

    • Darren,

      Yes you have to write LOST using the type tool, and then you have to outline the text (type>create outlines) befure using the minus front button.

      Try in this way: select the grid with the small words and press shift+ctrl+G to ungroup them. Then hold down alt and press the unite button. You should have a single compound path now. Finally use the minus front to remove the word LOST from the grid.

      • Blanca

        I had to do this step because it wasn’t working for me either. When I do this, half of my word disappears completely. Followed all steps exactly 4 times now and same result.

  10. Les

    Photoshop Newbie here. Sebastiano, this is great! I have PS CS5, but not Illustrator. How can I create this poster using just Photoshop? I have a movie poster homework assigment due Monday and want to use this technique with a different word and photo. Thanks!

    • Hi Les,

      If you don’t have Illustrator, you can use the Photoshop 3d tool (introduced in Photoshop CS4). Sincerely I haven’t still experimented with this tool, but you could read this tutorial:

      http://www.digitalartsonline.co.uk/tutorials/?featureid=3220782

      • Les

        Sebastiano,

        Thanks so much for the prompt reply, I’ll check out the link.

        Have a great day.

        Les

  11. Jad

    Hey, this is my first time using any of this, and it’s going okay for my first time, I just can’t figure out how to change the colour of the grid?

    • To change the color of the grid, just select it and modify the “fill color” (on the left, where you see the 2 squares with 2 different colors)

      • Jad

        oh, do you mean grid as in the grid of words?

      • Yes, do you mean something different?

      • Jad

        sorry I was mistaken. Anyways I sorted that out.

        I apologize to keep bothering you sebastiano,
        though when I select the 3d text and hit copy, after it “generates geometry” it does not give me the option to paste it in photoshop.

        Again, I’m sorry for all the questions.

      • No problem Jad ;-)

        To paste the grid in Photoshop, after selected the grid in Illustator, hit ctrl+C then open a new Photoshop document and hit ctrl+V. The option is not displayed in Illustrator, just copy and paste as with the text of a Word documet

      • Jad

        Hi again, thank you for all this help!
        So I have selected the grid of words, hit ctrl+c and it says “generating geometry” so I wait a little bit, and then once that goes away I head over to photoshop and hit ctrl+v but nothing happens.

        Is there any other to get it over there? for example if I go to file>place… and select it, then convert it to a smart object, would that work?

      • Yes it will work, but be sure to eliminate all the other elements except the grid, then you can open it in Photoshop

      • Jad

        Perfect, this should work out fine. Hopefully when I redo this project later this problem won’t happen. :P

        one final thing,
        I noticed when you pasted it over to photoshop the middle of the O is removed. Should this be happening automatically? If so, is there something specific I must do?

        or do I need to do this manually?

        Thank you very much, I promise that is the last question.
        You have been a great help to me, I am definitely reccomending this website to all my friends and my media arts teacher!

      • This is something that automatically happens. What you paste in photoshop from Illustrator is only the grid, then in Photoshop I filled the background with black. Then in step13 I simply put the island image above the black background

        Once your work is complete, please consider to show us the final result ;-)

  12. Jad

    also, I selected the larger text after making a compound path, but when i hit minus front, it becomes transparent, unlike yours, where it appears white here. but maybe it’s because you’re using a mac and I’m using a pc so it appears different?

    • Try expanding the object before this step (object>Expand). No, there’s no difference between Mac and Pc

      • Jad

        Thank tou very much Sebastiano! This is my first time ever using photoshop and illustrator and you’ve helped me very much!

  13. Terry

    Hi, I’m also having the same problem as jad. I cannot get the illustrator image to paste from illustrator to photoshop.

  14. Thanks it’s very nice

  15. Nipping

    Hi when i create the first verticle lost line mine get all spaces out. any idea what happend?

    • Nipping

      woops i just realised maybe i should continue the tutorial than ask questions
      :P

  16. wes

    I want to do this, but I am so lost, I did exactly what was given in the first part, but the words wont duplicate, just one word…and now I can’t move the text, says it to large but its only 12pt text…what am i doing wrong? am i suppose to duplicate it each word? one by one?

  17. wes

    I type the text, follow the directions to transform and nothing happens. just stays the same. I expand it, nothing it just stays the same confused

    • wes

      I Had in inches…not pts…basic rule and i forgot :(

  18. wes

    i give up im stuck still, I can’t select the grid of words, its greyed out. I cant change the fill color there is no option. thanks again but I have no clue whats wrong.

  19. Kinmar

    Im having the Compound Path is grayed out (unable to be selected) problem as well and really cant seem to fix it, any suggestions? Thanks for the tutorial!

  20. hey, sebastiano, was wondering if you could help me with step 5? i can not do it all. i’m really stuck. i cant seem to select the grid of words?
    help?
    thanks.

  21. Very simply for me, nice tutorial!

  22. Cory

    For some reason when I paste my words into photoshop, they are not coming in as 3D. Can you explain how I fix this?

  23. kris

    Im on step 5 and i cant select the grid of words it only selects the first line. How do i select all of it?

  24. david

    where can i found Effect>Distort&Transform>Transform

  25. Hardest tutorial to follow ever. period.

    • Zed

      agreed, tried a couple times and bloody annoying.
      Cool, i did get somewhere this second time… but urghhhhhh… quite difficult.

  26. OK, so the writer at this sucked at wording so THIS is how to do step 5…

    1. Click your big Lost only and go to Type>Create Outlines
    2. Select everything now and select Object>Compound Path>Make
    3. Select everything including the grid of small Lost words and go to Window>Pathfinder
    4. In the Pathfinder tab you will see a button that says Expand. you want to click this button.
    5. Give it time to think, then you can now click the second button from the left in the Pathfinder tab (Hover over it and it says Minus Front)

    Dunno why it was so hard to write it in english, but there you go, now you’re back on track.

  27. Jim Thorpe

    I did it by making the large text, then selecting Type>Create outlines on it.

    Then moved it out of the way, selected the small word grid and on the Pathfinder tab I held alt and clicked the untie (first one on left) button, let it do its thing…

    then finally pulled the large text back on top and selected all, clicked the expand button in the Pathfinder tab and finally clicked the Minus front button and it worked like a charm.

    Hope that helps :3

  28. shalini

    awesome work

  29. horton

    men, im stock in step2, where is that EFFECT BUTTON.?

  30. Eric

    Hi, after the the applying of the 3D extrude & Bevel options and waited for the long processing time. The result came out wasn’t the same as the picture shown in step 6. Below is a sample of what i meant. Hope someone could help me out thanks.

    http://www.mediafire.com/view/?j9kbbc4qt4w1kx8

  31. Arellano Galdo III

    Where can I find the Effect>Distort&Transform>Transform, so that i can enter 20 copies and move the text horizontally for 46pt.

  32. My final result | thanks!!
    Snow Jump | http://www.exquision.com/SnowJump_Exquision.jpg

  33. MIKE

    Hi,

    Im a bit lost on this at step 5. do you have a video on how to do this?

  34. Whatever

    Holy shit this is the most frustrating tutorial ever! Explain things properly!!!

  35. saywht823

    Ok I am on step 5. Does not make any sense to me. Do i specifically click on each word that is behind the bigger word? If so I have done this and still nothing. I go to object<compound path; and its not even an option. Its dimmed out. Something I'm not doing right. please help

  36. kevin

    this is the worst tutorial ever written. step five is not correctly explained. it is very frustrating. i want to do the project but whomever wrote this needs to learn how to explain things in greater detail.

  37. kevin

    stupid fucking tutorial. it is confusing and not properly written. this should be taked down from the internet.

  38. I think this tutorial can be written more detail and easily. But although I don’t like the style but this is useful tutorial.

  39. Perspn shouuld purchase these network card numbers in order
    to enjoy more and more services and facilities of play station.
    PSN Coode Generator cads are extremely ueful for gamers since they are asily accepted and used
    widely by Play – Station gaming enthusiasts. Some of them only work for one console or a certain type of console or a certain
    type of game will go over there.

  40. lictors  lidding  lidless  liefest  liernes  lievest  lifeful  lifeway.
    In Geoffrey of Monmouth’s History of the Kngs of Britain (Histori Regum Britanniae) can be seen as tthe start of the
    modern tradition about King Arthur. Thdse cheats will add up all the
    diamonds and coins that you need for making your farm.

  41. http://lnkd.in/bdU5wei, excellent tutorial. I can not wait to do the next on. Please see attached, comments are welcome!

  42. wegraphics.net/blog/tutorials/photoshop/how-to-create-a-mysterious-poster-design-with-3d-text/ … pic.twitter.com/REyXU4YwoG

    excellent tutorial. I can not wait to do the next on. Please see attached, comments are welcome!

  43. Novah

    Ok i give up too, the explanations are impossible to understand. Oh and stop write “photoshop” on your tuto when we have to use illustrator-bullshit half of the time thx

  44. Hello to every body, it’s my first visit of this weblog; this web site carries remarkable and in fact
    fine data designed for readers.

  45. If it is not attended on time may cause leakage from the shower.
    The documentation also warns that some media players may not be enthusiastic about using the default
    audio player and may go looking for the hardware by themselves.

    The third image below is a warning from Vista that it can’t verify the “publisher of this driver software.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team