Her

Home Photoshop Tutorials Web Layout Creating Web Site Template

Creating Web Site Template

Author: Head Nerd Author's URL: www.photoshopnerds.com More by this author

These days anybody and everybody need a website. And there are different ways of designing webpage layouts for different organizations. In this tutorial we're creating a web page template for an imaginary children's learning center. We'll keep it simple and colorful so that it appeals to children and young parents. Start by opening a new file. Keep width less than 800 pixels so that it can be viewed on an 800X600 screen size without any horizontal scrolling. We'll start with header design. Using pen tool create a rectangular shape that is rounded from top left.

image 1

Double click the layer to open layer style window and enable stroke. Apply settings as shown.

image 2

image 3

Using rectangular shape tool create a rectangle with some different color.

image 4

Create another rectangle. Place these rectangles to the right side of the page. It will serve as placeholder for keeping small snippets of info about the site.

image 5

image 6

Create rectangles for buttons. We are taking different colors for every button. Place these buttons on the left side of the webpage.

image 7

image 8

Add an image at the top of the buttons.

image 9

Add few more images, place one on top of the right panel.

image 10

image 11

Add company logo at the top left of the page.

image 12

Type "Children's Play Center" in the header area. Use kids fonts for maximum impact

image 13

Type some cool lines in matching colors below the header.

image 14

Finally add other text details and some text links at the bottom of the page.

Creating Web Site Template

  This completes a nice, colorful template for children's learning/play center. Don't forget to add copyright info at the bottom of the page.