UPUP Media :: Media :: Photoshop Tutorials :: Website Background Tutorial

Photoshop Tutorials » WebsiteBackground Tutorial

Step 1 - Starting Out
Make a new 1500x1000. With the selection tool, make a selection of 1000x1000, and fill it with any color on a new layer. Then, with the selection tool, align it to the center of the image. Step 2 - Drawing out the Line
On a new layer, make a pencil stroke like the one in the image. Step 3 - Duplicate and Move
Duplicate that line you just made, and then move it over on the opposite side. Step 4 - Motion Blur
Select one of the layers you made, and go to Filter»Blur»Motion blur. Make the angle 0º, and the power about 25. After you apply it, all you have to do to apply it to the other layer, is just select the layer, and hit ctrl+f. This is the hotkey for applying the last used filter on whatever is needed. Step 5 - Gradient Tool
Use the gradient tool to make a gradient like the one below. To achieve this, just check foreground to transparent, and make the foreground color a nice bright green (or whatever you want.) Step 6 - Duplicate and Flip
Duplicate the layer you made the gradient on, and flip it horizontally by going to Edit»Transform»Flip Horizontal. Then move it across to the edge of the right side of the page. Step 7 - Final Touches
I decided to make the center pink, just so it'd stand out more. From here, you can crop the image to a 1500x1 size, and then have it repeat on the y axis in the center only, so it makes a nice border for your website. Mess with it with some patterns, and this simple design can be taken even further. End! Job well done!