Episode 10: Photoshopping Neon Text

28. Feb, 2010 84 Comments .


You're not seeing anything here because either you haven't logged in or you're not a PhotoGuides member. Don't worry though, it's free to join
Episode 10: Photoshopping Neon Text [ 8:10 ] Download

Neons were invented by accident over 300 years ago when a scientist shook a test tube. At the time though, their discovery was useless because they had no understanding of electricity. It took another 200 years for the concept to be rediscovered, and they called their invention ‘The New Gas’, or, as it was known in Greek, ‘Neon’.

Regardless of how many times I see this image, its realism still amazes me. Neon’s are a great way to feature a title, logo or any other text, and in this tutorial we learn how to transform a simple piece of text into an unbelievable glowing neon, complete with wall mounts and a brick wall to hold it up.

In order to complete this tutorial you will need to download the brick wall image. This is a members only download, but it is free to join.
You may also like to use the Museo typeface that I used in this tutorial. You can grab this for free on MyFonts. Just click ‘Buying Choices’ and you’ll see that Museo 300, 500 and 700 are all available for free. I used Museo 300 in this tutorial.

This tutorial was originally developed by abduzeedo, so I must give credit to them. I’ve been in contact with Fabio, the founder of abduzeedo, and we’ll be working together to bring you more photoguides video tutorials of the amazing abduzeedo tutorials in the future. Thanks again Fabio!

All questions, queries and comments are welcome down below, and feel free to share your own creations either in the comments section, or by putting them up on the PhotoGuides Flickr group.

Good luck!

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
This post was written by .

"Hi I'm Ash Davies, the founder of PhotoGuides. I'm an 18 year old Australian student with a passion for photography and design, and PhotoGuides is my excuse to learn cool new stuff. You can also join me on Twitter and Facebook."

Graphic Design, Podcast, Typography
, ,
  • http://www.neurosoftware.ro/programming-blog/web-design/web-resources/super-easy-neon-style-in-photoshop-screencast/ Super Easy Neon Style in Photoshop – Screencast – Programming Blog

    [...] Last year I wrote a tutorial showing how to create a neon effect, it was the Super Easy Neon Style in Photoshop and it was inspired by a neon sign I saw outside of a pub. So in this post we have a screencast of that tutorial provided by our friedn Ash Davies from Photoguides.net [...]

  • http://www.howmayi.info/2010/03/super-easy-neon-style-in-photoshop-screencast/ Super Easy Neon Style in Photoshop – Screencast | World Wide Web

    [...] Last year I wrote a tutorial showing how to create a neon effect, it was the Super Easy Neon Style in Photoshop and it was inspired by a neon sign I saw outside of a pub. So in this post we have a screencast of that tutorial provided by our friedn Ash Davies from Photoguides.net [...]

  • http://www.ikab-mag.com/daily/?p=1691 Super Easy Neon Style in Photoshop – Screencast

    [...] Last year I wrote a tutorial showing how to create a neon effect, it was the Super Easy Neon Style in Photoshop and it was inspired by a neon sign I saw outside of a pub. So in this post we have a screencast of that tutorial provided by our friedn Ash Davies from Photoguides.net [...]

  • mbstia

    I had a go at this and it turned out great. I actually made it into an animated sign that blinks using the animation feature in Photoshop. My friend is overdue 7 days waiting for her baby to be born, so I sent this to her for a laugh.
    http://img62.imageshack.us/img62/1766/baybykinsneon.gif

    Super tutorial Ash! Thanks!

  • sama

    nice tutorial

    thank you

  • Jo5hn

    I Love Your Photoshop Tutorials, Just So Dam Easy… But I Actually Found You On YouTube And I Added All Your Videos To My Bookmarks But Then You Said Visit Photoguides.net So I Did And I Was So Interested That I Became A Member! Please Make More Tutorials More Frequently, Please!!!

  • MixiPanda

    When I opened the brick wall photo there was a blue line going across it. How can I take that off??

    Please Help!!

  • http://www.popular.seo-link-directory.eu/1970/01/01/huemedia/ HUEMEDIA on Internet fresh news

    [...] Credits: photoguides[dot]net [...]

  • http://www.photoguides.net/colophon Ash Davies

    Try pressing control or command+semicolon. That should remove it.
    Let me know if that works

  • Mike

    Awesome tutorial, once again. Its truly a pleasure watch these. Thank you – a lot!

  • Jo5hn

    Does any one know how to get a picture just beside their name?

  • http://www.photoguides.net aurelio22

    My image looks a bit different because on the last step for the copy layer after i click color overlay i do not have linear dodge(add) what can i do?

  • http://www.photoguides.net/colophon Ash Davies

    Just head over to http://www.gravatar.com and upload a profile pic, and then it’ll automatically appear on pretty much every blog you comment on (it recognises your email address)

  • http://lifeofbobert.wordpress.com bobert

    thank you so much for your tutorials I actually used this specific one to make a banner for my blog :P . Your tutorials are sooo easy to follow, and your website is pretty awesome (clean, professional)
    thanks again.

    cheers
    Rob

  • http://spartangraphics.net spartan73

    this is so awesome! thank you!

  • joham

    excelente tutorial ….
    saludos desde colombia …

  • alex

    wow i always wondered what ‘clouds’ did

  • http://www.mudboycolinyoutubetutorials.tk mudboycolin

    how can i make one animated , i make one saying mudboycolin youtube tutorials but i want it to flash

  • http://youwebs.org/design/super-easy-neon-style-in-photoshop-screencast/ Super Easy Neon Style in Photoshop – Screencast | YOUwebs org

    [...] Last year I wrote a tutorial showing how to create a neon effect, it was the Super Easy Neon Style in Photoshop and it was inspired by a neon sign I saw outside of a pub. So in this post we have a screencast of that tutorial provided by our friedn Ash Davies from Photoguides.net [...]

  • tOOnarmy

    where can i get the font museo from? please any1 lol

  • http://www.tutorial9.net/resources/creative-bookmarks-best-of-march-2010/ Creative Bookmarks: Best of March 2010 | Tutorial9

    [...] to make the great looking effects.Super Easy Neon Style in PhotoshopThis is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in Photoshop.Arcadia [...]

  • http://www.photoguides.net/colophon Ash Davies

    You can get the font Museo from here. You may need to register an account, but Museo 300, 500 and 700 are free :)

  • http://blog.barkerdesign.com/creative-bookmarks-best-of-march-2010/ Barker Design | Graphic & Web Development » Blog Archive » Creative Bookmarks: Best of March 2010

    [...] is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in [...]

  • http://basicwebdesign.co.cc/test/creative-bookmarks-best-of-march-2010 Creative Bookmarks: Best of March 2010 « Basic Web Design

    [...] is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in [...]

  • http://ordaso.com/creative-bookmarks-best-of-march-2010/ Creative Bookmarks: Best of March 2010

    [...] is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in [...]

  • EnigmaXII

    Wonderful tutorial and you have a great narrative voice which is fun to listen to while doing the project. ^^ Two thumbs up :)

  • http://website-designz.com/?p=53 Creative Bookmarks: Best of March 2010 | Web design news and tutorials

    [...] is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in [...]

  • http://www.colorrage.com/blog/2010/04/creative-bookmarks-best-of-march-2010/ Creative Bookmarks: Best of March 2010 | Colorrage Web Design Blog

    [...] is a great screencast by Ash Davies that teaches you how to creat neon text with simple techniques and effects in [...]

  • Greyfox

    really great stuff, here, simply and brilliantly affective! thank you and thank you abduzeedo

  • DisturbedComputer

    I would like to make this then upload it to my site on Wincustomize.com (user-name is the same) do I need to get permission for the brick wall and who is the artiest that made it…

    thanks

    great tutorial.

  • Conner2013

    I had the same problem! but command semicolon works thanks a bunch

  • Ciwan

    Thank you For this Brilliant Tut. Much Appreciated.

  • http://www.photoguides.net/colophon Ash Davies

    Hi. The brick wall image is my own, and I give you full permission to use it on your website. Enjoy!

  • DisturbedComputer

    thank you, I did go ahead and used a different Brick wall.
    I did use your Tutorial and wow I like ur Video Tuts

    if you would like to see my results they are here
    one is a wallpaper the other is a Logon skin

    http://www.wincustomize.com/explore/wallpapers/43655/
    http://www.wincustomize.com/explore/logonstudio/8337/

  • zeb

    Great tutorial thanks…stepped my photoshopping skills up from 1 dimensional artwork….

    Great Stuff…

  • reoneill

    Thanks for putting this together Ash. It helped me make a poster for my neighbor that he’ll really appreciate. Keep it up, very impressive for one so young. You’re life will very likely be one that is productive and beneficial not only to yourself and your loved ones, but also to many you’ll never meet in this lifetime. And that’s a life well lived.

    Rob O’Neill
    San Jose, CA. USA

  • Nevetz

    Awesome tutorial, than you very much!

  • Suvarna

    Awesome tutorial! Thanks a lot …

  • http://Website(optional) fXa

    thank you so much Ash Davies

  • zico

    still got successful with this tut, dunno what i do wrong i do follow but still not get the same , anyways there is no chance to get PSD file to download it’s make my life more easy

    thanks

  • http://www.photoguides.net/colophon Ash Davies

    Hi Zico,
    You can download the PSD source file in the ‘Members Get More’ section just below the video.
    Hopefully that helps :)

  • glowsoria

    Love it! Thanks :-)

  • http://charlezz.co.cc Numb3rNine

    For some reason, whenever I use Museo, 80 pt, it is alot smaller than when you use Museo 80 pt.

  • http://www.ustream.tv/forum/member.php?u=7831 tv shows

    Great detailed info, I just saved you on my google reader.

    Sent from my iPhone 4G

  • delboy1969

    A Great tutorial Ash, thank you very much for sharing that all with us. Big respect!

  • lagas5

    holy caramba this is so amazing.. it turned out to be soo good at my first try (i normally screw up at the first try) ashe u are so good at making tutorials mate, thanks! :)

  • Abe

    is there a way to do this on photoshop elements, i’m stuck on the custom blending opitons

  • http://www.mohanlink.com mohanlink

    Mantabs, I Will Try IT Dude

  • AmirDesing

    thx man good jop

  • Vshan

    Hey how do i change the color of the neon?

  • Freezzz

    Ядрить колотить! А по русски кто-нибудь говорит?

  • mr_grin56

    Awesome! Thanks for taking the time to put this together!

  • http://Website(optional) isa

    Похоже кроме меня никто ;-) . Нужна помощь?

  • beeone

    how did you do that blinking text?

  • tryweekly

    How about being a bit more specific? I’ve looked everywhere and can’t find a link to download the font.

  • http://www.photoguides.net/colophon Ash Davies

    In the above article click on the link that says MyFonts.
    It’ll take you to this website http://new.myfonts.com/fonts/exljbris/museo/
    Then click buying choices and you can grab 300, 500 and 700 for free.

  • Ps_Amoeba

    I can’t find Museo font… Please help.

  • http://junnel.com rockgod

    it’s very cool. but you can use the text font “Crushed Out Girl”. it is more likely to the real. but the text you used is also very cool.

  • http://junnel.com rockgod

    you can use “Crushed Out Girl”.

  • http://twitter.com/diegowcaetano coragembsb
  • http://www.personalizedwineboxes.com Dillon Klaassen

    I love your writing. It is very inspirational.

  • majesticllama

    Hi,

    Really thorough job, very clear, very detailed if I were to grade this it deserves an A+! Well done. And excellent job on a fantastic website.

  • flyirwin1

    well mine didn’t eve come out close to this one. obviously i’ll try again from scratch, but i downloaded everything, joined this and the text site and still it didn’t work. i have cs4… it seems like the angles are different in the blending options dialogue box.

  • Maxlimit

    Great tutorial

    thank you a lot

  • cauka

    same thing here. It’s not working in CS5.

  • http://Website(optional) Bayasaa
  • camargo214

    yea how u do that blinking text?

  • http://www.saluto.hr SkipperRi

    Hey, great tutorial, thanks!
    How can I change the text Neon into something else?

  • http://none Defkon3

    when changing the pic from on to off, you messed up lol the back is still liten up make it completley dark for when its off

  • http://Website(optional) mbstia

    That’s how I wanted it. Creativity is whatever you want it to be.

  • http://Website(optional) mbstia

    BTW you should learn to write correctly. Your grammar and spelling is terrible!

  • gabrialem

    http://aleman-studio.com

    thanks for the tutorial!!! I made some changes and made it my intro page!

  • true

    hey great tutorial!! :) I was wondering what size should the canvas be if I want to make a background with this text for lets say my tumblr? sorry i’m a noob lol

  • jashsayani

    Great tutorial!

  • http://every-quote.com/archives/depressing-quotes Quotes

    Great help from this blog! Thanks alot for the information I needed

  • Sohaib2112

    thanks for this tutotial

  • Will Prit0819

    Hi! I’ve tried this tutorial like six times and it never turns out right. The text after I apply the blending options doesn’t glow… it like glows in some area, and is black in others. I always turns out terrible. What am I doing wrong?

  • Will Prit0819

    I forgot the image! Here is what it looks like after I apply the blending options.

  • http://www.facebook.com/profile.php?id=100001674372652 Davide Catagna

    hello a tt

  • Crystal

    Try adjusting the Gaussian Blur on your bottom text layer to something smaller than 15 px.

  • http://www.facebook.com/profile.php?id=100002978197111 Mohammad Reza Purnama

    thanks

  • http://funnyonelinersonrajinikanth.blogspot.com/ mike

    i come on your website after watching your youtube tutorial , just wants to say thanks for the help .

  • Anonymous

    there is a teal line going right across the background brick image. how do i get the brick image without it?

  • Anonymous

    there is a teal line going right across the background brick image. how do i get the brick image without it?