Step 1: Creating the Web 2.0-style blob
23 March 2007 - 5:04pm
The first step is to create the ubiquitous Web 2.0-style logo that will expand and contract when the mouse hovers over it. I've used Fireworks here; hopefully you can apply the instructions to your graphics package of choice.
For reasons of space, I'll be creating a bar that will expand to approximately 400 pixels wide, but in practice you can choose any width to fit your website.
1. Create a new Fireworks document 500 pixels wide by 200 pixels high. Make the background transparent.
2. Select the Rounded Rectangle tool and draw a rectangle roughly 400 pixels wide by 40 pixels high. Fill the rectangle by selecting a linear gradient, and make the gradient run vertically ensuring that the colour of the rectangle is slightly lighter at the bottom than at the top.
3. Now give the rectangle an Inner Glow with 75% transparency, a width of 4 and a blur of 10. Make the colour of the glow a darker tint of your chosen colour. This rounds the edges of the rectangle nicely.
4. Now draw another rounded rectangle. Adjust the dimensions so that the top of the shape fits snugly inside the top your original rectangle, with about a three or four pixel gap all around the top.
Take a copy of the new shape, and paste it a few pixels below its twin. You should have something similar to the image below.
5. Highlight the two rounded rectangles that you created in step 4. From the menu, select Modify > Combine Paths > Punch. If all's well, you will be left with a new shape which can be used as a highlight. Give the new shape a white fill.
6. Give the new shape a different fill edge. Select "Feather" from the drop down list and change the value to 5.
Finally group the two shapes together by highlighting them and pressing Ctrl+G. Apply a Drop Shadow with a transparency of 65%, a size of 11 and a blur of 4.
Bingo! You now have an authentic Web 2.0 blob which you will be able to animate. Firstly, though, we need to add a logo and a background, and that's coming up in the next part.
Step 2: Creating the other graphics
For reasons of space, I'll be creating a bar that will expand to approximately 400 pixels wide, but in practice you can choose any width to fit your website.
1. Create a new Fireworks document 500 pixels wide by 200 pixels high. Make the background transparent.
2. Select the Rounded Rectangle tool and draw a rectangle roughly 400 pixels wide by 40 pixels high. Fill the rectangle by selecting a linear gradient, and make the gradient run vertically ensuring that the colour of the rectangle is slightly lighter at the bottom than at the top.
3. Now give the rectangle an Inner Glow with 75% transparency, a width of 4 and a blur of 10. Make the colour of the glow a darker tint of your chosen colour. This rounds the edges of the rectangle nicely.
4. Now draw another rounded rectangle. Adjust the dimensions so that the top of the shape fits snugly inside the top your original rectangle, with about a three or four pixel gap all around the top.
Take a copy of the new shape, and paste it a few pixels below its twin. You should have something similar to the image below.
5. Highlight the two rounded rectangles that you created in step 4. From the menu, select Modify > Combine Paths > Punch. If all's well, you will be left with a new shape which can be used as a highlight. Give the new shape a white fill.
6. Give the new shape a different fill edge. Select "Feather" from the drop down list and change the value to 5.
Finally group the two shapes together by highlighting them and pressing Ctrl+G. Apply a Drop Shadow with a transparency of 65%, a size of 11 and a blur of 4.
Bingo! You now have an authentic Web 2.0 blob which you will be able to animate. Firstly, though, we need to add a logo and a background, and that's coming up in the next part.
Step 2: Creating the other graphics