[LC][GIMP] Creating a simple, default iPhone icon

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 GIMP.

    Please read this before continuing, it links in and will be needed to complete the tut.

    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.

    If you don't have GIMP, you can get it here;

    Windows: http://www.gimp.org/downloads/
    Mac: http://gimp.lisanet.de/Website/Download.html


    Glyph Pack(s) (you will use these if you want to have some icons as glyphs.

    Try Tollboys pack, hunt down other FREE to use ones or create your own icons if you know how.


    Gradients.

    GIMP has a range of rubbish default ones, you can make your own or download some, i have these.


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

    Step 1, Open GIMP. Easy.

    We will make 2 canvases, the first; lets say 320x242 (same as image shown above) and the second canvas, will be 60x60. (If you goto "advance options" when making a new canvas, you can set the colour of it to transparent, what i like to do)

    Feel free to name this both as whatever you want, maybe; canvas 1= Final & canvas 2=base. Its up to you.

    ----------------------​


    Step 2, Now we will just put a colour on canvas 1, Goto the fill tool which is on the left side of the screen (the little paint bucket.) then click on canvas 1 to fill it. (you could put a gradient on it, like i did, but its not a must.)

    So now you should have the large canvas filled with colour and the other transparent.

    ----------------------​


    Step 3, Now we will start to make the icon. Goto the smaller canvas. When on that, click on "Select" then click on "Rounded Rectangle" and change the number to 40.

    Now you should have this:

    Please Register or Log in to view images


    Go it? then lets continue.

    ----------------------​


    Step 4, Its gradient time. Select the gradient tool (on the left side, little box next to fill tool) Make sure you are still on the smaller canvas.

    Chose your gradient. (if you downloaded a pack, make sure you installed them) Then simply drag the cursor down or up over the canvas:

    Please Register or Log in to view images


    Now it should be filled with the gradient you chose. If you don't like the colour, then choose another, then just go back over it with the cursor.

    We will now move this "base" over too the larger canvas 1. Goto "Edit" on the top bar and click copy, then click on the larger canvas and back to "Edit" then "Paste as>New Layer" this will then allow you to move it around the canvas with the move tool.

    Done? Happy with the colour? Lovely, continue.

    ----------------------​


    Step 5, Drop shadow.

    There are two ways of doing drop shadow, i'm going to keep it simple.

    Go back to the smaller canvas, hide the layer with the gradient on that we just created in step two. Then click "New Layer" (at the bottom of the layers window.)

    Now fill it with black.

    Simple. Now we move it to the larger canvas. Again, goto "Edit" then "copy" back to the larger canvas and "Edit" "Paste As> New Layer"

    You will now have a gradient layer and a black layer.

    Move this black layer below the gradient layer by switching it in the layers window and using the move tool to move it under the gradient layer.

    You will need to move the black layer down 1 pixel for drop shadow, you can also mess around with the opacity of it in the layers window.

    the result (hopefully):

    Please Register or Log in to view images


    ----------------------​


    Step 6, Adding the glyphs.

    If you downloaded a glyph pack, then open the glyph you want. It will pop up in a new canvas, so yo will have to goto "Edit" then "copy" back to the larger canvas and "Edit" "Paste As> New Layer"

    Now you can move that glyph to the base. You could add a drop shadow if you wish.

    There you have a simple iphone icon base.

    Save your large canvas as a XCF which is the GIMP editable file. (you will be able to edit it later if you wish)
  2. Manic Nimrod

    Manic Nimrod Well-Known Member

    Joined:
    Nov 26, 2007
    Messages:
    8,769
    Likes Received:
    149
    Adding to the wallpaper as seen in the preview.

    Step 1, Noise.

    Open up your XCF which you saved earlier.

    Goto the background layer and if you wish, you can hide the other layers to make it easier to see.

    Add some noise to the layer, Goto "Filter" then "Noise" then "spread" then change both the number's to 1. Click OK.

    This should now create a nice look on the wallpaper.

    ----------------------​


    Step 2, Adding the stripes.

    Make a new layer. Goto the "Rectangle Select Tool" the first tool in the window.

    Draw out a rectangle shape on the canvas

    Please Register or Log in to view images



    Right Click>Edit> Fill. Fill it with white. Click the Move tool and move it to where you want it.

    Now you can change the opacity of it, I had it set on 5%, but you can change it to whatever you like/looks good.

    Duplicate it, spread them across the canvas.

    Done.

    ----------------------​


    Hopefully this tutorial has been explained enough for everyone to understand, if you see anything wrong then please tell me and i'll fix it up ASAP.

    To be used for learning purposes. Maybe post what you have made in here?

    Written by Manic Nimrod.

    Part of the Lets Create tutorials.
  3. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Fun.
    Wait, youve used Gimp to produce all of your themes?

    ... This cant be true...
  4. Manic Nimrod

    Manic Nimrod Well-Known Member

    Joined:
    Nov 26, 2007
    Messages:
    8,769
    Likes Received:
    149
    Nope. Photoshop.

    First time using GIMP.

    I'm making the photoshop version of this now.
  5. Dónde?

    Dónde? New Member

    Joined:
    Jan 15, 2010
    Messages:
    163
    Likes Received:
    0
    Device:
    iPhone 3G (Black)
    The orange is a bit flat and there is no shine (I know it gets added, but still, just for demonstration purposes)
  6. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    ^^ Never criticize Manic Nimrod!
    You think he doesnt know how to do this?
  7. JackT09

    JackT09 Member

    Joined:
    Mar 22, 2009
    Messages:
    561
    Likes Received:
    0
    Device:
    4G iPod touch

    Attached Files:

    • iPod.png
      iPod.png
      File size:
      49.9 KB
      Views:
      249
  8. Chicken

    Chicken Retired Moderator

    Joined:
    Feb 17, 2008
    Messages:
    2,494
    Likes Received:
    7
    Device:
    iPhone 5S
    Wow, nice icon dude. I see it all over the internet, must be really popular. Congrats.

    Please Register or Log in to view images



    Please Register or Log in to view images

  9. randomdude1234

    randomdude1234 Member

    Joined:
    Jul 17, 2009
    Messages:
    939
    Likes Received:
    2
    its nearly impossible to make a full, clean theme with gimp, as it doesnt even have a simple shapes tool. and PS is expensive. so im still stuck.
  10. PriteSprite

    PriteSprite Member

    Joined:
    Feb 15, 2009
    Messages:
    704
    Likes Received:
    12
    Device:
    4G iPod touch
    oh so you spent 999 dollars on it?

Share This Page