Create a 60’s Psychedelic Style Concert Poster

May 16th in Designing by Kyle Pero

In this tutorial, we will go through the steps to create a retro 1960s psychedelic concert poster. This tutorial relies heavily on the use of the Warp Tool, but includes a few other techniques as well. Let's get started.

Author: Kyle Pero

Kyle Pero has worked in the creative fields for many years now. With a background in photography and graphic design he naturally became a Photoshop whiz. Now he works in advertising doing photographic retouching, but also does freelance design and illustration work.

Step 1

Create a new document with a poster-like size ratio. Visualize how you want the document to be laid out and draw some rough guides with the Brush Tool (B) on a new layer called "guides". I drew several different compartments that will each contain a different piece of text and one that will contain an image.

Step 2

Make a solid color adjustment layer and fill it with a deep purple. Select the Rounded Rectangle Tool(U). Set the radius so that you get a nice rounded edge that you like. Make sure that you set Make Work Path As Checked on the property bar. Now click and drag to make your border. Grab the Pen Tool (P), and while holding Command, click and drag to select the path. Then click in the Subtract Path button on the property bar. Then make a solid color adjustment layer and fill it with an orange color.

Step 3

Now to set the first bit of text. I used a font called Hobo Std for mine. Grab the Text Tool (T) and click anywhere in the canvas. Then type your text. Hit Command+T and scale the text up so that it fits the first compartment. Hit enter to set the transform. On the Layers Palette, right click on the text layer and select Convert to Shape. This turns the text into paths.

Step 4

Go Edit>Transform>Warp and warp the text to fit the compartment. I find it's easiest to start with the corner handles and then adjust the others afterwards. The Warp Tool can take some getting used to, though it's fairly intuitive. Play around with it until you get a good result. Repeat this step for all the text compartments.

Step 5

Now let's go back in and change the color on some of this text. First, I want some of the text to have a stroke. Make the fill color on the 'with special guests' layer white. Then set the layer's blending mode to Multiply. Double-click on the layer to the right of the layer's name to open the Layer Styles Palette. Give the layer a stroke with the settings below. Go ahead and change the colors on the other text to whatever you like. Also, apply a stroke to some of the other text.

Step 6

Many of these old posters were screen printed. Lets give ours a little of that effect. Load the selection of the 'Lumedia' layer by Command+Clicking on its vector thumbnail. Hit (M) for the Marquee Tool. Then hit the arrow keys to move the selection down and to the right. Now hit Alt+Command+Click on the same layer thumbnail to subtract from the selection. Make a new solid color adjustment layer just above the original text and fill it with your secondary color. Set the Opacity to 75% and give it a nudge so it doesn't line up correctly. That way it will look more handmade.

Step 7

The thing that is really going to make this look good and realistic is some texture. I have a paper texture that I got from BittBox that will do nicely. Copy the texture into the document. Then put it at the top in the Layers Palette. Set the blending mode to Linear Light and set the Fill to 25%.

Step 8

Now let's move on to our image that will fill the rest of the poster. I got an image of a female singer from iStockphoto. Duplicate the blue channel by dragging it to the New Channel button at the bottom of the Channels Palette. Apply a harsh curve to it that looks something like below. Do the same to the red channel. Now invert each of the two new channels you made by selecting them and hitting Command+I.

Step 9

Make a new Solid Color adjustment layer and fill it with the lightest color that you used in the poster. Load the selection of one of the channels you made by holding Command-clicking on its thumbnail in the Channels Palette. Make a new Solid Color adjustment layer above the previous one and fill it with one of the other colors from the poster. Do the same with the remaining channel that you created and fill it with the remaining color from the poster.

Now on each of the masks on the solid color adjustment layers, apply a threshold. Go Image>Adjustments>Threshold and drag the slider until you get the detail that looks good to you. Do the same for the other mask on the other color.

Step 10

Now, let's get back to the poster. With the Pen Tool (P), draw a path around the blank area of the poster. Make a new group by clicking on the folder icon at the bottom of the Layers Palette. With the path highlighted, hit the Add Layer Mask button twice to apply the path as a vector mask.

Conclusion

Now drag the three color fill layers from the singer image over to the poster document and put them into the group that you just created. Scale the image to fill the space as you see fit. I flipped mine horizontally to make it fit better.

Our final 1960s psychedelic-style concert poster is below. Have fun with these techniques and this style of design.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Arnaud Alves May 16th

    I love this style :)

    Great thanx a lot.


  2. Ndrey May 16th

    great!


  3. Tyler Bramer May 16th

    I’m not particularly a fan of this style but a fast and easy way to create an old styled poster nonetheless. The only thing that seems off to me is the image of the girl after you convert it to match the poster. It just seems a little too harsh. But then again, I suppose that’s the way things were back then. Great job.


  4. iMike May 16th

    WOW, that is a cool effect. I’m sure im going to use it sometime


  5. adrienne May 16th

    cool


  6. Michael Ewon May 16th

    So cool, so cool. I must prove it when I got some time over. Thanks for the tut:-)


  7. Razvan May 16th

    Nice tut, I like the style.


  8. seanmccoy May 16th

    Yeah, I definitely agree with Tyler. I think it’d be nice (though time intensive) to do a pen-trace tool selection of the girl picture just to get some smoother curves and have the effect that the poster was hand drawn/illustrated as opposed to combined.

    Nice effect though, I will definitely be testing it out with some new fonts and colors ASAP!


  9. Kim Dolleris May 16th

    Pretty cool !!! Thx!


  10. Daniel Holter May 16th

    Nice job.

    AGAIN.

    Bastards. :)


  11. jaunzim May 16th

    awesome…


  12. PSDTUTSLOVERJEAH May 16th

    rly cool great effekt !

    THX 4 sharing love this :PPPPPPPp


  13. JPH May 16th

    Very cool.


  14. Daniel May 16th

    Wow, not many steps - great result ;-)

    Daniel


  15. John May 16th

    Nice. Good inspiration.


  16. Ben Griffiths May 16th

    Wow, the end result on this looks great! Thanks! :)

    PS, I can’t resist - It’s Groovy!


  17. Diego May 16th

    god job, nice tut bro


  18. alifaan May 16th

    awesome tutorial.


  19. Nate May 16th

    Very “Groovy” dood


  20. Ruben May 16th

    Aw nice! The paper effect really did it. Lovely and very useful, thanks for sharing!


  21. kamel May 16th

    very nice my man

    and Tyler Bramer please stop your stupid comments.thanks.


  22. Marco May 16th

    That outcome is really amazing! Especially like the really good fit of the picture in this artwork.

    Keep it up guys!

    Greetings,
    Marco


  23. Wouter May 16th

    Nice to see how you are working with simple LineTool.

    Great


  24. goldenthunder May 16th

    SWEET! This is so cool and yet so easy! Thank you!


  25. Erika May 16th

    I’m not a fan of the girl either - she seems out of place - but I swear on everything I was JUST looking at that James Brown picture from iso50 (I think) and trying to figure out how to warp my text like that…. and it NEVER dawned on me that THIS was how it’s done! Wonderful little tip, guys. :)


  26. D. Carreira May 16th

    Cool effect! That’s a method we can use to do great posters!

    Thanks ,David Carreira


  27. Hank May 16th

    This is really cool! tHX:

    Working with those spaces is a nice idea.


  28. mahalie May 16th

    This is a great tutorial. When I saw the photo of the girl at first I thought *really!?* but the filters applied look awesome and I think it does fit into the final product. It reminded me to be open to seeing potential in images and shapes I might normally shy away from.


  29. Medium May 16th

    I would like to see more modern stuff, BUT !!
    Its awesome ! :D Great tut !


  30. Carlos May 16th

    Really great tutorial. Simple effects, great finish. The only thing I would say is the gree could be a little less harsh but other than that really very great!


  31. Johan May 16th

    Yeah way not. Thanks :)


  32. aGS May 16th

    Very cool, Congrats!!!


  33. Lamin Barrow May 16th

    Totally awesome. I like the paper texture trick. :)


  34. glsmaster May 16th

    looks pretty nice ;)


  35. Deddy May 16th

    I like, I like.


  36. SpazZ May 16th

    Really cool result, I like its simplicity!


  37. Mihai May 16th

    I love this style.Way to go


  38. Constantin Potorac May 16th

    I consider this to be a very great tutorial. Really nice and very few steps also the final result is great.

    Congrats


  39. liam May 16th

    Decent outcome, very nice.


  40. LOSWL May 16th

    Excellent tutorial!!…….I guess knowledge is power, because I never thought of drawing guides for warped text…beautiful skill to add to my arsenal..LOL :O)…..thanks for sharing!!


  41. Josh May 16th

    Not sure of the need to convert the text to shape… if you needed to modify something you would have to recreate it… what about a smart object?


  42. Francisco S. May 16th

    Haha Yea FILMORE!!!

    I live on the Filly,

    Cool Tut!


  43. Rata May 16th

    ¡Muy chulo!
    Like it.

    Thanks


  44. Has.n May 16th

    Cool, very cool job!!


  45. giackop May 16th

    that’s cool.. i made something similar but i hand drawn everything and after that i traced it with illustrator.. this is way better!! thanx


  46. Danny May 16th

    That’s so cool :D


  47. Joefrey Mahusay May 16th

    Great Job!


  48. Rjton May 16th

    very good ;)
    i like this site


  49. Andrew Houle May 16th

    Great Tutorial. I love the site!


  50. Aminur Rahman [aka Tom R] May 16th

    this style is repeatedly used often online, not the best i’ve seen though. but good enough.


  51. Janizz May 16th

    Great Job!


  52. Mukarram May 16th

    Yep… have seen b4 but …If its showing on PSDTUTS den it must be a GOOD ONE.


  53. Seraphim Collective May 16th

    Great Tut!


  54. BogDinamita May 16th

    I’ve never really had it for this style, but great job definetely


  55. Alberto May 16th

    QUOTE:

    seanmccoy wrote:

    Yeah, I definitely agree with Tyler. I think it’d be nice (though time intensive) to do a pen-trace tool selection of the girl picture just to get some smoother curves and have the effect that the poster was hand drawn/illustrated as opposed to combined.

    Nice effect though, I will definitely be testing it out with some new fonts and colors ASAP!


  56. T Jay May 16th

    great style!, I love It)


  57. Grant Friedman May 16th

    Great tut Kyle!


  58. Pomeranc May 16th

    Hey, that’s cool!:)


  59. ays May 16th

    sorry, but what does CMD stands for?


  60. SnakeJake May 16th

    Thanks. I like this. Not sure if I’ll ever be able to use it somewhere.


  61. Monya May 16th

    Excellent tutorial, I love the style. Thanks for sharing.


  62. fisch79 May 16th

    cool! :)

    Reminds me of the good old pychedelic Rob Zombie album artwork ;)


  63. Jam May 16th

    But, I have to say, I agree with Tyler and Alberto in the idea of doing a pen-trace tool selection of the girl picture just to get some smoother curves and have the effect that the poster was hand drawn/illustrated as opposed to combined. And to be honest, the ways to make the same things are porportional with people minds thinking, so, I think here you all find a lot of interesting photoshop tips. This site really rocks!.
    English is not my mother language so despite of this fact, I hope I made my self understand. I salute ypu all. :)


  64. Sean Hodge May 17th

    Hi all. I really like this tutorial as well. Great work on the text especially.

    Some people have mentioned doing a pen trace of the girl to get a cleaner design. That’s a good suggestion. The way Kyle creates different adjustment layers and applies a threshold to the image in Step 9 is a good preparatory step to doing that actually. It’s a way to simplify what you are going to trace. So, it makes it fairly easy to add that to this tutorial. Good suggestions. Thanks.


  65. Tama May 17th

    nice effect… I’ve just done a similar work http://mt14.quickshareit.com/share/immagine1ec02c.png but I did it entirely by hand… This is easier and faster! :3
    Great choice for the band!


  66. Zach May 17th

    One of the best tutorials on here! I’m gonna use this for sure. Thanks a lot Kyle


  67. Kyle Pero May 17th

    I think a pen trace would be nice too. Its great that this tutorial got you thinking about ways to improve it and thinking about how you would do it differently. Thats the point right? My job is done.


  68. Kyle Pero May 17th

    @ Josh. Converting to a smart object will rasterize the text. While its true that you can scale a smart object down, then back up without losing quality, you can never scale the smart object larger than the original with out losing quality.

    If you Convert it to a shape you maintain the clean edges and have more flexibility because you can still modify the individual points on the paths that make up the letters.


  69. Shane May 17th

    Ooh - very nicely done tutorial that’s got numerous applications - thanks a lot for sharing.


  70. Kyle Pero May 17th

    @Josh UPDATE: You are right about being able to edit the text at a later time, my mistake, but the reason that I changed mine to shapes is that I did a little customization to some of the paths that make the letters. I didn’t include this in the tut because I wanted to keep things simple.


  71. Baris May 17th

    Great Tutorial. I need that for a bithday flyer. Thank you psdtuts.com


  72. Sean Hodge May 17th

    Hey all, some great comments. In case anyone wants to research the conversation between Kyle and Josh further here is a link for a simple tut on warping text when it’s a Smart Object: http://tutorials.watchandlearnphotoshop.com/tutorials/ps/warp_text.html

    I also recently wrote a Tools and Tips roundup article on this topic, so there are some other tuts there you might want to look into: http://psdtuts.com/tools-tips/tools-tips-smart-objects-and-smart-filters/

    It’s great to see more topics related to the design come up in the comments. We’re already seeing designers trying this out and posting work learned from this design in the PSDTUTS Flickr group. Good job Kyle. Thanks.


  73. Sean Hodge May 17th

    Also, Smart Objects are good. Non-Destructive editing is helpful, but it’s not always the right call. Sometimes you need more control than it would offer. Kyle points out the example of converting text to a Shape. Then you can get in and edit individual points. Thanks.


  74. Dave May 18th

    Sorry guys, I disagree. This tut was bad. Please, do explain WHY you do this stuff, otherwise people won’t learn anything. I am sure I am not the only one who couldn’t reproduce this tut, and I am not new to Photoshop. For example I didn’t understand at all what exactly you are doing around with those channels (step 9). Also I wasn’t able to reproduce Step 10 at all.

    Please don’t just write step-by-step, also add 1-2 lines explaining WHAT you do and WHY, because learning WHAT you do and WHY is the essential thing here.

    Result is great though, but I totally failed reproducing steps 9-10, because I didn’t understand what I am doing and why I am doing it. You just gave step-by-step instructions there which didn’t work for me so I gave up…


  75. Mac Tips May 18th

    Very cool tutorial. I like the final effect.


  76. Constantin Potorac May 18th

    At first I was a little scared but the tutorial turned out to be very interesting and nice.

    Great job


  77. Maureen May 18th

    Very cool! I’ve been looking for a tutorial like this for ages.


  78. HWHP May 18th

    good job, but its hard to understand the process to create… really hard job try to do step by step


  79. Qbrushes May 18th

    this was something very new to me. thanks


  80. Seek May 18th

    Excellent ! Love the LSD fashion


  81. Don-Yool May 19th

    Great Tut!


  82. ritsel May 20th

    From step 8 this tutorial is not good. The steps are not clear to follow


  83. Michele May 22nd

    I’m using CS2 and not able to use the rounded rectangle.


  84. Joe May 27th

    I agree with Dave on May 18th post. I feel I am pretty savvy with Photoshop on both a PC and a MAC and I am just scratching my head at step nine. I have been playing with the channels, creating adjustment layers, etc. and I am nowhere near creating what I am seeing on this tutorial.

    If you could just give a click by click run through I think I would understand, because I am about to give up as well…

    Thanks for the tut anyway, I think it has a lot of potential!

    Joe


  85. Shikaru May 27th

    i cant make a convert to shape. only Rasterize type and convert to smart object.
    But both of them. when i warp them they become quality loss. :S


  86. SpainReadThisBlog May 28th

    Easy but powerful! great job.


  87. Arjan May 28th

    Hey, anyone that checked out this tutorial with a plus account, does it have the psd file available for download?


  88. Simen Sorthe May 29th

    Nice tutorial, but what happens in Step 10? And in Step 9 I don’t understand what “With the path highlighted hit the add layer mask button twice to apply the path as a vector mask.” means. Click where? And why? My result by following this tut twice, is not a good poster.

    Please! Write clearer, not everyone knows where everything is, and the steps should explain why you do it, so that we can learn, not just copy!


  89. Enerhiya May 30th

    Im confuse with the image. Step 9 confuses me.


  90. SEO-PRO June 3rd

    A great effect! I’m going to do a Jimi Hendrix one! Thanks for the post!


  91. shin June 3rd

    nice on… groovy

    used to do it all in illustrator then import to photoshop for photographic effect

    i Heart PSDTUTS


  92. Jaxx June 9th

    God save the stumbleupon! And thank you greatly. I’ve been seeking how to create stylistic pics for my club in second life. and that would totally work like teh awesome!


  93. richa June 12th

    hey thanks…..nice tut.


  94. Dave C. June 22nd

    Sorry to piss on the parade, but this really is no a very strong design. The typography is weak and if you compare this to classic posters of the 60’s you’ll see just how bad this representation is. Photoshop is not a replacement for good design. If you want to see examples of quality poster design, check out Gigposters.com where the experts in the industry gather to showcase their work. There’s plenty of reference material there.


  95. Alphane Moon June 22nd

    Nice one, I like it!


  96. Max June 26th

    Sweet


  97. Josef June 26th

    This is QUALITY!
    Needed this effect for a job im in!
    thanx


  98. Mansoor July 24th

    Thanks for Posting.
    Excellent Tut.


  99. sad July 24th

    thanks a lot for the tutorial!!


  100. HYP3dd August 17th

    [IMG]http://i36.photobucket.com/albums/e18/HYP3dd/photoshopclubposter.jpg[/IMG]


  101. Traz August 27th

    very nice, thx !


  102. Xenogears August 29th

    http://img185.imageshack.us/img185/2396/poster1ok7.jpg

    nowhere near as good as the model, but still fun to look at, right?


  103. Trevor August 31st

    I agree with Dave when he said the tut was poorly written.
    The writer leaves to much information.
    He needs to explain where and how hes going something
    for people like myself trying to learn Photoshop and when
    Photoshop users like Simen Sorthe who are more experience using
    Photoshop have trouble following your steps a light should go off…


  104. Dan September 7th

    Nice. I did my dissertation on the evolution of the psychadelic poster earlier this year. Had to create something similar, but used Illustrator to give me more control over the type. Should’ve used your technique though!


  105. JB September 14th

    When you explain it, it seems so simple, so evident :)
    I’m glad I could find such a brilliant tutorial! I’m looking forward to putting my own printed poster on the wall.
    Thanks!!


  106. Steve Smith September 29th

    To those that complete this project. I write the blog entitled ” The Way Back Machine” and I have posted a link to this tutorial and have asked my readers to create psychedelic posters. If I get enough of a response I will set up a gallery online to display these posters. If you are interested stop by The Way Back Machine for more information.

    Thanks for a great tutorial.


  107. hartss October 2nd

    Very nice man dude!

    But how am i goning to do dis in ps 0,7 ? Its like totally diffrent man!

    peace


  108. NetOperator Wibby October 4th

    I absolutely love this tutorial! Reminds me of the classic Scooby-Doo cartoon. Ah, good times. =D


  109. Jake October 6th

    Hey,
    For step 10, when using the pen, make sure to select “exclude overlapping path areas”, otherwise you’ll get a mask opposite of what you want.


  110. Kirstin October 15th

    I’m so confused by this tutorial, each step is not very well described.


  111. kweno October 25th

    Absoulutely Fantastic! excactly what iv’e been looking for! Great, keep it up!


  112. Dr. T November 6th

    :O Great!!!!


  113. sam November 10th

    this is awesome looking and seemingly easy. however, i tried it, and i found it very difficult and pretty much failed entirely, because you don’t explain how to use the warp tool. help!


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 23rd

Arrow