I have decided to sell PSDLounge.com. I have been busy and had a hard time keeping up with new tutorials. I don’t want to see the site die, so I’m offering it at a great price. If you’re interested in purchasing the site, please contact jeremy@eliteeternity.com. This would be a great buy for any designer that has time to post tutorials frequently on here. Traffic has been fantastic, and details will be given upon request. PSDLounge was even featured on StumbleUpon, and the tutorials here are often featured on psdtuts and other large tutorial sites. No effort has been put forth to monetize this site, but it could easily be monetized with offers from ClickBank.

Any offers will most likely be accepted.

Thanks,
Jeremy

Let’s start out by creating a new file, I used a 500×400 pixels canvas with a white background set at 72dpi. Now choose your Rounded Rectangle Tool, above your screen under the options palette select ‘Fill Pixels’, 6 px radius and check anti-aliased. In a new layer draw a black rounded rectangle with 23 x 130 px dimensions, if you want a longer zipper add your own height settings. Then cut the top corners on the rounded rectangle.

Step 2:

Make a new layer set and name it ‘Zipper’. In a new layer draw a very small rectangle with a line pointing out inside the black rounded rectangle. This shape will be the pattern for the zipper.

Step 3:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the zipper pattern layer.

Result:

Step 4:

Make 2 copies of the zipper pattern layer, stack them as shown below. Your ‘Zipper’ layer set should now have 3 zipper pattern layers.

Step 5:

Now complete your zipper by adding the same pattern shapes Flipped Horizontal separated from each other, the fastest way to complete the zipper set is by duplicating your ‘Zipper’ layer set instead of the pattern layer.

Step 6:

If you want a close zipper just make both zipper pattern on each sides touching.

Results:

Zipper Design.

Let’s start out by creating a new file, I used a 1150×860 pixels canvas set at 72dpi with a black background. If you want a larger wallpaper add your own settings. Now on the tools palette set the foreground color to #6E8E00 color shade and set the background to black. Then choose the Gradient Tool, above your screen under the options palette select Linear Gradient and leave the rest of the settings to default.

In a new layer add linear gradient effect on your canvas, drag the linear line from the top right corner of your canvas down to the left corner so the top right corner has a light green and the bottom left has a black shades.

Step 2:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your linear gradient design layer.

Result:

Step 3:

Select the Polygonal Lasso Tool, above your screen under the options palette select ‘New Selection and check anti-aliased. Now create a new layer and trace out the line design shown on the picture below. Then fill the selection with black.

Step 4:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your black line design layer. Then set the layer’s blending mode to Lighten.

Result:

Step 5:

The line details on the center will be the starting point of the trendy design. Now add a second trendy shape similar to what is shown below. Your shape can be anything as long as it flows with the background and the line details on the center.

Step 6:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your black line design layer. Then set the layer’s blending mode to Lighten.

Result:

Step 7:

Once again using your Polygonal Lasso Tool add a selection on the top right corner then fill space with black.

Step 8:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your black shape layer from step seven.

Result:

Step 9:

Now add a marquee selection around your canvas(Select > All). Then go to Edit > Copy Merged and back to Edit > Paste. A copy of the current design should appear on your canvas, under Edit > Transform > Scale, resize the width of the copy by dragging the scale points at the right end to the right. Then set the layer’s blending mode to Overlay.

Step 10:

Select your Eraser Tool and set the brush to a large soft brush. Then make the copy design fade with the background by erasing the right end. If you need to erase with a lower opacity level you can modify that above your screen under the options palette.

Step 11:

Now add the same faded design on the top right corner of your wallpaper. You have to rotate this copy through Edit > Transform > Rotate so it’s facing the trendy shape on the middle.

Step 12:

Add a title on the center. You can use font ‘Arial Black’ with a white color shade.

Results:

Green Abstract Wallpaper.

Step 1:

Let’s start out by creating a new file, I used a 500×400 pixels canvas set at 72dpi, and I filled my background with #055685 color shade. Now make a new layer set and name it ‘Music Head’. Then in a new layer draw a white circle with 19 x 19px dimensions.

Step 2:

Under Layer Style (Layer > Layer Style) add a Stroke blending option to your white circle.

Result:

Step 3:

Duplicate your white circle with a black stroke layer and place the copy on the right side of the original by 1 inches, this circles will make up up the head phones on the music head.

Step 4:

In a new layer draw a gray ellipse with #575757 color shade and 40 x 34px dimensions. Position the gray ellipse on top of the first white circle.

Step 5:

Under Layer Style (Layer > Layer Style) add an Outer Glow and Gradient Overlay blending options. Now set the layer’s blending mode to Color Dodge.

Result:

Step 6:

Add the same gray ellipse design on the second circle.

Step 7:

Select the Polygon Tool, above your screen under the options palette select ‘Fill Pixels’, 3 sides and check anti aliased. Then open the Polygon Options palette and use the settings below. Now make a new layer and draw a polygon with #FFE99B color shade and 76 x 90px dimensions.

Under Layer Style (Layer > Layer Style) add a Stroke blending option to your white circle.

Result:

Step 8:

Duplicate the white circle layer from the last step and position it on the other end of the face.

Step 9:

Here we added more glow effects waving through the original.

Step 10:

Here we complete the eye set by drawing black ellipses inside the white circles and drawing smaller white circles on the black ellipses.

Step 11:

Now the mouth is just a black ellipse with a smaller red ellipse rotated on the right corner of the black ellipse. Make each shape in its own layer.

Step 12:

Now add hair, first select the Pen Tool then above your screen under the options palette choose ‘Paths’. With the Pen tool create a spiky hairstyle design in paths. Once you close the path right click on your canvas and choose ‘Fill Paths’, make sure the foreground color is black and it should fill your path with black color shade., delete the paths by right clicking on the canvas and choose ‘Delete Path’.

Step 13:

In a new layer add shade details on the hair then set the layer’s opacity level to 20%.

Step 14:

Finish it off with a chord coming from the headphones. To make the wire first set your brush tool to a 3 px hard brush and set your foreground color to black color shade. Now with your Pen Tool create a swirly line in paths coming from one of the headphone then make a new layer and right click on your canvas, choose ‘Stroke Path’ and use the settings below.

Results:

‘Music Head’ Illustration.

Let’s start out by creating a new file, I used a 800×600 pixels canvas set at 72dpi, and I filled my background with black. Now make a new layer set and name it ‘Wavy Energy’. Then choose your Brush Tool and set the size to a 35 px soft brush, in a new layer brush with a #499E00 color shade across your canvas then brush with a #FFD800 color shade on top of the first color shade. You can also use your own color codes if you don’t like the green and yellow look.

Step 2:

Go to Filter > Blur > Motion Blur, apply the settings below.

Result:

Step 3:

Go to Filter > Distort > Twirl, use the settings below.

Result:

Step 4:

Duplicate the swirly design from the last step and put the original to the side (turn off the layer so you can’t see it). Now with the duplicate layer apply a desaturate effect through Image > Adjustments > Desaturate. Then set the layer’s opacity level to 64%.

Step 5:

Turn back on the original swirly design layer with the yellow and green color combo and place it above all the layers on the layers palette. Now position this swirly design just below the black and white swirly design. Then set the layer’s opacity level to 14%.

Step 6:

Duplicate the original swirly design with the green and yellow color shades and position it right by the black and white swirly. Then go to Filter > Blur > Gaussian Blur, add the settings below.

Step 7:

Now set the layer’s blending mode of the new copy of the original swirly design to Linear Dodge. Then set the layer’s opacity level to 47%.

Step 8:

Duplicate your black and white swirly design layer from step four and flip it vertically through Edit > Transform. Now add colors to the design, go to Image > Adjustments > Color Balance. Drag the setting bar to the green if your using the green and yellow color theme in the beginning, if not you can make your own colors through color balance.

Step 9:

Now duplicate the green swirly design layer and go to Filter > Blur > Motion Blur, add the settings below.

Step 10:

Duplicate your ‘Wavy Energy’ layer set and then go to Layer > Merge Layer Set, this should turn the duplicate layer set into a regular layer. Resize the new wavy energy design layer through Edit > Transform > Scale, scale it down by 60% then position it on the center of the canvas.

Step 11:

Set the layer’s blending mode of the new wavy energy design to Color Dodge.

Results:

Wavy Energy Design.

Start with a new file, I used a 700×300 pixels canvas and I filled my background with a #11477E color shade. Now create a new layer set and name it ‘Scrabble Piece’. Then select the Rounded Rectangle Tool, above your screen under the options palette select ‘Fill Pixels’, set radius to 4 px and check anti-aliased.

In a new layer draw a rounded rectangle with #D4AB7D color shade and 62 x 44 px dimensions.

Step 2:

Now grab the wooden pattern below and open it in photoshop. Then go to Edit > Define Pattern, this should save the wooden pattern into your list.

Under Layer Style (Layer > Layer Style) add an Inner Shadow, Outer Glow, Gradient Overlay and Pattern Overlay blending options to your text layer.

Result:

Step 3:

Make a new layer and merge it with the wooden rounded rectangle layer by highlighting (red circles on the image guide below) both layers on the layers palette then you go to Layer > Merge Layers.

When you merge the layers you should have one layer with the wooden rounded rectangle design without any layer styles. Now resize the rounded rectangle piece by 70-80%.

Step 4:

Select the Horizontal Type Tool and set the font family to Arial Black, regular, 24 pt, strong and #6A491E color shade. In a new text layer type the first letter of whatever name you want to type out. Then under Layer Style (Layer > Layer Style) add a Drop Shadow blending option to your first letter text layer.

Step 5:

Add more scrabble piece by duplicating the ‘Scrabble Piece’ layer set, modify the text to fit your name.

Step 6:

Now add some 3D effect to your tiles, first add a marquee selection around your entire scrabble tiles text design. Then go to Edit > Copy Merged, this should copy the whole text design including the background. Go back to Edit > Paste, a new layer with the text design should appear on your canvas.

Step 7:

Grab the Magic Wand Tool and add a marquee selection around your scrabble tiles text design layer from last step which is the black background. Now delete the marquee selection/background so you end up with just the scrabble tiles text design.

Step 8:

Go to Edit > Transform > Perspective, drag the bottom left perspective points to the left so the text design transforms into a slant look.

Step 9:

Duplicate your scrabble tiles with perspective and nudge it down by couple of pixels. Then merge both layers together.

Step 10:

Under Layer Style (Layer > Layer Style) add an Inner Glow blending option to your scrabble tiles text design with a perspective.

Result:

Firstly, create a new document 500 by 200 pixels. Select the gradient tool and set your foreground colour to #363636 and your background colour to #252525. Appy a radial gradient by left clicking in the top left quarter and dragging to the lower right corner.

Step 2

Secondly, we’ll be starting with the base of one of the buttons for the navigation. Create a new layer (Layer > New > Layer). Select the rectangular marquee tool and make a fixed size selection of 100 by 40 pixels.

Step 3

Now fill the selection with a linear gradient (using the gradient tool) using the colours #68ad40 and #4c8c2c.

Step 4

We’re now going to be adding a couple of effects to the button using layer styles.

Layer > Layer Styles > Inner Glow.

Layer > Layer Styles > Gradient Overlay.

Layer > Layer Styles > Stroke. The colour I’ve used here is #427a25.

Your button should now be looking something like this. Nice and shiny :-)

Step 5

Next up, we’ll be adding some lighter and darker areas on the button to give it some texture. Select the burn tool and I’ve used a soft 45 pixel brush, Highlights range and a 30% exposure. Click around the sides of the button so you get something like this.

Step 6

Now select the dodge tool and here I’ve used a 14 pixel soft brush, Highlights range again and an exposure of 10%. Click around the bottom this time.

Step 7

Move the button to the left of the canvas then duplicate the layer three times and line them up like so.

Step 8

Create a new layer and make a selection below the navigation about 40 pixels high and fill with a linear gradient from #cacaca to transparent using the gradient tool.

Step 9

Go Edit > Transform > Perspective and drag one of the bottom corners outwards while holding down the ctrl key. Hit enter to set the transformation.

Step 10

Lower the opacity of the shadow layer to 10%.

Step 11

Lastly, add in some text links using the text tool. The font I’ve chosen for this is Tahoma, Regular, 15pt, Smooth, #ffffff.

And you’re finished.

Firstly, we need to create a new document (File > New) and the size I’ve chosen to use is 500 by 400 pixels. Fill the background layer with a radial gradient using a light (#343434) and dark (#202020) grey. To do this, select the gradient tool and set it to radial, set the foreground colour to #343434 and the background colour to #202020, left click in the top left corner and drag to the bottom right corner and release.

Step 2

Create a new layer (Layer > New > Layer) and using the elliptical marquee make a circular selection of 250 by 250 pixels in the center of the document. Fill this selection with a radial gradient from a light to a dark blue – I’ve used the PSDLounge colours #2d7fb7 and #004e8e.

Step 3

We’ll now be adding a couple of layer styles to this base of the orb.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Stroke

Now your orb should be looking something like this.

Step 4

Next up, we’ll be adding three highlights to the orb (each on a seperate layer). Select the area of the orb (Ctrl + Click layer) and fill with a radial gradient from white to transparent at the bottom right using the gradient tool.

Set the blend mode to overlay and lower the opacity to 80%.

Step 5

The second highlight that we’ll be applying to the orb is on the left, so do the same as the last step but this time make the gradient a bit smaller and down to the left – this is just going to be a subtle highlight.

Set the blend mode to soft light.

Step 6

Select the elliptical marquee and make a selection at the top of the orb (5 pixels down from the top) and fill with a radial gradient from white to transparent (left click at the top and drag to the bottom of the selection but not right to the bottom so that then it has a smooth edge on the bottom and not the top).

Set the blend mode of this last highlight layer to overlay.

I’ve also repeated this and lowered the new layer to 50% opacity.

Step 7

Now we are going to be adding a shine effect to the orb. Select the area of the orb base again and go Select > Modify > Contract by 5 pixels. Fill the selection with a linear gradient from white to transparent.

Set the blend mdoe to soft light and the opacity of the layer to 20%.

Step 8

Next up, we’re going to be adding some texture to the orb – I’ve done this by adding in an abstract brush and lowered the opacity so it is barely visible. The blend mode I have used for the brush layer is overlay and the opacity is 10%.

Step 9

Lastly, we’re going to be adding in some text – maybe you’ll want to add a symbol or logo (might be a bit more interesting). I’ve just added an outer glow (dark blue) and gradient overlay (grey to white) to the white text layer.

And there you have it, an advanced orb. Hopefully you’ve learnt a thing or two about shine effects.

Create a new document, I’ve chosen the size 500 by 400 pixels. Fill the background with a radial gradient with a light grey (#2c2c2c) and dark grey (#151512) colours.

Step 2

Secondly, we’re going to be making the white background for the navigation bits to sit inside. On a new layer (Layer > New > Layer) select the rounded rectangle tool and set the radius to 10 pixels. Make a selection of 250 by 300 pixels in the middle of the document and fill (Edit > Fill) with white.

I’ve added a faint outer glow (black) to the layer to make it stand out a little bit more.

Step 3

Thirdly, we’ll be adding a header to the navigation menu. Create a new layer and select the area of the white background and fill with the colour #151512.

Move the selection down 40 pixels (Shift + Down four times) and hit delete on your keyboard to delete whatever was in the selection leaving a header background.

Step 4

Here I’ve added the title for the navigation menu – the font I’ve used is Delicious. I’ve also added a white to transparent gradient overlay layer style to give it a minor glossy effect.

Step 5

Now we’re going to be adding a little green gradient underneath the header to give some colour to the menu. On a new layer make a selection underneath the header (similiar to the one we used to delete the unwanted fill) and fill with a linear gradient from #a7cd1e to #77a80e – left click at the top of the selection and drag down just 10 pixels instead of to the bottom.

Now move the selection down 5 pixels (hit Down five times) and hit delete.

Step 6

Select the text tool and add in some text links. The font I’ve used for this is Verdana with a line height of 30 pixels (you’ll need to use this so it’s easier shortly). The colour I’ve used is #383838.

Step 7

Next up is the dividers between the links. Using the rectangular marquee make a selection of 250 by 1 pixel between the first two links and fill with the colour #ebebeb.

Duplicate the divider layer and move it down 30 pixels (Shift + Down three times) this is when using the line height of 30 pixels comes in useful because you know how many pixels to move it down :) Repeat this for all of the links (leave the last one).

Step 8

Now I’ve added a rectangle behind one of the links so it looks like it is active / mouse is hovered over it. To do this I created a new layer underneath the text layer and made a selection of 250 by 30 pixels behind one of the links and filled it with the colour #f7f7f7.

Step 9

Using the techniques I showed you earlier on, create a nice little footer for the menu – a dark underneath and a green gradient on top (see the psd file if you have any troubles).

Step 10

Now because Photoshop doesn’t seem to be very good with corners when you have a layer on top of another and it’s on a curved corner, we’ll just fix the corners up by selecting the white background and erasing the corners.

And you’re finished.

Bugs?

Considering I only spent a day on the design and coding of the site, if you spot any bugs or something doesn’t look right please contact me, thanks.

Suggestions

If you have any suggestions for PSDLounge – tutorial ideas, whatever – leave a comment below. I’m thinking about maybe having some forums, although I’m not quite sure at the moment, I’ll think about it more down the track when we have more readers so it can be an active design community.