(Click on the image to see it in full size - n.b. you’ll need a flickr account)

The original images used were: (click on an image get the full res version)

Step 1 - preparing the background with the patch tool.

Open up the mossy wall image into photoshop and resize the image to 1176x 1756, then unlock the layer by double clicking on it in the layer panel (the padlock will then disappear).  You’ll notice a number of artifacts on the image which gives away the size of what we’re looking at.  So we’re going to remove those, using the patch tool (hotkey J).  So click on the patch tool and draw around each artifact that stands out, and then once you’ve created a selection drag with the mouse from inside the selection to a similar area.  Photoshop will then make a neat job of patching the new area to its surroundings. Next create a new Hue/Saturation adjustment layer, de-saturate the image and colorize it with a pale dark green/yellow.

Step 2 - Lets add some pipes

Open up the pipes image, and paste it in directly under the hue/saturation adjustment layer. Transform it to a smaller size and position it to where you like it best. With this layer add a layer mask. With a brush (hotkey b) and with the layer mask selected,  start to paint out the background of the pipes image.  Start with a big relatively hard black brush with high opacity to get rid of most of the background, then use an increasingly smaller brush when you get closer to the pipes themselves.   Some shortcuts of use here.  ’[' ']‘ keys to make the brush size bigger or smaller.  X to switch between foreground and background colours (black and white for the layer mask).  The numeric keypad to change opacity levels, and shift+ [ or ] to change hardness of the brush.  Layer masks are non destructive, so if you accidentally brush out part of your image, switch from black to white and start painting, this will reintroduce part of your image.

Once you’ve got rid of the background, duplicate the pipes (hotkey ctrl+j) around the image to produce an effect similar to this:

N.B. To create some more funky pipes, trying using Transform > warp on an existing pipe layer.

Step 3 - Burn baby Burn

Select all the pipe layers and merge them together into 1 layer (hotkey ctrl/cmd+e ).  Then duplicate this pipe collection layer. Set the layer blending mode to overlay on the top pipe layer and on the bottom pipe layer set the layer opacity to 50%. This will create quite a nice grunge pipe effect.

Next we want to create some shadows.

Create a new layer above the moss and below the pipes.  With black as the foreground colour, use a brush set to color burn with low opacity(5%), 0% hardness and a large size to paint shadows under the pipes and inbetween them.  If you make a mistake, and go too dark, use the eraser with a low opacity to undo any excessive shadows.  You should end up with something like this:

Step 4: Lets make a cave

Next we’re going to create a cave and add a cute little door and window to the scene.  Again in the shadow burn layer, use a brush with higher opacity to create a cave like shadow near the top of the image.  I’ve created the cave above one of the naturals cracks in the moss layer just above the pipes.  Next open up the cottage door and window image and paste it in a new layer above the pipes, scale this image so that it fits in the newly created cave hole.  Then add a layer mask and start blending this photo in with the rest of the image.  The cottage image is slightly brighter than the rest of the image.  So create a new brightness/contrast adjustment layer above the cottage layer and darken the entire image.  Then hold down ctrl + alt and click with the left mouse button on the line between these two layers in the layer palette,  the new dark effect will now only apply to the cottage layer.  You can see this in the layer palette with the adjustment layer being slightly indented from the other layers.

You’ll end up with something like this:

Step 5: Working with Colour

Turn off the top hue saturation layer, and you’ll notice that the cottage layer is a different colour to everything else.  So create a new hue/saturuation layer immediately above the cottage layer and play around with its settings until the difference between layers is less obvious. 

The bricks of the cottage are a bit too blue.  So create a new layer between the adjustment layers and with a soft brush set to color with 5% opacity and a light orange/yellow colour start to paint over the bricks to warm them up a bit.  Next, let’s change the door colour.  Use the pen tool to draw around the door.  (make sure the paths icon is clicked and not shape on the menu at the top).  Once you have the path, right mouse button on it and select make selection.  Then press ctrl+shift+i to invert the selection.  Finally create a new color balance adjustment layer with that selection and tweak the settings to get a nice red effect for the door.  Use a layer mask on this layer to bring back the colour of the overlapping leaves over the door.  You should end up with something akin to this:

Step 6: Lets get ready for a goblin

Get rid of the window frame. Make sure the cottage layer is selected.  Use the Pen tool with paths mode selected to draw around the window.  Once done, right mouse button on the path and select make selection.  Then press ctrl+shift+i to invert the selection and press delete to remove the unwanted window frame

Turn on the top hue/saturation layer again. Open up the goblin image and paste it into your composition in a layer right below the top hue/saturation layer.  Resize the layer so he fits in the window.  Next use a layer mask to again mask out his background so he looks like he’s peering out of the window.  Then create a new layer above the goblin, and use the same burn techniques as in step 3 to burn shadows into the image on and around the goblin.  You should have something like this:

Step 7: Painting in Colour

We’re nearing the end now, so let’s add some colour back into the image.  With the layer mask for the top hue/saturation layer, start to paint black to bring colour back into the image, to achieve something like this:

Step 8: Big effects for little work

Ok, now it’s time to add some atmosphere. I strongly suggest you create a snapshot (in history) to temporarily save your work at this point. Select all the layers and press ctrl+e to merge them all together.  Duplicate this new layer (ctrl+j) and use a gaussian blur filter of 4.  Set this new blurry layer to a blending style of overlay and an opacity of around 25%. This technique is useful for enhancing the colours of your scene.  Select these two layers again and press ctrl+e to merge them together.

Now with this 1 layer, go to filter > render > lighting effects.  Using a spotlight style light, tinker with the properties to emulate a light coming from the top which fades to darkness near the bottom of the pipes.  You should get a result something like this:

And that’s pretty much it.  As with anything with Photoshop, you can get some really good effects if you’re prepared to spend time over the look to get it just how you want.

PSD File

• Glows using layer styles
• Stroking paths
• Particles using brush dynamics
• Bokeh effect

The PSD and full size image can be found at the bottom of this post and we’re going to draw a lightbulb:

Step 1:

Create a new document, 1600×1200 and fill the 1st layer in black.   Then set your primary colour to white and set your brush hardness to 0% and a size of 30. Create a 2nd layer and then use the pen tool to draw the coils of the lightbulb.  Once finished, right mouse on the path and select stroke path and make sure simulate pressure is ticked.

Step 2:

Add inner and outer glows to the resulting line to produce a suitable glow effect.  I used an outer glow size of 27 with a mid orange and an inner glow size of 5 with a slightly lighter orange.  Next, click on the paths tab to reselect your coils path, change your brush size to 7 and set it to 25% hardness, create a new layer and stroke the path again, and again add inner and outer glow layer styles.  Finally move each smaller coil a few pixels so that they’re not directly overlayed on top of each other.  (Repeat this process twice to achieve the effect below)

Step 3:

Next we’re going to create the particles around the coils.  Click on your brush tool and enter Brush Dynamics.  Set hardness to 0%, spacing to 1000%, tick shape dynamics and set size jitter to 1000%, tick scattering and set scatter jitter to 1000% percent

Create a new layer, then with these brush settings, paint around your coils.  Once finished, copy the layer style from one of the coils and paste it onto this layer. Next customize the layer style so that it resembles something like this:

Step 4:

Use the techniques demonstrated in steps 1 and 2 to draw the edges of the lightbulb in  new layers.  Set their opacity to 10% so that the focus remains the coils

Step 5:

Now we’re going to add some colour to the interior of the lightbulb. Click on the gradient tool, then edit the gradient so that it goes from a strong colour ( e.g. bright green) to 0% opacity.  Then in a new layer create a radial gradient near the top of the image.  Then, draw another radial gradiant using a different colour (e.g. bright blue to 0% opacity).  Finally add a layer mask to this layer and paint out all parts of this layer that fill beyond the extremities of the lightbulb.  Finally set this layer to 25% opacity.

Step 6:

Create a new layer and repeat step 5 again with 3 radial gradients, using a mid green at the top and 2 orange/red gradients at the bottom. Next add a layer mask, set your foreground and background colour to white and black respectively and then use the render clouds filter to simulate a smoke effect.  Go to image> adjustments> brightness & contrast and up the contrast of the layer mask by 100%.  Finally set this layer style to color dodge. 

Step 7:

Next we’re going to add a bokeh effect.  Bokeh is a term used to describe light sources out of focus, think blurry circles.  An example of what bokeh is can be found here.  Hopefully you’ve retained the brush settings from the particles in Step 3.  All you need to do now is change them slightly, so set the brush size now to 75 and set hardness to 100%.  Create a new layer, set the brush colour to a mid/light orange and then proceed to draw over your image.  These circles still look a bit too defined, so then use a gaussian blur filter with a radius of around 5%.  Finally set the opacity of this layer to around 9%.

Step 8:

The final touches involve creating a new layer and using a standard brush to paint over the coils with a dark purple colour, then setting this layer to color dodge, and this enhances the glow effect of the coils.  I also added some text along the path of the edge of the lightbulb.

And that’s pretty much it.  I hope you enjoyed this tutorial and found it useful.

Final Image

PSD File (the psd file here is at 1024×768 resolution to save on bandwidth)

Step 1:

Open any high quality but appropriate photograph in PhotoShop. Such as this one below:

 Step 2:

 First duplicate the background layer so that it can be edited, currently it’s locked. To duplicate the background layer select it in the layer palette, then right click on it and select the duplicate layer option.

Step 3:

Select the rectangular marquee tool from the tool box as shown below and select the part of the image you want to emphasize.

Step 4:

Select the layer via copy option from the layer menu and make a copy of the selection. Mark it invisible by clicking on the eye in front of the layer.

Step 5:

Convert the photograph into black and white by selecting the desaturate option from the image menu. Again make a copy of this black and white image by selecting the layer via copy option.

Step 6:

Step 7: 

Set the blending mode of this layer to Linear light. This will enhance the quality of our black and white photograph. Set the opacity of this layer to 40%.

Step 8:

Create a new layer by selecting its option from the layer palette.  Now fill the new blank layer with any color you like, i have used pale green.

Step 9:

Change the blending layer mode of this layer to soft light and reduce its opacity to 65%.

Step 10:

Now merge all the layer expect the one on which you copied the selection and the background layer which is locked. To merge all the layers select all the layers and right click to select the merge layer option.

Step 11:

Step 12:

Now select diffuse glow option from the filter menu.

In the diffuse glow dialog box set different values as shown below.

Step 13:

Step 14:

Now we will make a border around this selection. To do so select add a layer style option from the layer palette as shown below and select the blending options.

 Under the blending option first select stroke, change the color to white and increase its size to 10 pixels. Change its position from outside to inside.

Secondly, make a few changes with outer glow layer style.

Here is my final image.

PSD File

Final Image

PSDRockstar.com has teamed up with buytemplates.net to offer you a chance to win a custom designed banner worth $149.  As well as this, all participators in the contest will receive a FREE icon set which contains 185 icons and 10 premium website templates.  

How to Enter

Simply subscribe to the buytemplates.net newsletter by following the link below:
http://www.buytemplates.net/newsletters/contest.php

Then subscribe to the PSDRockstar.com RSS feed and finally post a comment below stating that you’ve subscribed.

And that’s it.  This contest closes on March 19th 2009 and the winner will be chosen at random from all those who followed the steps above.   The Winner will be notified via email after the close of the contest with details on how to claim your free banner design.

You can download the 10 premium templates once you have signed up to the buytemplates.net newsletter.  At the end of the contest, a link will be posted on this blog where you can download the free icon pack.

And that’s it, so get subscribing now, good luck!

About the Sponsor

Buytemplates.net is a one stop shop for all your website requirements offering the following products and services:

Professional pre-designed website templates
Template customization
Custom template creation (custom web design)
SEO/SEM services
Website Maintenance Services

Membership fee starts as low as $49 for budget, $69 for standard, and $99 for premium plans. You can download hundreds of templates with a small membership fee. You don’t have to hire a web designer or external web design studio and pay enormously to design a single web template.

In this tutorial I’m going to show you how to create the image above using a combination of glows and blends in 7 steps. All the files for this tutorial are at the bottom of this post.

I was watching an advert on BBC 2 (in the UK) for the new series of Heroes and it had a great animation of the number 2. Check the BBC2 Heroes website for an idea of what i’m talking about. So I thought I’d try to create something similar.

Step 1

Create a new blank psd file with the background set to black. Create a new layer and fill it with a radial gradient of green/blue to black originating from the right of the image and then set the layer opacity to 30%

Step 2

Create 3 new radial fills going from red to transparent, green to transparent and blue to transparent, and place them within their own group

Step 3

Create a new layer, set the foreground and background colors to mid gray and black respectively, then go filter > render > clouds
Then still on this layer go filter > noise >add noise and add noise of 4% with a gaussian distribution and tick monochromatic

Finally set this new layer to overlay with an opacity of 70%

Step 4

Create the shape of the number 2 on a new layer.

You can use one of your pre-installed fonts, however if you don’t think you’ve got the right font, draw your own using the pen tool. For the shape below I used franklin gothic font set to 800 px in size. Then converted the text into a path, and modified the individual points using the direct selection tool to a shape I was happy with. Next, I turned the path into a live selection. Lastly I filled that selection with the color black in a new layer.

Add inner and outer glows using layer styles to the number 2 (double click on the layer in the layer panel).

Outer glow settings:

inner glow settings:

Step 5

Using a white brush tool with 0% hardness paint strokes around the edges of the 2 on several new layers. Try experimenting with the smudge tool as well to push the paint around a bit.

Now set each highlight layer to overlay and experiment with the opacity levels to achieve a look similar to that below. For a slight color alteration I added a pale orange color overlay in layer styles to each layer.

Step 6

Create some funky lines to the rop right of the 2 on a new layer. To create these lines I used a brush set called winter breeze which you can find in the previous post 10 Groovy Brushes for Photoshop

Then create a layer mask for the new layer to hide the new lines which are visible over the 2 itself. Finally, in layer styles set a color overlay to yellow and an inner glow of mid orange and experiment with the choke and size settings to produce something like below:

Step 7

Now the final step, create a new layer yet again, fill it with black and go filter > render > lens flare and accept the default settings. Move the lens flare to an appropriate position then set the blend mode to linear dodge.

And that’s it. Below are links to the .psd file and the winter breeze brush. I hope you enjoyed this tutorial. If you have any questions, write a comment below and i’ll reply.

PSD File

Winter Breeze Brush Set

Alongside each brush listed below, i’ve had a go myself at using them and attached an accompanying image so you can get an idea of what they can do.

To install a new brush into Photoshop, download the file, and place the resulting .abr file into presets > brushes. Then, when in Photoshop, click brushes and the more details drop down arrow. To the right of the master diameter box click the arrow and select replace brushes and choose your newly downloaded set (see image below).

Paint Splatters:

A collection of 11 original paint splatters. Each brush is of a suitably high resolution so they will work well on larger canvases
http://ka05.deviantart.com/art/Splatter-Brushes-31656209

Lightening:

Over 25 brushes in this set, the largest brush size is 628×628 so not massive, but used in conjunction with the others, you can get some pretty cool effects
http://redheadstock.deviantart.com/art/Lightning-Photoshop-Brushes-37337848

Clouds:

Some very high resolution brushes here, cool
http://redheadstock.deviantart.com/art/Clouds-II-Photoshop-Brushes-91356293

Floral:

A lovely set of 10 floral brushes, high resolution as well. Excellent!
http://summerair.deviantart.com/art/Floral-Brushes-52478959

Winter Breeze:

Some useful curvy lines which can be made to produce some pretty cool glow effects
http://axeraider70.deviantart.com/art/Winter-Breeze-Brushes-44617350

Cracks:

A great collection of walls and various cracks, pretty high resolution too.
http://latebraking.deviantart.com/art/Cracks-Brushes-37874185

Grunge:

Some very useful brushes here, and they work well with the splatter brushes mentioned previously.
http://keren-r.deviantart.com/art/gRUNg-BRUSHEs-48899861

Vector 2:

A collection of 15 brushes offering sunlight rays coming from different angles. Very useful, and the resolution of each brush is at 1280×1280. Nice.
http://physicalmagic.deviantart.com/art/Vector-Line-Brushes-2-39244177

Smoke:

http://falln-stock.deviantart.com/art/Smoke-Brushes-Set-1-92730901

Z Design Tech:

Some very useful generic technical swirls and lines to make things look complicated, awesome.
http://z-design.deviantart.com/art/Z-design-Tech-brushes-set-v2-20701749

Step 1: open any picture in Photoshop you feel right for this effect.

Step 2: Duplicate copy of the Background by Selecting the Duplicate Layer Option from the Layer Menu. We do this just in case any mistake is done then we do not end up ruining the original Image.

Step 3: Now Increase the brightness of the photograph by select the option Shadow/Highlight from the image menu as shown in the screenshot below.

In the Shadow/Highlight Dialog box take the shadow slider to 100% to fully brighten up the image.

Step 4: Go to the Filter menu and select the Find Edges menu, this option will convert the Photograph into an image given below.

Step 5: Using the Fade Find Edges option in the Edit menu we will get the desired effect.

In the Fade Find Edges Dialog box change the Mode Menu to Luminosity from Normal and move the Opacity Slider till you get the desired effect.

The Final Image is given below.

More Photoshop Tutorials:

• Tutorial: Sleek Blog Header Design using photoshop
• Futuristic Button Design tutorial using photoshop
• ‘Broken Pieces’ photo effect tutorial using Photoshop
• Sky theme header design using photoshop
• How to make some parts colored with rest in Black & White

Enjoyed this photoshop tutorial then consider subscribing to our RSS feeds for more…

Preview:

Sleek Header Design.

Step 1:

Let’s start out by creating a new file. I used a 1000×200 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer then draw a light blue rectangle with #C2EBFF color shade and 1000 x 121 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Satin and Gradient Overlay blending options to your large gray rectangle layer.

Result:

Step 3:

Create a new layer. Then draw a 1 px line with #5B5B5B color shade across the edge of the top gray rectangle.

Step 4:

In a new layer draw a long dark red rectangle with #930000 color shade and 540 x 23 px dimensions right at the bottom of your header design. Then under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options.

Result:

Step 5:

Create another layer then draw a 1px line with #9F1C1C color shade on the top edge of your dark red rectangle design.

Step 6:

Select the Horizontal Type Tool then set the font family to Arial, bold, 13 pt, none and white color shade. In a new text layer type out your navigation links on the dark red rectangle design. Make sure you leave spaces between each link and add a vertical bar with #272727 color shade.

Step 7:

Create a new layer and draw a long black rectangle with 463 x 21 px dimensions.

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long black rectangle layer. Then set the layer’s blending mode to Lighten at 58% opacity.

Result:

Step 9:

Select the Horizontal Type Tool then set the font family to Arial, bold, 32 pt, strong and white color shade. In a new text layer type your website name on the empty header space then use a smaller font for your slogan.

Results:

Sleek Header Design.

If you enjoyed this photoshop tutorial then please consider subscribing to our RSS feeds for more…

More Tutorial Resources:

• Tutorial: Create a realistic chalkboard using photoshop
• Futuristic Button Design tutorial using photoshop
• ‘Broken Pieces’ photo effect tutorial using Photoshop
• Sky theme header design using photoshop
• Futuristic Web Logo Design tutorial using photoshop

You can checout the contest here Win 3 Premium WP Themes, Hosting & more…

All The Best

And the winners are:

• NetBucks
• Bernadeth
• PC
• gengen
• indocontest
• Yen

Congratulations to the winners, I have sent you a email which you used to comment. I would like to thank each and every participant and also to the sponsors who sponsored some real cool prizes. Remember this is not the end there is another contest coming soon in next month(yeah that’s 2009 ;)) with some cool cash prizes and giveaways. So just stay glued!