Gradients, reflections, easy to read font, and simplicity. Keep these four things in mind when creating your website and you are sure to manage a site that gives you users a little eye candy while holding on to simplicity and usability. Most designers have trouble making the compromise between usability and making artwork. The web 2.0 trend focuses on usability while still giving the user something to look at.

First thing on our list is to create some gradients. The ones that come with Photoshop are terrible looking and it’s easy to just download some gradients online. I highly recommend Deziner Folio for web 2.0 gradients.

After downloading the gradients, you’ll have to put them into your gradients folder in your computer. In my case, that would be, Program Files/Adobe/Adobe Photoshop/Presets/Gradients. After that, you’ll have to load the gradients in Photoshop. Click on you background layer and either right click the layer and click on blending mode or just double click the layer. Click on gradient overlay and the click the drop down arrow to view available gradients. If your new gradients aren’t there, click on the small arrow in the top right corner and click on Load Gradients from the drop down menu. If it isn’t already in the folder we put it in, then we will have to browse to that folder and hit ok. Now all of your gradients should be loaded.

After loading your gradients or creating your own, create a blank document that is as high and you want you gradient to be. I chose a 500px high by 500px wide. Right click your background layer and go to blending options. If blending options isn’t there, then your background layer is locked so duplicate it and throw away the locked one. Choose gradient overlay and choose a gradient that you think looks good. For large gradients, I wouldn’t recommend the gradients with a sharp color change. Play around with the gradient setting if you aren’t satisfied with the look.

Once you are have you gradient complete, select a sliver of the whole gradient vertically. Now crop your image by choosing crop image in the Image Menu. Save it to a folder where you plan to make you website. Now before we close out of Photoshop, choose the eye dropper tool and get the color of the pixel at the very bottom of your gradient. Double click the color in the box below the eye dropper tool and find the hexadecimal code at the very bottom. Should be a combination of 6 letters and numbers.

Go into the HTML page that you wish to add the background too. Create a link inside the tag that looks like <link rel=”stylesheet” type=”text/css” href=”YourCSS.css”>. That is a reference to your CSS page. Now create a CSS page (if using dreamweaver or a similar program choose New –> CSS) or just start with a blank page and save it with a .css extension. Your body tag should look like the one below.

The 6 number/letter combination should be the same value as your bottom pixel of your gradient and your background-image:url should point to wherever you saved the file on your computer. The background repeat should stay the same and change the color: tag depending on whatever color you would like your font.

Now just add your content and header like any normal page.