DIYDay Lesson 21: Graphics Editing – The Evolution Of A Book Cover

There are gifted individuals out there who can sit down at a brand new task and instantly excel at it. The rest of us learn by trial and error. And if we (yes, I’m mostly speaking about myself here) insist on going it alone, there is a lot of trial and error. What I’m sharing today is the evolution one of my self-made covers has gone through. It wasn’t the only one, by any means, but it was the one with the most revision. I do this to show you that sometimes stubbornness, perseverance, and versatility pay off. Most of the time, actually. Sit back, relax, and watch me screw up.

A lot. And then finally get it right. I give you…

 

Continue reading “DIYDay Lesson 21: Graphics Editing – The Evolution Of A Book Cover”

Advertisements

DIYDay Lesson 19: Excerpt Graphics

Another late post (sorry!!) but I wanted to get this info out there ASAP.

If you’re on any form of social media and following an author, you’ve seen excerpt graphics before. They are basically pictures with text over them, sometimes info about release dates, the book cover, etc. Some are so great you look for the Buy link only to realize it’s still “coming soon!” And some you can barely read. In terms of marketing value, excerpt graphics are right up there with cover images. They make a huge first impression. I’ve done a fair number of these as well, and I’ve learned a trick or two from all the greats, the not so greats, and my own experiences. This is a quick guide on how to catch your audience’s eye.

Continue reading “DIYDay Lesson 19: Excerpt Graphics”

DIYday Lesson 10: GIMP 103: Patterns

PatternsI reiterate here, if you have not read this post on Stocks and Resources, please read before continuing. This lesson is about patterns. I use them sometimes, but not very often. Patterns are basically tileable brushes you dump onto a layer with Bucket Fill rather than click by click. You can also use them in certain filters/scripts to add texture to your image. More on that later, as I have just recently discovered this.

To install a pattern is not that different from installing a brush. Patterns will be files you move to a specific folder and they will automatically populate in GIMP when you start it or refresh the screen. In Windows 7, this will be in the following directory: (C:)–>Users–>YourUserName–>gimpX.X–>patterns (substitute X.X with the latest version you have installed).

TextureMate Website and its offerings
TextureMate Website and its offerings

Once a pattern is installed, what you do with it is up to you. Each pattern or pattern set will be sized differently. This website offers free brushes and patterns for you to use. There are tileable squares but also high definition images which are basically details of different textures. It is a versatile website for a lot of things and it’s definitely worth checking out.

So what do you do with patterns? One cool thing to do with them is to create a background for a website. Because it’s basically impossible to predict the size of screen someone will be viewing your website on, you can do one of the following:

  1. Use a flat color background
  2. Use a small image positioned in a specific place and hope it shows up correctly
  3. Use a huge image and hope it will scale as big as necessary to cover the whole screen
  4. Use a tiled pattern background
This is a tileable image. Put a bunch of them in rows and columns and you have a lovely textured background.
Tileable image. Put a bunch of them in rows and columns and you have a lovely textured background.

If you’re using WordPress, numbers 1 and 4 are your best bet. Why? because some themes make the background of your posts transparent, which makes the default background for your website show through. In that case, it’s better to use a flat color background because a pattern will make your text difficult to read. There are also themes which give your posts a background of their own (either solid or semi-transparent). You can see that right here. If you’re on a full screen monitor, scroll down to the edge of my widgets on the right. Where they end, the background begins. It’s black, but my posts are on a white-ish background on their own so they are readable. In this case you are safe to use a patterned background.

In order to make a tiled background in WordPress, all you need is one square tile of your chosen pattern. Look closely at the specifications of the patterns you download and install. They should give you the size of the tile. That will be the size of your canvas. You use Bucket Fill on the canvas with your pattern (which should produce exactly one tile) and export it as .JPG or .PNG. In your WordPress Dashboard, upload your image on the background screen and set it to tile vertically and horizontally. The image will be small enough to load quickly, but it will fill the entire screen no matter what size it is. Yey for simple solutions!

DIYday Lesson 9: GIMP 102: Brushes

Hi and welcome! You’re here, which means you haven’t been scared away by my last post. Awesomeness. This one will be solely dedicated to GIMP brushes.

GIMPGIMP comes preloaded with a handful of brushes–essentially the basics to paint with. Yeah, they’re cool and cute and fun, but if you really want to get into it, you will probably need to find some more brushes. If you have read this post on Stocks and Resources, you know how to go about it. If not, read it first before you go communing with the mighty gods of Google.

First thing’s first. How to install a brush (or brush set). It’s actually pretty easy. They’re not mini programs, but files and you just have to save them in the right folder. In Windows 7, this will be in the following directory: (C:)–>Users–>YourUserName–>gimpX.X–>brushes (substitute X.X with the latest version you have installed). Note that you are NOT going into Program Files at all and you never  will with GIMP. You can install brushes or patterns at any time, whether GIMP is running or not. If GIMP is running, however, the new brushes won’t appear until you refresh the brushes window. The same goes for fonts as well.

Brush tool is right under the "A" text tool and right next to the pink eraser tool
Brush tool is right under the “A” text tool and right next to the pink eraser tool

Once you have the brushes installed, you’re ready to go. There are different styles of brushes. Most work more like stamps. To use  a brush, first select the brush tool, and then select the type of brush you want to use. With the stampy brushes, all you have to do is click where you want it and it will appear on your layer. If you click the same place again, the stamp will be thicker. The more you click, the thicker it will be and depending on the brush you may not want to go too crazy with it. There is also a History window where you can undo something if you go overboard.

You can size the brushes but be careful of resolution. Not all brushes are meant to be stretched out to 2000 pixels. Always zoom in to 100% on your image to make sure the resolution is still good. A good thing to do is to put brushes on transparencies over your image. That way you don’t mess up the image if you make a mistake and you can try several different ones to see which is better without having to start all over again if you change your mind. Remember, layers are your friends. Don’t be afraid of them.

Also, if you have different layers, you can manipulate them with special effects. It’s always fun to experiment. =)

If you have Photoshop, note that you cannot use a Photoshop brush in GIMP. The file types are incompatible. I am sure there is a way to convert them, because it is possible to create brushes in GIMP, but I have not done it so I cannot tell you how to go about it. There are, however, tutorials out there and many brush sets come customized from Photoshop to GIMP or vice versa.

DIYday Lesson 8: GIMP 101: Open, Save, Layers and Tools

GIMP image
My best friend in image manipulation

This will be a first in the GIMP series. You’ve seen me write about it before and that is because this is one resource I cannot do without. I have tried Photoshop–a ridiculously expensive piece of you-know-what if I’ve ever seen one. They nickle and dime you for anything you want to add on or update, and it’s so convoluted I couldn’t figure out more than the most basic of things after a year of it sitting on my computer. With GIMP I was up and running in a week.

GIMP stands for GNU Image Manipulation Program (and GNU, in case you were interested stands for GNU is Not Unix… don’t ask…). It is available for Windows, Mac, and Linux operating systems. It is free and open source, which means you can use it without having to pay anything, and if you’re a programmer, you can also alter the program itself to do something different if you would like. A word of caution, it is a RAM-heavy application, which means if you have less than 1GB RAM you should not run it. Then again, if you have less than 1GB RAM what you need more than a program is a new computer.

Although GIMP performs most (if not all) of the same functions as Photoshop, it looks and works differently. If you’ve used Photoshop before and look at GIMP for the first time, don’t be scared! It really is fun and easy to use. Just take it one step at a time. If you’ve never used a program like this before and the words RAM-heavy freak you out, take a deep breath, it’s going to be okay. =) I’ll walk you through the basics and before you know it you’ll be a GIMPing pro!

For the purposes of these tutorials, all instructions will be for Windows operating systems because that is what I use. If you have a Mac or Linux computer, there are tutorials out there, so don’t be afraid to Google. This being a very basic intro class, it will be a most basic How-To for the simplest tools. I will have more for you next week.

So let’s get started!

Open

The GIMP Home screen
The GIMP Home screen

This is what GIMP looks like when you open it up. In addition you will have two other windows (toolboxes, see below). Do not close those. Take it from someone who’s done it. They’re a pain to get back.  To being, click on File –> New to open a blank canvas. You will get a pop-up asking for specifications. The default measurements in GIMP are in pixels. That is what most sites measure in also. If you’re not comfortable with that, you can change it to inches or centimeters. Enter the size you would like and click OK.

You can also open an image you have saved on your computer. Just click File –> Open and find the file you need in the browse window. Another cool trick is Open As Layers, which opens the image as a new layer in your current file, as opposed to a separate window. Don’t use this if you want to only use parts of the image. It creates an image-on-white layer, which means when you erase part of it, you get only white underneath and can’t see the bottom layers. To get it onto a transparency, open the image on its own, copy it, and then paste in your project on a new transparent layer.

HINT: When you paste something onto a new layer, GIMP allows you to manipulate it before it is “anchored” or attached to the layer. Until it is anchored, you will not be able to manipulate the other layers. When you anchor, the image automatically crops to the size of your canvas. This is not an issue, unless the image is larger and you later decide you like a different part of it more. To preserve the original size of the pasted image, click Layer –> To New Layer. This creates a new layer from your pasted image without cropping it.

Save

Saving in GIMP is a little tricky, but in a good way. By clicking File –> Save you save the project you are working on in separate layers, however many you have in .XCF format, only readable by GIMP. This is a cool new feature in the latest version. So helpful because it preserves everything in case you want to go back and change things. I can’t tell you how many times I accidentally saved something as .JPG and had to redo the entire graphic again from the start.

To save in a format you can post on a website or print, you need to Export or Export to. The most common image formats are .JPG, .PNG, and .GIF. Each is good for something different. For example, I use .JPG for covers because it is high resolution and all detail is preserved–it is optimized for printing which always requires the highest resolution image possible. But this format also creates a large file which is slow to load in a browser, so for website graphics I use .PNG. This compresses the file, makes it easier to load, and also preserves transparencies if you have them. But some of the details might not be precisely print quality perfect so if you want an image for printing, go with .JPG. The last format, .GIF, can be used for regular images. To be honest I am not quite sure what the difference is here. But I do know .GIF allows you to save animated images (ones that move or switch between one picture and the next).

This is an animated .GIF image
This is an animated .GIF image. It took me about 5 seconds to create using Filter –> Animation –> Ripple. I Exported as a .GIF image and saved as animation. You can see around the edges of the glow that the gradient isn’t very smooth. That is because by saving the animation, some other information was lost.

HINT: The more you compress something, the less detail it has. Image resolution tells you how much detail is saved. In simple terms, if you zoom in on a picture, is it still sharp? How about if you zoom in more? Resolution can be measured in pixels per inch and the more you have the better the image will look, but the larger it will be. For print purposes, larger is better, because small images do not stretch well (they blur or pixelate). However, for websites, a large image can make your page slow to load. You don’t need super high resolution images on your site unless you are making an image portfolio. For things like buttons, banners, decorative touches, etc. it’s better to have smaller, more compressed images.

Layers

LayersOne window in one of the toolboxes is Layers. Layers make cool graphics possible. They let you add elements and integrate them together, move them around together or independently. When you create an animation like the one above, you essentially create a bunch of different layers that cycle through and “animate” your image.

As you can see here, you can have many layers. The checkered pattern indicates that layer is transparent. When you paste something onto it and erase a part, the layer beneath it will show through. The Background layer in this example is a white background layer, when I paste something onto it and erase a part, only white will show through regardless of how many layers I put beneath it.

Mode lets you set how the layer behaves with the others. I most often use Normal and Overlay (This superimposes the layer onto what’s under it, with interesting results). Opacity is how transparent you want the layer to be. 100% means all you see is the top layer. 0% means the top layer is invisible.

Speaking of invisible, see that eye symbol? If you click it it disappears and that layer becomes invisible so you can see what’s underneath. See the blank space between the eye and the mini layer? If you click it a chain image will appear. Click it on another layer and it will lock those layers together so when you move one, the other moves also. Great tool when you have the perfect grouping of texts in the wrong location. Move one and they all move. Easy!

HINT: Depending on what you paste onto a layer, it might not be the same size as your image. This is fine while  you’re working with the image, but to export it, it’s best to have all layers the same size. It trims unnecessary information and makes the file a little smaller. One trick is to click Edit –> Copy Visible and then create a new canvas with the same dimensions and paste there. That “flattens” the image (sticks all individual layers together) and makes it one size.

Tools

ToolsThere are many. I use some, but not all. This is the third window you will work with. Select tools are awesome. You have five of them, the first row of icons and the first one in the second row. The cool thing about them is that when you select an area on one layer, unless you click elsewhere to deactivate the blinky dotted outline, the selection carries to every other layer. So let’s say I have a square on my background layer. I select it, then click on the topmost layer. The same area is still selected. But when I use Bucket fill to paint it blue, it’s on the top layer, and my square in the background is still the same.

Move tool (the four-directional arrow) does exactly that. Crop (the one that looks like a knife, 3rd row, 2nd icon from the left) will crop your entire canvas, so don’t use it if you just want to make one layer smaller. For that, use the eraser tool. Rotate, Perspective and Shear are great for manipulating different layers to get just the right look. The Text tool lets you add in text (which creates a new layer so don’t worry if you mess up). GIMP automatically searches your computer on startup and imports all the fonts you have on your computer. Can’t find the right one? You can always find more online.

Bucket fill is a fun one. You can fill in selections or whole sections with flat colors or with patterns. This is one thing that is worlds easier than Photoshop. You just select the bucket tool and then make sure you fill the selection with Pattern, rather than Foreground color. Click where you want to fill and voila! Easy as pie.  Brushes are a topic onto themselves, so they will be elaborated on later. The clone tool lets you copy parts of an image and paste not in chunks, but with a brush. This tool tends to be overused when people don’t know how to use the other tools and filters. I did it in Photoshop a lot. I haven’t done much in GIMP. Blur tool blurs with a brush (there is also a blur filter which applies to the entire layer and can add cool effects).  Smudge does exactly that and a Spot Healing brush does something really cool which I have no idea how to define. It’s like a clone stamp, but not. It integrates one part of the image into another seamlessly.

Wow, that was a lot for an intro. Take a breather.  It may seem impossible at first but, trust me, GIMP is addictively easy. You’re going to love it. If at any point in time you get confused about how a tool is used, don’t despair. The Help button takes you to an easy-to-read online manual where you can find more instructions. If there is a special effect you want to create, type it into Google. Odds are you will get tons of results for manuals and videos on how to create it.

One last hint: If you use images in your creations, always use high resolution images and always make the canvas larger than you think you will need. You can easily make a big thing smaller, but a small thing won’t stretch easily into a bigger frame.