Creating a Website Design From Scratch

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 Templates.com

 

 

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.

 

 

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

 

 

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

 

 

 

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

 

 

 

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.

 

 

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.

 

 

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).

 

 

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.

 

 

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.

 

 

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.

 

 

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

 

 

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

 

 

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).

 

 

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.

 

 

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.

 

 

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

 

 

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

 

 

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.

 

 

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

 

 

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.

 

As I have said earlier all of the source files are available for free at Templates.com - both the free website template and the free illustration. All you have to do to get them is to register at Templates.com (see the instructions on how to download our freebies).

 

Enjoy!

 

* * *

 

Special thanks to Small Business Web Site Design

 

 

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.

This entry was posted on Wednesday, June 4th, 2008 at 9:30 am and is filed under Photoshop Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Creating a Website Design From Scratch”

Leave a Reply

Name (required):  

Mail (will not be published) (required):  

Website: