Create Your Icon in 5 Simple Steps with Photoshop

So, you’ve created a website! …Now what?

Using some simple steps and some software, it is time to make your website outstanding. Whether you are in charge of web hosting or just the website owner, you may want to consider all elements that go into designing a great web page. Hopefully by now, you have found a great dedicated server hosting for your website and are ready to design your page. There a literally millions of websites across the web. What makes your website different? As the creator, you will want to use these features to make your website unique and different. A tool used to identify websites from another is an icon or a browser icon. For example, Facebook’s icon appears on their tab as a blue box with a white ‘F’ in it. Another memorable icon is Google’s icon, everyone recognizes it.

Google Icon3 Create Your Icon in 5 Simple Steps with Photoshop

As pictured above, this is an example of Google’s web icons. This picture shows the progression of Google’s icon over the years.

You can create your own icon in 5 simple steps.

To proceed, you will need:
-Adobe Photoshop
-(ICO) File format plug-in for Photoshop
-If your web designing software does not have an option to upload an icon, download a software that can (Favicon, Axialis, or Icon Workshop)

Create your icon!

1 – Create Your Canvas

This window should look something like the one below.

Most important: The final size of your icon will be 16 X 16. For you to create the icon, though, it is recommended you use 50 X 50 or 64 X 64 and then later re-size down to 16 X 16. If you start out with something too big, such as, 150 X 150, your icon will not be clear enough when sized back down. When creating your blank canvas, set the height and width to something big enough for you to work with, such as, 64 X 64.

Canvas Create Your Icon in 5 Simple Steps with Photoshop

2 – Do your thing! Design the icon

Have fun!

Most important: Remember it will be sized down to a very TINY image. It is not recommended to include words, texture or patterns, or fine details. Keep it simple. Get your inspiration from famous icons such as Google or Facebook. Google and Facebook both have extremely simple icons and widely recognized.

5757984146 a9957998d6 Create Your Icon in 5 Simple Steps with Photoshop

Image source: Gajenn2011 via Flickr

3 – Size the icon… 16 X 16

Resize Create Your Icon in 5 Simple Steps with Photoshop

Again, the window should look something like this.

This is where you will be able to see your final work once it is sized down to 16 X 16. Does your icon look clear? Is it recognizable? Does it appear how you want it? If you answered ‘no’ to any of these questions, go back to step # 2 and re-create or tweak your icon until you are satisfied.

4 – Save it as an .ico & Upload it!

Once you are completely satisfied with the final appearance, prepare to save your icon. Saving it as an .ico is extremely important in this step. If you have not already, download the (ICO) file format plug-in for Photoshop. Once you have saved it as an .ico, you are ready to upload it to your website. On your web hosting website creator, there will be a location to put your icon file. Upload your new icon to the site builder to show before the URL address. If your dedicated server hosting website builder is not capable of this, upload a program that is, such as, Favicon, Axialis, or Icon Workshop.

Voila!

web icons Create Your Icon in 5 Simple Steps with Photoshop

 

5 – Check your work!

facebook web icon Create Your Icon in 5 Simple Steps with Photoshop

How does it look?

This is another opportunity to make sure you are satisfied with the appearance of your icon. Does your icon clearly illustrate your website logo? Is your icon congruent with the URL? Again, this will not only appear by the URL address but also on the tab window. This icon will represent your company and your website. If you are not completely satisfied with how your icon appears, go back and edit some changes. Once you are happy with the final result, publish it! On your web hosting site builder, there will be a ‘publish’ option.

Now that you have published your new work, ask one of your peers for suggestions. Ask someone you trust for their honest opinion. After you have spent quite some time creating this icon, you are used to looking at it. Have another set of eyes take a look before you rely on it to represent your website.

This Quick Tip tutorial was written by Ellee Parker:

Ellee Parker hails from the west coast, loves anime and the eastern culture in general. She often writes for webhostgear.com, a trusted source of hosting reviews and guide to the hosting industry.

0saves


If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Related Posts

Illustrator-Photoshop-tutorials-roundup-april-2013-THUMB

Illustrator and Photoshop Tutorials Roundup – April 2013

pixel77-free-vector-cubic-icon-0428-220

Free Vector of the Day #323: Cubic Icon

designtnt-vector-superhero-small-THUMB

8 New Premium Design Goodies from DesignTNT.com

pixel77-free-vector-ice-cream-0417-220

Free Vector of the Day #315: Ice Cream

7 Comments

  1. Asif

    08.01.2011

    Reply

    Nice Tutorial.

  2. Michal

    08.01.2011

    Reply

    Thanks, nice tutorial!

  3. Cool tutorial, thanks!

  4. Thanks for this Tutorial………..

    • marijuana card

      01.26.2012

      Reply

      So important and necessary design tutorials contains the site, which I excepted. It is really helpful for practical fild to everyone. Thanks for sharing this. Well done carry on.

  5. Anaxa

    01.24.2012

    Reply

    So important and nice tutorial is this.Really nice!!!

  6. sriganesh.M

    03.29.2012

    Reply

    do we have anything related to photoshop cs5 or cs3 plugin for converting png into icons ? plz

Leave a Reply









Read Next