Add a stroke path to text in Gimp 2.8
Gimp Tutorial “Our Rock”
A lot of people have a lot of ideas about adding a stroke path to text in Gimp, which is the open-source, and free, answer to PhotoShop’s bloated and overpriced image manipulation program.
But I digress – and yes, I have both programs. Why that is so may well become the subject of another post.
First, be aware that Microsoft Office is also expensive, and has several parts, to include its drawing sub-program in the suite. The open-source answer, and free, counterpart to Microsoft Office is OpenOffice. OpenOffice is also multi-parted, and you can download it from OpenOffice.org. I said that to say this: One part of OpenOffice is called OpenOffice Draw (similiar to Adobe Illustrator or Microsoft Draw).
OpenOffice Draw and Gimp 2.8 will be used for this tip. You can use your own drawing program if you prefer, of course. Follow the bouncing tutorial ball below, should you choose to participate in this exercise.
- Open Gimp and create a document that is 478 pixels wide and 270 pixels high with a transparent background. Then create another transparent layer – which will be used to paste your text into from OpenOffice Draw. Name that layer, “Text Layer.”
- Open OpenOffice Draw (hereafter after called “Draw”) and select “Drawing” from the main menu.
- Create text with these parameters: With the “Text” tool, draw a box to hold your text (the size of the box doesn’t matter). Click inside the box and then type, “OUR ROCK” (no quote marks). Select all the text. On the right side of the page, set the font to “Impact” and then set size to 66 points. Change the font color to red.
- NOTE: DO NOT add a drop shadow to the text. Gimp can do that. Now, click OUTSIDE the text box and then click on the text ONCE. You’ll see a square, blue box. When you click on that blue box, you’ll see handles. The handles display in one of two colors, depending on the number of times you click – red or greenish-blue. The greenish-blue is the one you want. Use the handles to resize the text box to “crop” to the text within the box.
- Once you’ve resized the box, and the greenish-blue selection handles are still showing, go to the top menu and select “Item > Modify > Convert > To Curve.” This is the same as Photoshop’s “rasterize text”. You’ve now converted the text (and all of the individual letters to curves).
- Do NOT deselect anything yet. You are about to add your stroke around your text. From the top menu select, “Format > Line > Style > Continuous” and then – in the same dialog box, choose a width of the line to be 0.03″. You’ll find a good, normal range for stroking text is between 0.01 inch and 0.03 inch. You can choose a thicker line, should you wish to give the impression of comic-book-type text, for example. But for now, set the width to 0.03 inch for our tutorial. Then click OK.
- With everything still selected, from the top menu select “Edit > Copy”.
- Open Gimp and click on the transparent layer we’ve previously named “Text Layer” (not the background layer) and from the menu select “Edit > Paste”. This pastes what you did in Draw ABOVE (it’s called a “floating selection”) your transparent Gimp text layer. NOTE: Your layers palette will show the pasted text as being named, “Floating Selection (pasted layer).” A floating selection is a layer that actually floats above all layers until it is put (anchored) somewhere to a regular layer. This just means we need to join (anchor) our pasted “floating” text layer to an already-existing regular text layer. We’ve already created a transparent layer and called it “Text Layer.”
- After you have clicked on the layer that is named “Text Layer,” do this: Go to the menu and select “Layer > Anchor Layer.” This anchors the “floating selection” text layer (formed from pasting text from Draw into Gimp) to the transparent layer underneath it. In other words, the two things (layers) become a single entity; one layer does not float above the other. Remember: You can’t do many “foo-foo” things with a floating selection. Ya gotta make it part of a regular layer. You should also know that you can’t reorder layers when one of those layers is left as a “floating selection” type of layer. You have been warned. ALSO NOTE: You can’t move the text once you have “married” the text layer and the layer it is anchored to. SO, before you anchor a “floating selection,” place it in the place you want it, because you can’t move text after the “marriage.”
- Finally, let’s add a drop shadow. Note: You’re still on the layer labeled, “Text Layer.” From the Gimp menu, select “Filters > Light and Shadow > Drop Shadow. Boom! There’s a drop shadow behind your text. You’ll note that the drop shadow itself is on its own layer, too. I know what you’re thinking – why does the drop shadow have to do this? Well, the best thing I can tell you is that this isn’t PhotoShop. It’s the way of “the Gimp”, so let’s go with it.
To finish our little tutorial, let’s add a background. Click on the layer labeled “Background,”and select the “Marble #2 (128 x 128)” pattern from the Gimp palette onto that layer. We’re done. See how smooth the stroke is. This is a superior method of adding a stroke to a text layer than I have seen with other text-stroke methods I have found.
Final thoughts
Yes, Gimp does have a text stroke path function. You’ll find it on the menu under “Edit > Stroke Path.” But if the result of using the function were all that good, there wouldn’t be so many Google results produced by questions about how to add a stroke path around text in Gimp.
For the record, Gimp has fonts, and the text path function, but that’s not what this tutorial is all about. It’s about doing it better, differently. And there are other things you can do out of the box in OpenOffice Draw that, should you try to duplicate in Gimp, would likely require specific plug-ins and a lot of learning to do in the Gimp program. For example, you can warp text in a Draw program, convert it to curve, copy it and then paste it into Gimp into a layer – pretty much like we did with our tutorial (only without a text stroke path).
Two lessons here: First, don’t limit yourself to a single program. Secondly, think outside the box when creating your own graphics.
As for creating that “perfect” text stroke path “outline,” many people have found alternative ways of doing the text stroke path better than Gimp itself. Some of those ways take up to 16 steps to perform. Some have less. You can learn SOMETHING from ALL of them. Just like you can from this tutorial’s approach.
One thing I can say about this tutorial. It works, it does what it sets out to do, and it looks good when you’re done.
At the end of this all, some advice: Users should NOT stroke the SELECTION, but SHOULD stroke the PATH. This is what we have done in this tutorial.
Oh yes – and if you choose to save your graphic you created from this tutorial using your own two hands, save it as a PNG graphic. It does a good job of preserving transparencies, as well. If you prefer to save your graphic as a JPG, then knock yourself out.
Now, a final bit of advice. Most web graphics used in headers, etc. are actually compilations consisting of many parts – stuff like a background, text, text effects and text placement. Plan before you begin any of the assembly of your compilation, whether you’re using PhotoShop, Gimp or some other image manipulation program. Once you’ve decided WHAT you want to do, study HOW to do it in your favorite image manipulation program.
Learn your photo program, and don’t expect someone on the Internet to do your work for you. And for goodness’ sake, don’t just copy and paste someone else’s work onto your web pages without the author’s permission, and thus imply to your site visitors that it’s your work. Remember, too, that merely removing or cropping the Copyright symbol from the art STILL doesn’t make it your work.
Don’t think that the artwork’s author won’t eventually see his work somewhere else. Inevitably that happens, and just as inevitably, there’s a lawyer attached.
If all these reasons don’t persuade you not to take someone else’s work without their permission, then consider that Santa is watching you, and you KNOW he knows who is naughty or nice. And word has it that he has ample supplies of switches and coal, too.
As for your own artwork, with enough effort and research on your part, you’ll eventually make it to “Carnegie Hall” – but only if you practice creating your own artwork. And while you’re creating your art, consider that there’s no law that says you HAVE to use a stroke path around text in EVERY graphic. Or any other effect. So, use effects sparingly.
An example of a piece of art that would NOT be helped with a text path (or a drop shadow, for that matter) is here on one of my news web sites. In this case, simpler is better. And yes, the graphic was done in Gimp 2.8.
Selah.
Complete Geek Boutique 
You must be logged in to post a comment.