Along the way, we will practice some basic drawing skills and adding light effect onto the elements, as well as the use of Pen Tool, layer blending mode and selection techniques.

Club flyer printing is a great way to market and spread the word about upcoming events.

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

PSD File Download

That’s it for this tutorial! Hope you enjoy it and find it useful :) Till next time, have a great day!

In this post, I will showcase 11 Fantastic Icon Design Photoshop Tutorials that I have in my bookmarks over the years -they helped me a lot and are definitely worth reading. Hopefully this collection would help some of you to understand the skills behind creating nice user interface and icon in Photoshop.

Sticker printing can be a unique promotional tool, give it a try for your next design job.

Here goes the list, enjoy!

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Create a Glossy Volt Icon in Photoshop

How To Design a Realistic Takeout Coffee

Shiny Lock Icon Design Tutorial

How to Draw a Classic Electric Guitar in Photoshop

How to Create a Highly Detailed Hi-Tech Power Button

Radar Icon in Photoshop

Create a 3D Industrial-style Download Icon in Photoshop

How to Create a Replacement iTunes 10 Icon

The Oxygen Orb – Icon Design in Photoshop

That’s it for this list! Hope you enjoy those tutorials and find them useful. Till next time, have a great day!

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

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

Ok let ‘s get started!

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

Font

Step 1

Create a document sized 200px * 20opx with white background and 72 dpi (web graphic) – please note that this is the actual size of the button we will be making.

Here I will show you a little trick: hit Ctrl + R to make the rule visible on the top and left edge, click on the ruler and drag a guide to the edges of our canvas, as shown below:

Hit Ctrl + Alt + C and bring up the Resize Canvas window, then apply the following settings:

You will have the following effect (I set the background colour to grey for demonstration purpose):

You can see by doing so, we have the perfect guides setup for a 200px * 200px button, without the need to add and remove guides afterwards:

Step 2

Now let’s perpare a simple background to work on. I perferred  a nice light grey gradient fill. So grab a the Gradient Tool and fill the background layer as shown below:

Create a new layer called “backlight” and grab a big and a small soft round brush, do two single clicks to the position as shown below: (top and centre)

Resize and position this layer as shown below:

Now we have a nice background to work on our button :)

Step 3

Now grab the Rounded Rectangular Tool from the toolbox (press the U key) and apply a 10px feather to it, draw the following according to the guides:

Name this layer as “button bg”, and apply the following blending effect to this layer:

Drop shadow

Gradient Overlay

Stroke

Here is the effect so far:

Step 4

Now let’s add some highlights and shadows to the button background. Create a new layer under the button bg layer, use the rectangular marquee tool to create a shape like this:

Name this layer as “shadow” and apply the following Gaussian Blur settings to it. Make sure you deselect the layer first:

Resize it from the top (Ctrl + T) and reduce the opacity to around 30%, you will have the following effect:

Create a new layer called “Highlight” on top of the button bg layer, set its blending mode to “Overlay”, grab a white soft brush, do a single click as shown below:

Duplicate this layer once and change the blending mode of the duplicated layer to “Normal”, resize it to a very thin level, position it just above the top edge of the button bg layer, as shown below:

You will have the following effect so far:

Step 5

Now let’s draw a simple envelope onto this button. Create a new layer on top of all previous layer, grab the Rectanglar tool and draw a rectangule as shown below:

Call this layer “envelope” and apply the following layer blending options to it:

Drop Shadow

Outer Glow

Stroke

and you will have the following effect:

Step 6

Now let’s add a few more stuff onto the envelope to make it look more realistic. Create a new layer called “envelope top” and grab the Polygon Tool from the toolbox:

Apply the following settings: (3 sides)

and draw a triangle as shown below, use the Free Transform tool to fit it onto the envelope:

apply the following layer blending option to it:

Drop shadow

Inner Shadow

Gradient overlay

Stroke

and you will have the following effect:

Duplicate this layer once and rename the new duplicated layer to “envelope bottom”, flip it vertically by Ctrl + T and right-click:

Retain all the layer blending option except the stroke option, position this layer as shown below:

Create a layer in between the top and bottom envelope layers, grab a soft round black brush and do a single click in the centre:

here is the effect so far:

Step 7

Now we’re almost done. Finally we can type some texts onto the button – “Contact Me” with font we downloaded, as shown below:

You can here I used a dark red color – the reason I did it is that I’d like to use a bit embossing/sink-in effect here. The trick is to use a slightly darker colour for the font than the background color, so that when we apply the blending effect later on, we will achieve better looking result.

So let’s add the following layer blending options to it:

Inner Shadow

Gradient overlay

Stroke

Also here is a trick – when adding stroke effect to the text, make sure to select a color slightly lighter then the background colour, for the embossing effect.

Here is the final effect I have: (click to enlarge)

That’s it for this tutorial! Hopefully you learnt something new and find it useful! Till next time, have a great day!

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!

In this tutorial, I will show you the process I took to create this rather cute, unique Style “Play” Button in Photoshop. It’s a simple (aimed for PS beginners) but fun tutorial, have a try :)

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 Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

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!

In this tutorial, I will show you how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop. Very easy tutorial, have a try!

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 Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

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!

In this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s very effective since you can use the button for a wide range of occasions.

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)

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

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!