Create a Futuristic 404 Page in Photoshop

We spend a lot of time designing the home page, planning an easy navigation, and going through all the bits and pieces we think are important. But, one page that’s often neglected (or entirely forgotten) in the designing process is the 404 page, sometimes referred to as the “page not found” error page.

According to recent design surveys, the rate of people stumbling across a 404 page is much higher then designers think. When a visitor hits a 404 page, they often end up leaving the site immediately, which increases the bounce rate of your website and causes a lost opportunity for the organization behind it. Having said that, it’s nearly impossible to prevent every single 404 error, and when they inevitably happen, a little bit of style and humor can go a long way toward retrieving that visitor and winning back their favor. In this tutorial, we will use a variety of interesting patterns and blending options to design a stylish 404 page.

Resources:

Exotic Polka dots Pattern

Digital Display Font

Let’s have a look at our final design before we start. (Download the finished, layered PSD file.)

Final

Step 1

Open your Photoshop and create a new file, I’m going to keep the size small with a width of 960px and a height of 850px.

Step 1

Step 2

Now we will start with the background, so create a new layer, click on “Layer” > “New” > “Layer.” Then, select the paint bucket tool and fill the background with color #ffab19.

Step 2

Step 3

Select the background layer and click on “Layer” > “Layer styles” > “Pattern overlay” (or double-click on the selected layer) and add one of the polka dots pattern from the above mentioned set. Change the blending mode to “Overlay” and set the pattern opacity to 70%.

Step 3

Step 4

Again, click on “Layer” > “Layer styles” > “Inner shadow” (or double-click on the selected layer) and add some inner shadow using “Soft light” blending mode. Now, set the size to 125px.

Step 4

Step 5

Now we will start with our main counter. First, create a new layer (“Layer” > “New” > “Layer”). To create a glow in the background for the counter, select “Soft round brush” and use it in the middle with foreground color #ffffff.

Step 5

Step 6

Select the rectangle tool to create a rectangle and fill it with color #ebebeb.

Step 6

Step 7

Select the above rectangle layer and click on “Layer” > “Layer Styles” (or double-click on the selected layer) and add “Bevel & emboss.” Keep the settings the same as shown in the image below.

Step 7a

Again, click on “Layer” > “Layer styles” (or double-click on the selected layer) and add some drop shadow. Keep the settings the same as shown in the following image.

Step 7b

Step 8

Select the rectangle tool again to create another rectangle and fill it with color #252525.

Step 8

Step 9

Now, select the above rectangle layer and click on “Layer” > “Layer styles” and add “Bevel & emboss.” Keep the settings the same as shown in the image below.

Step 9a

Again click on “Layer” > “Layer styles” and add stroke. Keep the settings same as shown in the following image.

Step 9b

Again, click on “Layer” > “Layer styles” and add “Inner glow.” Keep the settings the same as shown in the following image.

Step 9c

Again click on “Layer” > “Layer styles” and add “Gradient overlay.” Keep the settings the same as shown in the image below.

Step 9d

Step 10

Create another rectangle using the rectangle tool and fill it with color #111111.

Step 10

Step 11

Select the above layer and click on “Layer” > “Layer styles” to add “Stroke” and keep the settings the same as shown in the image below.

Step 11a

Once again, click on “Layer” > “Layer styles” to add some “Inner shadow.” Keep the settings the same as shown in the following image.

Step 11b

Lastly, click on “Layer” > “Layer styles” and add “Gradient Overlay.” Keep the settings same as shown below.

Step 11c

Step 12

Now, let’s add the main text. First, we will create the shadow text, so select the type tool and add text. Then, click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Bevel & emboss and Keep the settings the same as shown in the images below.

Step 12a

Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to Gradient Overlay.

Step 12b

Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Some drop shadow.

Step 12c

Step 13

Again, select the type tool and add the main text with the same styles used above, then adjust the “Gradient overlay” settings to get the desired color.

Step 13

Step 14

Repeat the same process and add some more text while adjusting the colors in the gradient overlay panel.

Step 14

Step 15

Now we’ll create the shine on our counter screen. Select the pen tool or you can use the polygonal lasso tool to create a simple shape and fill it with #ffffff. Then, reduce the layer opacity to 7%.

Step 15

Step 16

Our main counter is done; now repeat the same process to create two small counters to help redirect our user to the main site.

Step 16

Step 17

Now we will start with the wires. First, create a new layer. Then, select the pen tool to create a path. Right-click on the path and select the option to stroke path with brush. Make sure that your foreground color is #ffffff.

Step 17

Step 18

Select the above wire layer and click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Bevel & emboss.

Step 18a

Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Stroke.

Step 18b

Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add some drop shadow.

Step 18c

Step 19

Repeat the same process and create some more wires, play around with the brush size to adjust the thickness of the wires.

Step 19

Step 20

Now we will create wire joints. Create a new layer and paste the wire styles to this layer (right-click on the layer and select “Copy layer styles.” Then, open the brush panel to adjust the settings.

Step 20

Final

We are done with our 404 page design! I hope you guys enjoyed the tutorial. I’ll be back with some more fun tutorials, till then have fun and keep designing!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://hierbasmedicinal.es/ Ian

    wow, the futuristic result is super.