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.