Funky/Grungy Dj/Music Layout

Create a new document 900×900 pixels with a background color of #262626, With a groovy font (font is used “bleeding cowboys”) of your choice add some text, when adding the text try and use a range of sizes and angles. The colors i used for the text are white, #d90056 and #9abb16. Once you have written and placed your text add a “6 pixel black stroke”. You should have something similar to this.

For this next part you may want to download some grunge brushes and circle brushes. (included in PSD) Alternatively make your own. Select your circle brushes and add some cirlces around your text, again add a 6 pixel black stroke.

Now add a logo for yourself, maybe some DJ decks or something like that.

Now selec the pen tool and make a selection similar to the picture below. The idea is to fill the background behind the text and images.

Fill with the color black.

Select the color black along with some grunge brushes, add some grunge text behind the text and logo. Now select the rectangular marquee tool and create a big horizontal rectangle across the canvas behind the logo and text. Fill with a linear gradient using to shades of grey. Now added these layer styles.

You should end up with something like this.

Now create a 45 degree line pattern or industrial lines even and fill over the top of your rectangle, set layer opacity to 6% and blending mode to soft light. If you dont no how to create the pattern you can use a different pattern or you can download the PSD which contains the pattern file. Would be a go time to also add some navigation text.

Now its time to create our content boxes, select the rounded rectangle tool and create these boxes as follows. (next image is an animated .GIF so watch closely).

Once you have all your content boxes in place add your content.

Portfolio Layout #4

Create a new document 900×800, fill your background layer with a linear gradient using the colors #1f1f1f & #000000. Create a new layer above your background layer and label it “pattern” Create a new document 4x4pixels with a transparent background. Select the pencil tool with a 1pixel brush size. Zoom in 1600% and create these markings.

Now goto “edit > define pattern” save your pattern and return back to your orginal canvas. Select the fill tool, then at the top change from “forground” to “pattern”, select your pattern in the box next to this option. Fill your “pattern” layer with your pattern.

Now select the rectangle marquee tool and draw a rectangle the whole length of the canvas but only about 70 or so pixels wide. Fill with a linear gradient using light grey. Add this drop shadow.

Now over the top of this rectangle create another smaller rectangle using the colors #fe1176 & #ff056c and the linear gradient tool. Also add your portfolio text.

Now select the rounded rectangle tool, at the top of the canvas create a small naviagtion bar, add these layer styles to your naviagtion.

You should have something like this.

Now using the rectangle and circle marquee tools and the layer mask tool add two highlights over the naviagtion. Would also be a good time to add our naviagtion text.

Now select the rounded rectangle tool and create a box under your navigation box, add the same layers styles as your navigation.

Now add your content box title. The colors i used were white, #8fc101 and #ff066d.

Now duplicate the pink and green text, right click the duplicated layer and goto “rasterize”. Drag your duplicated layer underneath your orginal layer then goto “edit > transform > flip vertically”. Place the text underneath so it resembles a reflection. Add a layer mask and drag a linear gradient over the top.

Now add your content box content.

Repeat the above steps for every other content box you create.

You should have something similar to this.

You may download this layout as a “PSD” or “FULL CSS TEMPLATE” by using the buttons at the top of this page.

Web Design Layout #5

Create a new document 800×800 pixels with a white background, unlock your background layer and add this gradient overlay.

You should have something like this.

Select the rectangle marquee tool and create two 1 pixel lines.

Stretch the lines across the width the the canvas.

Create a rectangle using the rounded rectangle tool. Add these layer styles. Place above your line that you created in the previous step, Select the rectangle marquee tool and cut off the bottom corners so the bottom half is not rounded. Just make a selection and hit the delete key. Name this layer “navigation”

You should have something similar to this.

Create a new document 4×4 pixels. Select the pencil and draw 4 1 pixel squares like this. Helps if you zoom in to the maxium (1600%).

Make sure the background is transparent, then goto “edit > define pattern” give your pattern a name. Head back over to your layout select your navigation layer whilst holding the CTRL key this will make a selection. Create a new layer above your navigation layer and fill with your pattern. Set layer opacity of the lines to 25% and blending mode to overlay.

Now using the rectangle tool and eclliptical marquee tool create 2 highlights over your navigation.

Add your navigation text and layout title.

Now select the rounded rectangle tool and draw a big rectangle, make sure rectangle is under navigation.

Add these layer styles to your rectangle.

Inside your rectangle create another rectangle.

Add this gradient overlay to your new rectangle.

On the side of your new rectangle and in the middle of your main rectangle. create those two 1 pixel lines that we created in step one.

Now take the time to add some content, i wont go into too much detail at this stage as it is mainly text.

Looking good so far, Now create another rectangle using the rounded rectangle tool underneath your big main rectangle that we previously created.

Add the same layer styles as the main rectangle that we created previously. Take the time to add your own content again.

The arrows in the image above can be found in adobes custom shapes libary. Now duplicated your navigation elements. (x2 shines, actual shape and line pattern) duplicate the layers, flip vertical and place at the bottom of the page. This will be our footer. Add your footer text and your done.

USB Stick Tutorial

Create a new document 800×400 with your desired background color. Goto “view > snap” this will will make your cursor snap to a grid, to view the grid we goto “view > show > grid” your canvas will look like this.

Now create 2 cirlces using the elliptical tool, make sure you hold down shift when drawing the 2nd one.

Now select the polygonal lasso tool whilst holding down shift join up your cirlces, follw my red path in the picture below.

You now be left with a selection like this. Turn off your grid and the snap tool.

Fill the selection with any color you desire. Now Add these layer styles.

Your shape should now look like this.

Press “ctrl + T” and drag one of the middle anchor points on the side inwards decreasing the length of the shape. Duplicate your shape, right click your duplicated shape and goto clear layer styles. Refill your duplicated layer using the paint bucket tool in the color white. Set layer opacity to 30% and blending mode to soft light. Press “ctrl+ T” and drag the anchor pointers to make the whole shape smaller length ways and width ways, we dont want to make it to small thou. Place similar to the image below.

Now we need to create our lid, so for this step we need to cut away a portion of the shape aswell as the highlight we just made. To do this create a selection like this.

Goto “edit > cut” then “edit > paste” re-align your lid next to the shape, copy your layer styles over from the orginal shape. You should have something like this.

Repeat the step above only this time cut and paste your highlight. When your done place them side by side like this.

Under your main shape layer create a small rectangle and add these layer styles.

You should have something like this.

Do the same again only this time make it longer and thinner and add these layer styles.

You should have something like this.

Now using two 1pixel lines add an indent, and using 2 boxes make your usb connection come alive.

Add some text and your prefered logo.

Thats it all done, now you could add a few extras like the strink etc… heres mine.

DJ Layout #2

Create new document 850×850 pixels select the colors #333333 & #000000 and drag a linear gradient over the canvas.

Select the rectangular marquee tool and create a small black rectangle at the top of the canvas

Select the rounded rectangle tool and draw a small rectangle under your black bar.

add these layers to your rounded rectangle.

Your image should now look like the one in step 3 above. Add your navigation text and a small divider.

Now select the rectangular marquee tool, on a new layer draw out a rectangle. Fill with a linear gradient using the colors #f08808 & #fee27d. Add a 2 pixel black stroke to it also.

Now using some cloud brushes add a few clouds inside the rectangle, set the layers blending mode to linear dodge. Then add a few more elements I.E logo and dj name and/or maybe a picture of yourself dj’ing.

Now draw out a rounded rectangle under your header using the color #333333, add this drop shadow.

Your rectangle should look like this.

Now add your content. I wont go into detail on this step as its mainly just text.

Repeat the above steps and create some more content boxes. Also adding your content as you go along

Create another rounded rectangle the same width as your canvas minus a few pixels each side. Fill with the same color as your content boxes. Add your sites logo and your footer information.

Last but no least back to your header. Select the pen tool and create a selection like this.

Fill with the color white, set layer opacity to 38% and blending mode to soft light.

All done. Enjoy.