Get your link here

Creating iPhone style icons in The Gimp

Posted on Monday, April 21st, 2008 | stored in Gimp

Creating neat looking iPhone style icons is not as hard as you may think, follow this tutorial and you wont go far wrong. This is the final result:

iphone3.png

  1. Create a new image with dimensions 125 x 125 pixels
  2. Create a new layer and select from the top left to the bottom right, grab one of the corners and press Ctrl as you drag it so that the selection looks a bit like this:
    screenshot-untitled-150-rgb-2-layers-125x125.png
  3. Now select the Select menu and choose Rounded rectangle. On the window that appears change the radius to 20 and click OK.
  4. Set the fore colour to 407dce and the back colour to 72d2e8 and select the gradient tool (shortcut: “L”)
  5. Click and drag from the top of the selection to the bottom and you should have something like this:
    iphone.png
  6. Now select the Filters menu, Light and Shadows and then Drop Shadow
  7. Set the offset X to 0, offset Y to 4 and blur radius to 10 and change the opacity to 40 and click OK
  8. You should now have somthing like this:
    iphone1.png
  9. Now duplicate the top layer (or the one with the rounded rectangle) and press Ctrl and A, Ctrl and X and then Ctrl and V. This will select the region for you.
  10. Select the ellipse select tool (shortcut:”E”) and click and drag across the top half of the image similar to this:
    screenshot-iphone-150-rgb-5-layers-125x125.png
  11. Fill it with white (FFFFFF) and change the opacity of the layer to 20.0
  12. You should now have this:
    iphone2.png
  13. Now all that is left to do is add the icon you want on it. I am going to use an icon from the Everaldo Crystal Set
  14. To add the icon click File followed by Open As Layers, find the icon and insert it. You may need to resize the icon, to do this select Layer and then Scale layer, a good size would be 80px x 80px
  15. And the result is:
    iphone3.png




Continues below...







5 Responses to “Creating iPhone style icons in The Gimp”

  1. bella Says:

    great- if only i could finish it :( i made it all the way to the part where i create an elipse on the top half of the square- and then it cuts off and jumps to “now all thats left to do is select icon”…. how frustrating! Part of it is seeminly covered by the layout of this site… you might want to fix that






  2. Simon Says:

    huh, thats interesting, what browser are you using and the text should read:

    # Fill it with white (FFFFFF) and change the opacity of the layer to 20.0
    # Now all that is left to do is add the icon you want on it. I am going to use an icon from the Everaldo Crystal Set
    # To add the icon click File followed by Open As Layers, find the icon and insert it. You may need to resize the icon, to do this select Layer and then Scale layer, a good size would be 80px x 80px
    # And the result is:

    Hope this helps






  3. YPG Says:

    Thanks for the tutorial.
    But I think the title is a bit misleading (Creating iPhone Style Icons).
    I thought I would get to see how to create the actual icon (the conversation bubble and the little yellow guy).
    Thanks anyway.






  4. Otto Says:

    Very nice. Will try later. Thank you.






  5. Tyler Says:

    There is one thing missing in this tutorial. If you look closely, you will see a faint color change (extremely subtle) over the shadow of the rounded rectangle. While on the oval layer, select the same area with the same technique when making the rounded rectangle. Then, click Select->Invert or Ctrl+I. Next, click Edit->Clear or simply press Del on your keyboard. Finally, you have it completed.








Leave a Reply