Creating a Website Design from Scratch: Part II

If you haven’t read the first part of our Photoshop Tutorial yet, we gladly unfold to you all steps of page creation from the very beginning. But in case if you have already reproduced the whole process step by step and have already created a Home page, you may skip some steps and proceed to step 9. So, take a deep breath and enjoy your journey!

 

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 blue rectangle (color #78c5ef).

 

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. Now we draw the lace line. The line with two circles 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.

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

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

8. Add header and footer text (plus a logo if you want). This whole thing is done with a Horizontal Type Tool.

Well… if you have a ready Home page .PSD file, you don’t have to perform all these all over again after doing it all with our first tutorial. Just open the Home page PSD file, then delete all unnecessary elements leaving only the header, footer, two holes with the rope line and yellow ellipse with the applied styles to the ellipse layer: a simple 3px Stroke and the Outer Glow.

 

Now we set the foreground color. You may select any color you want. In our case it is blue (#78c5ef). Then mark the proper layer as active, and with the help of a Paint Bucket Tool fill it up with the selected color.

 

Then with the help of the Move Tool drag this ellipse to the desired place.

 

9. The next step is to create an additional (extra) navigation in the top right corner. For this purpose you should create a new layer. With the help of a Pencil Tool (Master Diameter – 1 px) and Horizontal Type Tool (T) you may easily draw a Home Page icon, arrows and write the text.

10. It’s time to create a left text block, and there are no difficulties with it. Using a Horizontal Type Tool you may write any text and set any font and font style.

11. The next step is to create a vertical scroll bar. For this purpose we choose a Brush Tool with diameter 4px and draw a vertical white line.

Then select another color, yellow for example, and add a scroller.

12. The right text block is created in a similar way that the left one.

13. Next thing we are doing is creating two white squares for images. So, create a new layer, then by using a Rectangular Marquee Tool select a place for an image. Set white as a foreground color and with the help of a Pain Bucket Took paint this square over.

14. Apply a proper style to the square layer: a simple 1px Stroke and the Inner Glow like this:

15. Then duplicate this square layer and place the copy below.

16. Add an image as a new layer and put it ABOVE the square layer. Then by creating a clipping mask we place this image inside the square.

17. The same operations should be done with the second image.

18. Now it’s time to integrate the illustration element. Open the illustration PSD source file and choose layer group 5 (that’s the group that we will be integrating in this design - the one with the businessman).

19. Drag that layer to the design.

20. Place the businessman image and curves to the desired locations by linking the proper layers and moving them together. Merge the curves layers group into one layer - it will be more convenient for you to work. Link the proper layers and press Ctrl+E (or mouse right clicking and selecting Merge Group).

21. Then cut off curves parts along the left edge (Rectangular Marquee Tool + Delete).

Bravo! Your sub page is completely ready. Well done!

 

All other sub pages are created in the same way, and there is no need to describe the process in details because you are already familiar with this technology. Please see these additional pages below.

The only thing you should pay attention to is a contact form. Firstly we set white as a foreground color and by using Rounded Rectangle Tool we define places for contact form fields. You may create as many fields as you wish. The width and height of the fields are also up to you.

Then by using a Horizontal Type Tool we add fields names and other text.

 

Well, that’s it for now. But there will be more tutorials from us, we promise. The closest one will be about how to actually make a Flash website out of the .PSD designs that we have made in the first two tutorials.

 

 

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

This entry was posted on Monday, July 7th, 2008 at 7:46 amand is filed under 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.

10 Responses to “Creating a Website Design from Scratch: Part II”

Leave a Reply

Name (required):  

Mail (will not be published) (required):  

Website: