Learn how to create a full blow layout with this tutorial, the banner of this layout uses the Flower Part One & Two tutorial. Category: Web Layouts

Learn how to create a full blow layout with this tutorial, the banner of this layout uses the Flower Part One & Two tutorial.

Step 1: Create a new document use my settings below.
View Image Here

Step 2: Create a new layer then make sure your Fourground color is this- > (707070) then Select your Rectagular Marqee tool, Change the style to Fixed size Use my Settings (Width=827 higth=138) click on the document and Fill it in by Pressing ALT+BACKSPACE, . once you have your shape move it up to the top, and you should have something like below.
View Image Here

Step 3:Now haveing the same layer selected , take your magic wand tool and select inside your shape. Then go to Select -> Modify -> Contract and contract by 1 pixle. After you hit ok Hit Back space to Delet what you have selected, then press Ctrl+D to Deselect, You should have something like below.
View Image Here

Step 4:Now that we have a very basic shape of our banner, we will now make the Navigator shape. Take your Rectagular marqee tool and change the style to fixed size on the pull down menu, use these settings ( width=827 higth=40 ). just like step two we will press CTRL+BACKSPACE to fill the shape in, Then go to Select -> Modify -> Contract, Contract it by one pixle and hit ok, delet the selected area and then press CTRL+D to Deselect. Make sure the Navigator is One Pixle away from the banner and two Pixle's away from the sides, and you should have something like below.
View Image Here

Step 5:After finishing the Banner shape and the navigator shape, now we will move on to making the Main content box and the sub content box By useing the same Techniques as befor. go to fixed size and use my settings-> (Width=234 higth=370) once you have that click on the document and fill in it in by pressing ALT+BACKSPACE then Click inside the shape with the magic pen tool, then go to Select->Modify->Contract, and contract by one Pixle, Delet what you have selected and hit CTRL+D to deselect. Make sure that you line it up befor mergeing your layers, its ok to keep them seperate if you want just incase. you should have something like this.
View Image Here

Step 6:Ok now for the main Content box, use same Technique, and use my settings. (width=592 higth=370) it should come out something like this.
View Image Here

Step 7: now we are going to creat a Gradiant for For the Top Quarter of each section. first we will start with the banner take your rectangular Marqee tool and Drag and pull like i have shown below. Make sure it is One Pixle inside of the boarder.
View Image Here


Creat a new layer and Hit ALT+BACKSPACE to fill it in. Then use my settings below to creat the gradiant. you should have something like this.
View Image Here

Step 8: creat a layer below your gradiant layer and then Merge your gradiant layer on the blank layer, this will remove all the layer stylez.
View Image Here

Step 9: now that you have your first Gradiant Hit CTRL+J and put the Gradiant on top of the Navigation bar fill free to Shrink the Gradiant on the nav bar, it might be a little to big.
View Image Here

Step 10: Now Select the First Gradiant we started with and hit CTRL+J and BRing it down to the Sub content and the main content box. Take your Rectangle Marqee tool And cut out what i am showing below.
View Image Here


You should have something like below.
View Image Here

Step 11: Ok now that you have your Gradiants Finished we will add the bg to each Section, take your magic wand tool and Select each white part of the sections, like shown below. then make the fourground this color (d08709) and hit ALT-BACKSPACE. Then ctrl+D to deselect.
View Image Here

Step 12: now we will creat the Buttons for the navigations bars.Creat a new layer and take your Rectangular Marqee tool and change the style to fixed size and use my settings (width=124 higth=19) then ALT+BACKSPACE Fill it in line it up like i have below.
View Image Here

Step 13:Now we will put the gradiant on our Button, use my settings below.
View Image Here


After that Make a new layer under your button and merge your button onto the Empty layer.
View Image Here

Step 14:With the Button layer selected hit Ctrl+J 5 times and move one by one to the side about one pixle away from eachother. Center it like i have shown below also. (merge all buttons layers together)
View Image Here

Step 15:now that we have the Buttons done we will creat a banner Box sub content Orginization box and a main Orginization box.

Banner Fixed size Settings=(width=815 Higth=101
Sub content box Fixed size=(width=220 Higth=332
main content box fixed size=(width=579 higth=332

Make sure the forground color is white and Hit ALT+BACKSPACE to fill in each section with white. Aligne them up and you should have something like below. (merge White Layers)
View Image Here

Step 16:Now Take your magic wand tool and select each section of white, then take your Gradiant tool, click the gradiant editer and use my settings Below.
View Image Here


Hit ok and Drag the Gradiant from the top to where i have it then press CTRL+D to deselect.
View Image Here

Step 17:Now Use the magic pen tool and just select the bottom two box's and then take your Gradiant tool and Drag to where i have shown below.
View Image Here


if its not colorfull enough fill free to go over it again with the gradiant tool tell you like it. take a look at what i have so fare.
View Image Here

Step 18:Making your Layout look Reflective. Start out by Creating a new layer then change fourground color to white. After that take your Rectangle tool and Draw white box's where i have them shown below.
View Image Here

Step 19: now Make sure that same layer is Selected and change the Opacity to 35% creating a nice Reflective look.
View Image Here

Step 20: Creating Text Layers, and content. The layout is pretty much finished now you just fill it in however you want make small one pixle boarder box's for your content and Choose any Picture or Graphic to put into the banner. this is what i came up with, feel free to change the color's also.

Notice how i used my Flowers in the banner, and i used Galixy wave also!
View Image Here

home: photoshop tutorials