HV-Designs.co.uk

October 10th, 2007 in Photoshop Tutorials by Richard Carpenter

Web Design Layout #1 Tutorial

• Share

Create a new document 800 x 900 select the rectangular marquee tool and draw a rectangle at the very top using the color #288cc8. Also add these stroke settings.

Your rectangle should looks like this.

Create a new layer above your rectangle layer, select the color white and select the paint brush tool, brush some clouds over your rectangle. (If you dont have any cloud brushes download some from here)

You should have something like this.

Select the type tool and add your site title and slogan, Add an outer glow to your header text using the settings below.

You should have something like this.

Create a new layer above all the other layers, then select the rounded rectangle tool draw out a small rectangle (button size). Fill with the color white and add this layer style.

Place the button at the bottom of your clouds and blue rectangle but make the button overlap (see image below).

Now duplicate the button up how many times needed. (right-click layer > duplicate layer)

Now hide ALL LAYERS apart from the BUTTON LAYERS then goto “layer > merge visable”. Your buttons should now all be on one layer. Select the rectangular marquee tool and make a selection at the bottom of the buttons BUT underneath the stroke on blue rectangle.

Hit the delete key on the keyboard, you should then be left with this.

Label your buttons. Now save this image to your desktop (IMAGE HERE) Select the rounded rectangle tool and draw out a rectangle underneath your buttons, once drawn select the pen tool, right click the rectangle on your canvas and goto “make selection”.

Open up the image you previously saved to your desktop, goto “edit > copy” head back over to your layer then goto “edit > paste into” Move/reszie image to fit like the image below, once you’ve postioned it how you want it make a selection like the image below.

Press “ctrl + t” on the keyboard to enter into free transform mode, drag the middle anchor point all the way across to the other side (might need to do it twice). You should be left with something like this.

Add a stroke to finish it off.

Now select the rounded rectangle tool again and create a button next to your nav bar like this.

Just color it any color for now as it will shall change later. Select the the big rectangle layer with your eye image, but click it wilst holding the ctrl key on the keyboard, you should get the dotted line around your rectangle.

Now click your new button layer (the black button you just created) while the selection is still active and goto “select > modify > expand” expand the selection by 6 pixels. Once expanded hit the delete key on the keyboard. Your button should now look like this.

Add these layer styles to your new button and label it “home”.

You should have something like this.

Select the rounded rectangle tool yet again, draw out a content box and add this stroke to it.

Add your welcome text and title.

Goto your custom shapes menu and pick out the drawing pin shape.

On a new layer draw 2 drawing pins, color them with the color #288cc8. Place them either side of your welcome message.
Now add more content boxes using the same steps as above.

Once your finished add a little rectangle at the bottom using the color #288cc8, this will be your footer.

And here’s the final product.

• Share