Custom 404 Icon in Photoshop

No one likes getting an Error 404. But let’s face it – stuff happens. Lighten the irritation of hitting a bad link or a moved page for the visitors on your site by sprucing up the Error page they hit – using a custom Error 404 image. It’s quick, easy, and will make your website look more professional for the minor extra work.

This guide will walk you through creating your own Error 404 Image. Because of the differences in web hosts, I can’t guide you through editing your error pages – if you have trouble locating them, speak to your host. The illustrations used will show tools native to Photoshop CS2, but the process can be done in any graphics editing program with tools similar to those found in Photoshop.

Ready to get going? Great!

One: Open a new canvas sized at about 500 x 500 pixels in RGB mode.

First, we’re going to create the iconic “warning” symbol. Set your foreground color to #ffcd46 and your background color to #ffb858. Then, grab your custom shape tool and select the rounded-edge triangle shape. Hold your shift key down when you draw the shape out, and immediately rasterize the layer (Right-click, Rasterize Layer).

The triangle is currently upside down for what we want – click “Edit”, choose “Transform”, and pick “Flip Vertical”.

Two: We want our warning symbol to look cool, not just functional. Click “Layer”, choose “Layer Style”, and pick “Gradient Overlay”. In the dialogue, change the Gradient to the yellow-to-orange gradient, and scale to 37%. Then, click “Stroke”. Change the Color to black, and the Size to 5. Finally, click “Drop Shadow”. Change the Spread to 44, and the Size to 18. Click OK.

Three: Last two things on our symbol and we can finish up. First, set your foreground color to black Then, using a bold font, type an exclamation mark in your icon. Then, set your foreground color to white and use the elliptical (circle) shape tool to create a highlight on the icon. Lower the fill of this circle to about 30%.

Four: One tiny bit of text and we’re all done! I have used the orange for the 404, to continue to color theme. Make sure that you vary the size of your text so that it maintains visual interest and keeps a professional look.