FireworksGuru Forum: Shiny Happy Buttons - FireworksGuru Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Shiny Happy Buttons Create shiny buttons in Fireworks (8)

#1 User is offline   Adam! 

  • Fireworker
  • PipPipPip
  • View gallery
  • Group: Members
  • Posts: 31
  • Joined: 11-July 07
  • Location:West Midlands

Posted 25 July 2007 - 01:16 PM

As requested by "Kelton" I have created a quick tutuorial to show the stages of how I'd create a shiny button.
I will keep it brief as the image kinda shows how it's done....
I've created the Step-by-Step image for those who can pick it up without all the text instructions :)


STEPS
-----------
1).
=> Create a rectangle 260 x 90
=> Change the "Rectangle Roundness" to 100%
=> Add a vertical gradient. For this example I've used #003090 as the "dark blue" and #4283D2 as the "light blue".


NOTE: From this point on, light blue and dark blue refer to the same HEX colours used above.


2).
=> Add an Inner Glow Effect. Set the Offset to 10, Softness to 10, Opacity to 100% and colour to "light blue"
=> Change the Glow colour to be the same light blue used in Step 1.

=> Add another Inner Glow. Set the Offset to 5, Softness to 20, Opacity to 100% and colour to "dark blue"


3).
=> Create another rectangle 230 x 60

a). Use the sub-selection tool (the white arrow) to select the rectangle. Now, with the SHIFT-KEY held select the two bottom points of the rectangle as shown in diagram.

B). Now, use your UP-ARROW key to move both points upwards at the same time. Keep pressing it until you can see that the hight of the rectangle is now 45px. You should end up with a shape similar to that in B).

c). Add a vertical Linear Gradient. Start it at #FFFFFF 100% Opacity and end it at #FFFFFF 0% Opacity. Finally, change the overall Opacity to be 70%

4).
=> Drag this rectangle over your blue one so it is in the same position as shown

5).
a). Create another rectangle 200 x 25, change it's "Rectangle Roundness" to 100% and make its colour "bright blue" (#2E84DA). This is basically a colour that glows alot more than your base blue. It's to create a sort of subtle perly effect.

B). Change it's edge to Feather and set the Feather value to 20. Then, change it's overall Opacity to 80%

6). Drag this shape over your main shape to the position shown here. (Center Bottom)

7). Finally, add a Drop Shadow effect. Set the offset to 1, Softness to 7 and keep the Opacity at 65%. This just adds a very subtle shadow glow to help remove the hardness of the edges. I always find it works a little better than using the standard Glow effect.


So there you go, a button.
Shrink it and do what you want with it. Even change it's Hue and Saturation to make it different colours!

Attached image(s)

  • Attached Image: monthly_08_2007/post-4095-1186133314.png

0

#2 User is offline   MagdalenaH 

  • FireworksNut
  • PipPipPipPipPipPip
  • View gallery
  • Group: Members
  • Posts: 556
  • Joined: 22-July 06
  • Gender:Female
  • Location:Canada

Posted 25 July 2007 - 04:07 PM

Very nicely done Adam!
Guess what I am looking up in my music collection now?.... *singing* shiny happy people.... :violin: :beer:
You don't see what you're seeing until you see it, but when you do see it, it lets you see many other things.
William Thurston

GoldNET Smart Technologies
0

#3 User is offline   Alan 

  • FireworksGuru
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • View gallery
  • Group: Root Admin
  • Posts: 1,391
  • Joined: 09-July 06
  • Gender:Male
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and photography, video games and lots of gourmet food!

Posted 25 July 2007 - 11:10 PM

nice one Adam. Using offset on a inner glow is key in my opinion and makes a world of difference when used. :)
Visit my blog at http://www.alanmusselman.com
0

#4 User is offline   kelton 

  • FireworksNut
  • PipPipPipPipPipPip
  • Group: Members
  • Posts: 471
  • Joined: 02-July 07
  • Gender:Male
  • Location:Antigua
  • Interests:web design, logo design, user interface design

Posted 26 July 2007 - 07:19 AM

:-)

Attached image(s)

  • Attached Image: monthly_07_2007/post-3845-1185463149.png

0

#5 User is offline   Adam! 

  • Fireworker
  • PipPipPip
  • View gallery
  • Group: Members
  • Posts: 31
  • Joined: 11-July 07
  • Location:West Midlands

Posted 26 July 2007 - 07:55 AM

View Postkelton, on Jul 26 2007, 07:19 AM, said:

:-)


Glad you like it Kelton :)
0

#6 User is offline   raja 

  • FireMonkey
  • PipPipPipPipPipPipPipPipPipPip
  • View gallery
  • Group: Members
  • Posts: 1,001
  • Joined: 20-July 06
  • Gender:Male

Posted 28 July 2007 - 09:44 AM

Nice one Adam
Posted Image
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users