Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Original Clean Style for Your Website

Original Clean Style for Your Website


In the beginning let's create a background, on which we will put our menu bar. Create a new document with size of 800x600 px and fill it with white colour.

Original Clean Style image 1

Then make selection with Rectangular Marquee Tool and fill selected area with colour of #78b000.

Original Clean Style image 2

Remove selection with Ctrl+D. At this point we start to create menu bar. Select the Rounded Rectangle Tool (Radius: 15px) and make some form with any colour:

Original Clean Style image 3

Set opacity fill up to 0% for this layer and apply following Blending Options for current layer:

Original Clean Style image 4

Original Clean Style image 5

Original Clean Style image 6

Original Clean Style image 7

Original Clean Style image 8

Original Clean Style image 9

Original Clean Style image 10

Original Clean Style image 11

As the result we have got the following button:

Original Clean Style image 12

Now duplicate it five more times and locate as it shown at the picture bellow:

Original Clean Style image 13

Now, we need to make these buttons coloured. To do this change some Blending Options for each button:
For second button:

Original Clean Style image 14

Original Clean Style image 15

For third button:

Original Clean Style image 16

Original Clean Style image 17

For fourth button:

Original Clean Style image 18

Original Clean Style image 19

For fifth button:

Original Clean Style image 20

Original Clean Style image 21

For sixth button:

Original Clean Style image 22

Original Clean Style image 23

We have got the following result for each button:

Original Clean Style image 24

After that we need to add the text to each button. Get out the Horizontal Type Tool and type the title for one button with white colour and using the Myraid Pro font. Try to get the same result as it's shown on my picture bellow.

Original Clean Style image 25

Then apply the following Blending Options to this text layer:

Original Clean Style image 26

Get a shadow from the text.

Original Clean Style image 27

After that copy text layer five more times using Ctrl+J and locate copied layers above all buttons. For each button type own title as on picture below:

Original Clean Style image 28

At this point we finished our menu. Now, I think, we should add the logo to finish off the site design.
Select the Horizontal Type Tool and write out the name and company slogan with white colour and using the AvantGarde Md BT font.

Original Clean Style image 29

Time to add the logo. Select the Custom Shape Tool and choose the standard form from the palette:

Original Clean Style image 30

And now draw the puzzle in the left bottom corner of canvas:

Original Clean Style image 31

Now, rotate it a little bit using Ctrl+T:

Original Clean Style image 32

Add a few shapes to our logo in the same way:

Original Clean Style image 33

And the last step we need to do is add barely perceptible logo to the background behind the buttons. Copy three of layers with puzzle and apply the following Blending Options to each of copied layer:

Original Clean Style image 34

Now, you get something like this:

Original Clean Style image 35

After this move all grey copies of puzzle under layers with menu and proportionally increase to the following size like on picture below:

Original Clean Style image 36

You will not lose the quality while increasing because all of these shapes are vectorial. Our lesson is over now. We have got excellent corporative design, haven't we?

Original Clean Style Tutorial: Final Result



Author's URL: PhotoshopStar
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 "Original Clean Style for Your Website"

Only registered users can write comment

Reader's comments