How to create a divider
What is a divider?
A divider is nothing more than a small image people add to their posts to mark new sections, or the end of their post.
Some examples
(some images that show up on a random Google search for divider)
How to create a personalised divider
All you need is an image. Don't worry about placement too much. To put the divider in the middle of the page all you have to do is wrap it in <center>your divider image here</center> tags.
Example - catlover
Follow the steps below to create this personalised cat lover divider
I am assuming you are using GIMP (this is open source software)
| Tool | Action |
|---|---|
| Click File->New | |
| Set image dimensions to 600px width and 100px height | |
| Select the Text-tool, then click in the image area | |
| Change fontsize from 18 to 36 | |
| Change font if needed (typing the first letter of a font will show available fonts) | |
| Click in the image area again and type your text | |
| Click the Align-tool, then click on your text. Small squares should show up at the corners. | |
| Click Settings (most right button in layer menu) | |
| Click center button to center your text horizontally | |
| Find a cat image or icon. The one used in the example can be found here | |
| Save the image if you want to use it later, for now it is enough to just copy the cat image | |
| Click Ctr+v to add the cat to the divider image | |
| This cat image is pretty big. Right click the (floating selection) layer of the cat and click Scale Layer | |
| In the dialogbox that pops up, make sure height and width settings are linked. The height of our divider image area is 100px. To make the cat fit this area, scale the height of the cat layer to 80px. If you click the width setting after that, you will see it adapts. Click Scale to perform the action. | |
| Right click the cat layer in the layer menu and select To New Layer | |
| Make sure the cat layer is selecting (it's blue in the layer menu). Click the Move-tool, then click the cat. Use the arrow-keys to move the cat to the side | |
| To add the second cat, click Ctrl+v again | |
| Make sure the layer of the second cat is selected, then click the Flip-tool and after that click the second cat | |
| Convert floating selection to layer like we did with the first cat, and position it correctly. | |
| Click File->Export as to save the image to your disk. | |
| It is a good idea to save the image as a Gimp image as well, just in case you want to make adjustments later on. | |
| If the divider seems too big you can use Image->Scale Image to adjust it. This is a 50px high version |
Animated dividers
Dividers can be animated as well. How it is done, is explained in this post.
The cat divider could be animated like this:
Note: You can open any animated gif you like in Gimp and see how it is done. If you decide to use someone else's work, don't forget to credit them.
The cat icon is created by GDJ and found at openclipart.org