How to Create a Neon Glow Animated GIF in Photoshop Elements
This tutorial will show you how to create a neon glow animated GIF in Photoshop Elements.
This tutorial will show you how to make a simple neon glow animated GIF in Photoshop Elements. You could use this GIF animation for a web site heading or logo when you want to grab attention. Be careful with animation on your web sites because it can get annoying real quick. But a single well-placed subtle animation might be just what you need to draw your visitors eyes to an important part of your page. Just don’t go overboard with it!For this tutorial I am using the Neon Glow Effect layer styles from this site and Photoshop Elements 12. The steps should be similar in other versions of Photoshop Elements. Creating GIF animations in Photoshop is a bit different so I will cover that in a separate tutorial.
Loading the Neon Glow Layer Styles
After you have downloaded and extracted the neon effect layer styles, open Photoshop Elements into expert editing mode. In the bottom right part of the window, click “Effects,” then “Styles” from the tabs in the right panel, then click the panel menu and choose “Load styles…”.
Adding Layer Styles to Photoshop Elements
Navigate to where you extracted the neon glow styles and load them. They will now appear as a choice in the styles menu.
Neon Glow Layer Styles in Photoshop Elements
Next open a new blank file at the desired size. I am using 300×150 pixels.
New Document in Photoshop Elements
Add Text for the Neon Effect
Click the paint bucket tool and fill the background with black. Next Click on the text tool and add some text. I am using a font called “Harlow Solid Italic” that reminds me of neon signs. The text color does not matter, but for now make it a color that will show against the black background.
Adding Text in Photoshop Elements
Now switch the right panel to show layers. Right click on the Text layer you just added and duplicate it.
Duplicating the Text Layer
Apply the Neon Glow Layer Style
Now click the eye next to the top text layer to hide it, and make the bottom text layer active. Switch back to the effects panel, and double click on one of the neon styles. I am using the green “Burgers Neon Glow” style.
Text with Neon Glow Layer Style Effect Applied
Adjusting the Neon Effect
Switch back to the layers panel, hide the bottom text layer, activate the top text layer and apply the same layer style to this layer. Switch back to the layers panel, and double click the fx icon on the layer. This brings up the style settings. Change the outer glow properties to reduce the size and opacity slightly. I am changing the size from 13 to 9 and the opacity from 73 to 50. You could experiment with changing the other values if you’d like.
Edit Style Settings in Photoshop Elements
Before saving out as an animation, we need to merge each of the text layers into a black background, since Photoshop Elements creates a GIF animation by cycling through layers.
Duplicate your background layer by dragging it up to the new layer icon. Then move it up in the layers palette so it is below the top text layer. Your layers should look like this:
Layers Palette Preparing to Merge Layers
Merging Layers
Now click on the top text layer and go to Layer > Merge Down (or press Ctrl-E). Do the same for the second text layer. You will be left with two solid layers. Now toggle the visibility of the top layer off and on by clicking the eye on the layers panel and you will get an idea of how your animation will look when it is finished.
Crop the Image
This is a good place to crop the image so it is not larger than it needs to be. Make sure you are viewing the layer with the larger glow and be careful to leave enough space around the glow effect so that it does not get cut off when you crop. Apply the crop.
Cropping the Image
Make sure both layers are visible before going to File > Save for Web.
GIF Animation in Save for Web
From the Save options, choose GIF and make sure the Animation box is ticked. We do not need transparency, so uncheck that, and leave other options at the default or set them to match my screen shot. In the animation section, set looping to forever, and change the frame delay to 0.8 seconds. Press the play button to see the animation before saving. I find 0.8 seconds to be just about right for the neon glow effect, you might need to adjust it for other animations.
Animated GIF Save for Web in Photoshop Elements
If you want the animation to stop looping after a while, choose “Other” from the looping options and enter the number of times you want it to loop before stopping. The highest number you can enter is 32. This will make your animation less annoying if you use it on a web site. When you are happy with the animation, click Save and give it a file name. Your GIF animation is ready to use!
The finished Neon Glow animation!
Post a comment below if you have questions!
