Full Page Web Backgrounds Part 1 | Design

Full page web backgrounds have become a great dynamic effect to use for a range of projects. Different styles in both design and development mean you can create some interesting effects.
In this two-part tutorial, I will be showing you how to create 4 different web background effects all the way from design to implementation. In this first installment, we’ll be focusing on designing our backgrounds, while in part two, we’ll look at a number of cool ways we can enhance them on implementation for the web.
Here is a quick overvier of the backgrounds we’ll be creating:

• Semi-Clear Blurred Background
• Fully Blurred Background
• Pixelated Background
• Vector Background

Just a quick note before we start, this tutorial assumes you have a basic understanding of Adobe Photoshop and Adobe Illustrator. Also, I’ve linked the source files at the bottom of the article which includes all the original files, as well as the PSD’s and Illustrator files. Let’s get started!

---

1. The Semi-Clear Background

The semi-clear blurred background is a great technique, particularly for large backdrops in web design. It’s also the easiest to create. For the purposes of this tutorial, I’m using a photo of New York City which you can download here.
The first thing we need to do is fix up the colors slightly as the default photo looks a little dull. However it’s important with this kind of background to keep the colors real and not too ‘hipster instagram’ ish. I just prefer to keep the image clear for this type of thing, however if you like hipster filters, feel free to use them. Keep in mind once we apply the blur, a lot of the colors get accentuated. I’m not going to go into the filters, as it’s not the point of the tutorial, however you can check them out in PSDs.
For the blur go to Filter -> Blur -> Lens Blur. You can play around with the settings a little if you like. The important thing here is make sure there’s a balance in how blurred the effect is. I like to still be able to make out basic objects of photo such as people, or signs or traffic lights for example. Here’s a screenshot of the settings I have used:



Finally, ad a quick noise filter by going to Filter -> Noise -> Add Noise. Put the settings at about 2-3%. The effect needs to be really subtle. The result should look similar to below.

---

2. Fully Blurred Background

The fully blurred background works in a similar way as the one above. When you’re creating these kind of backgrounds however, it’s good to use photos with lots of color. I’ve found nature photos work the best. The advantage of using a photo, rather than using arbitrary gradients, is that you get a blur effect that’s completely unique. We’ll be using this photo here.

Open up the photo in Photoshop. Duplicate the layer 3 times. On the top layer apply a Radial Blur with the threshold at 55. Set the Layer Opacity to 40%.

For the second layer, apply a Gaussian Blur at 50%. Set the Layer Opacity to 82%.
For the final Layer add a strong Lens Blur, with the Layer Opacity at 100%
Finally add a Color Correction Filter effect on the top of all the layers – see PSD, flatten the image and and Noise Filter at 2%.





The result should look similar to the image below.

---

3. Pxielated Background

This is a pretty popular effect, and really easy to create. We’ll be using the blurred background above as a base.
Continuing on from the previous background in Photoshop. Go to Filter -> Pixelate -> Mosiac. Set the cell size on 50. Finally add a Noise Filter of about 4.3%. That’s it! Your result should look like this:

---

4. Vector Background

The vector background is another popular effect and again, quite easy to make. We’ll be using Adobe Illustrator. Open up a 4800px x 3000px blank document. Next using the pen tool, or using the shape tool create a series of inter-connecting triangles. You can create any design you like really, the idea is that it’s abstract. Feel free to experiment with different shapes. My art board looks like this:



Next, use the gradient tool to apply different gradients to each triangle. Try to use colors that are complementary with each other. After adding the various gradients, you should have something like this:


Finally, export the file to PNG, open it up in Photoshop and add a Noise Filter. The final render will then look like so.

---

That’s it for this tutorial. In part 2, I will be showing you how to implement these on the web with some cool effects.
Download Source Files

Part 2>>