Design Studio Layout #2

Create a new document 850×900 pixels, select the color #3e3640 as your forground and #201f20 as your background. Select the gradient tool and drag a linear gradient over your canvas. Apply the noise filter by going to “filter > noise > add noise” enter the setting as in the image below.

Select the rounded rectangle tool and create a rectangle nearly the width of your canvas. Make a selection at the bottom of your rectangle about 50 pixels in height, cut and paste to a new layer. Hide your cutted part of the rectangle for later. You should have something like this.

Add these layer styles to your rectangle to complete the effect.

Move your rectangle to the top of your canvas hiding the top half of it where the rounded edges are.

Unhide your other part of the rectangle and align it up at the bottom of your rectangle.

Add these layer styles to your bottom half of the rectangle.

You should have something like this.

Add your website title, slogan and logo then with the rectangle marquee tool make a selection on your header like in the image below, fill the selection with the color white then lower opacity to 2%.

Do the same with the navigation.

Add your navigation text to your navigation, on one part of the navigation add a hover button.

The layer styles for the hover button are as follows.

I also add a little shine to the hover button like we did to the header and navigation in the previous steps. Using two 1 pixel lines add a divider inbetween each navigation item. Add a layer mask to the divider then drag a reflected gradient over the top to blend in the top and bottom half the divider.

Create a new layer above everything eles in your layers window, with the rounded rectangle tool create a rectangle like the image below.

Add these layer styles to the rectangle.

You should have something like this.

The the steps above and with the same layer styles add another big rectangle underneath the rectangle you just created.

On the 1st rectangle we created add our login and password fields, the icons used in this part are from dryicons.

Once we’ve done that begin to fill in your content box with some content. The icons next to the titles are from the custom shapes libary within photoshop.

The read more buttons are made using the rounded rectangle. Inbetween each bit of text in the above image add a divider the same way we did on the navigation. Once you’ve done that select the rounded rectangle tool again and create a small box for our photo gallery.

Fill the rectangle with the color #e8e8e8 then add a 1 pixel stroke to it using the color #cbc9ca. Repeat this process to add more content to your design.

When your finished you should have something like this.

Gothic Cross Tutorial

Before we start this tutorial download these brush sets and install them ready.
Swirls
Cracks

Create a new document 600×600 pixels, select the pen tool and create half a cross like this.

Right-click and goto “fill path” fill the path with the color black, right-click once more and goto “delete path”. Duplicate your layer then flip it horizontally by going to “edit > transform > flip horizontal”. Move the cross side by side then merge the layers together.

When moving them side by side make sure theres no line in the middle as this will cause problems when adding the layer styles. Select the elliptical marquee tool and create a circle like the image below.

Hit the delete key to make a cut into the cross, DO NOT clear the selection, move the selection and position it into the corners where the stakes meet hit delete each time, the result were looking for is in the image below.

Now were going to add the layer styles, this is where the cross takes shape.

You should end up with this.

With the swirls brush begin to add your swirls, add this layer style to all the swirls.

Carefully build up your layers of swirls untill you have something like this.

Select your cracks brushes and add some cracks to your cross.

Thats it all done, with some more imagination you could end up with something as simple as this.

Simplistic Multi-Tags Icon

Create a new document any size with any background color, select the rounded rectangle change the radius to 10 pixels.

Draw out a thin rectangle in any color, then goto “edit > transfrom > rotate” rotate it very slightly. Once you’ve rotated it added these layer styles and set opacity to 85%.

You should have something like this.

Select the elliptical marquee tool and create a selection like this.

Fill the selection with the color white, whilst holding the CTRL key on the keyboard click your blue tab layer. Goto “select > inverse” then hit the delete key. Set layer opacity to 12% and add a layer mask. Drag a linear gradient from the bottom towards the top.

Select the elliptical marquee tool once more and create a circle in the top left side of the tag.

Finished the step by adding this gradient overlay to the circle.

Add some content to your 1st tag like the image below.

Create more rectangles underneath your main tag. Use the following layer styles for each tag. Remember to rotate each rectangle slightly, use the circle we created previously as a pivit point.

You should have something like this.

On each tag add something different, ive chosen some text, photoshop icons and the hv-designs logo.

Video Sharing Layout #2

Create a new document 850×1200 pixels. Select the colors #141217 and #14171f then select the gradient tool, drag a linear gradient over your canvas. Goto “filter > noise > add noise” enter 2% in the amount, set distribution to uniform then stick a tick in monochromatic. Select the rounded rectangle tool and create a rectangle like in the image below.

Fill the rectangle with the color #20242d, add a 1 pixel stroke to the rectangle but dont do it the normal way by double clicking the layer style, instead goto “edit > stroke” use the color #20242d. Next add a layer mask to the rectangle, then drag a linear gradient over it, make sure background and forground are set to black and white. You have something like this.

Add your website title, slogan and logo. I created my logo by selecting a shape from photoshops custom shape libary. Add it to the canvas then whilst holding the ALT key on the keyboard tap the left arrow key, with every tap on the keyboard a new layer is created and the shape is shifted 1 pixel to the left. Merge all the duplicated layer together then drag the merged layer underneath your orginal. Add your layer styles.

Select the rounded rectangle tool with a radius of 10, create a small rectangle. The edges of the rectangle will both be rounded, select the polygonal marquee tool and make a selection like this at the right end of the shape.

Fill in the 2 corners to make the edge of the shape square.

Now for the next button you just want a normal rectangle, when you get to the end of the navigation duplicate and flip your 1st button, so you have something like this.

Add these layer styles to your buttons to complete the effect.

Next select an image from your favourite image source, add it within the box. Add a simple 1 pixel grey stroke to it. Select the pen tool and create a shape like this.

Fill the selection with the color white then add layer mask to it. Drag a linear gradient from the right to the left to give you a shine effect. Add a sample player button and lower the opacity.

Finish this section by adding more sample videos and some community items.

Select the rounded rectangle tool, and corner off the left side of the shape like we did for the navigation, Fill with the color #1e212a and add a 1 pixel stroke using the color #2f3541. On the rounded part of the shape add a rectangle over the top and fill with the color #ba267d. Inverse the selection and delete the excess. Add a small circle with a white heart in it used from adobes custom shapes libary.

Inside the content box add more videos and comunity icons., ive also added some hearts to give the videos some love 😉 .

Using the same method above create another content box like the image below.

Again add your content items. Create a rectangle at the bottom of your page add the same layer styles to it as the content boxes. Duplicate your navigation menu, logo, site title etc.. and place inside the rectangle. Underneath add your footer information.

Your final image should look like this.

Shoe Box Tutorial

Create a new document the size you want your shoe box to be, create a new layer called “shoebox_top”. Select the rectangular marquee tool and create a simple black rectangle.

Goto “edit > transform > perspective”, select the top left corner achor point and drag towards the right untill you have something like the image below.

Add these layer styles to your layer.

Select the polygonal lasso tool and create x2 shapes similar to the image below both on seperate layers.

Fill the selections with black then goto “filter > blur > guassian blur” blur by about 24pixels. Lower the opacity right down untill you can just about see a shade on the box. Select your “shoebox_top” layer whilst holding down the CTRL button on the keyboard then goto “select > inverse” then hit the delete key. Your shades should now be trimed. You should have something like this.

Make sure your shade layers are above every other layer at ALL times. Select the rectangular marquee tool once again, on a new layer called “shoebox_middle” create another rectangle like this.

Again using the perspective tool (edit > transform > perspective) only this time using the bottom left achor point drag inwards untill you have something like this.

Add these layer styles to your layer.

Using the same methods as mentioned above create the last panel for your box.

Add these layer styles to your last box panel.

You should have something like this.

Create a new layer inbetween your middle and bottom layer, create a black rectangle 2-3 pixels shorter than your middle rectangle. Blur your black rectangle about 10 pixels, lower the opacity to 64%. Place the rectangle under your middle section to act as a shadow. Finally trim off the blurred edges that exceed past your rectangle.

Now you have your shoe box, decorate it. Here are some examples.

*IMPORTANT* Please Read

Welcome to the new hv-designs, as you can see the whole site has had a make over. BIG THANK YOU TO kriesi Id just like to tell you about some of the new features and up coming features on the site.

Firstly you will notice the site has some cool jquery effects. If you hover over a thumbnail or a link you get a tooltip overlay image pop up.

If you click on the search button and archives button at the top in the header you will notice some cool effects, the search button and field shoots into place, and the archives button when clicked brings down a big panel.

The sidebar has had a makeover, it is now grouped into a tabbed interface. If you look carefully there is also a login box now.

If you register with hv-designs (free of charge of course) then you can add tutorials that are relivant to you, it puts them in a list in the sidebar for easy access. If you join up and login you will see the thumbnails have little plus icons.

When you click the icon it adds the tutorial or post into the sidebar.

This is the only feature for logged in users at the moment, but im currently working at adding more features such as free downloads and free PSD’s.

Thats all from me 🙂 thanks for reading, have a good nose around the site, and please report any bugs if you find any.

Many Thanks
Regards
HV-Designs

PLEASE NOTE:
Users who have signed up before 10/11/08 must re-sign up due to some technical difficulties.

Zipper Tutorial

Create a new document 600 x 470 pixels with any background color, select the elliptical marquee tool and create 2 black circles like in the image below.

Select the polygonal lasso tool and join the two circles together.

Fill the shape in black then merge all three layer together. Add these layer styles to the shape.

Once you have added the styles you should have something like this.

Select the elliptical marquee tool and create two circles, big one at the bottom and a smaller one at the top. You dont have to create them both at the same time, once you have made the selection hit the delete key.

Create a new layer underneath the layer you’ve been working on, make sure its selected, with the ctrl key pressed on the keyboard click on the main zip layer to load the selection. Now goto “select > modify > expand” enter 4 pixels in the expand panel then press enter. Now fill your layer with black. Select the two circle openings with the magic wand tool and fill them with black also. You should have something like this.

Select your main zip layer and with the magic wand tool select the two holes, select the layer with the black shape on in which you just created then hit the delete key, this should make to fresh holes in the black shape. Add these layer styles to your black shape.

Add the word zipper to your zip using the vertical pen tool, and your image should now look like this.

Now we need to make the top bit of the zip, take alook at the image below and il begin to explain.

The shape we need to create is at the top of the zip. We start off with a rounded rectangle (1.) select the elliptical marquee tool and create a selection like in the image above (2.) Once you’ve made the selection hit the delete key then continue to do it on the other side (3.) You should be left with (4.). Now all’s you need to do is chop the bottom off using the rectangular marquee tool, once you’ve done that position behind the zip and add these layer styles.

You should have something like this.

Select the rounded rectangle tool with a radius of 20pixels, create a shape rectangle from the top hole in the zip to the top half of the shape we created in the previous steps. Fill with any color.

Add these layer styles.

You should have something like this.

Select the elliptical marquee tool and create a circle like this.

Fill with the color black then add a layer mask, drag a linear gradient over the top half of the circle, this should create a nice shadow, do the same with the bottom hole in the zip only use a radial gradient instead of a linear gradient, you should have something like this.

On a new layer with the rectangular marquee tool create a shape like this.

Add this gradient overlay to it.

Now you going to need to duplicate this shape many times, as its the teeth of the zip, best way is to duplicate the shape flip it horizonatally then move it so its facing each other but also move it up a few pixels so its staggered.

Underneath ALL your teeth layers just create a rectangle and fill it with the color #313131.

Next add big rounded rectangle behind the whole zip fill with the color #231e20, then add a pattern overlay using the settings below. (You will need the diagonal lines pattern file included in the PSD download).

Last but not least we need to make the zip stopper, to do this create a square at the bottom of the teeth and add these layer styles.

Your final finished image should look like this.