PhoNuts

Pages: 1 2

8. Create a new layer and use your rectangular marquee tool (again) to make a selection like shown below, fill it with any color you like, it doesn’t really matter because we’re going to add a gradient overlay (look at the second screenshot for the settings) on top of it to give it that glossy web 2.0 look again!

9. In this step I’ve already added a little bit of text (the name of a real estate company for example). The font used is microsoft sans serif and i’ve also added a drop shadow which you can add as well using the following settings!

10. Create a new layer (layer – new layer) and use your rectangular marquee tool to select a small horizontal line under your previously created banner. Fill the selection with white #ffffff and add a drop shadow (layer – layer style – drop shadow). make sure you use the right settings to achieve the correct shadow like shown in this picture.

11. Now we’re going to add a picture to make sure everyone knows that this is a website about a real estate company (ofcourse you can add other pictures if you’re planning on using this layout for something else). Anyway, I have 2 examples below this step and just copy them to your design in photoshop to use it (I think I’ve found them on google)! They have a transparant background so everything should look ok and it should be something like my outcome in the third screenshot below.

12. the only thing missing is some demo text (not really important) but the buttons aren’t there yet! So use your rounded rectangle tool for one last time to create a button (you can choose the radius and smoothness of the corners). make sure your foreground color is #b00033 and look at the example below to see what i’ve done in this step.

13. Create a new layer, select the upper half of the button created in step twelve and just fill it with any color again… then add a gradient overlay with the settings from the image below. We’re doing this to create the fantastic web 2.0 effect!

14. This is the last step… Just duplicate the layers used to create the button (layer – duplicate layer) to create a few other ones! then type out a little bit of text for the navigation and apply the same drop shadow from step 9 (the company name text) and you should be done! I’ve added some demo text to fill it with some content…

Please Login or Register to read the rest of this content.

Pages: 1 2