Summer Layout Photoshop Tutorial

September 29th, 2006 by Nick

1. With this photoshop tutorial, you will learn how to create a summer themed web layout. The 1st thing to do is to create a 700×450 sized document in Photoshop, with a light, mint green coloured background. Use the rectangular marquee tool to create a blue rectangle at the top for the header and set the background colour to white. Use difference clouds, by going to filter - render - difference clouds.
summerLayout2

2. Choose the grass brush and set the foreground to a dark green, such as 158223, and the background to a light green, such as ADE48C.
summerLayout4 summerLayout7
3. Sweep the brush left and right to produced a concentrated grass affect. Then make a selection, that covers the content area, to delete the overlapping grass.
summerLayout7 summerLayout7
4. Duplicate the grass layer and change it’s layer blending mode to multiply.
summerLayout7

5. Change the hue of the duplucate layer to -24, by going to image - adjustments - hue saturation. Apply a gaussian blue of 1.2, by going to filter - blur - gaussian blur.
summerLayout7 summerLayout7

6. Now create a yellow circle on a new layer. Expand the selection by 5, feather it by 9 and then fill a new layer below the solid circle.
summerLayout7 summerLayout7

7. Using the custom shape tool, create a yellow butterfly. Rasterize the shape, make a selection out of it and then create a linear gradient across the shape, using a light and dark yellow.
summerLayout7 summerLayout7

8. Duplicate the butterfly a few times, changing the hue and resizing some with the transform tool (edit - transform - scale).
summerLayout7

9. Create a long rectangle just above the content area using a dark, grey/green, and reduce it’s opacity to 50%.
summerLayout7 summerLayout7

10. Create a darker toned rectangle over the content area. Make a rounded rectangle over it and then make a selection using it. Make the rounded rectangle invisible and use the selection to delete the area of the darker toned layer.
summerLayout7 summerLayout7

11. That brings us to the end of this Photoshop Tutorial! :D

Posted in web-layouts

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.