This is the image we will create:
For this tutorial, I am using the following image, a photo by markmiller. Thank you Mark!
1. Log in or register at SXC and open the full size image in photoshop.
2. Select the magic wand tool, set its value to 100 and click the sky. Press delete to clear it. I had to click twice with my Magic wand tool to get rid of all the sky.
3. Resize the image to a height of lets say 500px. (Image -> Image size)
4. Select the eraser tool, and delete the bottom of the rock so it looks like it disappears in a natural way, like this:
5. Enlarge the canvas to a height of 1024px, and a width of 800px (that last one doesnt really matter)
6. Create a new layer beneath the photo and select the gradient tool ('G'). Select the following two colours by clicking the palette at the top:
Now drag a straight line from bottom to top.
And voila, your final image is there!
Coding this image for use in a website
7. Make a selection of the rockclimbing scene, and select File -> Save for web. You now have an image with the rock climbing scene.
link to image
On your website however, you want to spread the gradient across the entire site. Therefore, we need 1 more image.
8. Select the Single Colum Marquee Tool
Click the right side of the image so a full gradient is selected. Copy the selection and load it into a new file. Again, File -> Save for Web and you're done!
link to image
9. Now for the stylesheet you can use the following code. In the body part, we're loading the linear gradient image, and we will place it at the top and repeat it on the x-axis (from left to right). The container will load the rock-image, and contains the rest of the site. You could for exmaple add text or whatever
CODE
body {
background: #7CB0DF url('images/background-line.jpg') repeat-x top;
margin:0;
padding:0;
}
#container {
background: url('images/background-rocks.jpg') no-repeat top;
margin:0;
padding:0;
width:760px;
height: 800px;
}
background: #7CB0DF url('images/background-line.jpg') repeat-x top;
margin:0;
padding:0;
}
#container {
background: url('images/background-rocks.jpg') no-repeat top;
margin:0;
padding:0;
width:760px;
height: 800px;
}
Now all thats left is for you to add your site's content and you're done!
A sample page will look like this: Rock Climbing
You can also think of an underwater scene with a coral reef, tree branches, anything! This works for a lot of images, and really adds something to your layout.
Good luck!
