Tutorials Photoshop Web Layout Creating a Website Design From Scratch

Creating a Website Design From Scratch Web Layout Jul 16, 2008

Ok, people, it's time for revealing some more professional secrets. This means that you are about to read a tutorial about how to create a Flash website design. Now come back to your computer as there is nothing to be afraid of - it may seem very complicated at first but we promise to guide you through the design process and make it all as simple as possible.

By the way, this is only a first part of the BIG tutorial as soon we will publish a tutorial on how to design subpages for this website and another tutorial about making a Flash website out of the design you will make. Anyways, this is truly going to be interesting and informative!

This time it is going to be a website homepage design. This particular one is going to be based on a free website template and a free illustration from

image 1
Click to enlarge

As you see, it's a very nice design, with bright colors and yet not overfilled with elements. One of its design features is that it's composed as a book laced on one side.

Ready, people? We're starting off!

1. Create a new Photoshop document with white background. Choose File => New or press "Ctrl+N".

2. Create a rounded rectangle of proper size and color - basically any size and any color you want. The way we're doing it is a green rectangle.

image 2
Click to enlarge

3. Create a gray gradient with a Gradient tool and 13% opacity - now the upper part of a website background is slightly darker.

image 3
Click to enlarge

4. Then we create a yellow ellipse and by creating a mask we put the needed section of this ellipse into the rounded rectangle.

image 4
Click to enlarge

image 5
Click to enlarge

5. Apply a proper style to the ellipse layer: a simple 3px Stroke and the Outer Glow like this:

image 6
Click to enlarge

image 7
Click to enlarge

6. Next thing we're doing is creating a menu. Create menu buttons by drawing a rounded rectangle and deleting certain sections from it (select tool and then DEL button). Don't forget to rasterize layers for that.

image 8
Click to enlarge

7. Duplicate button layers as many times as many buttons you need. Then place a vertical panel in a similar way - a rounded rectangle with a left side deleted. Menu is almost ready.

image 9
Click to enlarge

8. Now add texts to the buttons and some sort of bullets on the right side (bullets are also usual rectangles with a slight outer glow).

image 10
Click to enlarge

9. You may also create a rollover for a button which will show when mouse pointer is on that button, this will be needed for Flash version of website. Simply transform the layer and change its fill color. Don't forget to change the text and bullet colors in this case.

image 11
Click to enlarge

10. Now we draw the lace line. The line with two circles that is going to be over the menu buttons and will be something that actually laces this "digital book design". The lace holes are simple - the circle itself (ellipse shape tool) plus inner shadow.

image 12
Click to enlarge

11. Now the rope itself. The rope line is done by drawing an ellipse and cutting the rest from it (with the help of a mask) leaving only the curve you need.

image 13
Click to enlarge

Than change its color and put it into where it belongs - between the two holes.

image 14
Click to enlarge

12. Add header and footer text (plus a logo if you want). This whole thing is done with a simple Text tool.

image 15
Click to enlarge

13. Now it's time to integrate the illustration element. Open the illustration PSD source file and choose layer group 7 (that's the group that we will be integrating in this tutorial - the one with the building).

image 16
Click to enlarge

14. Drag that layer to the design and merge layers group into one layer - it will be more convenient for you to work. Select the group and press Ctrl+E.

image 17
Click to enlarge

15. But wait - we're not done yet. We still have to add nice little shadow to the building, it will look more realistic. Duplicate the illustration layer twice, select one of them and set its Hue and Saturation to "-100" value (this settings are available through the "Adjustments of Layer" option). This layer later will be the shadow for the building.

image 18
Click to enlarge

16. Then select the upper part of this layer and delete it.

image 19
Click to enlarge

17. Apply "Gaussian Blur" filter (1.7 px) to it and change the layer fill to 33% - now it really looks like a shadow.

image 20
Click to enlarge

18. Apply the same steps to another layer except for cutting the upper part. This layer has to be full-sized shadow. Set its opacity to 22%. This will be a second shadow. You also have to transform and distort this second shadow a little so that it would look more realistic.

image 21
Click to enlarge

19. Now move the illustration layer onto the two shadows - mind the layers order. Shadows obviously have to be UNDER the primary illustration layer.

Creating a Website Design From Scratch
Click to enlarge

Voila! This is it - with our tutorial a website design is ready basically in a blink of an eye! Now return to the start of the tutorial and reproduce the whole process step by step.

subscribe to newsletter