Dark Style Web Template

In this tutorial il show you how to create a dark style layout, firstly create a new document with the dimensions 950 x 1130 pixels. Fill your background layer with the color black. Select the rounded rectangle tool and set radius to 15px.

Draw out a rounded rectangle for your header. Leave equal amounts of pixels either side and dont place it right at the top of your canvas.

Add these layer styles to your header layer.

Your rectangle should be now transformed into the image below.

On the left side of the header add your website title and slogan, on the right side add 3 navigation items.

Inbetween the 3 navigation items on the right add a very small square or rectangle, i drawn 3 pixel long line. Once you have done that add this outer glow.

You should have something like this.

Finally make a selection on your header similar to the image below.

Fill the selection with the color white then set layer opacity to 2%. Underneath your header add another rounded rectangle using the rounded rectangle tool with a radius of 15px, this will be our navigation.

Add these layer styles to the navigation.

You should have something like this.

Make a selection across half of your naviagtion.

Fill the selection with the color white and set layer opacity to 5%. Now add your navigation text. Inbetween each item add a small divider. To make the divider create two 1 pixel lines next to each other using two different shades of grey, one dark and one light shade.

To create a hover on your navigation select the elliptical marquee tool and create a white circle. Have the top of the circle just overlapping the bottom of the navigation you want to hover.

Now goto “filter > blur > guassian blur”, blur by about 6-8 pixels. Set layer opacity to 23% then delete the bottom half of the circle so it comes level with the navigation.

Where now going to make a featured box for some featured content. Select the rounded rectangle and draw out a big rectangle underneath your navigation.

Dont fill your selection with a color, instead select a radial gradient with the color #2c2d2d as your forground and black as your background and create a radial gradient in the selection, start the gradient from the bottom left corner. Then add this stroke.

You should have something like this.

Add an image of your choice, im using the final result of my iphone light beams tutorial. Add it to the left side of the box. Now add some descriptive text on the right side.

The layer styles for the silver style button are as follows.

Using the same layer styles as we used for the header, navigation and featured box create more content boxes using the rounded rectangle tool.

Add your glowing dot that we used in the header and label each content box.

The 1st content box im going to use as an image gallery. With the rounded rectangle tool add another rectangle within the content box. Then add these layer styles.

You should have something like this.

Add an image inside the inner rectangle by copying an image to the clipboard then goto “edit > paste into”. Move your image into place then create a black rectangle across the bottom of the image set layer opacity to 40% then add some image info.

To the box on the right im going to add some simple news articles.

In the 3rd content box im going to add a flickr gallery. Create an inner rounded rectangle like we did in the 1st content box.

Add some flickr images within your inner rectangle, i made my images have rounded corners by copting them and pasting them into a rounded rectangle, doing this automatically adds a layer mask, just delete the rounded rectangle after.

With the elliptical marquee tool just add two black circles in the middle at each end of the gallery.

Inside the plain black circles just add a left and right glowing arrow.

Now for the footer, Duplicate your header and all it’s elements, drag to the bottom of your canvas. Delete the little navigation the the 3 glowing dots, replace with your copyright information.

Iphone Light Beams

In this tutorial il show you how to create light beams coming from within an iphone. The inspiration behind this tutorial is from a wallpaper i found on devantart, you can view the wallpaper HERE.

Before i continue with the tutorial you will need this image of the iphone. GRAB IT HERE.

Create a new document 600×650 pixels OR however big you want the effect to be, i shall be using the pixels specified. Select the color #393939 as your forground and the color black for your background. Select the gradient tool, using a “radial” gradient drag it onto your canvas.

Open your iphone image in photoshop, using your favourite cutting tool, cut the phone from background and copy/paste onto your canvas.

(Ignore the slight difference in the gradient background its due to the image being saved as a .gif) Label your phone layer “iphone”. Layer labels are really important in this tutorial so i suggest you label all layers relating to the object on that layer. It can get very confusing at times. Duplicate your iphone layer and drag it underneath the orginal, label this “iphone reflection”. Move the object down using the arrow keys on the keyboard. Were looking for something like this.

See how i didnt actual flip the object but it still looks like a reflection. Set the reflection layer opacity to 50% then add a layer mask. Using the colors black as your forground and white as your background, select the gradient tool with a linear gradient. Drag from the bottom of the reflection layer half way up.

Once your happy with the result, right-click the reflection layer and goto apply mask. do the same as above but to the other side. Were looking for this result.

Duplicate the iphone layer once more then drag it between the orginal layer and the reflection layer. Label this layer iphone shadow. Were going to make an old school drop shadow. Move the drop shadow layer down a couple of times then add a “BLACK COLOR OVERLAY” to the layer. Goto “filter > blur > gussian blur” Blur by about 2 – 3 pixels. You should have something like this.

Now select the polygonal lasso tool or the pen tool and draw around the screen of the iphone.

Fill the selection on a new layer called iphone screen using the color #368de7.

Using the color #368de7, select the pen tool and create a big tenticle like shape, fill the shape with the color #368de7.

Set the layer opacity to 20% then add this stroke layer style to the shape.

You should have something like this.

Repeat the process explained above, make as many tenticle shapes as you want all on there own layer, might be a good idea to place them in a group folder in your layers pallette, make them different widths and directions, change the opacity of some of the layers dont keep them all at 20%. I have a total of 9 layers. Once you have all your tenticle shapes, pick one ore two and add this layer style.

Heres how mine looks.

Duplicate one of your tenticles preferbly one of the thin ones. Fill it with the color white instead of blue. Goto “filter > blur > guassian blur” blur by 6.8pixels. Now add this layer style.

Add a layer mask to the white tenticle shape then drag a linear gradient over it from the bottom upwards. Finally set layer opacity to 80%. Were looking for this effect.

HIDE all your tenticle shape layers so your just left with this.

Duplicate the blue screen layer, then drag it right to the top of layers pallette so its above everything. Goto “filter > blur > motion blur” use the setting below.

Make a selection around the bottom half of the motion blur where it goes towards the bottom of the phone and delete it. You should have something like this.

UNHIDE all your tenticle shape layers, Select them all and duplicate them. Leave them selected in your layers pallette, right-click the little eye and goto “show/hide all other layers” ALL layers should be hidden apart from the duplicated tenticle shape layers. Goto “layer > merge visable” then unhide everything. Move the merged layer down and rotate it so it lies horizontally across the blue screen.

Set layer opacity to 50% then add a layer mask. Drag i reflected gradient from the middle outwards. Make sure you have the color white as your forground and black is your background. Once you have done that your end result should be something like below. Hope you enjoyed this tutorial.

Business Layout #3

In this tutorial il show you how to make a really simple clean business layout. Create a new document 1000×960 pixels with a white background, at the very top of the canvas create a rectangle the width of the canvas and about 80 or so pixels in height, fill with the color #e9eacf. Do the same again but make the rectangle 3 times as big, fill with the color #62c0e6. You should have something like this.

Using the rectangular marquee tool create a selection as seen in the image below.

Make sure the rectangle comes level with the 1st color. Fill the selection with any color then add these layer styles.

Do the same again only create a rectangle on the blue color. Make sure the rectangle is the same height as the blue line and the same width as the rectangle created above.

Fill the selection with any color then add this layer style.

You should have some thing like this.

On the white part of the canvas do the same again, make the rectangle quite big this time, but still keep it the same width as the others. We need to make this one fairly big this time as were going to be blending it in with the white background. Fill the selection with any color.

Add these layer styles.

Create a new layer UNDERNEATH all your boxes, select the rectangular marquee tool and create a selection as tall as you want, but the same width as your other boxes.

Fill this selection with the color black, then goto “filter > blur > guassian blur” blur by 2pixels, set layer opacity to 35%. Add a layer mask to the layer, using a linear gradient drag from the bottom where your rectangle ends, upwards. This should blend in the drop shadow.

On the blue rectangle, select the pen tool and create a shape like this.

Fill the selection with the color white then set layer opacity to 5%.

Duplicate the layer and shift it upwards abit. When the shape goes over the blue line you may need to cut the top off so you dont see it on the top rectangle.

Duplicate the shapes twice more, then flip or rotate them to create a look your happy with, heres mine.

Once you are happy with the look, go ahead and add your website title, slogan and logo. Add these at the top in the 1st rectangle, also add your navigation to the right side.

Now find yourself an image of a laptop, remove the background from the laptop then stick it into the blue area of the layout on the right.

Now the laptop could do with having a reflection of itself, just to add a little bit of detail to the whole thing. Duplicate your laptop layer, move the duplicated layer underneath its orginal. DONT flip it just move it downwards untill the bottom half is identical.

Add a layer mask to the duplicate layer, then add a layer mask. Drag a linear gradient over the bottom of the front of the laptop, once your happy right click your layer mask and goto “apply mask”. then do the same for the side of the laptop. Now find yourself some an image of a butterfly, remove the background then add it also to the blue part of the layout.

On the left side of the blue rectangle add some text about your business.

The next part in the tutorial is too fill the white content with information about your business, the reason why i havent gone into great detail is because ive only used text and a couple of images and the tools ive used are only the text tool.

Once you’ve added your content you should have something like this.

WordPress Layout #3

Create a new document 900 x 1200 pixels, fill your background layer using the bucket tool with the color #363636. Select the rounded rectangle tool, change the radius to 15 pixels. (see image below).

Create a rectangle about 800 or so pixels wide and about 55 pixels in height, fill with the color black. This rectangle is going to be our header and navigation all rolled into one.

Once your rectangle has been created and is postioned near the top of the canvas add these layer styles.

Your header/navigation should now look similar to this.

On your header/navigation add your site title and slogan to the left, then on the right hand side add your navigation.

In between each navigation element add a divider. To do this select the rectangular marquee tool, zoom in pretty close then make a one pixel line from top to bottom, fill it with the color then do the same again with another color. Make sure you place the lines side by side.

Select the rounded rectangle tool on a new layer UNDERNEATH your header/navigation layer create a big rectangle, the top half of the rectangle where the corners are we want them to be hidden underneath our header/navigation (see image below).

Fill the rectangle with the color #d1d1d1, then add this stroke to it.

Now your going to need an image of some sort, ive chosen a wallpaper which i got from HERE. Load the selection of the rectangle by clicking the rectangle layer whilst holding down the CTRL key. Open up your wallpaper, copy it too the clipboard. Head back over to your layout then goto “edit > paste into”.

On the right side of the wallpaper image create a rectangle using the rectangular marquee tool, then add these layer styles.

Duplicate the box to times and place one above and one below. You should have a total of 3 boxes. You will need to cut some of the bottom box to its rounded, just load the selection, inverse the selection and hit delete. The top box should be safely tooked behind the header/nav.

The three boxes will be featured posts on our wordpress layout, and the big wallpaper will be the big image version of it. On the boxes we just made add some example post content.

Underneath all your featured posts elements, select the rounded rectangle tool again and create a smaller version of your header/navigation rectangle. All the layer styles are the same apart from we DONT NEED the drop shadow.

Now create another rectangle like we did in the 1st couple of steps in the tutorial, where we tooked the top corners underneath the header/nav.

Add these layer styles to complete the effect.

Fill your content box with some example wordpress content.

Use the steps provide above to create more content boxes for your layout.

Do the same for the sidebar in the space on the right.

Your end result should look something like this.

The Pen Tool

PSDTuts has just released an excellent tutorial on photoshop’s pen tool. Its a very detailed well written tutorial that i think every photoshop user should read.

Then pen tool is a hard tool to master and i think its the only tool that people get stuck on. Take alook, have a read and give this tutorial some love.

Gaming Layout #4

Create a new document 850 x 850 pixels, fill your background layer with the color #27252a. Select the rectangular marquee tool and create a rectangle the width of your canvas and about 120pixels in height. Fill with any color then add this gradient overlay.

You should have something like this.

Next select the rounded rectangle tool and create a rectangle, dont make it the whole width of the canvas, leave about 30-40 pixels either side. Also chop off tjhe bottom half so the bottom half the rectangle isnt rounded. The rectangle itself need to align perfectly with the bottom of the 1st rectangle we created.

Add these layer styles to your rounded rectangle to match mine above.

Add your website title, logo and slogan to your header part of the website, the logo ive used is a shape from adobe’s custom shape libary. To the far right of the header add a simple search field with a search button.

On the header text add this drop shadow.

Select the rectangular marquee tool again and create a thinner rectangle underneath the 1st rectangle we created, also make sure the layer is underneath all other layers apart from background layer obviously.

Add these layer styles to complete the effect.

You image should now match mine. On a layer above the one you just created create another rectangle using the rectangular marquee tool, make it the same width as the header, and same height as the rectangle we just created.

Add these layer styles to complete the effect.

Add your navigation items to your nav bar, then add a divider between each item. The divider is made with two 1pixel lines next to each other.

Now were to create our content boxes, the first one we’l create will be a featured box where there will be a featured game. Select the rectangular marquee tool, on a new layer create a big rectangle underneath everything eles.

Add these layer styles to your content box.

Add your featured game, im going to be using GTA4. Add these layer styles to your featured image.

Crop your image to fit inside your box, also add your game header and some descriptive text. Ive also added a readmore button and a star rating system.

On the left side of the featured box create 6 smaller rectangles, these will be our side bar menu buttons.

Use these layer styles for your menu buttons.

Once you’ve added your layer styles make them glossy by adding a smaller white rectangle over the top with an opacity of 12%.

Using a little arrow shape from adobe’s custom shapes libary, add the arrow to the menu buttons also add your menu text. The color of the arrows is #cee01f.

You should have something like this.

Using the rectangular marquee tool create three more boxes (shown in green), add the same layer styles as your featured box.

Label them using the type tool. The two boxes underneath your featured box are going to display videos and upcoming releases. Add your content to these two boxes.

The little box that we created on the left under our menu items will be our news and articles. Create a box with the color #19171c underneath the box you previously created. Add this drop shadow.

Then add your news and articles.

Using the same tecniques and layer styles mentioned above, complete the layout with two more boxes, a login box and your footer.

You should have something like this.

Ripped Paper Effect Tutorial

Create a new document what ever size you desire im going to be using a canvas size of 600 x 250 pixels. Double click your background layer to unlock it, unlocking the layer will make it editable. Add a simple gradient overlay to your background layer, im going for a greeny gradient.

Create a new layer above your background layer and label it “grey canvas” fill it with the color #E1E1E1. Now goto “filter > noise > add noise” use the settings below.

Select the lasso tool and randomly create a hole in the grey canvas.

Hit the delete key once the selection has been made then add this layer style to the “grey canvas” layer.

You should have something like this.

Create a new layer above your grey canvas layer called “white canvas layer”. Fill the canvas with the color white, select the lasso tool once again and randomly draw another hole, i might help if you lower the opacity abit as you want it rougly the same shape but alittle bit bigger. Ive set my opacity to 35%.

Hit the delete key once the selection has been made then set opacity back to 100% then add this drop shadow using the settings below.

You should have something like this.

Now go HERE and download the paper texture. Once downloaded add it to a layer above the white canvas layer. With the magic wand tool select the hole you previously cut on the white canvas layer, select the paper texture layer and hit delete. Set paper texture layer opacity to 40%.

Next select the rectangular marquee tool and create a small rectangle roughly the same height as your ripped hole, fill with the color white. With the lasso tool just randomly cut around the edges of the rectangle once a complete selection has been made goto “select > inverse” then hit the delete key, heres mine shown in red.

Now add these layer styles also label your layer “torn paper”.

Slighty angle your torn paper layer using the free transform layer (CTRL – T). You should have something like this.

Underneath your torn paper layer create a circle using the elliptical marquee tool, fill with the color black. Goto “filter > blur > guassian blur” blur by 7 pixels and set layer opacity to 15%.

You should have something like this.

Thats it, now add something between your background layer and grey canvas layer.