Web Design Layout #3 Tutorial

Create a new document 800×800 pixels with a white background. Select the rectangle tool and draw a black rectangle at the the top of your canvas, then add these layer styles.

Your rectangle should now look like this.

Still with the rectangle tool create a 2nd rectangle underneath the one you just created, but this time make it a little bit bigger and add these layer styles.

You should have something like this.

Now duplicate your blue rectangle and place it at the bottom of your canvas, this will be our footer later.

Now with the color #88763d select the type tool and type out your navigation, also with the color white type your site slogan and title.

You will notice i have alligned my text and title on the right, you will see why in the next few steps. Select the rounded rectangle tool and draw out a rectangle as seen below.

Here are the layer styles to get it looking like mine, first thou set the opacity to 60%.

Now you have it looking like mine add the rest of your navigation, ive also used some icons from the custom shapes menu.

Now find a picture, this can be a picture of anything that reflects your site, but for this example im going to use some grass. Once you have your image, resize and allign it like so (see image below).

On my site i want to have a members section, so i have created an example form of how i want it too look. (which can all be done using CSS).

Now im going to split my site into 3 sections, this is how i want it too look.

Now i shall enter my example content, which is mainly text.

Once you have your example content etc… im going to add some buttons for other stuff. Select the rectangle tool and draw a small long button, the same size as the buttons shown above (not a member & register now buttons).Once you have your rectangles drawn add these layer styles.

GREEN BUTTON

BLUE BUTTON

Once you have added your buttons you should have something like this.

Now all thats left is to add some details on your footer.

Heres is the full size view. PSD is available below also.

Vista Folder Icon Tutorial

Create a new document 400×400 pixels with any background color, im using a dark grey color as my background, something easy on the eyes. (#383838). Select the rectangle tool and draw out a rectangle, apply these layer styles.

You should be left with something like this.

Now goto “edit > transform > distort”, distort the rectangle like this.

Duplicate the layer then move the original layer over 1 or 2 pixels.

Duplicate the layer once again, and goto “edit > transform > distort”, distort and move it into postion (see image below).

Duplicate the layer again and move the rectangle over 1 or 2 pixels.

You should have something like above. Dont worry about the jagged lines as we’l tidy them up later. Now you should have 4 layers what we need to do now is merge them into 2 layers, so hide ALL your layer apart from the 2 sides on the left.

Then goto “layer > merge visable” do the same with the other side but remember to hide all the other layers. you should now have 3 layers, background layer the left panel and the right panel. Zoom in on the corners of your box, select the pencil tool and the color white and begin to join the corners.

When your done you should have something like this.

Tidy up the rough edges with a 1 pixel rubber.

Now select the ellipticial tool and on a new layer above all the others creare a white circle, once you have your white circle click your left panel layer to make a selection but make sure your white cirlce layer is selected.

And goto “select > inverse” and hit the delete key on the keyboard. Set the opacity of the white cirlce to about 20-50%. Do the same to the other side of the panel, but this time set the opacity to 10%.

Now set the left panels opacity to 75% to allow the images beneath it to be seen throu. Now just add your icons here’s a quick few ive made.

Web Design Layout #2 Tutorial

Create a new document 800×800 with a black background, select the color #01afee and create a rectangle. Once you have your rectangle press “CTRL + T”, now rotate your rectangle like this.

Now for this part you need some “splatter brushes” EITHER search yahoo or goto a site like brusheasy and download a set, once you have them make some randam splatters over your canvas, using the colors blue and black.

Select the type tool and add your site title and slogan.

Now if you have used two colors like mine above for your title then select one of the colors and add a splatter. If you have used white then you can just use a white splatter, you should have something like this.

Select the type tool again and add your navigation, use free transform (CTRL + T) to rotate the text.

Now im going add 3 sections to my main page which will be “news & updates”, “tutorials” & “latest work”, by the side of each of these 3 sections im going have a different icon, ALL of which are chosen from adobes custom shapes menu.

Now under each section im going to add some content.

Once you have your content in place, select a different color, im going to use the same color green i used for my title and add a big splatter at the bottom of the page.

Here i shall add my footer information.

Now last but not least, add some more black splatters around your content.

When your finsihed you should have something like this.

Software Layout #3 Tutorial

Create a new document 800×800 pixels, fill the background with the color #c4c5c0. Select the color #374254 and the rectangular marquee tool, draw a small rectangle across the canvas at the top.

Now select the rounded rectangle tool and draw a small rectangle, fill with the color #374254. Place at the top of the canvas over your blue bar.

As you can see i have a rounded edge at the bottom of my rectangle, to do this make a curve with the pen tool and delete the selection. Alternatively leave it as it is. Add your website text and slogan in your blue rectangle.

Now select the rounded rectangle again and make a box next to your header, fill with same color.

This is going to be our search box, add the word search and a white rectangle to represent the search form.

Now head over to your custom shapes and select this shape.

Make it fairly bigish as its better to resize it down than up. Fill with any color then add these layer styles to it.

Now create a new layer above your shape and make a white circle.

Now with the pen tool, make a selection like this.

Goto “select > inverse” then hit delete key on the keyboard. Set the opacity of the white cirlce to about 40-50%. Merge the 2 layers then press “CTRL + T” and rotate it slightly, You should be left with this.

Stick this shape by the search box, also adding the word go!.

Under your search box add your navigation and small divider.

Now for this bit your going to need a softwarebox, i currently already have made 2 tutorials on how to make a software box. GO HERE

Once you have made your box place it on your canvas, then duplicate it 3 times. Then add this drop shadow to all 3 of them.

Move one of your software boxes slightly to the left away from the top one, Slightly resize it down and add a 1 pixel guassian blur to it. You should have something like this.

Do the same with the 3rd box only adding a 2 pixel guassian blur to it and resizing it down abit smaller.

Now duplicate your shape you created earlyier for your search box, duplicate it 3 times and place next to your software boxes. Also add the numbers 1-3.

Add your text giving 3 reasons why to buy your product. Also add your software title and version information.

Select the rectangular marquee tool and the color #b1bac3 and draw a box around your infortmation.

Do the same again only make a smaller rectangle under the one you just made, fill with the color #babfc2.

Now select the rounded rectangle tool and make a rectangle under your 3 reasons. Add these layer styles.

Once you have added the layer styles set the buttons opacity to 60%. Now add your download text. You should have something like this.

Select the color #cccccc and make a rectangle at the bottom of your canvas, this will be our footer.

Above our footer to the right add, some text, like testimonals, or client information.

Now create another rounded rectangle, with the same layer styles as your download button. Only this time change the colors to navy blue.

Duplicate your shape in the search box and place it over your blue rectangle.

Now add some text for your members.

Thats it all done, heres a full preview of the final product.

Vista Themed Layout #3 Tutorial

Create a new document 800×950 pixels with a transparent background select the rectangular marquee tool and create a rectangle 800 pixels wide and about 215 pixels high. Fill the rectangle with a linear gradient using black and a dark grey color. Select the pen tool & a brush size of about 2-6 pixels. Ceate a squiggley line using the color #4c842d. Add an outer glow layer style to your line using the settings below.

You should have something like this.

Select the pen tool once again and create another line using the color #389fa4. Add an outer glow using the settings below.

You should have something like this.

Create yet another 2 lines one of each color BUT this time dont add any layer styles goto “filter > blur > guassian blur” blur the lines by about 3-5 pixels.

Now select the rounded rectangle tool and create a rectangle at the top of our header, fill with the color black and add a stroke using the settings below.

Your should have something like this.

Still with the rounded rectangle tool create a little button in the top right corner, add this layer style.

Do the same again only this time move the button along towards the right and add this layer style.

Select the elliptical marquee tool and create a white circle. (see image below).

Inverse the selection and set layer opacity to 20%. Do this for both buttons, you should be left with this.

Select the rounded rectangle tool and create a rectangle at the bottom of the header. Add these layer styles.

Your rectangle should look like this.

Select the rounded rectangle tool and create your buttons for your navigation. Use the same styles as the 1st green button we created in step1.

Our header and navigation are nearly done. Add your site title, slogan and navigation buttons.

Select the rectangle marquee tool, select the rest of the page starting from the bottom of your header, overlapping some of the navigation, fill with the color white.


Add this layer style to your white rectangle.

Select the rounded rectangle tool and create 3 rectangles, fill with the color white and add a stroke.

Your layout should look like this.

Label each of the 3 boxes. You dont have to use the same labels as mine, im just creating example content.

In the start here box Create 4 circles using the ellipitcal marquee tool. Fill with any color and then add these layer styles.

You should now have something like this.

Add some text to complete it.

Now select the rounded rectangle tool once again and re-create our 2 buttons that we created in step 1, only this time create them on a much bigger scale, place them underneath our start box.


These 2 boxes will act as my advertisments for the site.


Now lets create the area for our tutorials, create an icon of your choice, im using a shape from the custom shapes libary. Place the icons in a list in the middle of our page. Im going to have two sets you’l see why in a minute.


Now label each section. Once labeled select the rectangular marquee tool and create a colored divider.


Once again select the rectangular marquee tool and create a black rectangle at the bottom of our page this will act as our footer. Add your all important footer information.

Your layout is now complete, here is the finished version.

 

Web Design Layout #1 Tutorial

Create a new document 800 x 900 select the rectangular marquee tool and draw a rectangle at the very top using the color #288cc8. Also add these stroke settings.

Your rectangle should looks like this.

Create a new layer above your rectangle layer, select the color white and select the paint brush tool, brush some clouds over your rectangle. (If you dont have any cloud brushes download some from here)

You should have something like this.

Select the type tool and add your site title and slogan, Add an outer glow to your header text using the settings below.

You should have something like this.

Create a new layer above all the other layers, then select the rounded rectangle tool draw out a small rectangle (button size). Fill with the color white and add this layer style.

Place the button at the bottom of your clouds and blue rectangle but make the button overlap (see image below).

Now duplicate the button up how many times needed. (right-click layer > duplicate layer)

Now hide ALL LAYERS apart from the BUTTON LAYERS then goto “layer > merge visable”. Your buttons should now all be on one layer. Select the rectangular marquee tool and make a selection at the bottom of the buttons BUT underneath the stroke on blue rectangle.

Hit the delete key on the keyboard, you should then be left with this.

Label your buttons. Now save this image to your desktop (IMAGE HERE) Select the rounded rectangle tool and draw out a rectangle underneath your buttons, once drawn select the pen tool, right click the rectangle on your canvas and goto “make selection”.


Open up the image you previously saved to your desktop, goto “edit > copy” head back over to your layer then goto “edit > paste into” Move/reszie image to fit like the image below, once you’ve postioned it how you want it make a selection like the image below.


Press “ctrl + t” on the keyboard to enter into free transform mode, drag the middle anchor point all the way across to the other side (might need to do it twice). You should be left with something like this.


Add a stroke to finish it off.

Now select the rounded rectangle tool again and create a button next to your nav bar like this.

Just color it any color for now as it will shall change later. Select the the big rectangle layer with your eye image, but click it wilst holding the ctrl key on the keyboard, you should get the dotted line around your rectangle.

Now click your new button layer (the black button you just created) while the selection is still active and goto “select > modify > expand” expand the selection by 6 pixels. Once expanded hit the delete key on the keyboard. Your button should now look like this.

Add these layer styles to your new button and label it “home”.

You should have something like this.

Select the rounded rectangle tool yet again, draw out a content box and add this stroke to it.


Add your welcome text and title.


Goto your custom shapes menu and pick out the drawing pin shape.

On a new layer draw 2 drawing pins, color them with the color #288cc8. Place them either side of your welcome message.
Now add more content boxes using the same steps as above.




Once your finished add a little rectangle at the bottom using the color #288cc8, this will be your footer.

And here’s the final product.

Futuristic Wallpaper Tutorial

Create a new document what ever size you want the background for. Select the gradient tool, set your forground color to #5b5e63 and your background to black. On the gradient toolbar at the top select “reflected gradient”.

Drag the gradeint across your canvas.

Create a new document 4×4 pixels and create this pattern using these 3 colors. (PATTERN FROM TALK-MANIA)

Once the pattern is created, head back to your wallpaper, create a new layer above your background layer, label this pettern. Fill this layer with your pattern. Add a layer mask and drag a black reflected gradient over the top. Your pattern should look like this.

Create a new layer above your pattern and background layer, select the rounded marquee tool and draw out a circle in the middle of your canvas. Fill the circle with a color of your choice, then add this layer style.

Duplicate the layer you just created then right click it and goto clear styles, you should now have a blank circle. Fill the blank circle with the color #3d6d9c.Select the paint brush tool with a brush size of 100 soft, set the mode to linear dodge and flow to 60%.Click you layer with the blue circle on whilst hold the CTRL key on the keyboard to make a selection, then with your brush just color the bottom end of your orb.Then with a smaller brush size add a little circle.

 

Now add these layer styles.

Now select the rounded marquee tool and draw a circle in the middle of your orb fill this with the color white.

Add a layer mask and drag a black linear gradient over the top.

Do the same again add a circle at the top.

Select the rounded marquee tool again and on a new layer create another circle, only this time goto “select > modify > contract” and contract the circle by about 25-20 pixels. Then hit the delete key, this will turn the cirlce into a ring.

Add these layer styles to the ring.

Repeat the steps above only this time make a ring and add these layer styles instead.

You should have something like this.

Select the pen tool and create a shape like this.

Add these layer styles to your shape.

Duplicate this layer 3 times so you have a total of 4 shapes, Postion them like the image below. (use flip tool).

Now last but not least, add a layer mask and drag a reflected gradient over them.

Console Layout Tutorial

Create a new document 900×700. Fill your background with a gradient using the colors #383838 & #1f1f1f. Select the rectangular marquee tool and make a selection at the top of your canvas fill with any color then add these layer styles.

Your header should look something like this.

Now find yourself some pictures of your desired consoles, i used google images, place them at the top right corner of your header and set layer mode to “multiply”.  In the middle of your header add your site title, with these layer styles added.

You should have something like this.

Click your header layer whilst holding the CTRL key on the keyboard to make a selection, now once the selection is loaded create a new layer. Fill this layer with a pattern of your choice. If you dont no how to do patterns check my tutorial pages as ive already written a tutorial on patterns. Add a layer mask to your pattern, using the gradient tool drag a gradient diagonally across your pattern.

Create a new layer, select the rectangular marquee tool and draw a small rectangle the same width as your header, add these layer styles.

You should have something like this.

This bar will act as our login & news letter area.

Repeat the same steps above only add these layer styles instead.

You should have something like this.

This will be our main navigation bar. Duplicate your main nav bar layer twice, drag your two duplicated layers under your main nav bar layer. Open up the layer styes menu on both layers and UNTICK “inner glow” & “gradient overlay”. You should now only have 2 layer styles, drop shadow and stroke. Select one of the duplicated layers then select the move tool, press the up arrow on the keyboard 4 TIMES select the other duplicated layer select the move tool and press the down arrow 4 TIMES. You should now have something like this.

Add your navigation text.

Ive also add the search box and login boxes just for an example on how it would look when finished. Ive also added some console logos which i got from google images. Select the rectangular marquee tool and draw out 4 individual boxes under your navigation, add these layers.

You should have something like this.

Create another 3 additional boxes, 2 to the right and 1 along the bottom to serve as our footer, use the same layer styles as above.

Now code it up and add your content, HERES HOW it could look with the content.

Rockband Layout #2 Tutorial

Create a new document 800×600 with a browny color as your background. Create a new layer, set opacity to 50% and layer mode to “soft light”.

Select a series of grunge brushes and brush randomly onto your new layer. (if you dont have any grunge brushes download some here) Heres how mine looks.

Select your background layer and goto “filter > noise > add noise”.

Now goto “layer > flatten image” to merge the two layers togther. Now were going to add abit of light to our background so head over to our filters and goto “filter > render > lighting effects”.

Your background should look something like this.

Select the “rounded rectangle tool” draw out a rectangle big enough to hold a large title. Once you have made your rectangle make a selection and goto “select > modify > contract” contract the selection by about 8 pixels then hit the delete key. Now press ctrl + T and rotate slighty. you should have something like this.

Type your band name inside the rectangle using a grunge type font. The font im using is “base 02”.Now add these layer styles to both the rectangle and the your text.Your should now have something like this.Now add your navigation, just use the type tool and type your navigation all on one layer.

 

Add this layer style to your text.

Your navigation should now look like this.

Select the rectangular marquee tool and draw a small long rectangle in the middle of the page, goto “filter > brush strokes > spatter” Put all settings as high as they will go. This will act as our divider and should look like this.

Thats it all done. This is how it could look with some content.

Lingerie Layout Tutorial

Create a new document 800×600 with the color #282142, select the rounded rectangle tool and draw out a rectangle at the top of the page leaving space on the left to fit a big image. (see image below).

Add these layer styles to your rectangle.

Now goto google images or your favourite stock photo site and find yourself a picture of a women in some knickers, once you have found her select your favourite cutting tool and cut out. Copy & paste into your layout and place on the left hand side above your rectangle layer.. Heres mine.

To give it that extra look ive also added a drop shadow using the preset settings.

Add your site title and slogan at the top inside your rectangle.

To the right of our title and slogan draw x4 1 pixel lines leaving the same gap in between like this.

This will be our navigation. Firstly lets number our buttons.

Now add your button lables but this time rotate them 90 degrees CCW.

Now add your sections and dividers.

Thats it all done, heres how it could look with some content.