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.)
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 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 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 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 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 6
Select the rectangle tool to create a rectangle and fill it with color #ebebeb.
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.
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 8
Select the rectangle tool again to create another rectangle and fill it with color #252525.
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.
Again click on “Layer” > “Layer styles” and add stroke. Keep the settings same as shown in the following image.
Again, click on “Layer” > “Layer styles” and add “Inner glow.” Keep the settings the same as shown in the following image.
Again click on “Layer” > “Layer styles” and add “Gradient overlay.” Keep the settings the same as shown in the image below.
Step 10
Create another rectangle using the rectangle tool and fill it with color #111111.
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.
Once again, click on “Layer” > “Layer styles” to add some “Inner shadow.” Keep the settings the same as shown in the following image.
Lastly, click on “Layer” > “Layer styles” and add “Gradient Overlay.” Keep the settings same as shown below.
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.
Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to Gradient Overlay.
Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Some drop shadow.
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 14
Repeat the same process and add some more text while adjusting the colors in the gradient overlay panel.
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 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 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 18
Select the above wire layer and click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Bevel & emboss.
Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add Stroke.
Again click on “Layer” > “Layer styles” (or double-click on the selected layer) to add some drop shadow.
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 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.
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!
Anum KhanAnum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
