Her

Home Photoshop Tutorials Web Layout Simple and Fresh Website

Simple and Fresh Website

Author: DesignTutorials.info Author's URL: www.designtutorials.info More by this author

This tutorial will teach you to make a simple, colorful design. The multiple boxes will divide the information very well. You can use the colors for importance.

Step 1

Open a new document in Adobe Photoshop of about 650x500 pixel. Fill it up with white. With your Rounded Rectangular Tool draw a rectangular. Go to Layer > Layer Style > Gradient Overlay. Here set it just like below and make sure you check the "reverse" box.

image 1

Now to make those little flowers and grass. You take your Lasso Tool and start drawing flowers and leaves shapes. This is with what I came up with. They don`t have to be perfect and just need to look like some.

image 2

This is the picture I choose for the header, you can use anything you like.

image 3

For the menu, make a new document, draw in it a small rounded rectangular and fill it with the same green you ended the header of. Now cut it in two and drag and drop the parts on the website. I only have 3 buttons, but you can have as many as you like.

image 4

The header is done. So Ctrl+Right click on every layer, without the first layer and Merge Layers.

Step 2

For the text above use the following color (#708348). The title should be bigger and with "bold" or "strong" and the subtitle should be smaller and not "strong".

image 5

Step 3

Now the structure is ready. Depends on what theme will you pick for the website. Mine is a non-profit organization that is helping children. In the Box below you should add info and because of the colors you can divide it in sections.

Step 4

Now add the text and anything else you like and the layout is ready. Mine looks like this.

Simple and Fresh Website
Click to enlarge