SEARCH
  Tutorials Photoshop Web Layout Simple Web Page

Simple Web Page

SweDesignz.com Web Layout Apr 28, 2005

1. Begin with a new file, 700x500, with #5C5C5C as your background color. Then create a new layer in the layers palette. Now when you have created a new layer set the foreground color to #500C0C, then take the Rounded Rectangle Tool and make a shape similar to the one below. ( Click for larger view )

2. Now take the Rectangular Marquee Tool and draw out a rectangle as the image below shows. ( Click for larger view )

3. Now right click inside your rectangle and choose Layer via Cut. Then hold down Ctrl and click on layer 2 in the layers palette to get a selection, then press delete. Now right click inside the shape and choose Fill and fill the shape with white #FFFFFF. ( Click for larger view )

4. Then right click on layer 2 in the layers palette and choose Blending Options and then apply this settings.

And now should it look something like this. ( Click for larger view )

5. Now go back to layer 1 and apply a 1px black stroke. Then add some text and you are done with the header. ( Click for larger view )

6. Create a new layer, then take Rounded Rectangle Tool and make a shape similar to the one below. ( Click for larger view )

7. Then do as we did in step 2 and 3, Rectangular Marquee Tool, right click inside your rectangle and choose Layer via Cut and so on. And then apply the same settings shown in step 4. ( Click for larger view )

And that's it you are done! This is what I came up with. ( Click for larger view )

Simple Web Page

subscribe to newsletter