Make icon guide

Discussion in 'iOS Themes and Customization' started by Bennoo, Nov 18, 2007.

  1. Bennoo

    Bennoo New Member

    Joined:
    Oct 3, 2007
    Messages:
    177
    Likes Received:
    0
    Eey Guys! I was searching for an easy guide to make ipod touch/iphone icons. Somebody have it?

    Thanks
  2. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    1) Open your image editor of choice. I prefer PhotoShop. Any will work though, so long as they can save png files with transparent backgrounds.
    2) Create a new image sized 60 x 60
    3) Put anything you want into that image.
    4) Save.
  3. Bennoo

    Bennoo New Member

    Joined:
    Oct 3, 2007
    Messages:
    177
    Likes Received:
    0
    No i don't mean that. I mean with shapes and glares etc......like the standard icons
  4. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    That would involve a different guide per each image editor. In PhotoShop:
    1) Create a new layer over what you want to be the icon with a fill opacity of 0%
    2) Set a gradient to that layer and turn its opacity way down/
    3) Use the Elipse tool to create an elipse toward the top, then "Select Inverse"
    4) Delete the "anti-ellipse' you've just created, merge down, and you're done.


    That is the basics. You'll probably want to toy around with all the settings until you find something you think looks good.
  5. Bennoo

    Bennoo New Member

    Joined:
    Oct 3, 2007
    Messages:
    177
    Likes Received:
    0
    Thanks! This helps me a lot more!
  6. zzchatom

    zzchatom Member

    Joined:
    Oct 27, 2007
    Messages:
    48
    Likes Received:
    0
    Device:
    iPod touch
    oh just for some extra info, if you find photoshop hard to use you can also use corel draw just a thought~or if thats too hard you can go to photo impact and if you'v never touched on any of that... go to ms paint^^"....spray a bit of white on it for a poor quality highlight
  7. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Oh, and one more note: with that elipse, size it so that it is large and make sure that most of it is outside the image. What you want is just the arc of one side of the ellipse.
  8. Mindfield

    Mindfield New Member

    Joined:
    Nov 5, 2007
    Messages:
    1,312
    Likes Received:
    7
    Just wanted to point out: Icons can be as large as 80x80, but of course it'll look crowded if you actually make them that large. Still, you have that kind of room if you need it; just make sure all of your icons are the same dimensions.
  9. Bennoo

    Bennoo New Member

    Joined:
    Oct 3, 2007
    Messages:
    177
    Likes Received:
    0
    okay, is there a tutorial of that?
  10. Mindfield

    Mindfield New Member

    Joined:
    Nov 5, 2007
    Messages:
    1,312
    Likes Received:
    7
    There's not a whole lot to it, really, but I'll try and explain using Photoshop functions (since that's what I use):

    1. Create a new image at 80x80
    2. Create a new layer and name it "base" or whatever you prefer.
    3. Hide the background layer.
    4. Create your icon however you please, but try and keep it within a 60x60 area. You can go over if you want, just keep in mind that if you make them all a full 80x80 they're going to be bumping up against each other in Springboard. Making them a full 80x80 does give you a bit of leeway if you want to create fancy parially seethrough backgrounds behind the icons (like, say, fence links or perforated metal or something) or to have portions of the icon extend some way beyond the 60x60 guideline.
    5. When you're done, save the PSD in case you need to edit it layer. Then under the file menu choose "Save for Web & Devices" (CS3) or "Save for Web" (earlier verisons).
    6. Under "Presets" choose "PNG24" and keep "Transparency" checked.
    7. Save.

    You're done.

    The rest of the theme objects are pretty simple: StatusBar.png (320x20, transparency if you prefer), Dock.png (320x91 but only about the top half gets displayed, transparency available) and Wallpaper.png (320x480, NO transparency).

Share This Page