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?

Print Is Dead, Long Live Print p2 – Making a Cover for Createspace

Making an eBook cover isn’t hard.  It can be tricky to make it look good, but it’s really not all that difficult.  If graphic design isn’t your bag, there are plenty of cover designers out there (myself included).  If it is, and you enjoy making covers building one for CreateSpace isn’t overly difficult.  There are some technical issues you’ll need to deal with, though.  An eBook cover is usually something like 2500px by 1563px or some variant thereof.  If you take the height and multiply it by 0.6252, you’ll get the width.  Then it’s just a matter of finding or creating cover art, laying out the text, and doing some basic cleanup (size checks and whatnot) in GIMP or Photoshop.

A print cover is bit different.  You have to worry about bleeds, margins, the physical size of the spine and things like that.  It’s not that a print cover is really all that different, there’s just more to it and you have to be cognizant of where your elements lie in relation to where the ink is going to fall.

I’ll be going through this step by step using the cover for my upcoming collection of short stories.  I use Inkscape to do my layout and GIMP to do my image editing.  At this stage, the image work is done and it’s all about the Inkscape.  If you don’t have a copy of Inkscape, you can get one here.  If you need a copy of GIMP, that can be found here.

This post will cover the following steps.

  • Getting the cover template
  • Setting up guidelines in Inkscape
  • Importing images
  • Layout and design

Just like the last post on formatting your manuscript for CreateSpace, this looks complicated but it’s really not all that difficult.  It can be tedious and step-intensive, but it’s not difficult.  Set aside some time, make the cover, and step back for a day or two.  It’s those times that you step back that allow you to think about what you’d like to see without it staring you in the face.

So, step one.  Getting the cover template.  Don’t skip this step.  As I said earlier, print layout has some technical issues that simply don’t exist in eBook cover design.  Notably, there’s no standard size for the spine of a book.  You can assume you’re working on, say, a 6 inch by 9 inch book and the front cover and back cover dimensions won’t change.  The spine, however, is a variable.  The size of the spine is dependent entirely on the number of pages in your manuscript.  Then there’s also the issue of bleed lines (the point past which images will bleed off the sides).  If you put text past a bleed line you’ll likely never see it when the cover is printed, so it’s important to be aware of exactly at what point elements start to bleed off the cover.

Fortunately, CreateSpace has your back.  They’ve created a bunch of templates that will let you lay out your cover and have a pretty damned good idea of exactly where folds and bleed lines will hit.  Grab a template from here: Createspace Cover Templates.  You’ll need to know the formatted size of your manuscript (I’m using 6×9) and the number of pages in the text (the Clock Man is right about 300).  Download the template, unzip it, and you’ll have two files: a png image and a pdf file.

I’m going to start by importing the png image into Inkscape and setting up the Inkscape document dimensions.  To do this, find the dimension of the image in pixels (mine’s 5700 x 3900, but a lot of it is white space), and tell Inkscape how big the picture is going to be.  Go to File -> Document Properties and set the image dimensions.  Make sure to select pixels as the unit of measurement – my copy defaults to millimeters for some odd reason.  You don’t have to click OK or anything, as you move from field to field, the image will resize.

Inkscape document setup properties. It usually pops into the upper right hand corner.

Inkscape document setup properties. It usually pops into the upper right hand corner.

BlankSizedDocument

Inkscape with the document resized

With the image size set, press the minus sign a few times to zoom out so you can see the entire workspace.  Now we’re going to load the template file.  Go to File -> Import.  That will bring up a run-of-the-mill select file dialog.  Locate the png image you downloaded from CreateSpace and double click it.  This will bring up another dialog box asking you how to import this thing.  There are three questions: Link or Embed, Image DPI, and Image Rendering Mode.  Link or Embed means does your Inkscape file link to the template or is the template actually part of the Inkscape file?  Embedding puts the whole file in with the rest of your Inkscape file, meaning if you open your cover on a different computer the template is still there.  If you just link to the template and open the Inkscape file on a different computer you might not be able to find the template.  I usually embed.  Embedding makes for a larger file, but it’s less of a hassle if you use multiple computers or want to send the file to someone else.

ImageImportDialog

Bitmap image import dialog. I usually embed, pull the Image DPI from the file, and select Smooth (optimizeQuality).

Image DPI is the dots per inch.  This isn’t the dimensions of the image, it’s the resolution of the image.  You can have a huge image (5900 x 3700) but if the dpi is only 72, it’s not going to look good.  DPI refers to the amount of pixels packed into the image.  Anything under 300dpi should not be used in print.  I’d actually argue that anything under 300dpi shouldn’t be used in design period, but that’s just me.  Make sure “From File” is selected.  This will allow Inkscape to use the native resolution of the image.  Image rendering mode is immaterial for our purposes – we’re not going to keep the template in place when we export – but it pertains to how Inkscape pulls in images.  You’ve got None, Optimize Quality, and Optimize Speed.  When I pull base images into Inkscape I always select Optimize Quality.  For the template, you can leave none selected.  Click OK and Inkscape will chug away at rendering the image for you.  When it’s done, you’ll see something like this:

ImageImported

Template image imported into Inkscape.

Resize the template using the arrows around the selected image. NOTE: if the arrows point out, you’re good to go.  If they curve that’s for rotating the image.  If you’ve got curved arrows at the corner, click the object again to get regular arrows.  If you hold down Ctrl while you resize, Inkscape will keep the image dimensions in tact.  If you don’t hold down Ctrl, you’ll just wind up stretching the image instead of scaling it.

With the image resized it’s time time to start putting in guide lines.  These are the little lines that layer over the top of an image to tell you approximately where things are.  You can pull guide lines onto the screen by clicking inside of either ruler (top or left side) and dragging.  Position the lines along all the lines of the template image so you’ll be able to see what you’re up to even after you start putting elements in the drawing area.

GuidelinesInPlace

Whole lotta guide lines, but they’ll come in handy.

The guide lines around the image above are references to various parts of the template.  The extreme outer lines mark the end of the cover.  As you move in toward the center of the image you’ll get the bleed lines; don’t put any text outside of those.  The next closest ones are the main cover area; anything inside those lines is fine.  Likewise the spine has fold lines and there are lines for the bar code box.

To make things a tad easier, we’re going to add a new layer on top of the template and lock the template layer.  To do this, look on the extreme right hand side of Inkscape’s window for an icon that looks like three pieces of paper stacked on each other.  This will add the Layers dialog to the rest of the dialogs.

LayersAdded

Click the plus sign to add a new layer.  Call it whatever you like.  You can toggle back and forth between the layers by selecting whichever one you want.  To lock the template layer, select it, go to Layer – Lock/Unlock Current layer.  That will lock the template layer so you don’t accidentally move it.  Then select the new layer and work with it.

Now we can start importing the cover elements.  The eBook cover for The Clock Man was already partially done, so I just copied and pasted the artwork and did some image fiddling.  I then imported the back matter image just like importing the template image.  Size both images until they work for the positions you need them in.  Again; the imported images often pop in much smaller than they really are.

The next step is put some color on the spine.  Look for the rectangle drawing tool in the toolbar on the left.  It looks like a little box.  Click it and your cursor will change.  Click and drag to draw the rectangle between the front cover and the back cover.  I used the eyedropper tool to change the color of the rectangle.  To use the eyedropper, select the object you want to recolor (the spine rectangle in my case), select the eyedropper tool, and click on any color in the image.  Bam!  The object gets the new color.

Let’s put some text on the spine.  Select the text tool – it looks like an A.  Click anywhere on the document and start typing.  Likely your text will be really small; remember you can zoom in and out by using the plus (+) and minus (-) signs.  You can resize text exactly like you resize everything else.  Once the text is entered, select the select tool (it looks like an arrow).  Click on your text and you’ll get the same arrows for resizing.  Remember, Inkscape is a vector program.  This means all the elements are nothing more than bits of math hiding under the scenes, so you can resize as much as you want without pixellating things.  Your imported images, however, are still bitmaps; resize those as little as possible.

So, here’s my name.  I typed it in, selected it with the text tool and changed the font to Impact.  Now, I just need to rotate it.

RotatingText

Me!

If you see regular arrows when you click the object, just click it again and you’ll get the curvy arrows.  Dragging one of the curvy arrows will rotate the image.  The sideways and up and down arrows skew the object.  Here’s my name rotated.

TextRotated

Me falling down.

Now, just drag it into place on the spine, resize as necessary, and you’re good to go.  In this image, the title has already been added to the spine.

RotatedTextInPlace

In place.

To add the back matter, we’re going to do something a bit more fun with the text tool.  Rather than just clicking, we’re going to click and drag, drawing a box with the text tool.  The advantage to doing this is it gives you a bit more control over multiple line text blocks.  This comes in handy when you’re adding larger amounts of text like a blurb or an “About the Author” block.  So, select the text tool and draw a box that will fit nicely on the back cover.  Start typing.  Formatting text blocks in Inkscape works an awful lot like formatting text blocks in Word or OpenOffice.  Select the text you want to change and you can reset the font, the weight, the size, and so on.  One thing that’s different is a text block is just an object, you can resize it just like any other object.  If you run out of space in your text block, select the text block with the text tool and look for the little circle on the bottom right hand side.  You can use that handle to resize the text block without scaling the text.

TextBlock

It’s that little red dot on the bottom. Click it and drag to resize the text block.

You can edit the block by clicking it with the text tool, selecting whatever text you want, and changing it.  With the text selected, the text formatting bar at the top of the screen shows so you can change fonts, kerning, leading, and all that other fun stuff.  The first block can be your regular blurby back matter and the second one can be your about the author.  Go wild.  Just make sure you don’t put anything over the bar code box.  Put it all together and you can come up with something like this.

It still needs some work, but it's functional for blog post purposes.

It still needs some work, but it’s functional for blog post purposes.

To clean everything up I’m going to export the whole kit and kaboodle and a png image and fix the borders in GIMP.  Exporting is easy enough.  Locate Inkscape’s Export PNG Image dialog on the right hand side of the screen.  Click the Export As button to tell Inkscape where to save the file, select all the objects you want to export, put a check mark in Hide All Except Selected, and click Export.  This will produce standard png file that can be edited as a bitmap.

Don't forget to reset your field calibrations.

Don’t forget to reset your field calibrations.

Now, take that png file and open it in GIMP.  There are some border issues to take care of so I’ll use some guide lines (they work the same in GIMP as they do in Inkscape) to figure out what to remove.  The gray spine box was sized correctly, so a pair of horizontal lines aligned with the top of the spine box will give me the correct sizes.  Select the image using the guide lines as guides, then go to Image -> Fit Canvas to Selection.  Voila, the extraneous border parts are gone.

LoadedInGIMP

Guide lines are your good buddies.

When it looks good, go to File -> Overwrite [Whatever the file name was].  Congrats, you now have a cover.  The final step is to save it as a high-quality PDF (File -> Export as, select Portable Document Format) and you’ll be ready to go for CreateSpace.

And there you go.

See, that wasn't so bad

See, that wasn’t so bad

Cover design made easy

Edit Jan 10, 2016. The final designs for Henchmen, Arise, and The Clock Man are displayed in the Get Your Copy of … widgets. This post was written before The Clock Man was done and before I got crazy and re-re-re-redid the other two.

Cover design hasn’t come easy for me.  I’m a relentless tinkerer with just enough design skills to be dangerous.  I have zero illustrative abilities, though.  In college I took draphic design and illustration classes; I did fairly well in graphic design but passed illustration by the skin of my teeth.  My first cut of the cover for Henchmen was so bad it never saw the light of day.  That one was revised into my Henchlife logo, which also didn’t make the cut, although I might still get it as a tattoo.

Yuck.

Yuck.

 

The first design I used was weak at best, but good enough for jazz and government work.

HenchmenUSFlag

A little too American Flag-y and pretty boring but okay enough.  Never settle for okay enough.

 

it went through three more revisions before I settled on the current cover.

What was I thinking?

What was I thinking?

HenchmenCoverFix

First iteration of the crop circle cover

 

May cause unexpected awesomeness in readers

May cause unexpected awesomeness in readers

© 2015, Eric Lahti Background image: ID 30553123 © Pixattitude | Dreamstime.com

© 2015, Eric Lahti
Background image: ID 30553123 © Pixattitude | Dreamstime.com

The final version kept some of the comic book feel that was much of the inspiration for the book, but added a bit of realism.

A lot of the problem I ran into was I had the book done when I started the cover.  I don’t know if this is the traditional way to do it or not but, as you can see, it didn’t exactly work for me, I was just too antsy to get it published.  Truth be told I’m still not 100% satisfied with the final cover but I’ve been forcing myself to slap my own wrists when I think about changing it.

For the upcoming Clock Man I started early.  Back in January as I recall, and have been tweaking and changing and modifying it as I had the time and the inclination.  For the most part, I’m happy with it now, but I’ll probably do a bit more tweaking before it goes out.

In the interest of everyone else who’s stuck designing their first cover and wonder just what in the name of Almighty Odin they’re going to do, let me give a few tips.  It’s possible to do it yourself and make it look decent, but it does take time.  The first thing you’ll need is a vector drawing tool and an image editing tool.  Microsoft Paint won’t cut it; you need some tools with some horsepower and you might need to set aside some time to learn how to use them.  I currently use GIMP and Inkscape, two powerful (and free) open source image tools.  By the way, links to all this stuff are at the bottom of the post.

Once you’ve got the tools you need an idea.  Find something about your book that can be translated graphically and start scrounging up what you’ll need.  In the case of the Clock Man I had a pretty good idea of where the story was going before I even started it.  Since it’s the title piece in the group I started looking around for gears, clocks, and other mechanical looking things.  At one point, I was going to build the logo around the Prague astronimical clock and found some good clip art to use, but ultimately abandoned it.  It came out looking steampunky and that wasn’t what I was going for.

I do most of my image searching on Dreamstime.com, a stock image warehouse of sorts.  They have multiple plans and costs for images but what I do is buy the $40 package that lets me get any five images I want.  I then proceed to download the biggest versions I can find, usually the big .tiff files.  Always get the biggest files you can find and verify the dpi is 300+.  Everything I’ve found on Dreamstime has fit the bill, but it’s still worth checking.

I stumbled across this and knew it would work with some editing.  This image is resized and converted to .jpg.  The original tif image is 6882×3903 and weighs in at 77MB.

42949420 © Skypixel | Dreamstime.com

42949420 © Skypixel | Dreamstime.com

It had essentially what I was looking for, but would require some fixes to make it work.  The first step was to isolate the face I wanted and get rid of the rest of the picture.  GIMP made that part easy.  When I make the print cover, I’ll have some more work to do, but for the ebook cover this will work well.  The edit gave me this.  This image is sized correctly for Amazon publication.  They recommend 1563X2500 or larger.  That comes out to a .6252 ration of width to height.  As long as you’re working in that range you’ll be fine.

ClockManCoverMainImage

At first I thought about cropping out the white space at the top and working with a full face for the image, but that proved unworkable since my text would obscure the face.

Already has some color correction done on it.

Already has some color correction done on it.

The problem with not using the full face was the damned white space at the top of the image.  Early cuts of the cover left that intact, but it just didn’t look good with the text over it.  The first thing I tried was converting the white to another color.  There’s just enough fuzz around each of those gears that I would have to create a masking layer by drawing around each one and converting the lines to a selection.  Had I gone that route I would have spent about a year drawing the selection manually around the gears and then wound up with a large chunk of <other color> space.

It still would have been rubbish.

The solution was to select the white with a color selector tool, invert the selection, copy it, and paste it as a fresh layer on top of a transparent background.  Then, I selected a portion of the gears that didn’t have the face, turned them 180 degrees and pasted them under the main image.  The effect worked nicely because the image is busy enough the seam doesn’t show very much.

Then, flatten the image, copy it and paste it three times.  Each pasted layer got a little work.  One had an edge detect filter run on it then that layer’s opacity was set to 50%.  This brought out some of the lines in the image.  The next layer was pixellated and faded to 55%.  This softened the image.  The final layer had video lines rendered onto it and was faded to 20%.  The whole effect kept the face visible but softened the image.

ClockManFixedImage

 

So, I’ve got the background, but it’s terribly busy so any text is going to have to stand out and stand out well.  This is where Inkscape comes into play.  I set up a document in Inkscape and embedded the background image in it.  You can do font work in GIMP but it’s a terrible PITA; stick to the vector programs for font work.  Rather than falling back on Impact, I wanted something different so I set out to search for a font with no real parameters other than I wanted it to look cool.  I settled on Lakmus; it has an almost 70s sci-fi charm to it.  With a bit of playing I finally got the look I wanted.  BTW, if you’re looking for a way to do the glow background in Inkscape, it’s actually two layers.  Get the font the way you want it (the final image’s Clock Man logo consists of five different parts, each layered on a different five parts), copy and paste it.  For the pasted image look in the stroke properties  Get a thick stroke and blur it.  Then layer the main font over the blurred font: voila! Glowing text.

The Chinese font is Noto Sans CJK SC Black.  That’s the font Google uses when you use their English to Chinese translation.  Once I had the translation I wanted and the font downloaded, Inkscape handled the Chinese characters quite nicely.  The big Yin/Yang symbol that makes up the O is a vector I found on Vectorstock.com.  I prefer to work with vectors whenever possible because you can scale them and manipulate them so easily.  It cost a dollar.

A bit of tweaking, add the author name, the “and other stories” line, and a reminder of what else I’ve written and I came up with this.

Clock Man cover design rev 6.  ©2015, Eric Lahti.  Background image © Skypixel

Clock Man cover design rev 6. ©2015, Eric Lahti. Background image © Skypixel

Like I said, there will likely be more mods before it gets published, but I’m liking it so far.

So, if you’re staring down the barrel of having to create a cover on your own, it’s not exactly rocket surgery and it doesn’t need to cost a fortune.  All told I spent $9.00 on the images and software necessary.  The cover for The Clock Man might not win any awards, but I have to admit I think it looks pretty cool.

Next time we’ll take a look at the guts of formatting a manuscript for upload to KDP using MS Word, Calibre, and Sigil.

Lakmus Font

Google Fonts

Google Noto Fonts

VectorStock

Dreamstime

GIMP

Inkscape