This is my first tutorial, I designed this logo for one of my friend for the site : desifilmz.com, to see the logo in action click on the link.

The tutorial that follows will teach you following aspects :

• Typography (Small Extent)
• Using Gradient (Layer Style)
• Using CC licensed icons

Step 1

Now, to start with, this logo is specially idealised for black background, but its not restrictive in nature, you can always find the right choice of colour combinations to match with your needs.

Open Photoshop and create a new file of the size you need for this tutorial i’ll take 420px*200px with black background.

Step 1 (Creating New File)

Step 2

Now you maybe knowing that there are basically three type of fonts sans-serif, serif and script.

Serif,Sans-Serif and Script

You can differentiate between them simply by watching closely, serif fonts have extra designs at the ends, whereas sans serif does’nt have them they are like as though they have been cut at the ends and script fornt looks like handwriting.

In this tutorial we’ll be using script font, as it suits the look and style, you can also experiment with other type though, but i personally think the logo is  more suited for script fonts.

I have used the font Loci Cola here, which imitates famous Cocacola logo style, Its free Download it here : 1001 Free Fonts

Step 3

Now use Horizontal Type Tool and write whatever name you want, i wrote desifilmz here with capital D and F and without any space. The site i used is 72pt, btw, did u know 72pt is exactly 1inch, so if incase you are going to design something for print media, you can easily understand what size of type you’ll get by using point.

Dont worry about the colours right now we’ll come to it later. Heres What i came up with.

Write any text dont worry about color

Step 4

Now let us style this thing and make it look better. Select the type layer by clicking on it in Layers Panel, then click on the fx icon below and select Gradient Overlay. We’ll use the gradient overlay option in fx to give the text a sexy red gradient.

Select Gradient Overlay

Follow the images below and do as shown in gradient panels

Gradient Overlay Settings

Step 5

Until now we have given only the gradient to the inside of the text now we’ll give the text a stroke and give it a gradient too, Gradients can be very handy at times to give plain and simple text a real sexy look. Click fx and this time select stroke, follow the image for the settings.

Stroke Settings

Giving the type a gradient and stroke itself creates a good simple looking logo, but we’ll try to edit it furthur. Until now what we have created is the picture below.

Logo After Gradient and Stroke

Step 6

Now we’ll try to add an umbrella of the same type of color combination above the logo to give it a cool feel. I used the umbrella from iconarchive.com, it is a library of icons under CC license. I often use the icons listed there, it saves me lots of time

I used the Sunshade icon from beach icons : Beach Icons

I downlaoded the png, put it in the document were working below the type layer and positioned it correctly to give a look as id the umbrella is creating a shade for the desifilmz text

Logo With Umbrella

Step 7

This step is fully optional i added the new thing because the site was new, u may or maynot add it. Creating it is easy and self explanatory after you have read this whole stuff. use rectangle tool to draw 3 ractangles, then select the boxes one by one and press CTRL-T (transform) and rotate and overlap them. What i did here for the style is just the opposite i did for the text i used the yellow in gradient overlay and red gradient in stroke, also this time the stroke size is smaller. Then use the Type Tool to type and transform them aswell and your Cool Looking Logo is done !!

Cool Web 2.0 Logo Finished

Hope you enjoyed the tutorial as much as i did in writing it !!