How To Create A Creative 404 Error Page & Inspiration

404 error pages are what your site refers to when it cannot find the url that you’ve requested or a broken link. Lots of people will be familiar with the standar “404 Error” however it’s a great way to just get creative and make yourself any design to display a 404! Here you can find a step by step tutorial on how to create one in photoshop and code some PHP & CSS for a search input. There is also a great list of creative 404 pages for inspiration.

Here is the finished 404 error page that this tutorial will take you through. As you can see there is an image to create and some PHP & CSS code to write. Just show me the inspiration already!

The Tutorial

Creative 404: Step 1

Firstly open up a new file and set the width to the same width as your ‘content area’ and the height to something reasonable. My dimensions are 610px x 650px

Creative 404: Step 2

Go and grab yourself a stock photo of a piece of paper with a hole ripped into it. You can get the one that I’m using here. Drag it onto the canvas, scale and rotate it to your preference.

Creative 404: Step 3

Using the magic wand tool (W) and select the black area of the ‘rip’. Delete/Cut the selection (CMD+X).

Creative 404: Step 4

Using the text tool type out the text “Uh oh it’s a 404.. Nothing here but space!”. Set the font style to ‘Lucinda Sans’, font size 33px with the color of black.

Creative 404: Step 5

Change the text “404″ and “space!” to a nice red colour to add some personality to the font. (#af1d28).

Creative 404: Step 6

This is the stage that you should be at now. The font should be done, the rip should be in position with the center section cut out.

Creative 404: Step 7

Next go ahead at get yourself the background image that is used for Time Machine in OS X. You can get a copy of it here. Paste it onto the canvas and position it over the rip. We then need to tweek the contrast and brightness settings, this just makes the image have more of a ‘depth’ feel to it. Bump the brightness to 15 and the contrast to 40.

Creative 404: Step 8

Take the ‘space’ layer and move it down behind the paper rip layer so it can be seen through the section we cut earlier.

Creative 404: Step 9

Now change back to the rip layer and select the same section we cut earlier (W), then select the inverse (SHIFT+CMD+I). Switch back to the space layer and cut this selection (CMD+X) this will then leave you with the shape of the hole for the space image.

Creative 404: Step 10

You should now have something similar to this.

Creative 404: Step 11

Next change to the ‘burn tool’ (O) set the preferences to; Exposure: 100% and the type to Shadows. Brush along the edges highlighted above. This will help give the rip more of a realistic look and depth.

Creative 404: Step 12

Finally save your file for the web (SHIFT+ALT+CMD+S), tweak the settings to get the best quality at the lowest file size. Use a JPEG for the file type.

Find The Files

Navigate to your current theme folder where all your php files are located and open the following files, searchform.php, 404.php, then create yourself a new file 404search.php.

insert image & search

Open up the 404.php, then inside your content area link to your image that we created earlier. Then insert the above code to add a search field for the blog. Link it to the new 404search.php we made earlier.

PHP Form

Open up the 404search.php and insert the php code above with the appropriate ids.

#s404  					{
						width: 455px;
						margin: 0 10px;
						font-size: 30px;
						border: 10px solid #eeeeee;
						-moz-border-radius: 5px;
						-webkit-border-radius: 5px;
						color: #af1d28;
}

#searchsubmit404        {
						background: transparent;
						height: 23px;
						color:#af1d28;
						border: white solid 1px;
						font-family: arial;
						font-size: 30px;
						height:40px ;
}
#searchsubmit404:hover  {
						color: #666666;
						background: white;
}

Next open your style sheet and start to add some css to the tags we added to the search form. Set the font-size, colour and margins to suit your preferences or use the code above. The -moz/-webkit-border-radius allows web 3.0 capable browsers add curved edges to the search area.

searchblog

You should then end up with some that looks like this. It is a good idea to provide an area for viewers to search for something else if they hit a 404.

404 Error Creative Inspiration

There you have it, a nice simple tutorial and some great inspiration to get you started! Let me know what you think of the tutorial and if you have any inspiration you’d like to share drop a comment below!