One trick I learned when creating this site was how to - more or less easily - create a neon sign effect for an image.
Step 1: get a nice dark background
You get a nice effect if you use a darker background of course. I used an image made by Orlando Allo: Brown Concrete Wall Bricks.
You can also keep using a transparent background and then place it over any (preferably dark) background on a website.
Step 2: create an outline
Then I created an outline of a pacman ghost. You can also use your image editing tool of choice (I used GIMP to freestyle some shape or just type (and warp) some text. The narrower the outline, the nicer the effect. My pacman ghosts outline is quite plump, so the ’neon tubes’ are a bit too thick for a real sharp neon sign.
Step 3: duplicate (and name) the layers of the outline
You need three layers of the outline on top of your background. The layers need a transparent background. The order of the layers is important to eventually get the neon effect, so if your image editing tool allows, you can give your layers a name. If you want to get an ‘orange’ neon effect for your ‘ghost’ outline, you could name the layers:
- ghost orange 30px gauss
- ghost orange 6.5px gauss
- ghost white 1px gauss
- background
Step 4: create a white outline for the neon tube
The first layer on top of your background needs to be a white outline. So whatever you drew your outline in (probably black), use the fill bucket to make the outline white. Then choose the ‘gaussian blur filter’ in your image editor and choose 1px for the size of the blur. This will create a white edge for the neon tube to enhance the ’light’ effect.
Step 5: create a colored outline for the neon tube
The second layer determines the color of your neon tube. Just as you did with the white outline, use the fill bucket to make it entirely orange. Then choose the ‘gaussian blur filter’ and choose 6.5px as size. Now you should see a nice neon tube.
Step 6: create a mirrored shadow of the neon tube on the background
The third layer makes the neon tube emit a sort of colored shadow on the background. Use the same color for the outline as you did for the neon tube, then choose the ‘gaussian blur filter’ and choose 30px as size. Then you’re done:
