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

WordPress Mockup Layout

Create a new document 850×800, fill your background layer with the color #272727. Create a new layer, select the rectangular marquee tool and draw a thin rectangle at the top of you canvas, fill with the color #121212.

Add your wordpress title and slogan, and any additional information you want in your header.

Select the elliptical marquee tool and draw 5 white circles all on there own layer.

Goto “filter > blur > guassian blur” and blur each circle by around 3-4 pixels. Now add this outer glow to each circle.

Place the circles layers underneath your header rectangle, space them out evenly and place them slightly under your header.

Underneath your circle layers draw out 5 rectangles using the rounded rectangle tool. Fill each rectangle with the color #1a1a1a.

Now add your navigational text and some little arrows to complete the button.

Select the pen tool and two shades of grey, draw two 1 pixel lines next to each other about the same height as your button. Duplicate the line and place inbetween your navigation buttons. Merge all your “line layers” together as one. Add a layer mask to the layer then select the gradient tool with a “reflected gradient”, drag the gradient over half of the lines. Now add this layer style.

You should end up with something like this.

Select the rectangle tool and draw out 4 content boxes keep each box level and dont move them to far apart, fill them with the color #1e1e1e.

Add these layer styles to each of your content boxes.

Select the rectangle once again and create a big rectangle at the bottom of your canvas, fill with the color #121212, and add a 2pixel black stroke to it.

Add your footer content to your footer box. My footer contains the same title and slogan as in the header, ive also added some example postable data.

In your main content box add a small rounded rectangle using the rounded rectangle tool.

Add these layer styles to your box.

This is now our calender icon and should look something like this.

Now add your day and date to the icon. Under the month bit add a white rectangle over the top then just make the selection, inverse it and hit delete. Lower the opacity to 10%.

Now continue to add your content for each box.

Your final image could look something like this.

3D Glossy Arrows

Create a new document big enough for your arrows to fit, fil your background with a color of your choice. Select the arrow out the custom shapes libary.

Draw out your desired arrow shape, fill it with a color of your choice as this will change when we add the layer styles.

Label your arrow shape layer “TOP ARROW”. Now hold down the alt key on the keyboard and press the down arrow key then the left arrow key (keeping alt key pressed down) do this about 20-40 times, this will determine the thickness of our arrow. Once you have finished merge all your duplicated arrow layers into one by press “ctrl + e” once you have merged all your layers label the new layer “arrow bottom” you should have 3 layers in your layers pallet “background layer”, “bottom arrow”, “top arrow” (make sure your top arrow layer is at the top). heres what you should have ive colored my bottom layer red for your benifit.

Now add this gradient overlay to your top arrow layer.

Add these layer styles to your “bottom arrow layer”.

You arrow should look something like this.

Using the pen tool create a selection like this.

Create a new layer above your top arrow layer and label it “shine top” fill the selection with the color white set layer opacity to about 20-22%.

Do the same for the bottom arrow layer only this time use a half a circle (see image below). Lower the opacity even more to complete the effect.

Now select the pen tool, a 1 pixel brush and the color white just create a line somewhere on the arrow.

Right-click and goto stroke path. Lower the opacity to about 60%.

Do the same as above only this time choose a different part of the arrow.

Now finally select the elliptical marquee tool and create 2 white circles.

Goto “filter > blur > guassian blur”. Blur the circles by about 3 %.

All done.

Business Layout Tutorial

Create a new document 800×800 pixels with a white background. Double click your background layer and press ok when the new layer box pops up, doing this will unlock the background layer. Add this layer style to your background layer.

Now select the rounded rectangle tool with a radius of 20pixels.

Draw out a rectangle in the middle of your canvas, then right click and goto “fill path”. Select the pen tool then right click on your canvas and goto “delete path”, you should be left with a white box with nice curved edges.

Add these layer styles to your rectangle.

Duplicate your content box you just created and make a new layer above it, hide your background layer and your orginal content box layer. Select your new layer and then goto “layer > merge visable”. Head over to “filter > blur > guassian blur” blur the content box by 6pixels, change layer opacity to 60% and layer blending mode to screen. You should have something like this.

Thats our content box done, select the type tool and type your site title and slogan.

Select the custom shapes tool and select this arrow (see image below).

Add the arrow by your site title and slogan.

Whilst holding down the “ALT” key on your keyboard hit the down arrow key then the right arrow key, do this about 10-15 times depending on how thick you want your arrow to look. Everytime you hit the down and right arrow button (not together) a new layer should be created. Once your down merge all your layers together APART FROM THE ORGINAL. Drag the duplicated layer underneath your orginal, then label them top and bottom so you dont get mixed up. Add these layer styles to your bottom layer.

Your arrow should look like this.

Now add these layer styles to your top layer.

You should have something like this.

Create a new layer above your top layer select the newly created layer and click on your top layer whilst holding “CTRL”, once the selection has been activated goto “edit > stroke”, fill with a white 1 px stroke.

You should have something like this.

Ive also added a shine as you can see on the image above, you should no how to do that by now. Select various custom shapes from the custom shapes tool and create your navigation.

Duplicate Your header elements and transfer them under your content box change the text to suit your footer.

Now fill your content box with your content.

Web Design Layout #6

Create a new document 1000×1355 select the colors #2493b0 and #23454c, select the gradient tool and with a linear gradient fill your background. Lightest color at the top. Now select the rectangular marquee tool, draw a rectangle the width of your canvas and about 50-150 pixels in height, fill with the color ##222223. You should have something like this.

Now on your rectangle add some welcome text and 2 tabbed like buttons which were created using the rounded rectangle tool, then just chopping off the bottom rounded edges. Add this layer style to complete the effect.

You should have something like this.

Now add your website title, slogan and logo to the right of the layout, add a simple outerglow to your text.

Now for this next step you will need some cloud brushes (included in the PSD download), add some clounds underneath your rectangle and website title.

Try not to make the clouds reach right across the canvas, keep them all in the center if possilable. Now select the rounded rectangle tool and draw out 2 rectangles fill one with the color white and the other with the color #212121. You should have something like this.

Now select the rectangular marquee tool and the color #ebebeb, draw a rectangle over the top of your white rounded rectangle then with the color above. Hold ctrl and click on your white rectangle layer, this should make a selection, now whilst the selection is active click your grey rectangle you just created and goto “select > inverse” then hit the delete key, you should be left with something like this.

Do the same again only this create a triangle in the corner.

Do the same as above untill you have a total of 6 boxes.

Now add your content for each box.

Underneath your last two boxes you need to add some more clouds, ive added 2 sets of cloud brushes and lowered the opacity of both to make them abit more realistic.

Now finally add your footer which is pretty much the same as the top navigation. Heres the final result.

Layout inspired by “misht

LG LCD Monitor Icon

Create a new document 400×400 pixels, fill your background with the color #212529. Select the rectangular marquee tool and draw out a rectangle Fill with the color white, then add these layer styles.

You should have something like this.

Now create another rectangle but alittle bit smaller, fill with the color black.

Do the same again but make it a tiny bit smaller, fill with the color white and then add these layer styles to it.

You should have something like this.

Now select the rectangular marquee tool once again and create 2 white squares these will be our buttons, also select the elliptical marquee tool and create a white circle, this will act as the monitors little badge.

Now select ALL layers part from the background layer, then goto “edit > transform > distort” OR “edit > transform > perspective”, i find distort is better as it gives you more control over the angle etc…, slightly change the perspective like so.

Now with the pen tool draw a shape like the image below, fill it with the color white underneath your blue screen layer.

While your white shapes layer is selected ctrl + click on your black screen layer, then goto “select > inverse” then hit the delete key, you should be left with a shape inside your black screen, set the opacity to 16%.

Repeat the over steps for your blue screen, only this time do it twice in the opposite drections.

You should have something like this.

Now click your monitor layer (the grey box) whilst holding the ALT key on the keyboard and press the left arrow key a couple of times, this will duplicate the layer and move it 1 pixel to the left with each press, do it 10-20 times depending on how thick you want your monitor to be. Once you have finished HIDE ALL layers apart from your duplicated layers you just done, then goto “layer > merge visable”. Unhide all your other layers then drag your merged layers behind the monitor layer (the grey box). You should have something like this.

Now under ALL of your monitor layers select the elliptical marquee tool and create a circle like so.

Fill with the color white then copy/paste your monitor layers styles (the grey box) to your circle. This will act as our stand. (you might need to adjust perspective slightly).

Now with the pen tool and a 1 pixel white brush, create 2 sets of lines (marked in red on image below).

Next create 3 circles (see image below).

fill with the color white, then goto “filter > blur > guassian blur”. Blur by about 6-7 pixels.

Now finally with the pen tool create a selection like the image below.

Fill with the color black and set layer opacity to about 17%, make sure the layer is above your stand and below everything eles in your layers panel. Thats it all done.

Thermometer Icon

Create a new document 450×450 pixels, Fill your background with the color #bec0bf. Select the ellliptical marquee tool and draw a white circle towards the bottom of your canvas.

Select the rounded rectangle tool with a radius of 40 pixels.

Draw a thin rectangle, but go over your circle fill with the color white also.

Merge both layers togther and add these layer styles.

You should have something like this.

Follow the first couple of steps creating the shape only a smaller version of it using the color red. Merge both layers together.

Add these layer styles to your red shape.

You should have something like this.

Select the elliptical tool and make a selection like this.

Fill with the color white, set layer opacity to 60%. Add a layer mask and drag a linear gradient over the top to blend it in.

Select the same tool again only this time once you have drawn your circle draw another one over the top then hit the delete key, the idea is to make like a moon shape.

Again add a layer mask to blend it in. Now select the pen tool and create a shape like this.

Fill with the color white and set layer opacity to 15%.

Now with the rectangle marquee tool add your lines.

Video Sharing Layout

Create a new document 900×1000 fill your background with the color #292929. Find yourself a picture of a film reel, i found one on google quite easily. Add you film reel to your canvas and remove the background from it using your favourite cutting tool.

Duplicate your film reel and goto “edit > transfrom > flip vertical” place your film reel underneath to act as a reflection, add a layer mask and drag a linear gradient over the top to blend it in.

Now select the round rectangle tool, with a radius of 20 draw out a long black rectangle.

Now select the color #626262 and draw some rectangles inside the rectangle using the rectangular marquee tool.

Now do the same again only this time create smaller rectangles top and bottom using the color white.

Now we have our film strip merge all your square layers you just created into one. Drag your film strip up by your film reel, set layer opacity to 50% and add a layer mask, drag a linear gradient over the top and blend it in from the right.

Now add your website title and slogan. You should have something similar to this.

Now on a new layer create a small pill shape button using the rounded rectangle tool, add these layer styles.

Your button should look like this.

Select the ecliptical tool and make a selection like the image below.

Fill with the color white, then set opacity to 25%. Now hold ctrl and click on your button layer to make a selection then goto “select > inverse” and hit the delete key. You should be left with a nice shine. duplicate the button and shine as many time as needed. Add your navigation text. Finally duplicate all your buttons, move them down underneath, add a layer mask and lower opacity to suit.

Now added a sample video, ive just used a screenshot.

Create a smaller button like one of your navigation buttons, copy/paste the layer styles.

Still with the rounded rectangle tool draw a bigger one over the top, and add these layer styles.

Now add some content, and repeat the above steps to create more content boxes.

Now finally create a rectangle at the bottom of your canvas for your footer, copy/paste your button layers styles to it.

Car Sales/Club Layout

Create a new document 900 x 1130, fill the background with the color #343436. Now your going to need an image of a car of some sort, ive chose a vector that i found on google. (IMAGE NOW REMOVED DUE TO COPYRIGHT) Best to find one with a simple background. Copy/Paste your car image onto your canvas, resize down to fit into the top right hand corner of the canvas.

Select the first few pixels of the car image using the rectangle marquee tool.

Now press “ctrl + T” and drag the middle anchor point on the left right the way across the canvas.

Now select the rounded rectangle tool, draw out a number plate type shape, press ctrl+t and rotate it slightly like the image below.

Now add these layer styles to match mine.

On a new layer above your number plate shape select the circle tool and create a selection like the image below.

Fill with the color white and set layer opacity to 10%, Now while the white circle layer is selected press ctrl and click on the number plate layer to make a selection of the number plate, now goto “select > inverse” and hit the delete key. You should be left with this.

Do the same again only this time change the white circle to.

Set the 2nd white circle layers opacity to 7%, you should end up with something like this.

Now on your number plate shape add your website title and slogan, also create 4 really small circles for each corner of the number plate and add these layer styles.

You should have something like this.

Now underneath your header create a rectangle the width of your canvas, this will be our navigation bar.

Add these layer styles to your navigation.

Now add your navigation text, and add a shine in the same way you did before on the number plate only this time use a rectangle the width of the navigation. Your navigation should now look like this.

Draw a box using the rounded rectangle tool underneath your navigation, leaving a gap inbetween the two items. Right click your navigtion and goto “copy layer styles” now right click your content box and goto “paste layer styles” you should have a navigation box like this.

Create a small circle inside your content box this will be our little orb icon, copy and paste your navigation layer styles to your circle, and add 2 shines to it like we did on the number plate in the header. Goto your photoshop custom shapes and select a shape to go into your orb.

Now add your content box title and some content.

Now follow the steps above to create more content boxes.

Now finally duplicate all your naviagtion elements, drag to the bottom of your canvas, change the naviagtion text items to your copyright information. Your layout should look like this.

Portfolio Layout #6

Create a new document 850×850 pixels, fill your background with the color #1b1b1b. Select the rectangular marquee tool and create a box the width of the canvas, fill with the color black for now.

Add these layer styles to your rectangle.

Your rectangle should now look like this.

Add your header title using the colors #adc203 and #424242.

Now add your navigation text to the right of your text using a smallish font size.

Above your text add a small icon to represent that section, all the icons i used are from the custom shapes libary.

Add these layer styles to each of the icons.

Now draw a square over each of the icons and text. (i have done each square seperatly, the image below is just to show the widths of each square)

Once you have drawn all the squares fill them white then merge them all together, set the layer opacity to 5%. Then add a layer mask and drag a reflected gradient over the top to blend in the top and bottom edges. Your end result should look like this.

The next steps are optional, duplicate your header title text and flip vertically drag the duplicated text under it to act like a mirror then add a layer mask to produce a reflection. Also if you make a diagnol line pattern (included in PSD) then add some diagnol lines to your header.

Now select the rounded rectangle tool with a radius of 10pixels draw out a small rectangle.

Add these layer styles.

Now using the same tool add a small square (hold shift while dragging with the mouse to produce a perfect square.)

Add these layer styles to your square.

Now duplicate your home icon and drag it into the center of your square, also add your content title. Select the elliptical marquee tool and create a white circle that overlaps your icon, ctrl + click your icon while the white circle layer is selected, goto “select > inverse” and hit the delete key set opacity to 25% and you’l be left with a simple shine over your icon. (do the same with your content title box using the polygonal lasso tool).

Now select the rectangular marquee tool and draw a rectangle underneath your icon.

Add these layer styles to your rectangle.

Finally set layer opacity to 24%. Follow the above steps for your other content boxes and footer.

Now add your content to each section.

FINISHED

Layout inspired by “carl”