Car Layout #3

Create a new document 850 x 1000 pixels, fill your background layer with the color #1e1e1e. Select the rectangular marquee tool and create a rectangle the width of your canvas, place the rectangle at the top of your canvas, fill using the gradient tool, using the radial gradient and a light shade of grey. You should have something like this.

With the polgonal lasso tool create a shape like this.

Fill with the color white, but leave the selection still selected. While its still selected head over to the channels pallette and click save selection as channel.

Once you have clicked the save selection as channel button you should have a another layer called “alpha1” select it, press ctrl + D to deselect the selection, then goto filter > blur > guassian blur, blur by 10 pixels. You should be left with this.

Press CTRL + L to open the levels panel, drag the 3 trianglar points into the middle, you will notice the blured shape sharpens and becomes more rounded.

Click your “alpha1” layer whilst holding down the ctrl key on the keyboard to load a new selection. Click back to your layers pallette, create a new layer then fill the selection with the color white. Delete your other layer you created previously with the polygonal lasso tool. Add these layer styles to your new shape.

You should have something that looks like this.

With the rectangle marquee tool add a small rectangle over the top of your shape, fill with the color white and set layer opacity to 5%.

Add some navigational text either side of your shape.

Now with the rectangle marquee tool, or the pencil tool add two 1 pixel lines side by side to create a divider, place the divider inbetween your navigation text.

For this step your going to need a seperate image of a car of your choice, im using an image from digimods (full credit going to the author “norder”). Remove the background from your car image, scale it down with the transform tool and place in the middle of your navigation.

Duplicate your car image and flip it vertically, align the image below the orginal, then add a lyer mask, drag a linear gradient over the top to produce a reflection. Lower the opacity to suit yourself.

Add some additional text, logo and website title to complete the header.

Using the same method as we did for the navigation create a further 2 boxes either side under our navigation. Dont forget to blur by 10pixels and move the levels.

Add these layer styles to your 2 content boxes.

At the top of your content boxes where the tab is, add your content box title text and a logo of your choice, im using the arrow from the

custom shapes libary within photoshop.

Create a selection like in the image below, fill with the color white and lower the opacity.

Fill your content boxes with your content, and place a divider underneath your content box titles, the dividers are the same as the ones created in the navigation.

Create a further two boxes underneath your main boxes, add a simple stroke to each box to give it some detail.

Add your footer content by duplicating your header text and logo. Add some content to fill your other content box.

To create the buttons select the rounded rectangle tool, draw out a black rounded rectangle then add these layer styles.

Finished

Hosting Layout

Create a new document with the dimensions 850×1030 pixels. Double click your background layer then press ok on the box that pops up, your background layer should now be “unlocked” double click your background layer once more and add this gradient overlay.

Select the rectangle tool and create a rectangle at the top of your canvas.

Add these layer styles to your rectangle so it looks the same as the image above.

Now add some content onto your top rectangle, il use this area for a login form, the icons on the image below were from the custom shapes libary within photoshop.

Select the rounded rectangle tool and draw out two rectangles about 140 pixels wide and about 60 pixels high “big button size”. Place them underneath your top rectangle.

Right-click your top rectangle layer and goto copy layer styles, then right click your two buttons you made in the step above and goto paste layer styles. You buttons should be transformed to look like the image above. Add some text to your buttons and maybe some icons from the custom shapes libary.

Find an image of some sort of server and place it somewhere in the middle underneath your buttons.

Duplicate your server image onto a new layer, press “ctrl + T” to free transform it, hold the shift key and make it alittle bit smaller than the orginal. Holding the shift key while re-scaling will keep its orginal aspect ratio. Move your duplicated server image across a little bit so it looks like its behind the 1st one. With the 2nd server image layer selected goto “filter > blur guassian blur” blur it by about 2 pixels.

Repeat the steps above and 2nd time only this time make the image abit smaller than the 2nd one and blur it by 3 pixels instead of 2. You should have something like this.

Duplicate each server image, and drag the layers underneath there orginal layers. Goto “edit > transfrom > distort”. Distort them so the front of the server image match like the image below.

Now add a layer mask to the duplicates so they look like a small reflection.

Add your website logo, title and slogan to the right of the servers.

Select the rounded rectangle tool and create three boxes underneath each other.

Add these layer styles to your boxes so they match the image above.

Fill your boxes with some kick ass hosting plans. Use the server images as icons.

Duplicate your website title and place in a content filled area with some nifty typography.

Add your footer in the space thats left at the bottom, i dont think the footer needs much explaining.

Finished.

WordPress Layout #2

Create a new document 850 x 1200 pixels with a white background, double click your background layer, press ok when the box pops up. This has now unlocked your background layer, double click your background layer again and add this layer style.

Select the elliptical tool and draw out a small selection.

Hold the shift key and drag out another selection, over lapping your orginal selection.

You will notice the selections merge togther, reapeat the process untill your have a cloud looking shape like this.

Once you have you cloud shape fill it with the color white, then add these layer styles to it.

Set the layer opacity to about 69%, then duplicate your clouds a couple of times, changing the opacity of each one.

Add your blog title and slogan.

On the text in the header just copy and paste the layer styles from the clouds to the text. Select the rounded rectangle tool and draw out a small navigation size box the side of your blog title and slogan, again copy/paste the layer styles from the clouds to your navigation.

Add your navigation text, using the elliptical tool add some blue dots inbetween each navigation link.

Select the round rectangle tool again and draw out your content boxes like this.

Add these layer styles to your content boxes.

Select the rounded rectangle once again and create a square within your big main content box.

Add these layer styles so it looke like the image above.

Select the square tool and add a dark grey square in the middle. Use the elliptical tool to create a shine effect.

Using the rounded rectangle again add a green rectangle above your polorid, then start adding your content.

Finally select the rectangle tool and create a rectangle at the bottom of your canvas, fill with the color white then copy and paste the layer styles from the cloud, copy elements from the header I.E clouds and title, combine them together to get your footer.

You should end up with something like this.

Personal Portfolio Layout

Create a new document 850×1200 pixels, double click your background layer, press ok when the box pops up, doing this will unlock the background layer. Add this gradient overlay to your backgrouond layer.

Select the rounded rectangle tool, draw out a black rectangle.

Grab an image you want to use for your header, open it up in photoshop, copy it to the clipboard then head back over to your original canvas.

Click on your black rectangle layer whilst holding down the ctrl key, this will make a selection. Now goto “edit > paste into” you are free to move the pasted image around, but as you will see it will only move about within the rectangle. Hide your black rectangle layer and add your header text.

Select the pen tool and create a selection like this.

On a new layer fill with the color white, set layer opacity to about 12%.

With the polygonal lasso tool create a box above your header like this.

Fill with any color then add these layer styles.

Add your naviagtion items to complete the effect.

For this next part your going to need a picture of a flower, and some weed type brushes, cut the background from the flower and add it your header.

Try and rotate the flower here and there and resize it so it all doesnt look the same, ive also colorized some of mine in lighter colors. Now add your weeds on a layer behind the flowers.

On another new layer underneath all your header layers draw out a rectangle the same width as the header. Copy/paste the layer styles we added on the naviagtion.

Add some elements to your box, ive decided to add a newsletter box and some tasty teaser gallery pictures.

Select the colors #242323 & #000000 create a big square the same width as the header, drag a linear gradient over your box. Find an image you would like to use in your portfolio remove the background and add it into your box.

Duplicate your image, then blur the orginal layer by about 4%. Set the layer opacity on the duplicated later to about 65%.

Now begin to add your content.

Now with the pen tool or warp tool create a shape like this.

Copy/paste the layer styles from your navigation. Continue to add the weeds and flowers as you did in your header.

FINISHED!.

Gaming Layout #2

Create a new document 900×1000 pixels with a black background. Head over to your favourite stock images site and grab yourself a picture of the earth, drag your picture onto your canvas.

Lets make our image more lighter, duplicate your photo and set layer blending mode to screen.

For this next part your going to need some “tech” brushes. Carefully add your tech brushes around your earth image, dont over do it though.

Once you’ve done that select the rectangular marquee tool and add a rectangle at the top of your canvas fill with the color #cfd0d2. Add these layer styles.

Set the opacity of the rectangle to 90%, you should have something similar to this.

With the rounded rectangle tool add 2 buttons. Add these layer styles to your buttons.

Now add some text to your buttons.

Select the rectangular marquee tool and make a selection on the left for your sidebar, fill with the color white, then set layer opacity to 15%. Finally add a layer mask then drag a linear gradient over the bottom of the rectangle.

Control click on your rectangle to load a selection, click your one of your earth image layers then goto “filter > blur > guassian blur” blur by about 3 pixels. Do the same again for the other earth layer. You should have something similar to this.

Now begin to add some sidebar content. Also add your website logo and title.

Select the rounded rectangle tool and create a white content area next to the sidebar.

Now add your main content in the white box.

Finally add your footer.

Layout inspired by “fee3r