|
This article describes how to create "wavy" buttons with text, such as the ones that appear on the front page of my website.
A high level overview:
I created the background image for the front page of my site with Gimp Fractal Explorer.
In the "New Image" dialog box, select Fill Type as Foreground, Background, or White, but not Transparent. The size of my background image is 200x200 pixels. It can, of course, be any size you want.
Open Filters->Render->Fractal Explorer dialog box;
In Fractals tab, I selected Nebula. The image will be filled with your selected fractal.
Fig. 1. A 200 x 200 image filled with Nebula fractal.
Select Filters->Map->Make Seamless menu choice. The image will be made seamless, or tileable, so that when you make it the background image on your web page, it will "tile". Which is to say, when it is repeated multiple times in x and y direction, the edges of each individual tile will be invisible.
Fig. 2. The image above is the Nebula fractal image made seamless.
When you tile this image, you'll get seamless tiles:
Fig. 3. Seamless Nebula image, tiled.
If you tiled the original Nebula image before it was made seamless, you would get this:
Fig. 4. Non-seamless (original) Nebula image, tiled.
I started by duplicating the background image.
2.1. Type the text
Select Text tool in The Gimp main dialog box. The lower section of the main dialog box will display Text Options: font, size, color, indent, etc.
In the duplicated image type the text you want (the button text).
Set its font, size and color in Text Options.
With the Move tool, drag the text to where you want it to be in the image. If you find that you continuously move the background layer when you want to move text, look at the Layers window and check which layer is highlighted. Click on the text layer so that it will be highlighted. Then move the mouse over the image until the cursor becomes cross-shaped, not hand-shaped. If you grab the text now, you will move the text. If the cursor is hand-shaped, you will be moving the background layer. Conversely, if the background layer is highlighted in the Layers window, the cross-shaped cursor will move the background, and the hand-shaped cursor will move the text.
Fig. 5. Seamless image with text.
At this point the text is in its own layer, separate from background. (If there is more than one word, as in my example above, you may have put each word in a different layer, so that you could move them separately.) Once you are satisfied that the text is the right size, color, and font, and the words are aligned the way you want them, the text layers will need to be merged with the background layer. After that it will be no longer possible to edit the text. If there is a chance that you may change your mind about the color, size or other attributes of the text, it is better at this point to make a duplicate of this image and work with a duplicate, leaving the layers of the original image unmerged.
Let's merge the text layer(s) with the background layer. In the Layers window, right-click on any layer and select "Merge Visible Layers". In the dialog box that opens, select the radio button "Clip to image" (although in this case probably any of the 3 options will give the same result). So now we only have one layer.
2.2. Draw the guides
With an Elipse tool (the second from the left tool in the top row of the The Gimp toolbox, shaped as an elipse), draw a selection outline around the text. You can make it any size you want, but I personally tried to keep it as small as possible. Considering that the animation will consist of several frames (for me, 4 was the minimum I needed for a "decent" waving effect), we want to keep each frame as small as possible in terms of number of bytes, which can be achieved by making its area as small as possible.
Fig. 6. Image with an elipse selection outline around the text.
Put horizontal guides at the top and bottom of the elipse, and vertical ones at the sides of the elipse. A horizontal guide can be created by pressing the left mouse button down on the horizontal ruler at the top of the image, and dragging the mouse to where you want to put the guide.
Fig. 7. Image with an elipse selection outline around the text and the guides.
The guides are needed so that we could cut out an elipse of exactly the same size and in the same location in each animation frame. (Each frame will be its own separate image. As will become clear shortly, each frame will be created by duplicating this base image. Each duplicate will contain the guides.)
Now that we have the guides, we can remove the elipse selection, because the eliptical shape does not need to be cut out yet. First we need to create the animation frames based on this image.
This is probably not necessary, but I create a separate image for each of the animation frames. I'm pretty sure this can be done by duplicating just the layer with the base image, and applying appropriate operations to each layer. But I just didn't want to think about it. :-) I don't think it is really any more work this way.
I start by duplicating the previous image, the one with guides.
To create the first animation frame, bring up the Waves filter from Filters->Distort->Waves. I set the amplitude to be small and the wavelength big; otherwise, at a bigger amplitude or a smaller wavelength the text will be distorted unrecognizeably. In this example I am using amplitude 4 and wavelength 14.
Fig. 8. Waves filter
Here is the result of applying the Waves filter with the above settings to the image in Fig. 5. It represents Phase 0 of the wave.
I now duplicate the original image, the one in Fig. 7, bring up the Waves filter again, and, keeping amplitude the same, I change the Phase to 90.
Here is the result of applying the Waves filter with the above settings to the image in Fig. 5.
Then I duplicate the original image and apply the Waves filter again to the duplicate, setting the Phase to 180:
And then again I duplicate the original image and apply the Waves filter to the duplicate, setting the Phase to 270:
And now we will combine those 4 separate images -- phase 0, 90, 180 and 270 -- into an animation.
Take the Phase 1 image and with the Elipse tool draw an elipse selection over the image. The sides of the elipse need to touch the horizontal and vertical guides, as in Fig. 6. To make this operation precise, you can turn on "Snap to Guides" in the View menu.
Invert the selection with Ctrl+I. Now the area outside the elipse is selected.
Cut out the selection with Ctrl+K. The area outside the elipse becomes transparent (black-and-white checkered background.)
In the Phase 90 image, draw an elipse of exactly the same size (that's what the guides are for) and copy the selection.
Paste it into the Phase 0 image. The Layers window shows it got pasted into its own separate layer, named Pasted Layer. I suggest to rename this layer something meaningful, e.g. Phase90.
If the Phase 90 elipse got pasted off-center, move it to the center so that it will overlap the Phase 0 elipse exactly. This will be very easy with "Snap to guides" turned on, because the guides touch the elipse's sides, and all the elipses in all 4 images are the same size.
Repeat these steps -- draw elipses and copy them -- in the other 2 images, phases 180 and 270.
Fig. 9. The Layers window after all 4 layers have been pasted.
Now that all 4 layers representing different phases of the animation have been created, we need to export this file as an animated GIF. Shift+Ctrl+S will bring up Save Image dialog box. In this box, type in a file name you want to save it as, making sure its extension is gif. Then when you click "OK", another dialog box will pop up, saying that GIF format can't handle layers and asking if you want to merge the visible layers or save as animation. It will also ask you to convert it to Indexed mode or Grayscale. Choose Indexed.
Then in the Save as GIF dialog box you need to set the delay between frames. In this example I set it to be 300 miliseconds.
|
