Page: Previous 1 2 next

Now we are going to create those top circle decorations, first pull out the circular marquee tool and make a selection like so (be sure to make a new layer) :

It doesn’t matter where you make the circle on the screen just be sure to use the arrow keys to center the circle in the top center of the document and fill the circle with white, (make half of the circle off the screen like below):

Apply the following settings to the layer:

Now with that layer selected press ctrl+j to duplicate that layer, press the (v) key to bring out the movement tool and press shif+upkey on keyboard, to move the duplicated layer up a bit, repeat that process a third time to come out with this:

Next we are going to work on the Main Content Header Area, pull out the rounded rectangle tool and drag out a shape like so (note make sure your foreground color is white, I ctrl+clicked on the layer so you could see what the shape looked like). *BE SURE THIS IS ON A SEPERATE LAYER ABOVE THE MAIN CONTENT AREA

Apply the following settings to that layer:

Now in the maincontent area, you should have a kind of table cell with a dropshadow, if you got lost in where to position it take a look at the big picture below (click on it to enlarge it):

Good so far? Great! Now the next bit is a bit hard to explain so bear with me, pull out the marquee tool and set it’s feather (found in top left corner) to about 50, now create a marquee in the far right hand side of the screen positioned like the pic below.

Press delete a couple of times, this part is hard because you really just have to do it by eye, after you think you got it looking like the pic below, move the marquee to the bottom of the rounded rectangle and press delete a few more times; you can add some text to the top like I did

Now follow the exact same procedure with the side navigation, create a rounded rectangle in the right hand side of the screen, with the dropshadow settings below, pull out the marquee tool again with the feather set at 50 and delete the bottom area of the side navigation:

You can also add in some text like I did, also note that when I created the sidenavigation layer I positioned that layer over the white background and pressed ctrl+g to “mask” that layer.
Next we’re going to create the bottom grey part for the copyright information. pull out the marquee tool and draw a box in the bottom part of the document and fill it with #E2E2E2.

Now you are basically done, Add in some cool pictures and text and you’ve got yourself a slick looking website.

I poked around with the design a bit more and came out with, see what you can come up with!:

View full image

Page: Previous 1 2 next