How To Create a Vintage Marquee Bulb Sign in Adobe Photoshop

Hello everyone this is Chris from Spoon Graphics back with another video tutorial Today I'm going to show you how to create a vintage style marquee bulb letter sign in Adobe Photoshop

We'll use Photoshop's 3D feature to quickly build each letter with realistic depth and shading, then also add realistic surface materials and illuminated bulbs using photographs of real world objects The result is a great looking effect you can use to add broadway style type to your designs Since this tutorial makes use of a number of resources, you can find links to the font, textures and photographs I've used in the description area below So begin by opening up the image of the wooden panelling into Adobe Photoshop to use as a background for the marquee sign artwork Double click on the background layer to convert it into a normal unlocked layer, then add a new empty layer

Use the CMD+Backspace shortcut to fill it with black, then click and drag this new layer below the wooden image Select the wood image layer and reduce its opacity to around 30% to darken it, but so you can still see the texture emerging from the black background Switch to the Type tool and set out the first letter of your chosen word I'm using the free font Bebas Kai, but you could also experiment with Slab Serifs and even script fonts for some cool results Change the fill colour to white, then scale up the letter so it fills the canvas area, leaving enough space for the other letters in your chosen word

Go to the 3D menu and choose New 3D Extrusion from Selected Layer to convert this text into a 3D object The workspace will switch over to Photoshop's 3D mode Now the reason we're working with each letter individual is if you set out the full word in one go, the 3D model will be created in perspective, which in a sense is more realistic, but it makes adding the bulbs in a later step much harder because the letters at each end of the word aren't viewed from straight on In the Properties panel, change the Extrusion Depth to zero Navigate to the Cap section by clicking the third icon at the top of the panel

Change the Bevel Width setting to 10%, then max out the Angle at 85 degrees Click the contour graphic to create a custom profile Click on each point and check the Corner setting Drag the second point down towards the bottom right, then add a new point and drag it towards the top left Check the corner setting for this point too

Alter the values to move it as far along the graph as possible, using the figures 2 and 100 Add another point, check the Corner setting and drag it to the top right Edit the values to 98 and 100 to push it as far as it will go Back in the 3D panel, click the Infinite Light to edit its settings Soften its shadow by moving the slider to 100%

Alter the angle of the light by moving the smaller handle on the on-screen widget to alter its direction Aim it vertically, then position it depending on the size of the shadow you want to be cast across the letters Click on the Front Inflation Material layer in the 3D panel to begin editing the surfaces In the Properties panel, click the little folder icon next to the Diffuse option and select Load Textures Navigate to the red metal texture image you've downloaded from the resources mentioned below

Alter the Shine setting to 100%, then click on the next material in the 3D panel, which is the Front Bevel Material In the Properties panel, select a preset from the menu with the sphere icon I'm working with Metal Steel If you don't have this particular option on your list, you can download a pack of extra materials from the Adobe website Increase the Reflection setting to around 20%, just so this metal rim reflects the red centre a little more

Switch back over to the Layers panel and drag the 3D object layer onto the new layer icon to make a copy Turn off the visibility of the original layer The live preview of any 3D model in Photoshop looks terrible You need to render it to see all the realistic shading and texturing To speed this process up, draw a marquee around the letter to restrict the size of the render area, then click the little Render icon at the bottom of the 3D panel

You'll notice in my example there's a strange glitch that occurs with the rendering If this happens to you, a quick fix is to select the main 3D object in the 3D panel and edit the Extrusion Depth by adding a couple of pixels to the value In turn this also resets the cap settings, so switch over to that menu and replace the figure to 85 degrees Click the render button to try again! After a few passes you'll begin to see the 3D model come to life You could leave this to render fully for the best result, but I find the quality suffices after 5-6 passes, so you can hit escape to save some time

Switch over to the Layers panel and right click on the 3D layer Select Rasterize 3D Open up the bulb graphic in Adobe Photoshop, which is a quick little snap I took on my iPhone at a Christmas market a couple of years ago Select the Elliptical Marquee tool and draw a selection around the main bulb Hold the ALT and Shift keys to draw a perfect circle concentrically from the centre

Go to Edit > Copy, then close this image Paste the graphic into the main document and press CMD+T to Transform Scale and position it within the letter outline Double click the layer to add some layer styles Begin with an Outer Glow

Change the settings to Color Dodge and sample a light yellow colour from the bulb image Play around with the Size and Opacity sliders to find a nice balance to form a vibrant glow emitting from the bulb I ended up with the figures of 60px size and 70% opacity Next add an Inner Glow Use the Color Dodge blending mode again, this time with white as the colour

Edit the Size and Opacity to form a illuminated ring around the bulb I settled with the figures 30px Size and 30% opacity Finally add a Drop Shadow Use the default black colour, but change the blend mode to Overlay Edit the Angle to 90 degrees, then a distance of 8px, size of 30 pixels and an opacity of around 80%

With the Move tool selected, hold the ALT key while dragging the layer to make a copy Continue dragging out additional copies and space them around the letter Hold the Shift key when duplicating along a straight edge to keep the bulbs in line To space out the bulbs perfectly, shift and click them all the select all the layers, then click the Distribute Vertical Centres button in the top toolbar Select any bulbs that also need placing on the other side, then hit CMD+J to duplicate the layers

Press CMD+T to Transform, then select Flip Horizontal from the right click menu Move these duplicates into place Scroll to the top of the layer stack, select the last bulb copy layer, then click the new layer icon to add an empty layer above it Select the brush tool and set up a standard round tip with zero hardness, then sample an orangy-yellow colour from one of the bulb graphics Increase the brush tip size so it encompasses one of the bulbs, then place a dab of colour over every bulb around the letter

Change the blending mode of this layer to Overlay to add a warm illuminating glow to each bulb Scroll right down to the basic letter layer in the Layers Stack, hold Shift and click it to select all the layers that make up this complete letter, then press CMD+G to Group Rename the group to identify which letter it represents, then toggle off the visibility for now Turn on the visibility of the original 3D layer again Select it and switch over to the 3D panel

Select the 3D object from the list, then click the Edit Source button in the Properties panel Edit the text element to another letter from the word you want to build, then Save and Close this PSB file Switch over to the Layers panel and make a duplicate of the 3D layer so you still have a copy of the original to edit for the next letter Draw a marquee selection around the letter and render this updated 3D model Don't forget to follow the steps to fix the glitch if you experience it again, by increasing the extrusion depth by a couple of pixels and reset the cap value

Once the render has reached the desired number of passes, hit Escape to finish it Right click on this duplicate 3D layer in the Layers panel and select Rasterize 3D Open up the Group from the previous letter and duplicate one of the bulb layers Drag it out of the group then position it over the new letter Hold the ALT key and continue making copies of this bulb to fill out this particular letter, using the distribute centers button to even out all the bulbs

Add a new layer at the top, then dab those orangy-yellow spots over each bulb and set the blending mode to Overlay Group all the layers, rename the group, then toggle off the visibility to do it all again with the next letter Follow this same process of editing the source of the 3D model to reproduce the effect for each letter you need Remember to keep a copy of the original 3D layer before rendering and rasterizing so you don't lose the ability to reproduce more letters Make copies of the bulb graphic around the letter shape, then group everything together to keep the document organised

Once you've completed all the letters you need, turn on the visibility of all the groups Select each one in turn and press CMD+T to Transform, which will allow you to move the letters into place to spell out your desired word The final result is a really cool vintage style marquee bulb sign Thanks to Photoshop's 3D tools the letters look pretty realistic with natural perspective and shading The addition of an actual bulb photograph also keeps the lights looking as real as possible, while a few layer style effects help to enhance the glow a little

If you enjoyed this tutorial, or learned anything new, a thumbs up to spread the word would be really appreciated If you want to show some Love yourself, why not pick up this exact design on a t-shirt from my little merch store? I'll probably release a full character set of these marquee letters over on my website as a freebie, so be sure to join the mailing list to be the first to get your hands on it in the coming weeks Subscribe to the Spoon Graphics YouTube channel to stick around for all my upcoming tutorials, otherwise thank you very much for watching, and I'll see you in the next one!

1 Comment

  1. You mentioned in your video you might post the letters you created on your site. Are they available? I have a very long title I need in that lighted lettering but the idea of creating each letter is daunting. Amazing work. Please let me know if you have the letters on your website.

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.