New Portfolio Design Tutorial 1: The Background

December 9, 2009 Design, Tutorials

I recently redesigned my portfolio from the ground up. I like to change up my designs every once and a while to keep it fresh, and to use the latest technologies that I learned since my last design. My latest portfolio design is a simple layout focused on user interaction. Almost everything has an element that reacts to the user’s moves. Also, the site is built all on one page, but separated into sections by jQuery. This allows for a fast initial load time, and no loading after that.

This is the first tutorial in the series that I will teach you how I created the site. In this tutorial, you will learn how to recreate the background of my website.

Create the gradient

In Photoshop, create a new document and make it the size you want. For my background, I used 1920 pixels x 1200 pixels. Next, create a new layer (Layer -> New -> Layer) and name it “Gradient”. Fill this layer with any color. It doesn’t matter what color you use, because the gradient will be all you see.

Next, add some blending options to the layer (Layer -> Layer Style -> Blending Options). In the layer style window, select Gradient Overlay and use the properties in the screenshot below.

Gradient Overlay Properties

For the actual gradient, you may use whatever colors you want. I chose to use a variety of colors in the spectrum. Once you applied the gradient, you should have something that looks similar to the following:

Gradient

Darken the Edges

To add more depth, you can darken the edges. This adds depth to the graphic, and creates a subtle border. This step is simple, and a matter of preference.

Create a new layer above the gradient layer to separate the image effects and name it “Edges”. Use a large soft brush with black as the color (I used around a brush size of around 300.) Next, go around the edges of the image and paint the black. The easiest way to achieve this effect is to zoom out of your image so you can see the grey document background. Once you have zoomed out, paint with your only a quarter of your brush over the actual image, and the rest of the document background. Put more of the brush on the image to create a darker area. Repeat this process until you are please with the look. After this step, you should have something that looks similar to the following:

background-2

Adding Lines for More Depth

The next step is where the background comes to life. Create a new layer above the dark edges, name it “Lines”, and fill it with any color. Add blending options to the new layer, and select Gradient Overlay. This time, we are going to use a noise gradient instead of a solid gradient. This layer will be desaturated in the end, so colors do not matter. Use the properties in the screenshot below.

Noise Gradient Properties

To get different effects, use the Randomize button in the Gradient Editor. You can keep hitting the button until you find a pattern that you like. Make sure you are focusing on the lines that it is creating, and not the colors. Remember, this layer will be desaturated in the end, so colors do not matter.

After the blending options have been set, and you are satisfied with the look, you need to separate the layer style from the layer. This is done by selecting the layer, and then selecting Layer -> Layer Style -> Create Layer. This creates a new layer for all of the layer styles applied in the Blending Options.

Once the new layer was created, you can delete the original “Lines” layer. Rename the “Lines’s Gradient Fill” layer to “Lines”. Next, desaturate the layer so the original gradient’s colors can be shown. This is done by selecting Image -> Adjustments -> Desaturate. The desaturate property will remove all color from the layer. Finally, select the “Lines” layer and change it to a Hard Light layer with 75% Opacity. This allows what is under the layer to show through the “Lines” layer. You should end up with something that looks like the following:

background-3

Add Highlight Lines

The final step adds another level of depth to the image, but this time with highlights. This step is depends entirely on preference. Create a white line using the Line tool that follows the existing lines. The best way to do this is to zoom out of your image so you can see the document background as well. Then, when creating the line, hold in the shift button so you create a line that has an angle of 45°. Also, when you create the line, make sure that it extends the entire height of the image. See below for an example of what the plain line should look like (located in the middle).

background-4-line

Next, line up the highlight line with one of the existing lines. This will keep up with the consistency of the image and make the highlights more fluid. Finally, add a mask to the line shape layer. This step will be for the lines in the middle that come up from the edge, and fade near the middle of the image.

For the mask, use a large soft black brush and paint over the areas of the line you don’t want to appear on the image. Make sure that you keep the soft edge of the brush towards the part of the line that you want to appear in the image. That way, you will have a smooth fade. Once the mask is complete, adjust the layer’s opacity so it blends with the image, and doesn’t look out of place. For the four highlight lines that I created, I used one 25% opacity layer and three 40% opacity layers. The level of opacity will depend on the colors you used, and your preference. Repeat these steps to create more highlight lines until you are satisfied.

You’re Done

The final image should look similar to the following:

background-final

Feel free to use this tutorial to create backgrounds for your own website, design, or desktop! Tune in for the next tutorial in the series that will teach you how to create the animation effect for the different pages of the portfolio.

Comments