Simple Shadow Text in Inkscape

Following up on the last post on creating shadowed text in GIMP, I’d like to show you an easier way to do it. As I said in that last post, I’m not a big fan of working with text in GIMP. Don’t get me wrong, it’s a fine program for bitmap editing, but there are just better tools for dealing with text manipulation. Vector applications like Inkscape and Illustrator give you more flexibility in layout and text work. To show you just how easy, here’s a quick tutorial. Now, I’m assuming you’re at least somewhat familiar with Inkscape. If not, there are lots of free tutorials out there and this post will still be here when you get back.

Step one. Make some text

With Inkscape open, select the text tool (the A) and type something. I was feeling clever, so I typed shadowy. Change the font to something you like and resize the text with the arrows that appear when you select the object with the pointer tool.

2 - Fonted Sized
Molot. 73.95 pts.

Step two. Copy the text

Ctrl + C. Control + V. If you’re on a Mac, it’ll be something similar.

3 - Copied
Double your text, double your fun

Step three. Change the color and layer the objects

Find the text you want to use as the shadow text and change the color to something a bit shadowy-er. I chose a medium-ish gray. Align the objects however you want. If your gray text is on top of the black text, select the gray text with the pointer, go to Object and click on Lower. Or just press the page down key on your keyboard.

4 Layers
Order the text to do stuff. And things.

Step four. Do a bit of blurring.

With GIMP there were a few extra steps here. Since GIMP works on pixels, you have to select the color, grow the selection, and then feather the selection. After the selection is made and the selected area filled with a selected color, a bit of blurring is necessary to get everything looking just right. With Inkscape, all you have to do is click on the shadowy gray text and look for the Blur slider in the fill dialog box. I set mine to 1.7%. Inkscape doesn’t mess around when it blurs things.

5 - Shadowed
Aaaand we’re done.

Step five. Export.

If you want to do your layout in GIMP, you’ll need to export the text as a transparent png file. Select both the black text and the gray text by drawing a box around them with the pointer tool. Look for the Export Dialog and specify where you’re exporting to, make sure to check Hide All Except Selected, then click Export.

6 - Export

Now you’ve got a transparent png file you can import into GIMP and use as a layer on your book cover. Or you can do what I do and pull the cover into Inkscape and do all the layout work there.

ShadowyFinal
Such a sexy, bold statement about something.

Has anyone got any tips to share or questions that need answering? Leave a comment!

Advertisements

Simple Shadow Text in GIMP

I’ve always designed my own book covers. I’m a terrible illustrator, but pretty decent at layout and text effects. Fortunately, there are plenty of people out there who make great images and I can do some manipulation on them to put together a halfway decent looking cover.

Not everyone can do this, and I’m sure there are plenty of people out there who look at what I’ve designed and call it crap. That’s fine, I’ve done the same about other book covers out there, too. Graphic design is a pretty personal thing in that what I find attractive may or may not resonate with anyone else. Design goes through trends, some of which are excellent and tend to stick around, others are abysmal and tend to vanish. Ideally, a design should appeal to the maximum amount of people possible, but if you think you’re going to please everyone, you’re fooling yourself.

Anyway, I’ve picked up a few tricks here and there over the years and they seem like good things to share. Ostensibly, this blog is about writing and books, so this is a bit outside the norm, but it’s not too far off base. The first of these tricks is doing some simple text shadowing in GIMP. Ideally, I prefer to work with Inkscape for all my text work because it’s much easier and more flexible once you wrap your head around it, but a lot of people like to work exclusively in GIMP, Photoshop, or other bitmap editors so this post will focus on GIMP. Photoshop and most other bitmap editors work basically the same way. The next post will do the same thing with Inkscape.

The first thing to get used to is the idea of using layers. See, images consist of individual pixels (picture elements, in case you’re playing Trivial Pursuit) and once you place a bunch of pixels in with another bunch of pixels it’s a real bear to separate them. Think about the amount of effort it takes to pull the bourbon out of your soda after you’ve poured them together. Actually, screw that. Just drink the bourbon and soda; it’s a hell of a lot easier.

Anyway, the way bitmap editors work is by selecting pixels based on certain criteria, usually color. In an image with millions of colors, selecting just the ones you want gets to be a dicey proposition. That’s why layers make things so much easier. Drink your bourbon and soda, we’re about to through the looking glass.

Take any image and it can consist of multiple layers. Those layers can be any color you want, including no color at all. When you look at the image with a whole mess of transparent layers, it looks like a single image. The image below is the final product of this tutorial. It looks like one simple image, but it’s actually comprised of three layers that can all be individually manipulated.

7 The Shadow Knows
Click to embiggen.

By using layers, you free yourself from the Herculean chore of selecting individual pixels. Everything is neatly laid out and separated from the other elements so you can tweak one part of the picture without impacting any other part. In GIMP, you create layers by using the Layers dialog and clicking the button for either new layer or copy layer (just hover the cursor over the buttons, it’ll let you know what they do). Photoshop and other tools work similarly. If your bitmap editor doesn’t support layers, ditch it and use something else. It may take some time to learn how to use the software, but it’ll be worth it in the long run. GIMP, by the way, is free.

Step one. Make some text.

This varies from editor to editor, but it usually centers on finding the Text tool and typing. Look for something that looks like an A or a T. Click somewhere on the blank canvas and type something. Working with text in a bitmap editor is still a PITA compared to working with text in a vector program, so you want to make sure you get things as good as possible before you commit everything. In this example, I’ve set the font to League Spartan at 72pt. Use whatever font and size you want.

1 Text
We’re about to find out what evil lurks in the hearts of men.

The final step (not shown here) was to set the text color to red. Once I’ve got my text done, I get this:

2 Red Yo
Red shadows? Sounds like the Commies are back. If they ever left.

Step two. Layer that sucker up.

If you look in the top right hand part of the image above you’ll see the layers dialog with two objects in it: A T with SHADOWY and a grid with Background. Those are layers. You can edit the text layer if you want to. Select the text layer by clicking on it, selecting the text tool from the toolbox, and double clicking on the text.

I’m going to make a new layer by copying the SHADOWY layer. To do that, look for the copy layer button. In GIMP it’s at the bottom of the layer dialog (top left of the picture, above the brushes dialog), and looks like a couple of squares, one on top of the others.

The reason for creating a new layer is so I can work with the copied layer without impacting the text layer. Copying the layer creates an exact duplicate of the selected layer that I can do horrible things to.

3 Layers
SHADOWY #1 is the new layer and a not-so-subtle reminder that SHADOWY is number 1

The visible order of the layers is the same as the order in the layers dialog. The topmost layer is at the top of the list.

Now, like I said before, bitmap editors work by selecting pixels. Because we made a duplicate layer and made the text all red, this is pretty trivial. Click the eyeball next to the SHADOWY #1 layer to hide it, and click on the SHADOWY layer to select it. We’ll put the SHADOWY #1 layer a bit. Hiding it makes it easier to work with the other layers.

Step three. Use the layers wisely.

With the second layer (SHADOWY) selected, go to Edit->Select by color-> and click on the red text. BAM! The text is selected. From here you can do whatever you want to just the text and it’ll be our little secret. Just to make things more fun, we’re going to modify the selection like the mad scientists we are. Go back to Edit and select grow. This grows the selection by a number of pixels. I chose 5 because reasons. Then, since shadows don’t look as good with a hard edge, I went back to Edit and selected Feather. This feathers the selection so it’s not a smooth line.

4 mod select
Selectamundo. Really hard to see when it’s this small. Click to embiggen or middle click to open in a new tab.

Then, because a shadow shouldn’t be red, I went back to Edit and selected Fill with Foreground color. This made the text black, thicker, and slightly feathered at the edges. Finally, go to Edit, select Deselect All. Yes, I know I just told you to select deselect. Let’s blur this out a bit more. Make sure the right layer is selected and go to Filters->Blur-Gaussian Blur. Blur it as much as you want until you get something blurlicious.

5 BLURRY
Blurtacular. Also, note the layer order has been switched in the Layers dialog. I did that to mess with your head.

Step four. Meet Mr. Opacity

The last thing we’re gonna do with the shadow is lighten it up a bit by playing with the opacity. Each layer can have a different opacity from the rest of them. You can change the opacity by using the Opacity slider. Opacity, by the way, is a measure of how well you can see through something. Something you can’t see through is considered opaque. The cat sitting in between you and your monitor is 100% opaque.

6 Opacity
I can see right through your shadowy heart.

Step five. Final steps.

Now, turn the top layer back on, make sure you’ve got the correct layer selected, and use the move tool to adjust the position of the shadow. The move tool usually looks like four arrows. You can reposition a layer without moving the other layers. This is a good thing.

The final step is the select the background and make it white. Edit->Fill with Background color will work for that. When it’s all done, you should wind up with something like this.

7 The Shadow Knows
Woohoo!

If you’re working on your book cover and want to do some text work, use your layers. You can have as many as you want. I think so anyway, I’ve never actually tested that theory. Create one layer for your background image and then as many layers as necessary for your text.

Bam! Layer magic and text awesomeness.

Anyone got any other good tips?

Just Passing Through

Outside of The Eagles’ classic song Take It Easy, most people know absolutely fuck-all about Winslow, Arizona. I’m fortunate to have actually spent a little time in the place. My aunt and uncle lived there for a while and we used to spend Christmas with them. Actually, they lived there twice. Once when I was fairly young, then they moved, then they moved back. Then they moved again.

At any rate, I’ve spent some time in Winslow. It’s a tiny, little wide spot on I-40 between Holbrook (also a wide spot) and Flagstaff (a cool wide spot and home to Northern Arizona University and Bookman’s). Winslow is your run-of-the-mill small Arizona town and aside from the fact that the Mormon church went out of business and someone bought the place and turned it into a giant house, there’s not much to say about Winslow.

Oh, it also has a place that serves the world’s worst Chinese food. My grandfather loved that place.

Now Winslow is dying the same slow, desperate death a lot of small towns are experiencing. The movie Cars made this sound like a tragedy, but aside from the fact that Winslow is a convenient place to get gas and a lot of people are going to lose their shirts when the town finally closes its doors, not much of importance will be lost. People will find new places to live and the world will move on just like it has when countless other places have rolled up the streets and called it a done day.

Anyway, enough about the sad and sordid history of Winslow, Arizona. The point of this post is just how much of an asshole I am that I can look at the slow death of a small town and see nothing more than a story idea.

Last week we took a trip up to Zion National Park in Utah to spend some time with friends and celebrate some birthdays. As we were passing through Winslow (at exactly the speed limit, I assure you),  we saw the remnants of some building or another. All that was left was a mostly empty dirt log, the rusted I-beams that made up the frame, and an old rail freight car.

A perfect place for a story with all kinds of high weirdness. I wish I could have gotten a picture, but driving (at exactly the speed limit) wasn’t conducive to getting a decent shot. But I saw the scene and immediately saw the end of the world had come and gone and there were still a couple people out there working on some strange tech hammered together with dreams, bailing wire, and bits of crashed UFOs. Around them were 50 gallon drums filled with flaming refuse and the endless brown desert. The stars filled the skies. They had one final shot at redemption in a world that died with a whimper.

Maybe it’s just me, but I saw a story in that old frame and dirt-bound freight car. Inspiration comes from all sorts of bizarre places.