• HELP CENTER
  • TUTORIALS
  • EXTENSIONS
  • BLOGS

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

Creating iPhone App Style Logos - Fireworks

Submitted by macleod.mac on Fri, 01/23/2009 - 09:12.

Here’s how to make your very own iPhone App style logo::

This tutorial is primarily for canvases 300x225.
Dimensions for 400x300 canvases are in italics

Open Fireworks, then open a new document with the following properties:

(Or 400x300px)

Draw a standard rounded rectangle, with the following properties:



(W:161 H:16 X:118 Y:55)

Select Gradient > Linear.

And select the following settings for the gradient:


I've used blue as an example, but you can use any colour, but keep it the same along the gradient.
(Same colour throughout / Top opacity 100% Bottom 80%)


Here's how to make the gloss:

Duplicate the layer, by selecting the rectangle, then Ctrl+C then Ctrl+V

Now an ellipse with the following properties (Don't worry about colour at the moment):


(W:235 H:120 X:80 Y:9)

Select both the duplicated rectangle and the ellipse:

Now select Modify > Combine Paths > Intersect

You should end up with something looking like this:

Give the gloss path the following properties – Fill > Solid > White and Opacity 30%

You should now have something that looks like this:


Next, paste the transparent logo you are wanting to make onto the canvas:

Select both the rounded rectangle and your icon for the logo, then hit Ctrl+Alt+2 then Ctrl+Alt+5 to centre it. You should get this:

Then simply add reflection and you’re done!


‹ Black on Black reflection - Fireworks CS4upIPhone style logo with a bitmap fill (from template) - Fireworks ›
‹ How to make userbars in GIMP Glossing Icons - GIMP ›
  • Graphics Related Tutorials
  • Printer-friendly version
  • Login or register to post comments
  • 4(4 votes)
Mafia_Penguin's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by Mafia_Penguin on Sun, 01/25/2009 - 21:01.

Nice!
+1, though I can't use it.



Please exchange this coupon for one (1) free internet.

Trouble
using
transparent
Logos?
Click
here
for
help!

  • Login or register to post comments
macleod.mac's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by macleod.mac on Sun, 01/25/2009 - 21:05.

Lol. I'm gonna create a Ps one soon.

And someday I will get round to playing with GIMP...

Thanks.
--

  • Login or register to post comments
Mafia_Penguin's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by Mafia_Penguin on Sun, 01/25/2009 - 21:27.

I'll wait till then!



Please exchange this coupon for one (1) free internet.

Trouble
using
transparent
Logos?
Click
here
for
help!

  • Login or register to post comments
sjdvda's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by sjdvda on Mon, 01/26/2009 - 11:14.

Great tutorial!!!
+1
I've added a lot of iPhone style logos today.

I've used blue as an example, but you can use any colour, but keep it the same along the gradient.
(Same colour throughout / Top opacity 100% Bottom 80%)

I've noticed that I doesn't look good when using the white color.
I used a slight gray color for the bottom part.

sjdvda

 saajid.weebly.com

  • Login or register to post comments
spucelik's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by spucelik on Thu, 08/13/2009 - 02:09.

Is there anything special I need to do to save the image once I create it? I'm trying to create an icon for the tab bar and it's not displaying. The file type in Finder (Mac) is FIreworks PNG file and not a straight PNG file which is why I think I'm not saving or exporting it correctly.

Thanks

  • Login or register to post comments
macleod.mac's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by macleod.mac on Thu, 08/13/2009 - 15:01.

Fireworks PNGs should display the same as normal PNGs, with the added bonus that they are editable, which is why I fundamentally prefer Fw to other web image editing softwares.

~macleod.mac
Click Here to Request a Logo / Just ask if you want one of my source PNGs

  • Login or register to post comments
JFlemming's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by JFlemming on Mon, 08/31/2009 - 14:14.

Great tutorial mate! I don't think fireworks gets as much justice as it should when it comes to graphic design. It's good to see some variety in the tutorials of different graphic programs!

  • Login or register to post comments

Search

Recent Comments

  • Re: 5 Logo Requests (2/5)
    Sanjay
    1 hour 2 min ago
  • Re: 5 Logo Requests (1/5)
    Karmody
    4 hours 23 min ago
  • Re: 5 Logo Requests
    Karmody
    4 hours 49 min ago
  • Re: allnokia.ru
    CyberDEMOH
    7 hours 23 min ago
  • Re: small-games.info
    Kiichi
    8 hours 40 min ago
  • Re: userlogos.org
    Kiichi
    8 hours 54 min ago
  • Re: logo request
    ragesh9109
    10 hours 15 min ago
  • Re: imageshack.us
    ahmed1212
    15 hours 42 min ago
more

Recent topics

  • 5 Logo Requests (2/5)
  • Hi i need a logo with text Umean2Me
  • Allnokia.ru Logo (DONE)
  • Coolpreviews
  • GMail Redesigned
  • Xboxland.net Logo
  • IIT R logo request
  • Is the source code available for SimpleMail?
more

Recent Polls

  • How often do you visit Userlogos?
  • Which FD iPhone logo format do you find preferable
  • 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?
more

Highest Users

UserPoints
chiaroscuro951
Mafia_Penguin918
gumanov442
Karmody413
macleod.mac402
ingalls354
jumpordie312
spaljeni304
zigzag290
Rog266
MShadows254
danger83147
sjdvda137
Gmacri108
euphonicnight97
more
  • logos
  • logo requests
  • themes
  • backgrounds
  • forums