Step 2: Creating the other graphics
27 March 2007 - 10:00am
Now that the blob has been created, we need to slice it into two parts. The left hand portion of the blob will expand when the mouse moves over it, and the right hand portion will be shifted across accordingly.
1. Trim the canvas by selecting Modify > Canvas > Trim Canvas from the menu. In this example we are left with a canvas size of 474 pixels by 55 pixels. 2. Create two slices using the slicing tool as shown in the picture below. Ensure that the rounded right hand edge of the blob is completely contained by the right hand slice, otherwise the two halves may not match up smoothly when it comes to displaying the finished product.
Make a note of the widths and heights of the slices you created, as we'll need this information for coding purposes later. In this example the first slice is 448 pixels by 55, and the second is 26 pixels by 55.
3. Export the left hand slice as a PNG32 with the filename "blobleft.png". Do the same with the right hand slice, calling it "blobright.png".
4. You may wish to save a copy of your Fireworks file so far.
5. Now, we need to create a logo that will be superimposed on the blob. This logo will fade in and out when the menubar is animated.
Firstly, create a logo of your choice onto the blob, then create a slice to neatly fit round your logo. (It may be helpful to remove your existing slices at this point.)
6. Export your logo as a PNG24 - there's no need for alpha transparency here. Save it with the filename "bloblogo.png". Make a note of the width and height of this logo and also the X and Y values - the distance of the logo from the top left hand corner of the image. All this information will be needed later. In this example - our logo is 96 pixels wide by 26 high, and is inset 12 by 9 pixels from the top left corner of the blob.
7. Finally, the background. Get a picture of your choice and crop it or resize it to 480 pixels by 300 pixels. Save it as "picture.jpg"
8. You may wish to make the background stand out a little, which we can do by creating a drop shadow. Do this by creating a new file with a white background, 500 pixels by 200.
9. Draw a white rectangle on the new canvas, 480 pixels wide by 300, ensuring that the rectangle overlaps the canvas both top and bottom. Also ensure that the rectangle is 10 pixels in from both the left and the right hand edges.
10. Select the rectangle and give it a glow with color #999999, width of 3, blur of 7 and transparency of 65%.
11. Export this as a PNG24 with filename "bg.png".
And that's it! You now have all the graphics you need to create the animated menubar effect. The next step is to weave these graphics together into one web page.
Step 3: The CSS and HTML
1. Trim the canvas by selecting Modify > Canvas > Trim Canvas from the menu. In this example we are left with a canvas size of 474 pixels by 55 pixels. 2. Create two slices using the slicing tool as shown in the picture below. Ensure that the rounded right hand edge of the blob is completely contained by the right hand slice, otherwise the two halves may not match up smoothly when it comes to displaying the finished product.
Make a note of the widths and heights of the slices you created, as we'll need this information for coding purposes later. In this example the first slice is 448 pixels by 55, and the second is 26 pixels by 55.
3. Export the left hand slice as a PNG32 with the filename "blobleft.png". Do the same with the right hand slice, calling it "blobright.png".
4. You may wish to save a copy of your Fireworks file so far.
5. Now, we need to create a logo that will be superimposed on the blob. This logo will fade in and out when the menubar is animated.
Firstly, create a logo of your choice onto the blob, then create a slice to neatly fit round your logo. (It may be helpful to remove your existing slices at this point.)
6. Export your logo as a PNG24 - there's no need for alpha transparency here. Save it with the filename "bloblogo.png". Make a note of the width and height of this logo and also the X and Y values - the distance of the logo from the top left hand corner of the image. All this information will be needed later. In this example - our logo is 96 pixels wide by 26 high, and is inset 12 by 9 pixels from the top left corner of the blob.
7. Finally, the background. Get a picture of your choice and crop it or resize it to 480 pixels by 300 pixels. Save it as "picture.jpg"
8. You may wish to make the background stand out a little, which we can do by creating a drop shadow. Do this by creating a new file with a white background, 500 pixels by 200.
9. Draw a white rectangle on the new canvas, 480 pixels wide by 300, ensuring that the rectangle overlaps the canvas both top and bottom. Also ensure that the rectangle is 10 pixels in from both the left and the right hand edges.
10. Select the rectangle and give it a glow with color #999999, width of 3, blur of 7 and transparency of 65%.
11. Export this as a PNG24 with filename "bg.png".
And that's it! You now have all the graphics you need to create the animated menubar effect. The next step is to weave these graphics together into one web page.
Step 3: The CSS and HTML