Make High-Impact Backgrounds for Your Designs with Photoshop

May 14 2009 by Tyler Denis | 38 Comments

Make High-Impact Backgrounds for Your Designs with Photoshop

In this Photoshop web design tutorial, you’ll learn about creating dynamic and high-impact backgrounds that you can use on your own web layouts. We’ll go over color/gradient techniques, lighting effects, and using textures and patterns.

Introduction

When visually designing websites, the little things are what make a design stand out. In this tutorial, I’ll show you a few ways to enhance the way your website looks. We will also look at some examples of people that have applied each one or a combination of these techniques.

Colors/Gradients

Gradients are great if used correctly. For the most part, when you are designing a website with gradients, you should use subtle color variations. Colors and gradients can really give your website more dimension and make it pop.

Let’s start with some experimentation.

Linear Gradients

Let’s begin with the basics: linear gradients. When choosing a gradient, a good practice is to use two colors that aren’t high contrast to each other, but enough so that the effect is still obvious.

We’ll use a dark blue hue. (R:10 G:34 B:55).

Click and drag down the linear gradient from the top of the header, down. This gives a subtle change that helps give the design a bit of "oomph".

Colors/Gradients.

Here are some examples of websites that use linear gradients:

Ballpark

Get Ball Park

Spundo

Spundo

Dermapure

Dermapure

Radial Gradients

Next up are Radial Gradients. Choose the Gradient Tool (G) and pick the Radial Gradient option.

Click and drag a small gradient in the middle of the document (we are going to resize it).

Radial Gradients

Bring the gradient to the top of the document.

Use Edit > Free Transform (Ctrl + T), then use the Transform Controls to stretch out the radial gradient so the gradient reaches the edges of your website. Then move it using the Move Tool (V) so the middle of the gradient is at the very top of the document.

Radial Gradients.

Here are a few examples of websites that use radial gradients:

Webdever

Webdever

Pixeloop Media

Pixeloop Media

Classic Clutch Australia

Classic Clutch Australia

Color

Much like with the gradient, you can make your website pop by using a unique color. Sticking with our blue, we can change the entire website to this color. The only other thing I changed was the background color of the posts to give it a better contrast.

Color

We can also do a combination of both the color and gradient.

Color

Here are some examples of websites that use solid colors:

For A Beautiful Web

For A Beautiful Web

Guifx

http://www.guifx.com/

Lighting Effects

This is much like the gradients, but with a little more variation in color.

To achieve this effect, start with a white background and go into Filter > Render > Lighting Effects.

Change your settings to something like what I have in the figure below.

Lighting Effects

You can play around with the different settings, but the important thing to remember is that the top color is going to be the color you want to see, and the bottom color needs to be black. Change the Blend Mode to Screen. Repeat this step twice, changing colors to different shades of blue, making them smaller and moving it to the left and right sides of the document.

The more you change the color, the more dynamic your background will be.

Lighting Effects

Here are a few examples that use lighting effects:

GreenLite Web Solutions

GreenLite Web Solutions

levon.co.za

levon.co.za

RedoPC

RedoPC

Textures/Patterns

Textures and patterns can give your website that little something extra to make it truly stand out. They can give your website more detail that you just can’t get out of simply using gradients and lighting effects. They can also help to change the mood and look of your website depending on what textures or patterns you decide to employ.

Textures

For this example, we’re going to use a stock texture from Unsigned Design; here is the texture file link: IMG_1283.JPG.

Bring it into your Photoshop document, and resize it using Edit > Free Transform (Ctrl + T) so that it spans the entire document. Now we are going to adjust the stock texture to darken it so it goes better with the black background. Open up the Levels Adjustment, Image > Levels > Adjustments… (Ctrl + L) and adjust the arrows so there is no open space on the left side of the graph.

Textures

Now open up the Curves Adjustment dialog, Image > Adjustments > Curve… (Ctrl + M) and adjust the settings to something similar to the figure below, keeping in mind that we want to have a texture that will blend well with the background.

Textures

Let’s get rid of the hard edges so we have a smooth transition to our solid color. Make sure you are on the texture layer and add a layer mask by clicking on the Add Layer Mask icon at the bottom of the Layers palette.

Select the linear gradient from the toolbar, and with black (#000000) as your foreground color, click and drag a gradient on the left and right sides of the document, as well as the bottom of the image to the bottom of the header to give it a smooth transition.

Textures

Textures

Here are some examples of good uses of textures:

2009 Sanjoaninas

2009 Sanjoaninas

Explovent

Explovent

Revive Africa

Revive Africa

lebloe

lebloe

Patterns

I’m not going to show you how to create the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called "Create an awesome background using patterns".

Lets take a look at how to add patterns to our design.

I am going to take the carbon fiber pattern from the tutorial I referenced above. We want to do the same kind of masking that we did with textures, but first let’s start by using your Rectangular Marquee Tool (M), then creating a box selection across the top of the document and filling it with our pattern.

Patterns

Drop the opacity of the layer down to around 20% and mask the edges similar to the method we used in the textures section above.

Patterns

We can mix it up with either of the textures or patterns by adding any of the gradient or lightings techniques to it as well.

Patterns

Here are some good examples of websites that use pattern:

ILLUSIO

ILLUSIO

Gabriel Nunes

Gabriel Nunes

Danny Diablo

Danny Diablo

Summing up

This is just a starting point. As you can see in the examples, there are many things that you can do with these elements by mixing and getting creative with them. Try some variations with you next website layout.

Your thoughts?

What do you think about high-impact backgrounds? Additionally, if you’ve followed along this tutorial and would like to show off your work – don’t hesitate to leave a link to it in the comments!

Related content

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

38 Comments

Tyler Jefford

May 14th, 2009

Great article. stumbled it.

Gabriel

May 14th, 2009

My site here! \o/

Thanks guys.

detruk

May 14th, 2009

Great article !
thanks ;)

Sharkie

May 14th, 2009

Any suggestions for a white header. The logo is a thin color text, so it shows best on white. How would one texture white?

Bruno

May 14th, 2009

Very cool list. I was very happy and surprised to see ‘Sanjoaninas’ in this list. They did create a cool site this year. Sanjoaninas are a street festival in Terceira, Portugal. Lot’s of fun!

Damian Herrington

May 14th, 2009

Great article! Excellent :-)

Cassie

May 14th, 2009

Oooh! I have so many ideas for new designs. My backgrounds are always so boring. Thanks for the inspiration!

Syed Balkhi

May 14th, 2009

Very nice article, I am going to Retweet this.

Fred Campbell

May 14th, 2009

I love this stuff. Some I knew. Others I do now.

Enk.

May 14th, 2009

Wow! Nice list there ! I’m lovin’ it :P

Mike Meisner

May 14th, 2009

Haven’t checked my RSS reader in a while, but I came upon this today and am happy I did.

Very well put together article; the explanations of these techniques are simple, straightforward, and all the examples provided are very inspirational. Thanks.

Tyler

May 14th, 2009

Thanks everyone, I really appreciate it!

Parisa Afshin

May 14th, 2009

thanks for sharing that, i got a little inspiration from your collection on my website! you are a legend!

DKRM

May 14th, 2009

Thanks for the great article. Many very beneficial tips and methods all put out in easy to follow steps.

High-impact backgrounds are an amazing way to make a project look fresh, bold and beautiful.

James Ballard

May 14th, 2009

Nice Article.

@Sharkie : You might try doing a light colored header with a white gradated highlight / lighting effect. Subtlety is probably what you are looking for.

Chuck Spidell

May 15th, 2009

Thanks for the mention and great tuts for other designers to follow.

Claire Web

May 15th, 2009

It is quite easy to spend forever creating the perfect background setting for your web site. I am a perfectionist and when given the time, i will spend forever and a day on every single detail, not very commercial, but fun :)

stelt

May 15th, 2009

Very nice. But in case you want to have it scale perfectly to different sizes use vector; SVG

MorayWeb

May 15th, 2009

Some great examples, a really good list – thanks!

Jacob Gube

May 15th, 2009

Great post Tyler, I’m happy to publish this story – I have to say I’ve never been a fan of the Lighting Effects filter but I’ve been playing around with it and I’m getting some great results.

evan

May 15th, 2009

Wow m8, great article

bitlimakina

May 15th, 2009

great post. thank you

landtrust

May 16th, 2009

Just another spoon fed tutorial with no originality. OMGOMG TUTS! ! ! 1

blog linkbuilding

May 16th, 2009

While I agree this is a good article, the title makes it sound as if Photoshop is something new or unheard of.

thoen

May 18th, 2009

Unfortunately, not all of these sites (i.e. http://www.getballpark.com/) render properly in IE, which though it is hard to swallow, still controls the majority of the market.

Stephen

May 19th, 2009

Thanks for mentioning explovent. Much appreciated.

@theon, were you more contentious with some/most of these sites not rendering properly in IE in general or just IE6?

In the case of Explovent, their current stats showed a low percentage of users with IE6 and thus, we decided to not support that platform for this micro site. As a designer/developer it was quite a liberating experience.

For most, it’s a case by case decision, but for me and my shop we’ve decided to not support IE6 anymore. For clients that still want to maintain support for a browser that is NOW 3 releases old, we charge a premium.

gaus surahman

May 20th, 2009

@blog linkbuilding, I think we are supposed to wait for a Make High-Impact Backgrounds for Your Designs with… Vector based software. I mean no kidding. I believe many had rough times when to deal colors with vector based software, say flash. What d’you think, Tyler? Thanks

Ben Sky

May 21st, 2009

Nice selection indeed, thanks for sharing! Enjoying Lebloe particularly!

Jason Ament

June 13th, 2009

I think this is a great tut. Is there another way to do this effect that will export to a transparent png rather than a big rectangular picture?

Sumeet Chawla

June 27th, 2009

Awesome tutorial buddy.. Specially, the examples you gave are very inspiring! :) Keep up the good work..

Ryan Dearlove

November 18th, 2009

Thanks, some great ideas, it’s a shame it’s not always cross browser compatible!

Oliver Lane

March 28th, 2010

Great tutorial, love how subtle some of the effects are. Surprising how much of a difference it makes.

My personal site (www.randomtales.co.uk) uses gradients in the background, and I was wondering if anyone had any tips on how to make it a little more exciting, design-wise? I think perhaps the lower areas need more contrast or colour, but I’m finding it tricky getting a solution that looks right.

Oh, and the skyline changes colour depending on your time of day, to make a real time day/night cycle (:

Johnzz

March 31st, 2010

New here,

Just a quick hello from as I’m new to the board. I’ve seen some interesting comments so far.

To be honest I’m new to forums in general :)

John

Anupam Sen

July 14th, 2010

lebloe is awesome…
Thanks 4 dis tutorial :)

Henrik

July 18th, 2010

Lighting Effects – I cannot believe I had forgotten that! So much easier than mucking about the way I have been lately to simulate lights in my designs. Thanks!

Leave a Comment

Subscribe to the comments on this article.