Futuristic Web Layout

Open up your futuristic navigation bar that you previously created “HERE” Create a new layer under your navigation label it background. Select the colors #a3adb1 and #ffffff. Now select the gradient tool and drag a reflected gradient over your canvas.

Now duplicate your header and all elements apart from the buttons and text, flip it vertically (edit > transform > flip vertically) place at the bottom of your canvas, this shall be out footer. Add your footer text.

Now create a new layer labelled “main_top”, select the rounded rectangle tool and draw out your rectangle. Now goto “edit > transform > warp” (only availble to CS2+ users) drag the bottom anchor point inwards.

If you dont have the use of the warp tool you could leave the box square will look just as good. Now duplicate your “main_top” layer drag the duplicated layer underneath your “main_top” layer label it “main_glow” do the same again drag layer underneath the “main_glow” layer and label “main_bottom”. you should now have 3 layers all the same.

Now add these layer styles to your “MAIN_TOP” layer.

Add these layer style to your “MAIN_GLOW” layer.

Add these layer styles to your “MAIN_BOTTOM” layer.

Now select your “main_bottom” layer and select the move tool, press the down arrow key 6 times on the keyboard and 3 times to the right. Now select your “main_glow” layer and move the glow to the right to suit your visual preferences. You should have something like this.

Repeat the steps above to add more boxes.

This step is optional, as you can see ive left a gap on the right hand side at the top, ive done that as i wanted to add a 3D render of a robot.

This next step is easy to do, just add your text and any images you need to add.

On the third box at the bottom above the footer i want to add some arrows, head into the custom shapes libary and add 2 arrows either side.

Add these layer styles to your arrows.

Once finished you should end up with this.

Custom Sim Cards Tutorial

Create a new document the size you want your simcards to be, select the rounded rectangle tool and draw out your rectangle, fill with your choice of color.

Add there layer styles to your rectangle.

You should have something like this.

Select the rounded rectangle again and create a small rectangle inside your current rectangle. Hold down the SHIFT KEY on the keyboard while dragging to ensure the rectangle stays perfectly square.

Now add these layer styles.

You should have something like this.

Now select the pen tool, using the color black and a 1pixel brush draw these lines.

On a new layer draw.

On a new layer draw.

On a new layer draw.

On a new layer draw.

On a new layer draw.

On a new layer draw.

Now all your lines are drawn add this layer style to each line layer. (best way is to add to one line layer then right-click and goto copy layer styles, high-light every other line layer, right click and goto paste layer styles.)

You should now have something like this.

Select the pen tool on a new layer above your simcard but UNDERNEATH your gold plate make a selection like this and fill with the color white. Set opacity to 10%. You should have something like this.

Now add your logo and text to your simcard. Highlight all the layers and press CTRL + T and rotate it anyway you like, once rotated hit the enter key. Select the simcard layer and cut the corner off. You should then have something like this.

Funky Web Design Layout

Create a new document 850 x 1024 with a white background. Select the rounded rectangle tool and create a rectangle at the top.

Add these layer styles yo your rectangle.

Now add your navigation text and a little symbol as a seperater.

Now select the rounded rectangle tool again and create a number plate shape, fill with the color #0195cb and add a 2pixel white stroke.

Now for this part and the next few steps your going to need a set of different brushes, all of which are included in with the PSD download. You need some random grundge brushes, techy shapes brushes, vector shape brushes, circle shape brushes and last but not least some splat brushes. Select the rubber tool and use these settings.

As your brush you need to choose a grunge brush. On your number plate shape start to brush randomly around the edges and abit in the middle. You should end up with something like this.

Now add your website text and using then pen tool add a shine.

Now the intresting part, select your brushes I.E circle, vector shapes etc… and build up your image like this.

Make sure every item is on a new layer for quick and easy editing. Now select the rounded rectangle tool and draw out a smaller rectangle fill with the color #f5429f, now with your rubber again using the same method as above rub some away, Add some welcome text.

Repeat the above step adding more content as you go along…. im not being very specific here as its mainly adding text and repeating the step above and im sure by now you no how to add text. 🙂

Now in-between our content we need to add some sort of a divider…. to do this just select the type tool and type out some dash’s ( —– ). Then while the text tool is still active click this icon.

Now experiment with the features of this tool as it can come in handy creating text effects.

Now for the footer. Duplicate your grey navigation and flip it vertically ( edit > transform > flip vertically ) Move to the bottom of the canvas, add your footer text.

Now duplicate the elements of your header, rescale abit by clicking “ctrl + t” and move down the bottom right hand corner. You should end up with this.