Creative Design Layout Tutorial

Hi there, in this tutorial il learn you how to create a creative design layout and il be writing a follow up tutorial shortly after expaining step-by-step on how to code it using dreamweaver. First off, create a new document 900 x 1430 pixels. Select the paint bucket tool and fill your background with the color #eae5cf. Select the color #443825 and apply to your forground, then select the color #2c2518 and apply as your background. Select the rectangular marquee tool and create a big rectangle across the canvas. Make the rectangle about 300 pixels in height. Select the gradient tool with a radial gradient, start from in the middle of the rectangle and drag upwards. You should have something like this.

Add this layer style to your rectangle.

For this next step you need to download this character pack. Select the character you wish to use then copy/paste it onto your canvas, ive chosen the one with him point up. Add your website title and slogan on the left side of the header then add your character underneath it, you may need to chop the poor mans legs off.

Add a drop shadow to your character to give the header a sense of depth. Leave a gap next to your header title then add your navigation items, i used the colors white and #8e9b08, make the navigation items fairly big, i used the font impact with a size of 30pt.

On top of one of your navitagion links create a small white box lower the opacity to about 5% then press ctrl+t and rotate slightly. Finally underneath your navigation add some text explaining abit about the website.

Thats the header all complete. Underneath the header and all the elements add a snazy title for the content thats going to be explained underneath, again the font is impact but ive used a range of sizes for the words.

Select the rounded rectangle and draw out your content box that will be displayed underneath your snazy title. Add this drop shadow to the box.

Follow the steps above and create 2 more boxes underneath your 1st one.

Add your content to each of the three content boxes. Im just going to add a quick image and some small text, in the CSS version of this layout the boxes will be used for text.

The images used in the content boxes are not created by me they are actually wallpapers. 🙂 Repeat the steps above and create small boxes on the right for your sidebar.

The 1st box im going to use as my rss stuff. If you look in the image above i have added a faint rss icon onto the background of the content box. Im also going to add a nice big header and some RSS icons.

In the character pack we downloaded in the start of the tutorial there was a man waving, place the man behind the 1st content box, press ctrl+t to rotate him slightly.

Continue creating your sidebar boxes. Heres mine.

Next for the footer, duplicate your header, header title and header navigation. Drag them to the bottom of your canvas, underneath your navigation add your copyright text or what ever information you ant to add.

Thats it all done, heres my finished result.

Look out for the next tutorial “converting this from PSD into a live website”.

The FREE STUFF

Hello once again, just writing to let you no ive updated the shop with the free stuff. To access the free stuff just add the items marked £0.00 into your basket then proceed to checkout. There will be no screen asking for money unless your purchasing something that needs paying for.

Heres a full list of free items. Il be adding more soon so keep an eye out.

PSD & TUTORIAL FILES

ICON PACKS

CSS TEMPLATES

Free Downloads @ HV-Designs Shop

Hello, hope everyone had a good xmas and new year.

im just writing this post to let everyone no that i shall be adding FREE downloads to the HV-DESIGNS SHOP. I shall also be changing some of the PSD files in the shop to FREE. Its about time HV-DESIGNS gave something back to you people, as its you guys that keep the site running.

You will still have to sign up if you havent already to get access to the downloads, but they will be 100% FREE.

Il proberbly post up an update on all the files im giving away for nothing, so keep your eyes peeled.

 

Many Thanks to you all
Regards
HV-Designs

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.