Here I collected 11 Ultra Delicious Icon Design Tutorials Done in Photoshop to show you how you can create great icons with the drawing facilities available in Photoshop. If you haven’t already seen them, take a look! You might be surprised to see how Photoshop can do :)

Here goes the list, enjoy!

Custom Hard Drive Icon

In this tutorial il show you how to create a custom hard drive icon in various colors.

Create a Jaguar Style Folder Icon

In this tutorial, we will show you how to cover an object in a Jaguar style fur texture. In this example, we’ll cover a computer folder, but this technique can be used with any other object, like a CD cover, a mouse, or even a computer.

Adobe Photoshop CS3 Style Icons

In this tutorial I will show you how to create the Adobe CS3 style icons using some basic gradients and layer styles.

Computer Icon Tutorial

For all those who have been waiting for this, here’s the computer icon video tutorial I promised. I’ve uploaded it externally as the file is too large for deviantArt.

Wii Mote Controller Tutorial

Design a stylish Wii Mote Controller Tutorial in Photoshop. Take a look!

Create a High-Gloss Graduation Hat Icon Design

Photoshop is great to use for creating quality icon designs. In this tutorial, I will teach you how to make a professional, shiny, clean graduation hat icon. The techniques in this tutorial will help you graduate to the next level in icon design.

How to Create a Cute and Adorable Twitter Icon in Photoshop

Today I will show you how I made the Cute Twitter Icons which I released a day ago.  It’s really simple actually. In this tutorial, you will learn how to create a Cute and Adorable Twitter Icon.

Draw a Speaker Icon in Photoshop

This tutorial is contributed by Sohan Negi and will show you in every details on how we can create a set of speakers icon from scratch in Photoshop.

Simple Coffee Cup Icon Photoshop Tutorial

In this tutorial we’ll be going though creating a semi-photo realistic coffee cup, with some nice frothy coffee.

Nice ‘n’ Simple Subscribe Badges

In this Photoshop tutorial we’ll be making those cool supermarket-style badges, then we’ll be turning them into subscribe buttons for your website, a must-have for any blog!

That’s it for this post! Hope you enjoy this collection and find those tutorials useful!

Cheers and have a great day!

In this post, I will show you yet another 5 Interesting Little Photoshop Tricks to Add Extra Elegance to Your Design. These techniques are just little things that I found useful in Photoshop, and I think they’re quite beneficial to learn if you’re a PS beginner. So go ahead and have a try!

The 5 topics I will cover in this post:

1. Create 3D Stripes
2. Make Your Text Look Clearer with Stroke
3. Use Smart Sharpen Filter to add final touches
4. A Quick Way of Enhancing Lighting Contrast to Your Image
5. The Use of Highpass Filter – Another Way of Sharpen Your Image

Create 3D Stripes

Create a new document sized 800 x 600px, fill the background layer with a light colour as shown below:

Create a new layer on top of the background layer and set its blending mode to “soft light”, grab a big soft white brush and do a single click here:

Create a new layer called “stripe upper” and fill it with dark brown colour:

Apply the following gradient overlay settings to this layer:

Duplicate this layer once and rename the duplicated layer “stripe lower”, resize it and fill it with a light green colour:

Apply the following layer blending options to this layer:

and you will have the following effect:

Create a new group called “stripes” and put those two layer into it, duplicate the group and use the free transform tool to distort the whole group as shown below:

Hint: first resize it to a narrower size, then distort.

Duplicate the original stripe group once more, and put the duplicated group on the top, drag it to the left as shown below:

Now there is the intersting bit – because the light source is from the right, so we need to reduce the brightness of the middle distorted part. To do this, simply merge the two stripes layers of the centre bit, apply the following brightness and contrast adjustment to it:

and you will see the following effect:

and here is the overall effect: (click to enlarge)

That’s it! Hopefully this will be use to you when it comes to adding depth to your web design.

Make Your Text Look Clearer with Stroke

Making your text look more attractive is always a great way to focus user’s attention (especially on websites). But apart from adding all sorts of drop shadow, inner shadow, bevel and emboss effect, have you considered just to use the “Stroke” blending option?

Now create a new document size 250 x 120px, fill the background layer with a light blue to dark blue gradient, as shown below:

Download a copy of this font and type some text onto it: (or you can try out differernt font if you like)

Now go to the blending options of this text layer, apply the following “Stroke” settings to it:

Hint: with the colour, choose a darker blue.

You will have the following effect:

You can the text looks better and clearer. The trick is that when you choose the colour of the stroke, always choose one that is slightly darker than the background colour.

I guess this is epecially great way to increase the clarity of the text when it comes to making web graphics.

Use Smart Sharpen Filter to add final touches

Download a copy of this model image and load it into Photoshop. As you can see this stock looks great originally, however you can probably sense that there is still thing you can do to improve it a bit.

Now let’s pretend this is a photo you have already done the majority of the retouch, and you feel there is something short. So go to Filter > Sharpen > Smart Sharpen and apply this following settings:

Please make sure you choose “Advanced” instead of the default “Basic”.

Sharpen

Shadow

Highlight

And once you apply the smart sharpen shettings, you will see we brought that extra bit of detail out of the image. Belows are screenshots pointing out the areas which we can see improvements:

And here is a before and after comparison of the image:

Before

After (click to enlarge)

Of course the above smart sharpen settings are not applicable to every image, you will have to adjust them to suit your need in different cases. Experiment with them :)

A Quick Way of Enhancing Lighting Contrast to Your Image

Now we continue from the previous step – sometimes you will find although the light in the image looks quite good, you feel there is still area that you want to add more contrast to it. Here is a simple way to do it:

Create a new layer on top of every other layer, grab a soft brush (0% hardness) with black colour, do a few clicks in the areas you would like to enhance the lighting contrast:

Change the blending mode of the new layer to “overlay” or “soft light”, you will have the following effect: (click to enlarge)

You can use this method to add lighting contrast to lots of occasions, but make sure not to overdo it :)

The Use of Highpass Filter – Another Way of Sharpen Your Image

Here is a clever use of the highpass filter (which I guess most of you haven’t really use if much before) – use it to sharpen your image!

Downlaod a copy of this image and load it into Photoshop. Duplicate the background layer once and go to Filter > Other > High Pass and apply the following settings:

Change the blending mode of this layer to “Hard Light” and reduce its opacity to around 20%. Here is a before and after comparison:

Before

After (click to enlarge)

One thing I like about using this method is that the sharpen can be undone, due to the fact that the seperate layer was created. And the effect can be controlled by adjusting the layer opacity.

OK that’s it for this post! Hope you enjoy it and find it useful!

Until next time, have a great day!

The primary goal for this tut is to show you the functionalities behind the draw tools, selection tool and the use of layer blending options. I also added my own design ideas to make this play button a bit unique. Hope you enjoy it!

Here is a preview of the final effect for this tutorial: (click to enlarge)

PSD File for this Tutorial

You can have this PSD File for only $2.00 via Paypal! Click the link below and you will be taken to the Paypal checkout page, after payment you will be redirect to the download page automatically.

OK let’s get started!

Step 1

Create a new document sized 1000 x 600px. Fill the background with the following gradient:

Duplicate the background layer once, resize and rotate the duplicated layer, use a big soft brush to erase the left and right side, and position it as shown below:

We now have a reasonably good-looking background to work on. Personally I feel sometimes a nice background help creating the mood we need to continue working on the graphic.

Step 2

Create a new layer named “circle”, grab the “Ellipse Tool” from the toolbox:

Make sure your setting is set to below: (white fill color)

hold down the “Shift” key and draw a white circle on the layer:

Apply the following layer blending options to this circle layer:

Drop  Shadow

Inner Shadow

Bevel and Emboss

Color Overlay

Gradient Overlay

and here is the effect so far:

The colour I chose for this play is orange, however you can try out different colour such as blue, green, purple – the choice is yours.

Step 3

Now we can add a glossy overlay to the circle background to make it more attractive :) To do this, create a new layer on top of the “circle” layer, name it as “glossy overlay”. Load the selection of the “circle” layer by Ctrl + left click the thumbnail on the layer pallette, as shown below:

Click on the “Glossy Overlay” layer, then select the “Elliptical Marquee Tool” and choose the “subtract from selection” option:

Then draw a selection around 50% the height of the original “circle” layer on the “Glossy Overlay” layer, you will have the following effect:

Fill the selection with white colour, then change the blending mode to “overlay”, opacity around 30%.

Press Ctrl + T and use the Free Transform Tool to rotate the selection clockwise a bit, you will have the following effect:

Step 4

Create  a new layer on top of  the glossy overlay layer, grab the “polygon tool” from the toolbox, apply the following option to it: (Make sure to choose “3″ for sides, because we’re drawing a triangle!)

After drawing, rotate it a bit clockwise so it matches the angle of the background:

Apply the following layer blending options to it:

Drop shadow

Inner Glow

Bevel and Emboss

(Ingore the gradient overlay setting, I decided not to include it in the end)

Add a layer mask to this triangle layer, use a smalll soft brush, erase the joint points a bit:

You will have the following effect:

To add a bit depth to the play button, we can duplicate the triangle layer once, disable all layer effect on the duplicated layer, reduce its height and width a bit, you will have following effect:

Step 5

To add a bit creativity to the button, I decided to add some smaller circle around it, with a different colour. To do this, I simple duplicated the original circle layer once  and put the duplicated layer below it. On the duplicated layer, cancel all layer blending effects except the Bevel and Emboss and Gradient Overlay options:

Bevel and Emboss

Gradient Overlay

Use the free tranform tool to resize it to a smaller size, then duplicate it for another three times, scatter those layers around the circle as shown below

Then we can add shadow onto the image to make it deeper – To do this simply create a new layer on top of the “background copy” layer, and grab a big black brush around the same size as the circle layer, do a single click on it, then resize the layer as shown below:

Reduce its opacity a bit and position it behind the circle, and here is the final effect: (click to enlarge)

That’s for this tutorial! Drop me a comment if you have any trouble with it, I will try my best to help you out :)

Have a great day!

For those who haven’t yet came across the idea of “Call-to-Action” button – basically they’re buttons that you would want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale. By making those buttons easy to easy and click on, you increase the likelyhood that user will notice the button, then follow up with relevant actions.

As for embossing text, they’re everywhere now on the web, and I personally quite like this particular effect :)

Here is a preview of the final effect for this tutorial: (click to enlarge)

PSD File for this Tutorial

You can have this PSD File for only $2.00 via Paypal! Click the link below and you will be taken to the Paypal checkout page, after payment you will be redirect to the download page automatically.

OK let’s get started!

Step 1

Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab the Gradient Tool from the toolbox and fill it as shown below:

I decide to use this light gradient because it’s easier to demonstrate several important points in the next few steps. You can of course try out darker ones.

Step 2

Let’s type some text on the canvas. I used this font because I personally feel it’s a very clean and bold font, which you can use for a wide range of headings, or descriptive text.

So type some sample text on the canvas as shown below: (use a slightly darker colour for font colour)

Appy the following layer blending option to the text layer:

Inner Shadow

Stroke

And you will have the following effect to the text layer:

See, that’s our embossing text effect done. Very simple, yet effective.

Step 3

Ok let’s get on with creating the call-to-action button. Use the Rounded Rectangular Tool with a 7px radius, draw a button on the canvas as shown below: (Make shape you select “shape layers” on top option bar)

Apply the following layer blending effect to this button:

Bevel and Emboss

Gradient Overlay

With the Gradient Colour, apply the following settings:

Location 0% – Color: #0083be

Location 99% – Color: #31c8fa

Location 100% – Color: #FFFFFF

Stroke

And you will have the following effect:

Step 4

Now we have a button background, let’s add some symbol onto it so it provides some kinds of graphical meaning. In this case, I decided to make this button a download button. So naturally I thought of a down arrow would mean something to the user.

So grab the Custom shape tool from the toolbox:

and choose the bold arrow from the library as shown below:

Draw an arrow on the position as shown below, rotate it clockwise 90 degree when you done the drawing:

Apply the following layer blending options to the arrow layer:

Drop Shadow

Gradient Overlay

Location 0% – Color: #09c228

Location 100% – Color: #b4ff97

Stroke

You will have the following effect so far:

Step 5

Now we can type some text onto the button:

Apply the following layer blending options to the text layer:

Inner Glow

Gradient Overlay

Stroke

and you will have the following effect:

Step 6

Ok we’re almost done. To spice up the final effect, we can add some light and shadow to the button and text to increase their depth. To do this, create a new layer underneath the button background layer, grab a big soft brush with a dark colour, do a single click on the centre of the canvas:

Use free transform tool to resize it and position it as shown below:

To create a light divider between the text and the button, simply create a new layer on top of the shadow layer, use a big soft brush with white colour, do a single click to the position as shown below:

Again we resize it and fit it to the postion under the text:

and here is the final effect for this tutorial:

Final Thoughts

There are several things I think we need to pay attention to when it comes to making call-to-action buttons:

1. Always try to use fresh, vibrant colour as button background, and make sure the color differs significantly from the rest.
2. Apply gradient to the background creating more depth and make the button stand out
3. Use graphic element and symbol on the button to make it more meaningful to visitors
4. Use Light and shadows to draw user attentions.

Further Readings

1. Web Design Trends: Call To Action Buttons

That’s it for this tutorial! Hope you enjoy it!

Along the way, I would like to show you my use of brushsets and the way I use them to draw background textures, then mixing the background texture with real-world object.

Some steps of this tutorial require the use of features available on CS4, but I guess there is always alternative way you can use, although the end effect may differ slightly.

Have a try :)

Here is a preview of the final effect I have for this tutorial: (click to enlarge)

PSD File for this Tutorial

You can have this PSD File for only $2.00 via Paypal! Click the link below and you will be taken to the Paypal checkout page, after payment you will be redirect to the download page automatically.

Ok let’s get started!

To complete this tutorial, you will need the following stocks:

Grass Texture

Cloud Brushset

Step 1

Create a new document sized 1000 * 600px, leave the background colour as White and create a new layer on top of it named “background texture”. Now let’s paint some background on it.

I decided instead of getting some ground/soil texture, using pure the default Photoshop brushsets can be fun and good for practicing some painting skills.

So grab those brushes as shown below:

The painting secret here is to try set the flow and opacity of the brush to a reletively low level, and try to mix all three brushsetss together and adjust the size of the brush when necessary, for maximum effect.

Here is what I have after the painting (You can see

You can see I gave the centre of the image – where the grass and the text will sit, a dark colour then the rest of the image.

Step 2

This step is optional if you’re happy with result from previous step. Otherwise, we can do some lighting and colour adjustment for the background texture layer. Add the following two adjustment layers to the image:

Curves

Colour Balance

And we can add a new layer called “light top right” and grab this brushset below with white colour and paint some light rays from the top right: (remember also to set brush flow and opacity to low level)

And here is the effect I have after the painting:

If you find it difficult to paint the background, you can download a copy of the background image here. Then import it into Photoshop. However I would suggest you have a try at least, it doesn’t matter if it didn’t turn as good.

Step 3

Load the “Grass Texture” image into Photoshop, use the Lasso Tool with 20px feather to select a portion as shown below, copy and paste a patch of the grass texture onto our document, resize and distort it if necessary:

Use the Eraser Tool with soft brush to erase the edge of the grass texture, as shown below:

Apply the Smart Sharpen Filter on the grass texture layer:

Add the following three adjustment layers to the grass texture layer (tick the “use previous layer to create layer mask” option)

Levels

Vibrance

Curves

And here is the effect so far:

Step 4

Now let’s type some text onto it. I used the “Myriad Pro” font but you can pretty much choose any bold font you like, type one letter on the canvas, on top of all previous layers:

Apply the following blending optiono to this text layer:

General Blending

Drop Shadow

Inner Glow

Bevel and Emboss

And here is the effect after apply those blending options:

Duplicate this text layer and re-type each layer with a new letter, rotate and position them as shown below:

Optional: duplicate each text layer to make the text bolder:

Step 5

Now we’re pretty much done with the text, let’s add some lighting effect.

Firstly create a new layer called “text highlight” with “Overlay” blendng mode just under the first text layer, and grab a round soft brush with white colour, set the flow and opacity to both around 50%, and paint to the area as shown below:

Add another layer on top of the “text highlight” layer, and use the same brush as we used for the highlight layer, but with a dark colour, gently paint on the areas as shown below: (may have to adjust the brush size accordingly)

Add another layer just under the grass texture layer, and paint some shadow under it:

Add two more adjustment layer on top of all previous layers:

Vibrance

Curves

And here is the effect so far:

Step 6

Finally, we add the cloud on the top of the image by create a new layer on top of the new layer, and paint with the cloud brush set we downloaded:

And we add some shining dots around the text, by using a soft, round white brush:

OK that’s it for this tutorial! You can of course further enhance it by adding some more effect.

Here is my final result for this tutorial (Added some cracked texture under the grass, and some abstract lines)

Hope you enjoy this tutorial and find it useful. Have a great day!

Along the way, the tools we will be using include the shape tool, layer blending options, brush and eraser tool. This tutorial is suitable for beginners as the steps are quite easy to follow in my opinion. As for advance Photoshoppers, I would love to hear you the methods you use to achieve such effect, just drop me a comment below.

Have a try, let me know if you have any problem, I will try my best to help you out :)

Here is a preview of the final effect for this tutorial:

Ok let’s get started!

Step 1

Let’s create a new document sized 640 x 480px and fill the background layer with Black.

The reason I chose not to create a document with the size same as the button we’re creating, is because ultimately we will be placing this button somewhere on a web page. Therefore, I think it would be better if we start on a bigger canvas so we will have a better overview of the button design.

Now add a new layer on top of the background layer and name it “background lighting”, grab a big, soft and round brush with a dark grey colour, do a single-click in the position shown below:

Step 2

Grab the Round Rectangular Tool (U) and apply the settings to it:

Draw a rectangular shape in the centre of the canvas, as shown below: (Don’t worry too much about the dimension, just a rectangular shape will do)

On this shape layer, apply the following layer blending options:

Drop Shadow

Inner Shadow

Gradient Overlay

and you will have the following effect:

Step 3

Now let’s load the selection of the shape layer by holding down the Ctrl key and left-click the thumbnail image of the shape layer on the layer palette.

Create a new layer called “Lighting”, on this layer, grab a soft round brush with white colour, do a single click in the position as shown below:

and you will have the following effect:

On this “lighting” layer, apply the following layer blending options:

Drop Shadow

Bevel and Emboss

Gradient Overlay

and you will have the following effect:

Optionally, you can duplicate this “lighting” layer once for more depth. You will notice on the top we created a shining edge line, which add a bit of extra flavour to the button design.

Step 4

Duplicate the “lighting” layer one more time and put this layer on top of all other layers. On this duplicated layer, go to Edit > Transform > Flip Vertical and flip this layer vertically once.

You will now see on the bottom we now have a shining edge line as well, this makes the button more stylish.

In order to reveal the top shining edge line created in the previous step, we can simple grab an eraser tool with a soft round brush, and do a single click on the position shown below:

and you will now have this effect:

Step 5

Now we can simply type some text onto the button. Font choice is quite important here because we want to the button to be as eye-catching as possible. Personally I think those Bold, Clean Font always work wonders. There is a pretty nice article here containing a list of bold fonts free for download, simply grab one of those and type some text onto it:

And on this text layer, apply the following layer blending options:

Drop Shadow

Bevel and Emboss

Gradient Overlay

And you will have the following effect:

To make the text stronger, simply duplicate the text layer once and you have made a very stylish, clean and shining button:

That’s it for this tutorial! Hope you enjoy it drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

For the 7 mockup tutorials I have selected, although they all aim towards the same objective, the techniques used during the process can be seen differently, mainly because the difference in genre (e.g. corporate design v.s watercolour design). Interesting to see the methods the authors use to achive the end result :)

As for the convertion tutorial I included here, I personally think it’s the best and most detailed one on the net! I’m sure you will find it useful, too. Enjoy :)

Here goes the 7 Highly Practical Photoshop Site Mockups, hope you enjoy them and if you like them and find them useful as I did, give the authors/writers some applause!

Awesome Tutorial Portfolio Design

Hi dudes, our new awesome tutorial! I think this is most detailed and long web design tutorial on the web  with 175 screenshots!!! This tutorial include lots of  trendy photoshop effects.

- By PSD Themes

Create a Clean and Colorful Web Layout in Photoshop

In this tutorial I am going to show you how to create a clean corporate layout in Photoshop. The original layout was created by kuntiz from ThemeForest and I want to thank him for allowing me to write this tutorial.

- By Tutorial9

Corporate WordPress Style Layout

In this tutorial you will learn how to create a corporate wordpress styled layout. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

- By PSDVibe

Create a Vibrant Modern Blog Design in Photoshop

Taking a closer look into the world of web design this tutorial will cover the process of designing a vibrant and colourful modern blog layout in Adobe Photoshop. Beginning with a blank canvas we’ll go through the process of creating the entire structure and effects from scratch.

- By Blog.Spoongraphics

Creating a Dark Layout Mockup in Photoshop

Welcome to tutorial 209, in this tutorial we’ll be creating a dark layout with some nice unique styling. We’ll also be making our very own custom patterns to go with the layout.

- By HV Designs

Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

In this step by step tutorial I explain how to realize a nice Web Portfolio Design with a Watercolored Background using two brush sets, a icon pack and some basic techniques.

- By pvmgarage.com

Graphic Design Studio Web Layout

In this tutorial i will show you how easy is to create a layout with transparent buttons. This type of layout was used lately a lot because it is the latest trend in website design.

- By Grafpedia

And here is the one amazingly detailed tutorial about how to convert your design into working page. I personally found it very useful, especially for beginners who have limited knowledge about HTML/CSS.

Converting a Photoshop Mockup

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website.

- By Chris Coyier from css-tricks.com

That’s it for this post! I hope you find those links/articles useful, and good luck with the mockups :)

Till next time, have a great day!

This tutorial is suitable for beginners and I included the ways of creating new brush presets and also the use of Pen Tool. You will ample opportunities to practive layer blending, filters and Free Transform Tools. Have a try!

Here is a preview of the final effect: (click to enlarge)

Ok let’s get started!

Step 1

Create  a new document with black background, for size I chose 980px * 400px however you can change this according to your own preference. Use 72 pixel/inch for resolution since we’re creating an image used for website.

Now let’s make a new brush preset. To do this, firstly select the brush tool with the following brush:

Then apply the following brush dynamics to it:

Shape Dynamics

Scattering

Other Dynamics

Make sure you also select the Airbrush and Smoothing option.

After finishing making this brush, let’s save it as a new brush preset so that we can use it in the future too. To do this, left-click the down tri-angle on the top right and click “new brush preset”:

And Enter the following into the window popup:

Then you will see the brush preset appear in the brush selection window:

Step 2

Create a new layer call “lines”, grab the Pen Tool and draw the following working path:

Hint: hold down Shift key and drag your mouse upwards approximately 45 degree for both archor points.

Then right-click and select the option “Stroke Path”:

Then choose the option “brush” and tick the “Simulate Pressure”:

And you will have the following effect:

Step 3

Still on this “lines” layer, go to Filter > Blur > Motion Blur and apply the following settings:

Then hit Ctrl + F and apply the motion blur filter again, and you will have the following effect:

Apply the following Gradient Overlay blending option to this layer:

Then duplicate this layer 4 times and merge the duplicated layer together, you will have the following effect:

Rename this layer as “lines” after the merge.

Step 4

Again we duplicate the “lines” layers 3 times, and you will see the colour of the the spectrum become clearer:

Then we merge those duplicated layer together, then use the Free Transform tool to resize it into the following:

Then we can use the Warp Tool (Ctrl + T and right-click select “Warp”), transform it into the following shape:

And here is the effect after warping:

Step 5

Now we can really just use our imagination and simply duplicate this “lines” layer a few times, rotate and resize each duplicated layer until the outcome is desirable:

Here is my effect so far:

Merge the duplicate layer together.

We can also add a bit of glowing effect to the spectrum lines. To do this, simple duplicate the merged layer and apply the following Gaussian Blur settings: (Filter > Blur > Gaussian Blur)

Change the blending mode the duplicated layer to “Linear light” and you will have the following effect:

To add some final touches, remember we created a new brush preset in Step 1? We can use it to add some nice dots on the abstract line.

Create a new layer called “dots” on top of all other layers, grab that brush preset and simply paint over the lines:

Then Change the layer blending mode to “Overlay” and you will have the following effect:

Duplicate this “dots” layer and change the blending mode of the duplicated layer back to “normal”, then reduce its opacity to 15% and erase some excessive parts.

You will have the following final effect:

Ok that’s it for this tutorial! Of course you can further enhance this image by adding some more effect, textures and filters.

Here is my final version for this tutorial: (Added a bit of cloudy effect and sharpen the image )

Hope you enjoy this tutorial and find it useful, drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Personally I can see an increasing trend of having a big and eye-catching header image for website/blogs, especially since broadband has become a commodity amongst the majority of the population.

Along the way, we will practice the use of Pen Tool, various image adjustment options, free transformation tool,  layer blending styles and filter effects. Hope you enjoy it!

Here is a preview of my final results:

PSD File for this Tutorial

You can have this PSD File for only $2.00 via Paypal! Click the link below and you will be taken to the Paypal checkout page, after payment you will be redirect to the download page automatically.

Ok let’s get started!

Step 1

Create a document sized 1200 x 600 px (Please note that you may specify any size that you think suitable for your site design, this size can only be used for practice purpose only). Fill the background layer with Black.

Create a new layer called “Radial Gradient Fill” and grab the Gradient Tool (G), select the Radial Fill option and  fill the newly created layer as shown below: (you can specifiy any colour you like)

Then Create a new layer call “Angle Gradient Fill” on top of the “Radial Gradient Fill” layer, set its blending option to “overlay”

use the Rectangular Marquee Tool to select the centre portion of the layer, again use the Gradient Tool (Set the foreground colour to white, with transparent background), this time we select the Angle Gradient option, fill the selection as shown below:

Step 2

Duplicate the “Angle Gradient Fill” layer once and keep the blending option of the duplicated layer as “overlay”, go to Edit > Transform > Flip Horizontal and flip the layer horizontally. Merge the twol layer together. Keep the blending mode as “overlay” after the merge.

Apply the “Drop Shadow” blending option to the merge layer as shown below:

Then reduce the previous “Radial Gradient Fill” layer opacity to 60% and you will have the following effect:

Then create a new layer in between the previous two layers, name it as “centre light”. Grab a big soft round brush (600px in my case), set the foreground colour to white, and paint a single dot in the centre of the layer:

Set the layer blending mode to “overlay” and you will have the following effect:

Step 3

I decided to give this image a bit more depth and a bit 3D feeling. So on the “Angle gradient fill” layer, hit Ctrl + T and bring up the free transformation tool, choose the “perspective” option and transform this layer as shown below: (reduce the top width)

Here is the result after perspective the layer:

Step 4

Create a new layer called “shineline”, use the Pen Tool to create the a work path as shown below: (For those who are yet to be familiar with pen tool, I have a post here with some useful links to pen tool tutorials)

Then right-click and choose “stroke path” and select “brush” (make sure you select a small soft round brush). Make sure you have “simulate pressure” option enabled as well.

Here is effect so far:

Step 5

Duplicate the “Shineline” layer a few times, use the Free Transformation Tool to rotate, distort, resize the duplicated layer and mixing those lines together:

Merge those dupcliated layers together and duplicate the merged layer a few more times, again use the free transformation tool to add a few more lines on the image:

Duplicate the merged layer, apply Gaussian Blur with the following setting on the duplicated layer:

You should have the following effect so far:

Step 6

Create a new layer called “shining dots”, load the selection of the “shineline” layer, then right-click and select “Make Work Path”:

Select 0.5 pixel tolerance for the work path. Now let’s grab a 3px soft round brush with the following dynamic brush settings:

Also make sure you tick the “Smoothing” option.

On the “shining dots” layer, stroke the path with this brush and you will see the following effect:

Step 7

Now we can add a bit of cloud/smoke at the bottom of those lines. To do this, we simply create a new layer and use the Lasso Tool with 40px feather to select the bottom portion of those shining lines, and go to Filter > Render > Cloud and render some cloud: (set foreground colour as white, background layer as black)

You may notice I also use the Len Flare with following settings to highlight the centre portion of the cloud:

Change the layer blending option to “overlay” and you will have the following effect:

Lastly we place the site name and the navigation on the image:

Ok that’s it for this tutorial! Of course you can further enhance it by adding some other filter effects, change the colour scheme, etc.

Here are my final image for this tutorial: (click to enlarge)

Alternative versions:

Hope you enjoy this tutorial, drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Skills involved in this tutorials are selection tools, layer blending options, and some simple gradiant filling techniques.  Have a go!

Here is a preview of the final result of this tutorial:

OK let’s get started!

Step 1

Firstly let’s create some background to work with.

Create a new document sized 1000*600px, use the Gradient Tool (with Foreground colour #333333 and Black ground colour #000000) to fill the background layer.

Step 2

Create a new layer and grab a big round brush (I used a 700px brush) with white color, set its opacity and flow to 50%, do several left-clicks (see image below for details):

Step 3

Create a new layer named “Navi Bar”. Use the Rectangular Marquee Tool to make a selection and fill the selection with Black Colour.

Apply Drop Shadow layer blending option to this layer:

Here is the effect so far:

Step 4

Hold down the Ctrl key and left click on the “Navi Bar” layer to load the selection.

After the selection is loaded, hold down the Alt key and use the Rectangular Marquee tool to make another selection over the existing selection. This will subtract our existing selection.

Step 5

Maintain the selection from the previous step, create a new layer called “glossy” and fill it with White colour. Set the layer opacity and fill opacity to around 30%.

Type some page texts onto the “glossy” layer:

Step 6

Now we can add some mouseover effect! To do this, create a new layer in between the text layer and the “glossy” layer and name it “mouseover”.

Then use the Rectangular Marquee tool to make a selection outside a page text, fill it with White colour and set the layer opacity and fill opacity to around 30% (in layer blending options).

Apply a colour overlay of your choice. I used the following settings:

That’s it for this tutorial! You can add some final touches using preset brushes and apply some texture effects in the background.

Here is my final result of this tutorial:

Hope you enjoy this tutorial and find is useful when you design your own website! If you would like to find how to translater the design into working web pages, study some XHMTL and CSS~ There are plenty of tutorials available on the net about this topic.

If you have any question, just drop me a line below. Thanks and have a nice day :)

The tutorial is broken down into two parts: This first part focuses on showing the detailed process of making the mockup theme in Photoshop, whereas the secend part (yet to be published) talks about coding the mockup version into working web pages.

Although the design itself doesn’t look very appeal to me, the concepts are still worth looking and you can a lot of foundamental knowledges. (I’m learning them, too)

Below is the finished work of this tutorial:

click here to view this tutorial on designreviver.com

From my personal experience, I feel Wordpress is the best Free CMS that is out there and I guess a lot of you guys are perhaps already using it. Therefore I guess there is a demand of knowning how to create a personalised wordpress theme.

As with future plan of psdvault.com, I will frequently gather tutorials based on designing Wordpress theme in photoshop and put them on here. Hopefully you guys can find tips and inspirations from them.

On the other hand, in order to translate the .psd file into working web page, you will need to have some CSS/HTML skills. Alternatively, you can use services such as psd2html.com and w3-markup.com and let those professional guys do them for you.

Below is the finished work of this tutorial:

Click here to view this tutorial on hv-designs.

Although I didn’t use it myself in the end, I think it is useful to those who just started thinking about creating their first site.

The tutorial itself is really simple to follow and the result looks great. Have a try yourself!

Below is the finished product:

Click here to view this tutorial on Photoshop Star.