• HELP CENTER
  • TUTORIALS
  • EXTENSIONS
  • BLOGS

  • logos
  • logo requests
  • themes
  • backgrounds
  • forums
Home › Tutorials › GIMP

Creating iPhone App Style Logos - GIMP

Submitted by ingalls on Fri, 03/20/2009 - 19:01.

I’ve noticed that there isn’t a tutorial for iphone logos for ‘gimp’ so I decided to make my own. I used http://userlogos.org/node/5487 as a base to create one for gimp. Well let’s begin…

Step #1
Open up gimp and make a new image with a size of 125 pixels by 125 pixels.

Out of bandwidth

Step #2

I always find it easier to make the logo if I am zoomed in. This is optional but I suggest you zoom in to 400%.

Step #3

Next right click on the image and click add alpha channel. This will allow you to make your iphone logo transparent.

Step #4

Next hit the delete key on your keyboard. Your image should now look like this…

Step #5

Click on the ‘rectangle select tool’

Step #6

Use the rectangle selection too to make a rectangle around your entire image. It should look something like this.

Step #7

Click ONCE in the center of the image

Step #8

Now go to Select>shrink and click on shrink.

Step #9

A box should appear that asks you how many pixels you want to shrink it by. Put 15 in the box and hit enter.

Step #10

If everything went well you should now have this:

If you don’t have this go back to step #6

Step #11

Now we are going to make the rounded corners. Click select, and then click on rounded rectangle.

Step #12

When you click on rounded rectangle a small box that ‘script-fu rounded rectangle’ should appear. Set the radius to 20% and then click ‘ok’

Step #13

You should now have a rectangle with rounded corners in the center of your page.

Step #14

Double click on one of the two colors. This will bring up a color selection screen.

Pick or make the color that you want and then click ok.

Double click on eh second color. Make this so it is slightly lighter than the last color.

Once you have both colors click ‘ok’ and move to step #15

For this demonstration I used the colors ‘0027d4’ and ‘0283d4’

Step #15

Click on the gradient tool.

Step #16

Click above the Image and draw a line from the top of the Image to the bottom. Tip: You have to keep holding the mouse button in order for this to work.

It should look like what I did below.

Step #17

Now release the mouse button and your image should be filled with the two colors you chose.

Step #18

Now let’s give the image a shadow.

Go to Filters>lights and shadows and then click on drop down shadow.

Step #19

A box should appear.

Set the offset X to 0, the offset Y to 4, and the blur radius to 5.

Now change the opacity to 40%, and click ok.

Step #20

Once this is done you should have a light shadow. It will get darker later on.

Step #21

Press ‘CTRL’ and ‘L’ on your keyboard.

A small window will appear.

Right now you should have two layers. A drop shadow and the background.

Step #22

Right click on the background later and duplicate it.

Step #23

You should now have three layers.

Step #24

On your keyboard type

‘CTRL’ + ‘A’

Then ‘CTRL’ + ‘X’

Then ‘CTRL’+’V’

After this has been done it should look like this:

Step #25

Click on the ellipse tool.

Step #26

Try to center the ellipse with the center of the image.

Once you have drawn an ellipse click into the center of it.

Step #27

Click on the paint bucket.

Then change the color that is on top to white.

And change the threshold to 255.

Step #28

Now paint the inside of the ellipse white.

Step #29

Now go to the layers box and change the opacity to 20.

Step #30

On your keyboard type ‘CTRL’ + ‘M’

Then click merge.

This will make it so there will be only one layer.

Step #31

Change the view back to 100% and you should have an iphone button just waiting for a logo.

----------

‹ GIMPupDrop Shadows - GIMP ›
‹ GIMP - Adobe Style logos (in progress) Web 2.0 style fills in Fireworks CS4 ›
  • Graphics Related Tutorials
  • Printer-friendly version
  • Login or register to post comments
  • 3(3 votes)
zigzag's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by zigzag on Sat, 03/28/2009 - 15:08.

Wow great tutorial, keep up the good work!



  • Login or register to post comments
DeoTutorials's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by DeoTutorials on Sun, 03/29/2009 - 03:35.

everything worked until the whole merging part then you lost me.
The last step the merge menu doesnt appear.Also what format to save icon?

  • Login or register to post comments
Mafia_Penguin's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by Mafia_Penguin on Sun, 03/29/2009 - 03:51.

@DeoTutorials:
You can also click Layer>Merge Down.
Save the resulting image as a .Png.
@ingalls: Remember not everyone uses a PC*, some use Macs or Linux, and Macs use the Apple button (Cmd?).

*FTW




Trouble
using
transparent
Logos?
Click
here
for
help!

  • Login or register to post comments
DeoTutorials's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by DeoTutorials on Sun, 03/29/2009 - 04:05.

i use windows i h8 mac.
Can someone help me edit this image now make it be like a reflection

  • Login or register to post comments
Mafia_Penguin's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by Mafia_Penguin on Sun, 03/29/2009 - 04:43.

here:
http://userlogos.org/node/7119




Trouble
using
transparent
Logos?
Click
here
for
help!

  • Login or register to post comments
Caboose's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by Caboose (not verified) on Sat, 05/16/2009 - 22:01.

I'm guessing you had the same problem as me. If you have a layer that is a floating layer (Pasted Layer) , right-click. and go to "New From Visible". Then Delete every other layer besides the "Visible Layer".

  • Login or register to post comments
ingalls's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by ingalls on Sun, 05/17/2009 - 13:45.

I'll take a look at it whwn I get back to my home computer.
thanks
ingalls

----------

  • Login or register to post comments
Thomas Lorenz's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by Thomas Lorenz (not verified) on Wed, 05/20/2009 - 11:42.

Hello,

my problem is, that it looks like that;
the icon looks perfect, but around this icon
there is a underlaying retangle which color is
the same as the lightest color of both in the icon.

I guess, that the size of this retangle ist exactly the same, as the beginning size.

Where did i wrong?

Thomas

  • Login or register to post comments
ingalls's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by ingalls on Wed, 05/20/2009 - 21:06.

When you made the drop shadow was the color set to black?

Could you post a photo?
that would make it easier for me to help you.

----------

  • Login or register to post comments
Thomas Lorenz's picture

Re: Creating iPhone App Style Logos - GIMP

Submitted by Thomas Lorenz on Fri, 05/22/2009 - 17:27.

Hallo,

yes, i would like to send an image, but i have von homepage, and i think that you have no email.
So, what shall we do?

The image look normal til a merge this image.

Gimp 2.4.5

MacOSX 10.5

Thomas

  • Login or register to post comments
12next ›last »

Search

Recent Comments

  • Re: 1 request - 3dl.am (work in progress)
    gartenriese
    19 hours 43 min ago
  • Re: 1 request - 3dl.am (work in progress)
    Karmody
    21 hours 12 min ago
  • Re: 1 request - 3dl.am (work in progress)
    Karmody
    21 hours 32 min ago
  • Re: How many themes do you run in Fast Dial ?
    spaljeni
    1 day 13 hours ago
  • Re: 1 request - 3dl.am
    gartenriese
    1 day 14 hours ago
  • Re: itoeunited.net, itoeunited.net/itoe/servers
    ITOE_MrSmiles
    1 day 14 hours ago
  • Re: 1 request - 3dl.am
    Karmody
    1 day 23 hours ago
  • Re: How many themes do you run in Fast Dial ?
    ZedoMann
    2 days 11 hours ago
more

Recent topics

  • 2 Logo Requests - zedomann
  • 1 request - 3dl.am (completed)
  • 4 Fast Dial Logo Requests (all done)
  • Fast Dial Feature Request - Open in Sidebar & Tabs
  • My all new Fast dial !
  • Trouble null|border-top-width on fast dial
  • 5 Fast Dial Logos Request (3/5 done)
  • A glossy transparent glowing logo please !
more

Recent Polls

  • How many themes do you run in Fast Dial ?
  • Where do you get your "stuff" from
  • Do you plan to convert over to Windows 7?
  • Which Image editor is best?
  • Twitter or Facebook?
more
  • logos
  • logo requests
  • themes
  • backgrounds
  • forums