[LC][PS]Creating a simple, default base.

Discussion in 'iOS Themes and Customization' started by Manic Nimrod, Feb 17, 2010.

  1. Manic Nimrod

    Manic Nimrod Well-Known Member

    Joined:
    Nov 26, 2007
    Messages:
    8,769
    Likes Received:
    149
    Lets create! Creating a simple, default iPhone icon base in Photoshop, Don't have photoshop? Then try it in GIMP


    This tutorial is for learning, please do not create tons of themes based on the things you see here.

    Please Register or Log in to view images


    What you will need

    Photoshop. You can buy it online.

    You may also want a gradient set, but i suggest you create your own. Its super easy.

    -------------- Lets Create! --------------

    Step 1, Open Photoshop.

    Just like the GIMP tut, we will make two canvases. Make one 320x240 and the other 60x60. Name them if you want. Make the second one transparent.

    ----------------------------

    Step 2, Lets create a nice background so we can clearly see the icon once its done.

    On the large canvas, fill it with colour, after that you can either leave it one colour or make it into a gradient. (if you wish to make it into a gradient, goto the layers window, right click on the new filled in layer and goto "Blending Options" the find "Gradient overlay" Now you can change the colours to what you want.

    Please Register or Log in to view images


    Once happy, Click OK and done. That will do for now.

    ----------------------------

    Step 3, Now for the icon, go back to the smaller canvas and we will make the shape for the icon.

    Go to the "shape tool" which is the small rectangle on the tool window, the a new menu will show up on the top bar, under the File menu etc.

    Please Register or Log in to view images


    Click on the rounded rectangle tool (second on in) From here you can change the radius (see image above) I had it set to 8 for this icon, but you can change it to what ever you want.

    Draw out the shape, you can hold down shift to keep it in proportion or just drag it.

    Please Register or Log in to view images


    Click on the "move tool" (second on the top row) and just drag the shape onto canvas 1.

    Now you should have:

    Please Register or Log in to view images


    ----------------------------

    Step 4, Adding effects

    Lets first add drop shadow.

    Go onto the layers window, and right click>blending options. The first in the list is drop shadow, click that.

    Try these options.

    Please Register or Log in to view images


    Now we do the same for inner shadow and outer glow

    Please Register or Log in to view images



    Please Register or Log in to view images


    You can change any of these options, these are just guide lines for you.

    Have a play around, see what you like.

    Now for the colour. on the same menu, go onto "gradient overlay"


    Please Register or Log in to view images



    I've set mine to green, but you can easily change it. Again, have a play with different colours and shades.

    To change it manually,

    Please Register or Log in to view images



    Click the selected arrows and a colour picker will come up and you can change the colour and shade.

    Once your happy click ok, ok, ok how many there are to see your final product.

    If you don't like it, you can go back and change anything.

    Here you have a simple base in photoshop.

    What you can do now is add glyphs or metaphors to the base.

    Save your file as a .PSD to be able to edit these later.
  2. gielke10

    gielke10 New Member

    Joined:
    Nov 7, 2009
    Messages:
    15
    Likes Received:
    0
    Device:
    3G iPod touch
    Looks nice

    Please Register or Log in to view images

    gonna try it

    Please Register or Log in to view images



    maybe a second part to make the app look like an acctual app ->app store, settings etc..?

Share This Page