Sleek Shiny Design
First of all create a new document 9 x 9px. Now using the pencil tool (B), and black as the foreground colour, draw the following pattern. Then clear the background layer (or hide it).
Then, go to 'Edit - Define Pattern', and call this pattern whatever you like but remembering it would be clever. You can now close this document.
Now create the main, 900 x 700 pixels, and set the background colour to #F5F5F5.
On a new layer, goto 'edit - fill - pattern', selecting the pattern you just made. Then reduce the opacity to 5%.
On a new layer, using the rectangular marquee tool with a fixed size, create a selection 600 x 700 pixels and fill it with white.
Now, selecting the this layer and the background (ctrl + Click), with the Move tool (V) open, chose 'Align Horizontal Centers'.
You should now have the background sorted, with the white body centerd.
Now open the Blending Options for the White body and add the following Drop Shadown:
Now ive added some guides, this makes things much easier. Having your rulers out (Ctrl + R) makes this easier, as you can jst drag guides out of them. Ive created space for a 100px tall header, 40px navigation bar and 5px margin.
Set your foreground colour to #1EBCEE, now selecting the rounded rectangle tool (U) set to 5 px (adjust to taste), drag the shape into the header space. If you have snap-to-grid (view - snap to - guides) turned on, this will be easy. You can toggle the Guides visibility with Ctrl+H to see how things look, and bring them back when you need them. Things should look like this now:
Now add the following Bleding options to the header:
Now using the rectangular marquee tool again on a new layer, set to 590 x 50px, placed on the top of the header, fill it with white.
Now, set the layer mode to Soft Light, and reduce the Opacity to 50%:
Hopefully things will look like this now:
Now on a new layer, select a 900 x 40px marquee to fill the navigation space. Then fill (edit - fill) the selection with the Blue (#1EBCEE).
Now apply the same Gradient Overlay as you did with the header (copy the settings from the header to save time). Then reduce the layer opacity to 75%.
Next we add the shine again, this time with a 900 x 20px selection on a new layer, fill the top half of the nav bar with white and set it to 50% opacity, soft light.
The body of the site could be done in many ways, so i've just added some text to the header for now. Using 'Helvetica Neue' size 60pt, with the following settings:
And heres what im left with:
Guide on coding this design in HTML and CSS.
ty, and you can download my PSD file here.