[Tutorial] Making an Icon Base

Discussion in 'iOS Themes and Customization' started by Calhoun, Jun 13, 2010.

  1. Calhoun

    Calhoun New Member

    Joined:
    Jan 2, 2010
    Messages:
    637
    Likes Received:
    0
    Device:
    3G iPod touch
    i was looking at my good friend Avenue B the other day and decided it would look nice in a clear, glassy form, but i know if i started on that i'd never finish it as a full theme

    so i'm making it into a tutorial

    note: this tutorial assumes you have at least a basic knowledge of photoshop's tools and blending modes/styles

    Yield:

    Please Register or Log in to view images



    Ingredients
    -photoshop (cs5 trial located here)
    -common sense

    Directions:
    1) first, make your canvas. i like 160x190, 16bit, 150ppi. then, fill it with a nice neutral gradient that'll allow you to get a sense of the base; i like a blue-tinted grey. if you want, you could just take this one:

    Please Register or Log in to view images



    2) next we'll make the rounded rectangle for the base. size is important here, since if you have an even number of pixels, you won't be able to center 1px things properly. 57x57 is my preferred size. what you're gonna do is right click on the rectangle tool and select the rounded rectangle tool. on the options bar, you'll see a small black arrow. click that and set everything up like this:

    Please Register or Log in to view images

    (be sure 'snap to pixels' is checked, and your radius is set to 4)

    now click anywhere in the image, and your shape will appear! right click on your shape layer and click 'rasterize image.' now you can center it, if you'd like.

    3) time for some layer styles. change the shape layer's fill to 0%, and then right click -> blending options and apply these styles: (the gradient is included in the zip file at the end of this post. it's black->white, with 0% transparency in the middle)

    Please Register or Log in to view images



    you should end up with something like so:

    Please Register or Log in to view images



    now for some gloss

    4) make a new layer, and with the rectangular marquee tool, select the top half of your base, and fill this with white. ctrl+click the thumbnail (small preview in the layers box) for your base layer, and apply this selection to your gloss layer as a mask. then, add these layer styles to the gloss,

    Please Register or Log in to view images



    and you'll end up with this:

    Please Register or Log in to view images




    5) now for some edge highlights. duplicate your base layer, clear it of layer styles (so it's just a white rounded rectangle) and drag it above your gloss. ctrl+click on its thumbnail to select it, and go to select->modify->contract by 1px. hit delete, so you end up with a 1px white rim around your icon.

    add a blank layer mask to this, and with a white->black linear gradient, drag from just above the top of the icon to just above the bottom. this fades out the rim, so it's just on the top and side edges. change the blending mode to lighter color, and the opacity to 52%, and add this outer glow:

    Please Register or Log in to view images


    note: make sure "layer mask hides effects" is checked under the standard blending options screen. it's the 4th box down in the middle section.

    now, ctrl+click the thumbnail of your base layer, to select the rounded rectangle. go to select->inverse, and with white as your foreground color, delete this selection from the rim's mask, and you'll be left with

    Please Register or Log in to view images



    nearly done! one more thing before the base is finished:

    6) make a new layer, above the rim layer. ctrl+click the thumbnail of the rim layer and, with a 45px, 0% hardness circular white brush, click in the center of the bottom of the selection, like this:

    Please Register or Log in to view images



    set this layer to overlay, 60% opacity.

    and now your base is done! throw in a simple ipod glyph, with these layer styles, and you've got a pretty decent icon.

    here's the psd, along with the gradient used in step 3.


    the fine print:
    this tutorial is rigged, so you can't actually make a theme out of this without some creativity. transparent themes, see, can't have layer styles. the point is to use the techniques you learn in a tutorial for your own work elsewhere.

    so thanks for reading. if you've got any questions, ask them here or ask me on msn.

    edit: thought it looked a little bland so i added some blue&orange previews, and a few minor fixes
  2. peebrian202869

    peebrian202869 Banned

    Joined:
    Nov 28, 2009
    Messages:
    2,061
    Likes Received:
    1
    Device:
    3G iPod touch
    Good tut! im gonna have go at this!

    oh, wait... i lack common sense :'(
  3. Vince

    Vince Active Member

    Joined:
    Dec 13, 2007
    Messages:
    6,387
    Likes Received:
    8
    Device:
    3G iPod touch
    Will be trying this tomoro, and posting appropriate changes for those of us on OSX. Awesome tut, should sharpen my PS skills a bit.
  4. JoeyB

    JoeyB Active Member

    Joined:
    Mar 13, 2009
    Messages:
    1,670
    Likes Received:
    12
    Device:
    iPhone 4 (White)
    Wow, nice to see a tutorial from you!

    Please Register or Log in to view images

    I'll probably try it out in about 2 minutes.

    Please Register or Log in to view images


    ------------------double post merged------------------
    You forgot to say to make the layer with the round rectangle's fill opacity 0%.

    Please Register or Log in to view images

  5. iMicky

    iMicky New Member

    Joined:
    Dec 15, 2008
    Messages:
    968
    Likes Received:
    0
    Device:
    3G iPod touch
    Nice tutorial, tried it out and it looked nothing like yours, because I don't understand this step:

    Do you mean the opacity or something else?

    Please Register or Log in to view images



    EDIT: Forget it, I just understood it.
  6. Calhoun

    Calhoun New Member

    Joined:
    Jan 2, 2010
    Messages:
    637
    Likes Received:
    0
    Device:
    3G iPod touch
    ^aye, fill and opacity are two different things

    opacity goes for the entire layer, so it'll fade out layer styles too. fill is just the actual shape or whatever, so you can apply layer styles over it for the transparent look
  7. iMicky

    iMicky New Member

    Joined:
    Dec 15, 2008
    Messages:
    968
    Likes Received:
    0
    Device:
    3G iPod touch
    well thanks a lot, really good tutorial

    Please Register or Log in to view images


    helped me out a lot.
  8. fLoPpYBuNnY

    fLoPpYBuNnY New Member

    Joined:
    Jun 14, 2008
    Messages:
    22
    Likes Received:
    0
    Wow, an amazing tutorial from one of the best theme makers/graphic designers, Cryot.

    Spectacular. I love it. Thank you so much. (I'm waiting for Gladhandler to be released

    Please Register or Log in to view images

    )
  9. 13iGGy

    13iGGy New Member

    Joined:
    Jun 11, 2010
    Messages:
    18
    Likes Received:
    0
    Device:
    iPod touch
    Great work. Awesome tutorial.

    Just one thing, what did you use to make that glyph and how do I add my own?
  10. Crypt

    Crypt Well-Known Member

    Joined:
    Nov 29, 2007
    Messages:
    4,033
    Likes Received:
    71
    Device:
    iPhone 4S (White)
    the glyph is really simple to make; just used the rounded rectangle tool with a 2px radius for the shape, and then with the marquee tools cut out the big circle, fill in the smaller circle, and cut out the rectangle

    also why d'you have my avatar o_o

Share This Page