• myFAV.ES
  • Help Center
  • Tutorials
  • Extensions
  • Blogs

  

  • Logos
  • Logo Requests
  • Themes
  • Backgrounds
  • Forums
  • Contact
Home » Forums » 01232009 » Creating iPhone App Style Logos - Fireworks

Creating iPhone App Style Logos - Fireworks

macleod.mac —Fri, 01/23/2009 - 04: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!


  • Graphics Related Tutorials
‹ Black on Black reflection - Fireworks CS4 up IPhone style logo with a bitmap fill (from template) - Fireworks ›
  • Printer-friendly version
  • Log in or register to post comments or vote.
  • +4
  • 4 votes
Mafia_Penguin's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by Mafia_Penguin on Sun, 01/25/2009 - 16: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!


  • log in 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 - 16:05

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

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

Thanks.
--

~macleod.mac Click Here to Request a Logo / Just ask if you want one of my source PNGs
  • log in 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 - 16:27

I'll wait till then!


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

Trouble
using
transparent
Logos?
Click
here
for
help!


  • log in or register to post comments
sjdvda's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by sjdvda on Mon, 01/26/2009 - 06: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

  • log in or register to post comments
spucelik's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by spucelik on Wed, 08/12/2009 - 22: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

  • log in 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 - 11: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

~macleod.mac Click Here to Request a Logo / Just ask if you want one of my source PNGs
  • log in or register to post comments
JFlemming's picture

Re: Creating iPhone App Style Logos - Fireworks

Submitted by JFlemming on Mon, 08/31/2009 - 10: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!

  • log in or register to post comments

Search logos

Search site

Navigation

  • Blogs
  • Forums
  • Online users
  • Recent content

User login

  • Create new account
  • Request new password
 
  • Changelog
  • Latest releases
  • Important links
 
 
  • Changelog
  • Latest releases
  • Important links
  • Support Forum
 

Top Rated

  • google.com
  • youtube.com
  • fast dial folder
  • wikipedia.org
  • Firefox Black
  • fd folders, folders, folder
  • generic gaming logos
  • mail.google.com, gmail.com, googlemail.com
  • Carbon Fiber
  • iphone app style icon template
more

Recent Polls

  • What are you resolution of screen use
  • Which version of Fast Dial do you run?
  • How often do you visit Userlogos?
  • Which FD iPhone logo format do you find preferable
  • How many themes do you run in Fast Dial ?
more

Online users

There are currently 0 users online.
Active - 15 mins:
No registered users :(
  • Last 24 hours

Recent comments

  • alex hales
    by: wakawaka
    17 min ago
  • john
    by: wakawaka
    1 hour 32 min ago
  • Try to play slots, online
    by: wakawaka
    1 hour 58 min ago
  • john
    by: wakawaka
    3 hours 6 min ago
  • The result is the most
    by: wakawaka
    4 hours 39 min ago
  • Albert
    by: sijiv31759
    17 hours 24 min ago
  • jack452
    by: wakawaka
    18 hours 17 min ago
  • Albert
    by: sijiv31759
    19 hours 44 min ago
more

Recent topics

  • Suhagra 50 – The Best Remedy for Weak Erection Problem
  • Fildena 100 : Enjoy A Long And Passionate Intimacy Session
  • Vidalista CT 20 - Enjoy sexual life by removing the problem of a long relationship
  • Tadalista 20 Tablet - Highly Effective to Secure Your Sex Life
  • Enjoyment Your Gender Life with Fildena 120
  • Fildena 100 - The superlative deal on Erectilepharma
  • Vidalista 80 – Sexual power and performance | Vidalistatablet
  • Vidalista 40 – Improve sexual drive in Men | Vidalistatablet
more

Top contributors

User Total user points
Mafia_Penguin 912
Deva 552
gumanov 490
jumpordie 471
Karmody 457
macleod.mac 402
ingalls 354
spaljeni 310
zigzag 290
Rog 265
Sastre 256
famecky 159
x-b 152
danger83 147
1air2philou 143
more

2008-2017 userlogos.org. All logos/images belong to their respective owners. Contact administrator.

  • Logos
  • Logo Requests
  • Themes
  • Backgrounds
  • Forums
  • Contact