Psdbase - Adobe Photoshop Tutorials

Create An Amazing Vibrant Layout

On 02.20.10, In Web Layouts, by admin

In this tutorial we will create a amazing vibrant layout. we will use Filters, layer styles and more to create each effect to achieve the stunning end result

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #ffffff

Creating the header

2 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,

its height should be 400px-500px

3 Set the foreground color to #bb8cf6 and the background color #433062. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gredient in the selection

4 Create a large radial gredient in the middle of the display area

5 Set the layer’s blending option to overlay and opacity to 50%. Apply the Mozaic filter to the layer pixelate>mozaic

6 Select the polygonal lasso tool, create a small 5px by 5px triangle with 45 degree angle’s, fill the layer Grey #3e3e3e shift+F5

7 Duplicate the layer multiple times and place them in a horizontal line until they reach both sides of the canvas

8 Fill the above purple area using the same color as the triangles Shift+F5

9 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,

its height should be 10px Fill the layer dark Grey (#2f2f2f)

Creating the Rotator area

10 Select the rectangular marquee tool (M) and create a rectangular section, it’s height should be 480px
and width 900px, Fill the selection white (#ffffff) and reduce it’s fill to 20%

11 Double click the layer to open the layer style dialogue box, enter the settings below

12 Add an image into the rotator box, you should add a margin of 5px around the entire image

Creating the 3D wrapped bar

13 Select the rectangular marquee tool (M), create a rectangle with a width of 355px and height 117px fill the layer dark purple (#453164) shift>F5

14 Duplicate the layer, select the duplicate that is behind the other open the Hue and saturation box (crtl+U) and lower the lightness to -15. Go to edit>transform and use Skew, skew the right side downwards

15 Using the rectangular marquee tool (M) cut the excess purple area (just after the Envato image)

16 Drag the layer behind the rotator and you should get the illusion of depth

Creating header divider

17 Using the rectangular selection tool (M) create a 1px black (#000000) across the top part of the purple header area, 1px under that create a gradient going 200px downwards

18 Lower the opacity to 20% then move the layer down 100px

Creating the footer

18 Select the rectangular selection tool (M) and create a selection going across the bottom part of the canvas, its height should roughly be 100px-150px

3 Set the foreground color to #523b74 and the background color #433062. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection

Adding Content

For the logo we use Myriad pro, with some gradient overlay layer style effects

For the navigation we used the same Myriad pro font, with some drop shadow layer style effect

I used the same Myriad pro font on the rotator 3d panel, with the same drop shadow as the navigation

for the main content I added some simple content areas:

• what we do box
• new’s box

For the footer we added simple Arial text

Congradulation!

You have completed our tutorial you should have something like this

Don’t forget to sign up to our twitter and rss