From the BlogSubscribe Now

Simple rollover effect buttons in Fireworks

Open Photoshop to create your buttons images.

Go straight to Fireworks Click HERE

In Photoshop:
Press CTRL+N for a new document.

Settings:
name = fireworks rollover effects
Height = 400 px
Width = 200 px
Background colour = #950404
And click OK.

Create a new layer
(press CTRL+SHIFT+N)
Select the paint bucket tool
Colour= #ff0000
You should now have 2 layers with two different colour backgrounds.



Change name “Layer1” to “up” (bright red)
Double click the background layer and name it “over”(dark red)

We are going to use text for the button names so now select the text tool ( press T)
I’m using these settings:



Tip: if you go to window and select character you should see the complete text settings!


Font = Helvetica LT ST
Font size = 22 pt
Anti alias = smooth
Colour = white
Line spacing = 57 pt
Letter spacing = 202pt
Center aligned. (under the paragraph tab)

Button Headers

Now type out the following as your button headers.


Fireworks
Simple
Rollover
Effect
Now you need to save these two up and over states as png files for your buttons.

Make sure the bright red background is visible
this is going to be the up state of our buttons.

Go to “file” then click on save for web and devices or press “CTRL+SHIFT+ALT+S”
Repeat this process for both the up and the over colours the text is visible in both.

.

Go straight to Fireworks Click HERE

In Photoshop:

Press CTRL+N for a new document.

Settings:
name = fireworks rollover effects
Height = 400 px
Width = 200 px
Background colour = #950404
And click OK.

Create a new layer:
(press CTRL+SHIFT+N)
Select the paint bucket tool
Colour= #ff0000
You should now have 2 layers with two different colour backgrounds.



Change name “Layer1” to “up” (bright red)
Double click the background layer and name it “over”(dark red)

We are going to use text for the button names so now select the text tool ( press T)

settings



Tip: if you go to window and select character you should see the complete text settings!


Font = Helvetica LT ST
Font size = 22 pt
Anti alias = smooth
Colour = white
Line spacing = 57 pt
Letter spacing = 202pt
Center aligned. (under the paragraph tab)

Button Headers

Now type out the following as your button headers.


Fireworks
Simple
Rollover
Effect
Now you need to save these two up and over states as png files for your buttons.

Settings

Make sure the bright red background is visible
this is going to be the up state of our buttons.

Go to “file” then click on save for web and devices or press “CTRL+SHIFT+ALT+S”
Repeat this process for both the up and the over colours the text is visible in both.


Save as = png 24
Quality = bicubic
Then click save.

I named this image the same as I named the layers in photoshop.
The bright red background should be named “up”
The dark red should be named “over”

Open up Fireworks and open up a new fireworks png document


Height = 400
Width = 200
Click OK.
You should notice two layers in your layers panel



Tip:
• Web layer = is where your web slices will go(buttons, image rollover, etc.)!
• Layer 1 = is where your images/text will be imported!


Now import an image (press CTRL+R) and select the up image we just created.
Put the right angle in the top left corner and double click, to place the image named “up”

Now press “V” for the selection tool and click on the image, use the arrow keys to place the image in the rectangle.
Go to the states/frames panel.


Create a new state by clicking on the tiny icon on the bottom of the state/frame panel, the one that looks like a square with a smaller square in the bottom left corner of the first square.
With this done import the over image (CRL+R) and again double click to place the image and square it up to the frame.

Tip: you can check the positioning by clicking on the two frames/states that we have created!
If one of them needs adjusting then do this now!


We need to drag out some guides at this point for the button placement.
If you don’t have your rulers showing then click on the view tab and select show rulers.
Drag out some guides to about the same size for each button.


Highlight state/frame 1
Now go to your tools panel and select the “slice tool” in the “web tools” section(or press K).
And drag out your buttons using the guides to place each button.
You should see 4 green boxes over your button areas.


With all 4 buttons created press “V” to select the black arrow selection tool.
Right click on each of the buttons and select “add simple rollover behavior”

Do this for all of the buttons we have created.


Tip: you can also create the link for each button in the properties panel(include http:// for web addresses)!

Press F12 to test the HTML in your browser.

With it all working use the selection tool to drag a square over the entire stage.
This selects all the elements on the stage/document.
Press “CTRL+SHIFT+R” to export the html and images.


File name = simple rollover effects
Export = HTML and images
HTML = Export HTML File
Slices = Export Slices
Pages = Current Page

Check boxes =
Selected slices only(we highlighted all the buttons before export, if we didn’t only the selected slice would be exported)
Put images in subfolder (this will select a folder called “images” in your selected folder. You can change this with the browse button)
Click save.

Congratulations now you can import this into your site.” alt=”" width=”437″ height=”322″ />
Save as = png 24
Quality = bicubic
Then click save.

I named this image the same as I named the layers in photoshop.
The bright red background should be named “up”
The dark red should be named “over”

Open up Fireworks and open up a new fireworks png document


Height = 400
Width = 200
Click OK.
You should notice two layers in your layers panel



Tip:
• Web layer = is where your web slices will go(buttons, image rollover, etc.)!
• Layer 1 = is where your images/text will be imported!


Now import an image (press CTRL+R) and select the up image we just created.
Put the right angle in the top left corner and double click, to place the image named “up”

Now press “V” for the selection tool and click on the image, use the arrow keys to place the image in the rectangle.
Go to the states/frames panel.


Create a new state by clicking on the tiny icon on the bottom of the state/frame panel, the one that looks like a square with a smaller square in the bottom left corner of the first square.
With this done import the over image (CRL+R) and again double click to place the image and square it up to the frame.

Tip: you can check the positioning by clicking on the two frames/states that we have created!
If one of them needs adjusting then do this now!


We need to drag out some guides at this point for the button placement.
If you don’t have your rulers showing then click on the view tab and select show rulers.
Drag out some guides to about the same size for each button.


Highlight state/frame 1
Now go to your tools panel and select the “slice tool” in the “web tools” section(or press K).
And drag out your buttons using the guides to place each button.
You should see 4 green boxes over your button areas.


With all 4 buttons created press “V” to select the black arrow selection tool.
Right click on each of the buttons and select “add simple rollover behavior”

Do this for all of the buttons we have created.


Tip: you can also create the link for each button in the properties panel(include http:// for web addresses)!

Press F12 to test the HTML in your browser.

With it all working use the selection tool to drag a square over the entire stage.
This selects all the elements on the stage/document.
Press “CTRL+SHIFT+R” to export the html and images.


File name = simple rollover effects
Export = HTML and images
HTML = Export HTML File
Slices = Export Slices
Pages = Current Page

Check boxes =
Selected slices only(we highlighted all the buttons before export, if we didn’t only the selected slice would be exported)
Put images in subfolder (this will select a folder called “images” in your selected folder. You can change this with the browse button)

Click save.

Congratulations now you can import this into your site.

Speak Your Mind

*