Blog Archives

Icon Conversion Tutorial


Icon conversion is vital for icon design. Different operating systems have different formats for icons.

Today you will learn how to convert an icon.

What You’ll Be Making:



Tools:

  • Illustrator
  • Document Window
  • Save for Web & Devices

Steps:

1. Create a new document with an art board that has a resolution of 512 px by 512 px.


2. We are going to ignore the icon-making process since you can do it yourself. With your completed icon, make sure to scale the icon so it’s at least 512 px long in one or both directions.


3. Next, choose the option File>Save for Web & Devices… .


4. Choose the preset PNG-24 with Transparency checked so that you won’t have any white boxes like you would have for jpgs. This icon will be saved as a 512 px by 512 px resolution.

5. Click SAVE and choose the best location for yourself to save this png file.

6. Some icon programs like IcoFx can convert your icons for you but I’ll save you the hassle and link you to iConvert which an online converter for icons. You can add more formats in the options button but the default is good enough to begin the conversion process. So choose your icon by clicking Browse… .

7. A window will pop out for you to select your file. Locate your icon file that ends in .png.

8. Now that your file is selected. Go ahead and click Convert.

9. You should it see it convert successfully (if not, always retry). Now you will be able to download the .icns (the format Macs uses for icon) as well .ico (Windows format for icons) and Linux usually uses .png . Now you have different formats for icon for each different system.

Icons are fun to design and create. For the ability to share your icons with others, you must acknowledge other people’s operating systems. Since each system uses different icon formats, it is best to convert your icons so that others may use/distribute them.

I hope you enjoyed this tutorial and learned something new.

Advertisements

Update 2


Sorry hat I haven’t posted in a while but I will make it up.

ZIPBUDS: So you’ve probably heard that I helped with the ZipBuds ad if you’ve read the Mac Lab post a week ago. I did help in a small part (helping make 3-D version of a company’s  icon vector file). I was asked if I could manage it to make a 3-D Extruded ZipBud icon by Steven Moyer  (alum). Though it was tricky to bypass the grey boxes you get from glows/effects, I saved day by using clipping masks. Phillip also tried to do an extruded Zipbud but failed (again grey boxes from Zipbuds) but he manage to make a good psd version. Either way, Steven Moyer still had a hard time impelling 3-D objects into Aftereffects so you won’t see it in the ad.

I didn’t just helped with the icon dilemma. I also helped in the practice shootings for the commercial in the Summer and the start of Spring semester. It was really fun shooting those silly scenes at school. At lunch time, we ate mostly pizza or just go to Alberto’s.

ELAC: I was also tasked with doing a poster and logo for  English Learner Advisory Council. Since I didn’t choose the job, only assigned, I procrastinated a lot (2 weeks) till I managed to make something good.  Just making a logo for something related to english learners was tricky enough.

DEVIANTART: I made my icons available to download on DeviantArt and I was slightly surprised by the outcome. Currently, each of my four icons (Chrome, Safari, Firefox, and Waterfox) averaging 50 70 downloads each. But I also fixed my icon shelves so it’s symmetrical horizontally and vertically. Download if you wish by clicking this link to my DeviantArt page.


%d bloggers like this: