If you have an iPhone, you will probably have came across webclip icons.  Webclip icons are the icons that apear on your iphone homescreen when you bookmark a web site. It is very easy to create a webclip for your own web site. Let’s see how:

1. Create a 57×57 png icon with your logo or whatever you want.
2. Save the image as “apple-touch-icon.png”.
3. Upload the image to the root folder of your web site (not the root of your server, the root of your site).
4. Do not mind about designing a glossy icon because MobileSafari (the browser of iPhone) will create the glossy effect by itself.

You can see the webclip I created for Typpz blog on the screenshot. As I mentioned glossy effect and round edges are created by Safari, I just uploaded this image.

Here is a video edition of our Web 2.0 logo creation tutorial that you loved. Video is streamed via youtube as it is 8 mins long and would be hard for our bandwitch to have it stored in our host. The quality is not the best, but it will help you alongside with the original detailed post. Remeber to use XHTML validated code when embedding youtube videos in your site

Here is a second tutorial (here is the first one) for creating a Web 2.0 logo like the one above using Adobe Photoshop. Create a new Photoshop file (File>New). I made it in a 4500×4000px file with RGB color and 300dpi resolution, but you can do it in a smaller one.

1. Create the talk bubble shape using the custom shape tool (if you cannot see the shape in the dropdown menu from shape tool, click the arrow and choose talk bubble shapes). Double click your shape layer and apply Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay and Stroke effects as shown in the screenshots below.

   

   

   

   

   

   

2. After applying the effects, right click on the shape layer and select duplicate layer. Click on the duplicated layer and click edit>transform>flip vertical. Place the flipped shape exaclty below the original one. This shape will be used as the reflection. Double click on the duplicated layer and disable drop shadow and bevel, emboss effect and stroke. Leave Inner Shadow effect as it is and choose the Gradient Overlay effect tab and apply the following settings in the gradient. Set the duplicated shape layer opacity to 30%.

   

   

3. Choose Type tool and type anything you like in the original shape. Double click the type layer and apply Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay and Stroke as shown in the screenshots below.

   

   

   

   

   

4. If you want to create an “i” like the one in my logo choose the custom shape tool, choose symbols from the shape meny selections and place the “i” on your logo. Then apply the same effects as in step 3.
5. Create a new layer above all the others and select the eliptical marquee tool. Create an eclipse that covers half the original shape logo and half the duplicated one. Fill the eclipse with white color using the paint bucket tool and drop down the layer opacity to 20%.

   

Color codes are printed on the screenshots. Your logo is now ready

It is much easier to create a skype-looking logo than you imagine. Create a new file in Photoshop (File>New) and type anything you want using the type tool. Apply Bevel and Emboss, Color overlay and Stroke as you see them in the screenshots below and your logo is ready. Note that stroke size depends on image size, so put any px you need to have a result like mine (or something similar). Color codes are written in the screenshots.

Few days before, I wrote a tutorial on how you can build a web 2.0 logo with Adobe Photoshop. Here is another one for adding the reflection effect in a logo (like mine above) using Illustrator, which makes the reflection more flexible and easy to scale and manage. Open your logo in Adobe Illustrator and follow these steps:

1. Duplicate your image by pressing alt (command for Mac) and clicking it. Drag it down (pressing the “shift” key while dragging helps for keeping your image aligned) so it looks like the one below.

   

2. Select the original object and click object>lock>selection to lock it.
3. Select the duplicated object and click object>transfrom>reflect. Choose horizontal with 0 angle. Move the duplicated logo exaclty below the original one.
4. Select the rectangle tool and draw a rectagle that covers the reflected image like in the screenshot below (color does not matter).

   

5. Fill the rectagle with a white-to-black gradient, set angle to -90 and point color points like in the screenshot.

   

6. Select the gradient rectangle and the reflected image by pressing control+A (command+A for Mac) as the original object is locked and apply a transparency mask by clicking on the arrow in the upper right of the Transparency tab.

   

   

7. Drop down the transparency opacity to 40-50% to make the effect more realistic and your reflection is ready!

   

Note that making the reflection with Adobe Illustrator has nothing to do with the background color (like in Photoshop). Follow the same steps for applying it on dark backgrounds.

Here is an extensive tutorial on how you can create a great looking web 2.0 logo (like the one above that I created for the tutorial). Open Adobe Photoshop and create a new file (file>new): 4500×4000 pixels at 300dpi is a nice resolution to choose if you want your logo to be printable. It will be nice to choose this resolution also for this tutorial to have the same output with stroke points and other blending options that are affected by image size.

1. Choose the type tool and type anything you want in uppercase (I typed Typpz as you see :)). Duplicate the layer (right click on the type layer you created>duplicate layer).
2. Choose the new Type Copy layer (in my case Typpz Copy as I typed Typpz) and right click>blending options.
3. Apply Drop Shadow, Inner Glow, Bevel and Emboss (with Contour), Gradient Overlay and Stroke with the setting you see in the screenshots below.

1. Select the eliptical Marquee Tool and draw an eclipse like the one below. Create a new layer and fill the eclipse with white color (#ffffff) using the paint bucket tool. Set the opacity for the white filled eclipse layer to 30%.
   
2. Choose the Type layer (not the copy one that you were working on in steps 2-3) and click edit>tranform>flip vertical.
3. Using the move tool or your keybord bring the fliped layer exactly below the type copy layer, so letter ends are touching each other like in my logo and then right click on type layer>blending options and apply the setting for gradient overlay and stroke as you see them in the screenshots below. Set the layer opacity to 40%.

1. Now lets create the beta drop. Choose the type tool and select the Windings font. Type shift+s and then right click on this layer (its name should be “S”)>blending options and apply drop shadow, gradient overlay and stroke as you see them below.

1. Choose type tool and type beta (or anything you want) and place the layer inside the drop as in my logo. Change the text color to white (#ffffff).
2. Select the Type layer (the typpz layer for my tutorial-not the copy one!) and select layer>arrange>bring to front.

Your logo is now ready. Here you can download the .psd source file (lower resolution than the one I used for the tutorial because the default file was huge) to see the result and help you build something similar. The colors I used for the logo are printed on the screenshots. Here is the second part of Web 2.0 logo creation tutorials.

UPDATE: Video guide for this tutorial is available.