—————————————————————————————————–

Today i will guide and help you to create a cool old grudged business card in photoshop which is fully print ready with full bleed. The size of the business card we’ll be creating is standard US size of 3.5 X 2 inch. I’ll show you some techniques for working swiftly for any design you do in future and i promise you’ll learn something new in the tutorial.

The Assets

Before we start i want you to download the following files unless you already have them in your computer. This will be needed in the design process.

• Business Card (Bleed Ready) Template
• Rough Natural Paper Texture
• Calibri Font (If you use Windows Vista or Above its already there)
• Black Oak Std Font

Final Business Card Preview

The Basics

Download the Business Card (Bleed Ready) Template. I have created this for your ease, you can use this in any future design you’ll be doing. Let me go through the template first.

• Size 3.75×2.25 – The extra 0.25 inch are used for the bleed. While printing the full bleed process will trim away the extra bits. I have marked the bleed lines and cut lines and safety margin using guides, so please enable guides from View>Show>Guides.
• The Template is print ready with 300dpi resolution and CMYK colour.

Creating The Layout

1) I’d recommend you switch off the guides for now so that we can check out the uncluttered design. We’ll be creating the bare background first. Create a new layer and add gradient as shown below.

2) Next we need to add slight noise using filters. Go to Filter>Noise>Add Noise, Amount: 2.45%, Distribution: Gaussian, Select Monochromatic.

3) Assuming that you know the basics of pen tool create 3 shapes top of each other following the image below. If you don’t know to use pen tool, just select pen tool and click on 4 corners, follow the images below. Create the shapes in 3 different layers one above other.

Adding The Text

1) Lets start with the name, using Black Oak Std font, you can also use any other font i had found this font on machine lying idle so i used it, but try to use old style fonts, type 18pt #db9628 text. You’ll notice the width of the font is very high, so what you need to do is Press CTRL+T (Transform) and lower the width. Also lower the line height to 18pt.

2) Right Click the text layer and select convert to smart object. If you are using lower versions of photoshop and don’t have this option please rasterize the layer by right clicking and selecting rastarize layer. We need to do this to give the text the flow of the shapes. After converting press CTRL+T again.

3) Now this part is somewhat difficult and may require retries. Press ALT key in the keyboard and drag the corners of the transform box to the edge of the shape. You might want to try lowering the height of the text before doing this. Now press both Shift+ALT and and select one corner and drag it towards inside to lower the text size.

4) Then drag the text little down and readjust the corners pressing ALT until you come up with something shown below.

5) Follow the same steps for the other texts too. Several retries will give you the wanted result. For the other texts i have use Calibri font. For the brown text the colour i have uses is #4b3613.

Adding The Flavour

In this part we’ll look on how we can give the card a old paper type feel. This part is not so tough, this is the chill out part.

1) I hope you have already downloaded the Rough Natural Paper Texture. Drag it over to our main business card PSD file, and use CTRL+T to lower its width and height to 58%. Make sure its on top of all layers.

2) Now Press CTRL+U (Hue Saturation) and select saturation to -100. Change the blending mode to Overlay, opacity 23%. Then select CTRL+L (Levels) And try experimenting until you get a good feeling of the paper texture.

3) Now we’ll add a burned edge effect. For that first create a new layer and place it above all layers. Fill it with black. Now select the Rectangular Marquee Tool, change feather to 20px on the top. Draw a  box as shown on image below and press delete. Deselect it and change opacity 62% and blending to linear burn. Now press CTRL+U and follow settings shown below.

The Torned Edge

1) We need to create the brush for the torned edge, select 17px Chalk brush and increase its size to 20px. Then Go to Brush setting (Windows>Brushes) and follow the images below.

2) Now Insert a new layer above all layers, make brush colour black and draw something which resembles below.

3) Change Blending to softlight and opacity to 53% and congrats your Business card is ready. Go print it.

Download The Business Card

As always for your convenience i have provided the download link for the completed PSD file below for FREE. If you don’t want to go over this steps and just want to edit the text and print your card you can do so by selecting the text layer and clicking Edit Contents.

Get Your Card Printed For Free !!

Uprinting is offering 250 free business card to 1 lucky winner, to enter the contest Click Here

—————————————————————————————————–

This is my 2nd attempt of creating a attractive blog layout in photoshop, My previous attempt : How to Create Greenary WordPress Layout In Photoshop had a fair amount of response and had even been converted to working Blogger theme which is being used by more than 100′ds for blogspot blogs !!

This design which have grey and blue as their main base colours, PSD file have been attached at the end of the tutorial for your convenience, but please note i haven’t been able to get much time to arrange the layers and release, so you have to cope with un-arranged layers, and as always this theme is free and can be used on any commercial or personal purposes (i prefer the proper credit be given though). If anybody want to convert it into working theme don’t forget to let me know how you did

Final Layout

Creating The Header & Menu

1) Create a New File  (Width 1020, Height 1550)

2) Use the rectangle tool to draw a rectangle in the top.

3) Open Layer Style Palate and give it a gradient as shown in image below.

4) Create another rectangle just below the upper rectangle and add the following layerstyle.

It will look like below after your done.

5) I’ve created the top right menu using Myriad Pro (condensed) 16pt.

6) The main top menu text have been done using Myriad Pro (Bold Condensed) 24pt #444444. In the logo Myriad Pro (Black Condensed) 76pt have been used and layer style shown below have been added. Slogan is 18pt Myriad Pro (Black Condensed). If you dont have Myriad Pro, i’d recommend using Impact for the logo and Arial in other areas.

Creating Featured Section & Polishing Borders

7) Now similar to what you have done with menu, create a rectangle just below menu with approximately double height of the header, and add a light grey to medium grey, linear gradient using layer styles. This box will be used for the featured post section.

8 ) Now we’ll learn how to polish the edges to make them look more edged, this is a very easy trick, all you have to remember is that we need to 1px lines side by side, 1 will be of darker colour and another lighter colour. Check the image below.

If you are unsure about the colour, just add 1 black and one white line and play with the opacity slider in layers panel.

9) The featured post Heading text have been created using Myriad Pro (Semi Condensed) 36pt, and a gradient have been added (linear #7d7e7d to #oeoeoe). The paragraph text : Arial 14pt #434343.

10) For the button select Rounded Rectangle tool and select 20pc as radius, then draw a small rectangle. Give it a grey to white gradient and 1pc white stroke. The text is Arial Bold 18pt, with a inner shadow, the setting can be checked using the PSD file.

11) The image have to have the following style.

13) Now the last thing we need for the featured section is a shadow, which is very easy thing to add, create a new layer behind the featured post layer and create a elliptical circle, then give it a guassian blur of 25-35 px, and the readjust the position and lower the opacity to 33.

The final image uptil now for what we have done.

Creating The Posts

14) Creating the main body is easy as hell, 1st divide the width of document using the guides into two sections for your convenience. Then draw a white rectangle just below the menu rectangle. On the left section where the blogposts are visible, I have used Arial 24pt Bold, dark blue colour texts. Then i have used the line tool to draw a wide line below of two colours one light blue and one dark. Then on the right i have used Arial 12pt text. Check the image below.

For the paragraphs i have used Arial 14 pt, light grey color.

15) Next you again need to draw a rounded rectangle with 5px radius just below the paragraph, and add a 1 pc inner shadow of white colour, layer style to normak and choke to 1oo, and distance to 0, and also add a light grey  gradient , and a stroke or 1 px light grey outside. Then using Arial font write comments on left and read more on right. Go to custom shape tool and select arrow shape and draw a small arrow beside read more, and change the colour to blue.

Same way do this for the 2nd post only changing the content and the positions.

Creating the Sidebar

16) Now the main thing that need to learn about the sidebar is the box style, create a rectangle with 5 px radius, and follow the styles given below.

17) For the heading i have used Myriad Pro (Semibold Condensed, and Condensed) 36pt, with a medium grey to dark gey gradient. For the search box draw a white rectangle with 1px grey border, The search butoon is self explanatory.

18) For the catagories text and popular article text refer to the image below.

19) The last thing that is left is the divider, which i have mentioned earlier, is a dark and light line, side by side, check the image below for explanation.

Creating The Footer

20) Now as before create another rectangle below the middle rectangle, and add a linear gradient, #2a2a2a to  #373737. The big texts are created using 30pt Arial Bold white color, and Arial Bold 12pt color #747474. Now as always use the dark line and white line as the divider.  And the last thing you need to do is add a shadow, by the process mentioned above using a an ellipse and then blurring it and changing opacity. And yes you theme is finished.

Epilogue

I’m very much interested to know if you like the theme and am also interested in seeing your own personalised versions which you come up with. If its good i will even add it in this tutorial with your name beside it Hope you enjoyed the tutorial as much as i did writing it. Below is the download link for the PSD file.

Round Up

The following images shows the texts after applying the layer styles.

Web 2.0 Pink Text Style

Web 2.0 Green Text Style

Web 2.0 Blue Text Style

Metal Text Style

Green Lush Text Style

Gooby Text Style

Firefly Glow Text Style

Earthly Being Text Style

Cloudy Text Style

Blood Shine Text Style

Twitter Text Style

Web 2.0 Red Text Style

The Tutorial

To begin with you must 1st give the background an appropriate color or gradient, it is very necessary for the looks, i have used both radial as well as linear gradients for this purpose. You can experiment with different colors and also with the styles.

To learn the process how it was created just double click the “fx” icon next to the text you have used the style, layers style palate will open.

From there just click on the names which are ticked and check the settings, by the end of all the 12 layer styles i’m pretty sure you can make your own styles.

Please Note : The styles are more appropriate for large texts, mainly for logos or headers, but you can also use them on medium, or small texts provided you change the size of borders, shadows, gradients etc appropriately in the layer styles palate.

I haven’t wasted time and space just to write one by one, which you can see for yourself in layer style pallate.

I hope this styles will help you in your both learning and designing process.

Download

Download the layer styles above and Happy Designing !!

Find Most Suitable Image

You need to have a suitable image to start with or you can find some on flickr, sxc.hu etc. I’ll use the following 2 images, both pictures have proper skin tones, background and faces to start with.

© Tonbut. All Rights Reserved.

© Hungsberg. All Rights Reserved

Please note example no1,2 and 3 in man-babies showcase uses a very different approach its based on photography, 2 different shots were taken with proper pose and merged on photoshop, i don’t have such photographs so can’t take that approach, but you can always try capturing on ur cam and editing them.

Basics

First step is rather easy using the rectangular, circular or any other marquee tool copy paste [CTRL+J] the faces and align them correctly (lawer opacity to see through it), if transformation like size, angle etc is needed do it using transform [CTRL+T].

In the 2nd image i have swapped the face horizontally using transform to make it flow with the original image. I have also made the size small and aligned it directly above the faces using opacity see through.

Clean Up

Cleanup is the most important of all, i have used layer mask and brushes to clean it up, 1st u need to select the head layer which you want to clean, and then click the “Add Layer Mask” Button in the layers panel,  this will create a new mask in the currently selected layer, Press “D” to make your foreground colour black, now select a soft round brush and paint it over the extra pixels, it will be hidden by the mask, if you think u have mistaken just press “X” to swap foreground colour with white and brush and it will appear, try to precisely make the edges sharp and erase the extra pixels.

You can also use lasso, pentool etc to create a selection and fill it with black to remove extra pixels, its totally upto you and what you are most comfortable with, i needed speed so i used brush, make sure you change the diameter of brush when required. This step cannot be done in one step it needs practise and patience and number of trials.

Tips & Tricks

After you erase the extra parts i’m preety sure you’ll not get the desired effect, either your hair will look blurry or shadow will look awry, or maybe you also need to delete some parts of original to accomodate the new. In image 1 the hair was real difficult to sharpen what i did was real simple used some parts of the hair of the original image. Check the image below.

But in the 2nd image i had to erase some parts to accomodate new face, for that i used clone tool to duplicate the shrubs.

You may face many other problems like awry shadows which can also be solved by clone tool, sometimes to mix up both images smudge tool can be used, the main point is you need to know basics of photoshop and the basic idea before doing the edit.

Finally

After some real modifications i finally came up with both finished versions, though it may not be as good, i did it in hurry, if you give it time it will look more beautiful. And also don’t forget to capture custom photos and merge them to create real cool effects.

Source Files

The source files can be dowloaded here : MANBABY.RAR

Whether domain name registration or online marketing service providers, all are likely to accept credit card transactions nowadays.

1) Create a New File in photoshop approximate 500*150px in size. Use rounded rectangle tool (10px radius) to draw a rectangle taking up the most of the space, as the image below.

2) Now we have to add some layer styles, click the fx button in layers panel and select gradient overlay.

Follow the image for the gradient settings.

Next we need to give it a stroke and shadow follow image below.

3) Next we need to add some text over it. USe the text tool to create text and align in the center, give it a gradient and stroke as shown below.

4) Its almost done except for giving it the prespective, create a new group and add all layers except the background layer in it and convert it into a smart object, if you are in older version and doesnt have the option just rasterize all layers except the background layer.

Now Transform the layer (CTRL+T) and pressing ALT and clicking on the nodes transform it to give it any shape yu like and which looks good.

5) This part is about saving the image, first hide the background layer clicking on the eye icon and then go to File > Save For Web And Devices, select PNG24 and makesure transparency is selected. Your Signature is ready !!

Thanks Hope you enjoyed the tutorial !!

This tutorial is highly recommended for the beginners and learning the basics of photoshop, advanced users may have already understood the process by just seeing it. I’ll keep the tutorial short and give you full control over the creation. The following picture is what we’ll try to create.

Click For Large Size

Planning

First thing is planning. Before you jump into working on a layout it is highly advisable to plan out the basics such as locations of different elements in the template. As you can see in the template, I’ve positioned the sidebar on left and the content on right. The header has 3 elements the top header the middle header and the lower header containing the static pages. (figure 1)

Header

Create a New Photoshop File of 1000*990px, please note i have taken 1000 instead of 1024 which is the actual screen resolution because in actual world their will be the scroll bar on the right which will take up approximately 24 px
We’ll first work on header. Create 3 rectangles as shown in figure 2 using Rectangle Tool For your benefit I have provided a download link for the layer styles I have created and used in the template. Load the layer styles and apply Rectangle 1 style to rectangle 1, rectangle 2 style to rectangle 2 and rectangle 3 style to rectangle 3. Simple. (Figure 3)

Figure 2

Figure 3

We’ll now try to add a logo search bar and social networking icons. I have created a style and named it logo type your text in any font (I used Futura Md BT) and apply logo layer style. Now draw a rectangle on the upper right edge on rectangle 1 and apply the style named Search. For the social icons I have used the free icons from fasticon which can be found here : Icon Archive. I have resized them using transform tool and added them side by side. The search icon inside the search box is from famfamfam silk icons. Now using Myriad font I wrote a “Search Site” inside the box in light grey colour. And also the menu items on rectangle 3 are written using Myriad and spaced accordingly. The colour used is light green (eff5b9) Figure 4

Figure 4

Body

Now we’ll move on to the sidebar. Draw a rectangle using rounded rectangle tool on left and taking radius 10px. And apply the style named “body”. Similarly draw a rectangle on right and apply the same style. Figure 5

Figure 5

Now we’ll tweak the sidebar, draw 2 squares 125*125 px for adv add then in top of sidebar. Give them light grey 1px stroke (e7ecb8). Also write the texts for heading I have used (436c00) For subcatagories I have used (565656). And for highlight I have drawn a rectangle and put it below the text, colour (eff5b9). Sidebar is ready, you can further tweak it as per your needs. Figure 6

Figure 6

Now the post things is not tough but tricky, 1^st i draw a white rectangle with light green border. Then I wrote the headings with 32pt Myriad font. I drew anather box of light green for the details and wrote the details with deepgreen. Then using light grey colour I typed the summary text. Then using rounded rectangle tool I have drawn a rectangle and put it on back of the white rectangle for the readmore and comment thing, and added the text. Its hard to explain here better download the PSD and check it. Figure 7

Figure 7

Footer

Last thing is very easy, you have to draw a rounded rectangle for footer give it a dark green colour and add texts. Your template is ready !!

Download

Please download the GREENARY.RAR file for the layer styles and complete PSD needed for the template. Hope you enjoyed the basic tutorial. Thanks !!

The sparkling vps hosting is going to overlook the traditional dedicated server web hosting.

We’ll make the effect covering following process,

• Layer Gradient
• Filters
• Layer Overlays

Step 1

As always step one is to create a new file, I have taken the size 480px*120px, and gave it a black background(Press D, then ALT+BACKSPACE).

Type Any text (i’ve used the font Futura MD). Give it a gradient using layer style by pressing the fx button on layers panel. Follow the image.

Layer Gradient

Duplicate the text layer (CTRL+J). Select the original text layer, i.e the middle one and create a new blank layer (CTRL+SHIFT+N). Give it a black background (Press D, then ALT+BACKSPACE). Merge the duplicate text layer with the new black layer by selecting the duplicate text layer and then pressing CTRL+E.

Before Merging

After Merging

Step 2

Select the merged layer and go to Filter>Distort>Glass. Follow image

Glass Filter

Select the Background layer and create a blank transparent later, merge it with the original text layer.

Before Merging

After Merging

Drag the Layer 2(transparent text) on top of Layer 1

After Dragging

Step 3

Apply Gaussian blur of 3.5 px (Depends on your image size) to the topmost layer (Layer 2). Make the layer mode to Screen.

After Guassion Blur

Next, duplicate the Layer 2(the top layer) and apply motion blur of 38 px and set the layer mode to Color Burn

Final Image

And your effect is ready, to further modify and add the reflection duplicate layer 2, Flip it vertically, change the opacity to something low and using a eraser erase the lower pars or you can use layer mask and add a gradient.

Final Effect

Hope You enjoyed the tutorial, if you did please do give some comments and help me to get feedback, Thanks!!

This tutorial will teach you to create glossy heart using 3 aspects

• Layer Styles
• Layer Overlay
• Layer Gradient

Setting Up The Background

Same old first step should i need to say ? anyways create a new file of any size (File >New) i’ll stick to the size 380px*260px.

Change the foreground color to #c1c0c0 and background colour to #e7e8e7

Foreground And Background

Select Gradient Tool (G) and on the menu bar select the gradient to Foreground to Background, then using the gradiesnt tool drag from center towards outwards

Gradient Drag

This will create a subtle greyish background, its for proper showcasing, its totally optional

The Making Of The Heart

Now we’ll move on the most important thing the heart. Its pretty simple though you just need to select the Custom Shape Tool and select a heart shape from all the shapes (incase you cannot see the heart shape select the small arrow on shape menu and select all, this will load up all the shapes)

Custom Shape

Now drag and draw a custom shape (press shift while drawing it will preserve the aspect ratio)

Heart Drawn

Now we need to add some layer styles, make sure you have the heart layer selected and then press the fx button lower edge of layers panel and select gradient overlay

Fx Button

Follow the next image and set all settings to as shown

Gradient Overlay Settings

Then we need to add a 1 px stroke of #cf0000, follow the next image

Stroke Settings

Then we need to give it an inner glow, follow the next image

Inner Glow Settings

Giving The Shine

Now we’ll work on giving it a shine, this step may require couple of try before you come to desired result depending on your photoshop capability. CTRL+Click on the heart layer, this will create a selection of the heart, now without deactivating the selection create a newlayer by clicking new layer on layers panel

New Layer

Then select elliptical marque tool (don’t deselect the heart selection) and then click on subtract from selection on top menu

Elliptical Marque

Subtract Form Selection

Now draw a elliptical marque starting from downwards and going all way around, when you release after drawing the selection will be subtracted, this step requires several tries to get the desired result. If you have donw it wrong press CTRL+Z and try it again

Selection Subtract

Once you are done with the selection, press D on your Keyboard and then press CTRL+BACKSPACE, this will fill the selection with white colour. Now deselect and change the opacity of the white layer to 14% and the layer style to overlay. Your web 2.0 shiny heart is ready !!

If you’d also like to add the shadow which i have added here just for showcasing, select calligraphic brush (horizontal and elliptical one) then draw a small very small line and give it a guassion blur and motion blur and change its opacity. do this again but with smaller brush size and you’ll come up with the shadow, if u think you shadow is wide just transform it and make it narrow.

Final Heart

Hope you have enjoyed the tutorial, thanks for visiting…

The 3 ways we’ll learn to create favicon are :

• Online Favicon Generator (Easiest Simpliest Free)
• Photoshop Plugin
• Other Softwares (Freewares)

Favicon Using Online Generators

Generating Favicon using online generators are the easiest free and best way if you are not very handy with graphics softwares and don’t have much graphic skill. Before you create favicon using online generator, resize your logo to any square size by cropping(though not mandatory but it helps).

The following sites offer free favicon genarator, all you have to do is upload the image and favicon is created automatically and download link provided.

• Favikon
• Antifavicon (If you are trying to create plain text favicon opt this)
• Degraeve (Draw your own favicon and create !)
• Dynamic Drive
• Genfavicon

Read the last part of the tutorial to know how to add it to your website.

Use Photoshop To Generate Favicon

Photoshop does’nt support ico format directly, so we need to install a plugin TELEGRAPHICS ICO PLUGIN, After you have installed the plugin you can read the next part.

Now create a new square file of 16*16px or 64*64 px anything you want, creating somewhat bigger size will make you feel comfortable to draw your icon. If you already have you logo ready you can also open it in photoshop crop it to make it square, you can also use transparent background for your icon.

Opened a gif file in photoshop and made it square with transparent background

Go to Image > Image Size in menubar and resize it to 16*16px

Resize Icon to 16*16px

Go to File > Save As in menubar and save it as ico

Save the file in ico format

Read the last part of the tutorial to know how to add it to your website.

Other Free Softwares To Create Favicon

There are many free softwares where you can create your favicon from scratch. Some of them are listed below

• Irfanview
• Gimp
• Icon Sushi

Creating icons in these softwares are a piece of cake just create a new square file and create your icon, resize it to 16*16px, 32*32px or 64*64px according to your needs and export as ico.

How To Favicon in Site

Rename the exported ico to favicon.ico and then uplaod to your website root then add the following lines after <HEAD>

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

And your favicon is ready, clear your browser cache and test it !! More references visit : How to Add Favicon w3c

For some inspiration visit here : 50 Remarkable Favicon

Hope you all enjoyed the tutorial. Thanks !!

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 !!