Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Simple and Fresh Website

Simple and Fresh Website


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 Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: DesignTutorials.info
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Simple and Fresh Website"

Only registered users can write comment

No comments yet...