Photoshop Tutorial: Colored Chrome Text Effect

August 25th, 2008 - Design, PS Tutorials

We’ve seen many photoshop tutorials showing how to create the chrome text effect. In this tutorial we will go a step further and create a colored chrome text effect.

First we need a bold rounded font. We can get a free one from urbanfonts.com. Let’s pick Adira Display. Then create a new file. Dimensions should be 500px x 500px. A dark gray background is just fine. Don’t pick black as we are going to adjust that part later with an adjustment layer. Write the world BIG in a new layer with font size of 190pt approx. Like the image below:

Double click on the font layer to bring up the layer styles window. Click on Gradient overlay and create the gradient that you will see on the following image.

We will need 6 colors and the values (from left to right) are:
1. #bedeec
2. #bcb7d7
3. #f0c9d7
4. #f5c8b5
5. #f5f2ca
6. #dff3fe

Now we should have the following image:

Back in the layer styles click on Satin and enter the following settings:

And now we should have something like this:

Now we are going to apply the following styles. Inner glow, Outer glow, Inner Shadow and Drop Shadow. Let’s see the settings for each one of them.

Inner glow

Outer glow

Inner shadow uses a custom Contour setting which can be seen in the following image:

Drop Shadow

Great. You should now see something like this:

It looks OK but we can improve it. Actually it doesn’t look like chrome yet. We need to apply the following Bevel and Emboss style to get there. Let’s see the settings. The custom Contour can be found on the following image too:

And we should get this:

Ah. That’s better. A bit darker would do the trick don’t you think? Let’s do it then. Go to Layer -> Add Adjustment Layer -> Exposure and enter the following settings:

Let’s see our final result:

Really nice effect don’t you think?
Hint: If you remove the gradient layer now, you get a really nice black and white chrome effect like this:

Got a better result? Just give us your link!

Comments

  1. Ryz

    December 12, 2008

    Wow nice job! really nice effect!

  2. mich

    December 30, 2008

    so nice! i love it!:)

  3. fghfd

    January 13, 2009

    how do i get the adira display on photoshop?

  4. INSIDER

    January 30, 2009

    GREAT EFFECT AND TUTORIAL but on CS4 I dont have:Go to Layer -> Add Adjustment Layer -> Exposure as you state at the end to darken the effect, only: Layer -> New adjustment Layer -> Exposure…but completely different settings there?

  5. DiFFusse

    February 1, 2009

    Is the best tutorial .
    * wery thxx from uu *.

    DiFFusse’s last blog post..[Pyetje] per altervista

  6. brittany

    February 11, 2009

    i reallt likethis is i just dont no how to get the same type of font they used for the sample because i couldnt find it on photoshop and i didnt feel like downloading it and all. so idk. but i really like!!!! :)

  7. Boiyah

    February 14, 2009

    Awesome… i tried it differently bt using this tutorial!! couldnt believe it!!
    awesome

  8. Rain Man

    March 2, 2009

    Insider If U Look Above The Layers Panel Theres A Load Of Icons One Of Them Is Exposure There In Alphabetical Order Its There

  9. design king

    March 4, 2009

    Great post, thanks for the info

  10. Ronen

    March 5, 2009

    Great tutorial!
    Thanx!!!

    Ronen’s last blog post..עיצוב פונטים מנייאקרס

  11. Imomu16

    March 8, 2009

    this was wonderfull…i mimiced it and worked to me. thank you..

    Imomu16’s last blog post..80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources

  12. Ahmed Dashti

    March 19, 2009

    Hey! Thanks for the tutorial. You helped me a lot! ;)

  13. nice way to manipulate text!

  14. nice tutorial

  15. Shota

    March 25, 2009

    Thank you man! great job!

  16. fahad

    April 29, 2009

    great post

  17. Kaplang

    August 10, 2009

    wow really cool effects :) thanks for the tutorial :)

  18. yarenay

    August 15, 2009

    verry veryy easy :) thanks

  19. John

    August 18, 2009

    Nice yes, pity the instructions are not at all accurate for Photoshop CS3. They don’t work and the pics are wrong and therefore cannot be followed

  20. anees

    August 24, 2009

    awsome !
    great job !

  21. Dave

    August 26, 2009

    I have a major problem :> I dont know were to but the downloaded front in the photoshop file :S. Could someone tell me?

  22. N-Designs

    September 4, 2009

    great effect. thanks

  23. Nandkumar

    November 2, 2009

    I imprase on you lovely JOB

  24. shomy

    December 27, 2009

    Great post…….thanks a lot…!!! ;)

  25. trevor

    January 31, 2010

    how do i get the gradient to only affect the middle part. mine affectst the whole text..

  26. LIC India

    February 3, 2010

    Amazing! Thanks for sharing these :)

  27. Waterproof Jacket

    March 9, 2010

    very useful for newbie like me, big thank`s for you bro.

  28. FemaleKingKong

    March 31, 2010

    Check out my jpg… :D

    takes 15 minutes… :( :( should do this faster….

    good tutorial… thanks… :D

    http://img23.imageshack.us/img23/7350/femalekingkong.jpg

  29. Dwightski

    April 15, 2010

    Thanks for the effect, I loved it and it is standing proud on our website Your Plastic Storage

  30. Aleksandr Belov

    May 2, 2010

    nice tutorial

  31. GFXTut

    May 11, 2010

    Looks great, ill post my outcome later.

  32. Donna-Michelle

    June 21, 2010

    Superb stuff, Thanks for the brilliant tutorial.
    Regards
    Donna-Michelle

  33. tuc

    July 2, 2010

    Thank you so much for this fantastic tutorial.
    Awesome! I’ve used this tutorial -help me a lot!

    All the best

  34. k

    July 21, 2010

    really super text effect. I got it. Thank you:)

  35. iMayne ER

    July 29, 2010

    Is it because my document is in CYMK why the Exposure option is not highlighted?

    Please help.

    Regards

  36. Larry

    August 1, 2010

    Great exercise and great effect. Thanks

  37. CHRwebs

    August 8, 2010

    Cool effect I thing that I got it a bit more beautiful. see what you think ‘http://www.chrisst.webs.com’

  38. wamuchacha

    September 12, 2010

    very nice job

  39. LIC India

    October 7, 2010

    Nice tutorial.. I want to try it now :)

  40. VPS Seedbox

    October 10, 2010

    Nice effect, I really like the chrome style.

  41. Manik

    October 13, 2010

    Nice outcome. I like the chrome effect and now will definitely use this.
    Thanks for the awesome tutorial.

  42. subhamay

    October 13, 2010

    wow.great tutorial.very nice.thank you.

  43. venkat

    October 21, 2010

    So nice

  44. WeBigma

    February 4, 2011

    great effect. thanks

  45. R0hs

    February 19, 2011

    Really awesome text effects!! Thanks))

  46. Have tried this out with fantastic results.
    Again Many thanks for your brilliant tutorial.
    Regards
    Donna

  47. u2envy1

    April 21, 2011

    Where can I get the download of the psd file from ?

  48. suckass

    May 12, 2011

    man this rocks i want to marry photshop

  49. Wonderful tutorial.
    Like the work.

  50. Brendon

    August 30, 2011

    This didn’t work! Somewhere around the satin stage, our images do not look similar at all. Did you leave something out? I am using CS3.

  51. shaki

    November 23, 2011

    Another great tutorial! nice work!

  52. rachel mcadams

    January 9, 2012

    wow what an amazing tutorial, wonder how it will look with much more text. Going to try it out now

  53. ATTY

    January 12, 2012

    Hey thanks it works!

  54. palaceonweb

    January 21, 2012

    Really nice effect. Very helpful. Thanks for the post. :)

  55. Designs Blessing

    April 23, 2012

    Wonderful techniques to create stunning effect.

  56. Damon

    June 1, 2012

    I’m going with Brendon above. After the Satin effect is added it’s like it has an outline around it that mine did not get. Was there a small detail left out?

    It still came out good, a little dark here, but nothing a bit of tweaking can’t fix.

  57. gowtham raj

    July 23, 2012

    so nice

  58. HOLIDAY

    September 10, 2012

    COOL!

  1. Back by popular demand: my 2 photoshop tutorials | webtoolkit4.me

    [...] see any other 404s. And i couldn’t believe they could be so popular. So here they are. The Color chrome text effect and the Dark but Vivid text effect. Enjoy (once more)! Spread this post [...]

    December 7, 2008

  2. Bookmarks for Enero 1st from 17:50 to 19:04 | FACIL TUTORIALES

    [...] Photoshop Tutorial: Colored Chrome Text Effect | webtoolkit4.me – [...]

    January 1, 2009

  3. Free4you » Blog Archive » Efecto texto Burbuja

    [...] Aprende a crear un texto con burbujas gracias a webtoolkit4.me [...]

    January 19, 2009

  4. All Amazing Articles » 50+ Great Photoshop Text Effect Tutorials

    [...] Colored chrome text effect [...]

    January 20, 2009

  5. Shiny texteffects « Creative Daily!

    [...] the process step by step by clicking trough to —> webtoolkit4.me [...]

    February 9, 2009

  6. 50 Stunning Photoshop Text Effect Tutorials | Tutorials | Smashing Magazine

    [...] Colored chrome Make chrome text and then color it! [...]

    March 5, 2009

  7. 50 Stunning Photoshop Text Effect Tutorials | ClickLogin Web Design

    [...] Colored chrome Make chrome text and then color it! [...]

    March 5, 2009

  8. http://www.digiwu.com » Blog Archive » 50 Stunning Photoshop Text Effect Tutorials

    [...] Colored chrome Make chrome text and then color it! [...]

    March 5, 2009

  9. Tutorials photoshop | QuintoH es·Tu·Dio2

    [...] Cromo coloreado [...]

    March 5, 2009

  10. 50 Stunning Photoshop Text Effect Tutorials | Tech Underground

    [...] Colored chrome Make chrome text and then color it! [...]

    March 5, 2009

  11. Feed Reader » 50 Stunning Photoshop Text Effect Tutorials

    [...] Colored chrome Make chrome text and then color it! [...]

    March 7, 2009

  12. Feed Reader (Beta) » 50 Stunning Photoshop Text Effect Tutorials

    [...] Colored chrome Make chrome text and then color it! [...]

    March 8, 2009

  13. 50 New Photoshop Text Effect Tutorials

    [...] Colored chrome Make chrome text and then color it! [...]

    March 8, 2009

  14. +||ReCharge » Great Photoshop Text Effect Tutorials||+

    [...] Colored chrome text effect [...]

    March 8, 2009

  15. Anonymous

    [...]

    March 15, 2009

  16. 50 Stunning Photoshop Text Effect Tutorials | Design-Tut+

    [...] Colored chrome Make chrome text and then color it! [...]

    May 1, 2009

  17. Tutorials Diary » Colored Chrome Text Effect

    [...] Visit Tutorial VN:F [1.3.0_631]wait…Rating: 0.0/5 (0 votes cast) [...]

    May 14, 2009

  18. 60 tutoriels Photoshop pour les effets de texte | TuniBOX

    [...] Texte en chrome coloré Créez un texte en chrome et colorez le ! [...]

    May 31, 2009

  19. » Цветен хромиран текстов ефект BG-UROCI.net

    [...] Източник Превод: almavez Posted in Adobe Photoshop, Текстови ефекти. RSS. Trackback. [...]

    June 20, 2009

  20. 40 Really Useful Photoshop Text Effect Tutorials

    [...] 10. Colored Chrome Text Effect [...]

    July 31, 2009

  21. 30 Dazzling Text Tutorials | Tutorials Palace

    [...] Colored chrome Make chrome text and then color it! [...]

    July 31, 2009

  22. 40 наистина полезни Photoshop урока за текстови ефекти

    [...] 10. Colored Chrome Text Effect [...]

    August 1, 2009

  23. 40 Espectaculares efectos de texto en Photoshop | STYLOmx

    [...] 10.- Efecto Texto Cromo Colorido: [...]

    August 1, 2009

  24. » Blog Archive » 1 Tutorial a Day-11th Entry Color Chrome Text

    [...] a lot of them would be good to consider when creating logos, not all of them but some. So I went to webtoolkit4.me and found this one, I actually did a google search for tutorials having to do with text and found [...]

    August 15, 2009

  25. •º•º Crap Attack º•º• » 40 Really Impressive Photoshop Text Effect Tutorials

    [...] 10. Colored Chrome Text Effect [...]

    September 5, 2009

  26. Photoshop Tutorials: Compilation of some stunning text effects | designrfix.com

    [...] Colored Chrome Text Effect We’ve seen many photoshop tutorials showing how to create the chrome text effect. In this tutorial we will go a step further and create a colored chrome text effect. – by webtoolkit4.me [...]

    September 17, 2009

  27. Descargas Premium - Tutorial de Photoshop. Mas de 50 efectos de texto. Lo mejor!

    [...] Colored chrome text effect [...]

    October 10, 2009

  28. 40 tan fazla photoshop yazı efekti alıştırması | Photoshop

    [...] 10. Colored Chrome Text Effect [...]

    December 7, 2009

  29. Beautiful New Free Fonts For Your Designs « AnaConda 4 Photoshop Blog

    [...] Colored chrome Make chrome text and then color it! [...]

    December 9, 2009

  30. wordpress dev » Blog Archive » 52 Great Looking Photoshop Text Effects Tutorials – Part 1

    [...] Create Colored Chrome Text Effect [...]

    December 24, 2009

  31. Imagination Share

    [...] 10. Colored Chrome Text Effect [...]

    January 16, 2010

  32. 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects |

    [...] 16.Colored Chrome Text Effect [...]

    January 22, 2010

  33. 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects « Design Works

    [...] 16.Colored Chrome Text Effect [...]

    January 22, 2010

  34. 40 Photoshop Tutorials To Create Gorgeous 3D Text Effects | Afif Fattouh - Web Specialist

    [...] 16.Colored Chrome Text Effect [...]

    January 22, 2010

  35. Tutorial: Colored chrome text effect | The Graphic Mac

    [...] to create a chrome text effect. In this tutorial you’ll learn how to go a step further and create a colored chrome text effect. I’m not much for text effects in my own designs, but this does look fairly [...]

    February 18, 2010

  36. 30 Best Photoshop 3D Text Effect Tutorials | Graphic Design Free Resources

    [...] 13. Colored Chrome Text Effect [...]

    April 14, 2010

  37. Descargar 100 efectos de texto para tu photoshop! gratis - descarga directa desde megaupload o rapidshare

    [...] bañado en pintura. 36. Paint Splodge Text: otro buen efecto de texto de pintura chorreante. 37. Colored chrome text effect: consigue un buen efecto de texto cromado pero en este caso, de multicolores. 38. Killer Metallic [...]

    April 26, 2010

  38. 30 Photoshop 3D Text Effect Tutorial |

    [...] 13. Colored Chrome Text Effect [...]

    May 1, 2010

  39. 50+ Great Photoshop Text Effect Tutorials, Part II | Tut7

    [...] Colored chrome text effect [...]

    May 7, 2010

  40. 45+ Photoshop Text Effect Tutorials | WEBAXES.COM

    [...] Coloredchrome Make chrome text and then color it! [...]

    May 11, 2010

  41. Gran Tutoriales de Photoshop – Efecto de texto « Icreavisual

    [...] Colored chrome text effect [...]

    May 27, 2010

  42. Os 30 melhores tutoriais de efeitos em texto | Designs Vault

    [...] Efeito de texto cromado colorido [...]

    June 2, 2010

  43. 40 sehenswerte Texteffekte für Photoshop | print24 Blog

    [...] Colored Chrome Text Effect [...]

    June 9, 2010

  44. 50+ Best And Really Useful Photoshop Text Effect Tutorials | stylishwebdesigner

    [...] 35. Colored Chrome Text Effect [...]

    June 25, 2010

  45. Kumpulah Teks Effect Photoshop | Radit Blog's

    [...] Colored Chrome Text Effect [...]

    July 10, 2010

  46. Photoshop Text Effects | BrushesBee

    [...] Colored Chrome Text Effect [...]

    July 12, 2010

  47. PSTT | BrushesBee

    [...] Colored Chrome Text Effect [...]

    July 13, 2010

  48. PS | BrushesBee

    [...] Colored Chrome Text Effect [...]

    July 13, 2010

  49. Kumpulan Teks Effect Photoshop | Radit Blog's

    [...] Colored Chrome Text Effect [...]

    July 13, 2010

  50. 60 New Stunning Text Effect Tutorials Using Photoshop | Multy Shades

    [...] Colored Chrome Text Effect [...]

    July 20, 2010

  51. 15 effets de texte indispensables sous Photoshop | Neoweb Mag : Edition Work

    [...] Effet colored chrome [...]

    September 13, 2010

  52. 40+ Eye-Catching Photoshop Text Effects and Tutorials | Design Dim

    [...] Colored chrome Make chrome text and then color it! [...]

    October 26, 2010

  53. 50 Stunning Photoshop Text Effect Tutorials « PC Devil

    [...] Colored chrome Make chrome text and then color it! [...]

    November 1, 2010

  54. useful photoshop text effect tutorials | Think2free.com

    [...] Colored chrome text effect [...]

    November 5, 2010

  55. 50 Eye Catching Photoshop Text Effect Tutorials | :: DesignZine ::

    [...] 20. Colored chrome [...]

    December 2, 2010

  56. クリアな質感のPHOTOSHOPチュートリアル3つ | Crush Note[クラッシュノート]

    [...] Photoshop Tutorial: Colored Chrome Text Effect [...]

    February 15, 2011

  57. 50+ Great Photoshop Text Effect Tutorials Part II | Webwibe | Webwibe

    [...] Colored chrome text effect [...]

    February 15, 2011

  58. 35+ Useful Photoshop Text Effect Tutorials for web designers | Webgranth

    [...] this Photoshop tutorial, you’ll see how to create colored Chrome text effect by using Photoshop. http://webtoolkit4.me/2008/08/25/photoshop-tutorial-colored-chrome-text-effect/ (primary [...]

    February 22, 2011

  59. Chrome Failure « derekthevampireslayer

    [...] be easy. Truth be told…it wasn’t. I followed the Chrome Text Tutorial pretty closely (http://webtoolkit4.me/2008/08/25/photoshop-tutorial-colored-chrome-text-effect/), except I chose to make the text colours a bit more colourful and I decided not to add any [...]

    February 25, 2011

  60. 100 Efectos de texto en photoshop « Yoru Kitsune

    [...] Colored chrome text effect: consigue un buen efecto de texto cromado pero en este caso, de [...]

    March 28, 2011

  61. 50+ Great Photoshop Text Effect Tutorials, Part II | ent-spa

    [...] Colored chrome text effect [...]

    May 25, 2011

  62. 50 Stunning Photoshop Text Effect Tutorials | Sejix Technologies Blog

    [...] Colored chrome Make chrome text and then color it! [...]

    July 14, 2011

  63. Tutorial Photoshop: Crear efecto Cromo en Texto | Photoshop y Tutoriales

    [...] Artículo original (inglés) Articulos Relacionados:Tutorial Photoshop: Crear texto 3D con texturaCrear texto 3D en Photoshop En este tutorial de photoshop haremos un texto 3d con una textura en el interior, te recomiendo que sigas los pasos del tutorial y que tengas Photoshop abierto a fin q …Fotomontaje, efecto reptilEn este tutorial vamos a ver como hacer un fotomontaje utilizando 3 imagenes: un rostro de mujer, piel de reptil y un ojo de reptil, cambiaremos el aspecto de la primrea foto para terminar con un …Ejemplos de InfografiaBuscando ejemplos de infografia encontré en abduzeedo.com una excelente galería de ejemplos de infografía y visualización de datos. …Texto cromado en PhotoshopEn este tutorial veremos como aplicar el efecto cromado a un texto en photoshop, sin la limitante de la versión puesto que este tutorial de photoshop lo puedes realizar en cualquier versión de est …Crear un vistoso banner con fondo de madera en PhotoshopEn este Tutorial de Photoshop CS4 veremos como crear un banner partiendo de una imagen con textura de madera, utilizando para tal fin las herramientas básicas que hemos visto hasta el momento en e …By BlogsdnaComparte esto:EmailDiggImprimirFacebookStumbleUpon Guardado en Tutoriales | Etiquetas: efecto cromo, efecto photoshop, efecto texto, photoshop, photoshop efectos, tutorial, tutorial photoshop, tutorial photoshop crear efecto cromo « siluetas mujeres danzando Aprende Aftereffects – video tutoriales » Deja un comentario, o haz un trackback desde tu blog. [...]

    July 21, 2011

  64. 40 Really Useful Photoshop Text Effect Tutorials |

    [...] 7. Colored Chrome Text Effect [...]

    July 31, 2011

  65. 50+ Great Photoshop Text Effect Tutorials, Part II | DesDevWeb

    [...] Colored chrome text effect [...]

    September 7, 2011

  66. Top 50 Amazing 3D Text Designs | DesDevWeb

    [...] Colored chrome text effect [...]

    September 12, 2011

  67. 40 Really Useful Photoshop Text Effect Tutorials | Web design Xi Yang Blog

    [...] 10. Colored Chrome Text Effect [...]

    September 21, 2011

  68. 20 Photoshop Tutorials for Cool Text Effect | Flash User

    [...] 12. Colored Chrome Text Effect [...]

    October 14, 2011

  69. Efectos en texto con Photoshop | Disparatados blog

    [...] Colored chrome [...]

    October 22, 2011

  70. TEXTO DE CROMO COLORIDO - Photoshop PT

    [...] Original: http://webtoolkit4.me/2008/08/25/photoshop-tutorial-colored-chrome-text-effect/ [...]

    January 17, 2012

  71. 65+ Graphic Designer's Most Used Text Effects Photoshop Tutorials | Dzineblog360

    [...] Colored Chrome Text Effect [...]

    February 8, 2012

  72. 44 Outstanding Photoshop Text Tutorials | Designs Palace

    [...] Colored chrome Make chrome text and then color it! [...]

    February 11, 2012

  73. 50 Creative Photoshop Text Effects Tutorials | #1 Design Utopia Trend

    [...] Colored chrome Make chrome text and then color it! [...]

    March 23, 2012

  74. » 19 Awesome Photoshop text effect tutorials

    [...] Colored Chrome Text Effect [...]

    April 1, 2012

  75. Photoshop Text Effects Tutorials

    [...] 2- Colored Chrome Text Effect [...]

    April 2, 2012

  76. Planner cover « dormangraphics

    [...] RHS [...]

    April 4, 2012

  77. 50 Stunning Photoshop Text Effect Tutorials | Dwinugro.art's Blog

    [...] Colored chrome Make chrome text and then color it! [...]

    April 26, 2012

  78. » Archive » 30 Melhores Tutoriais Photoshop Efeito 3D texto

    [...] 13. Colored Chrome Text Effect [...]

    May 22, 2012

  79. GERMXNxD - 100 Efectos de Texto en Photoshop

    [...] 37. Colored chrome text effect: consigue un buen efecto de texto cromado pero en este caso, de multicolores. [...]

    August 24, 2012

Leave a Reply