Web 2.0 Favicon - Photoshop Tutorial

Web 2.0 Favicon - Photoshop Tutorial

Author: StormITSolutions

Web 2.0 Favicon Tutorial
What you will need:
Photoshop CS, CS2 or CS3
Web Acess



Lets start off with creating a new document - 400 x 400 pixels.

Adobe Photoshop New file 400 x 400

Use the Paint Bucket Tool with color - #333333

Adobe Photoshop Fill color #333333

Now Use the Ellipse tool to create a large circle, use any styling you want at this point, I went with a red fade.

Adobe Photoshop Add a circle with any style



Now add the Text you want to see, In this case I used a large letter T.
Remember the favicon is very small so its hard to make out words.
(unless you do a word scroller but that is for another tutorial)

Adobe Photoshop Add a letter



Now save your file as a .jpg

Open your internet browser and head to Favicon Creator.

Now select import image from the left menu.

Select Import Image



Browse to the file you created on your PC, select Keep Dimension

Click Upload and you will see your favicon, you can adjust it using the inbuilt editor.

Find your image file

If you are happy simply download it, and upload it to your web host and replace the favicon.ico

Save your new favicon



You now have a fancy new favicon.

You can check out my own one on this page.

Look at your internet browser and you will see our web 2.0 S.

Thanks

Article Source: http://www.articlealley.com/article_703544_4.html