Thursday, March 22, 2012

13 Simple Steps to Creating an Author Banner by Kayelle Allen

Popular Banner Sizes (chart). 
Banner sizes vary (see chart) but for the most part, authors want a standard size for their books. I'll discuss other options and uses in an upcoming post. I suggest you read all the directions before starting.

This material was shared in a slightly different format on Marketing for Romance Writers. This group is a center point for workshops, advice, and shared promotional opportunities. You can learn more here. http://groups.yahoo.com/group/MarketingForRomanceWriters/
Or visit the Facebook group page here. https://www.facebook.com/groups/mfrwauthors/


1. To make a standard sized banner (468x60) begin with a rectangle 1404 pixels by 180 pixels, and set the resolution to 300 dpi.
2. If your program makes "layers" set the first one as your background. We'll assume this one is light. Use the "bucket" icon to fill it with a color from the program's palette.
3. The second layer will be your logo, book cover, or some other graphic.
4. Create a layer for text and enter your name. Use as much space as possible to make it easy to read when you shrink the banner (which will be 2/3 smaller).
5. Make another text layer for your website. To save space, on this version, use the short version (i.e., KayelleAllen.com) Use upper and lower case. It's easier to read in small print, which this will be when finished.
6. If you can arrange all of these items to fit on one visible layer, then you're finished and you have a static (non-animated) banner. If you can't make them all fit, you can make an animated version.
7. Assuming everything fits, save the document, and then look for the option to "Save for Web." In the "Type" section, choose GIF or PNG. They are smaller in byte size than a JPG or JPEG and have more clarity.
8. Making your banner in more than one type will allow users to pick what they prefer for their site.
9. If your first banner was light-colored, now is the time to change the background color by using the "bucket" icon and filling it with a dark color.
10. Ideally, make one banner with a white or cream background, and one with black. These are not the only background colors on web pages, but they are the most common.
11. You may also need to change the color of your text. Do this by selecting the text, then clicking on the color you want in the palette. Save again using the same principles as above.
12. Consider a 1 or 2 pixel border to set your banner apart from the background. To create this, select the brush icon, set the size to 1 or 2 pixels, and then move to one of the corners. Hold the shift key down, and drag the brush along the edge. The shift key ensures the line will be straight.
13. Change the size to 468 x 60 and click Apply. Save it, naming your banner in such a way that when you send it to people they can differentiate it from banners by others. If everyone named their banner "banner.jpg" how would anyone know whose it was?

Standard 468x60 banner

Helpful hints
Add DK or LT to the name of your banner so you can tell which is which when attaching them in email.
You can change the colors of a program's palette by double-clicking a color. Use the color wheel's sliders to create an additional or custom color.
Right click and download the image in this post and save it to your hard drive for reference. The image shows banners in their actual size.
- - -
About the Author
Kayelle Allen is the founder of The Author'sSecret, an author-support company that creates banners, logos, book videos, provides training, and phone support for social media. She is also an award-winning, multi-published author. http://kayelleallen.com

5 comments:

Meg said...

Fabulous, Kayelle!! THANK YOU. Now to figure this all out via a program (Word?) and JUST DO IT. ;-D

Kayelle Allen said...

I used Photoshop, but a free program called GIMP is wonderful and very similar. You can get it here: http://www.gimp.org/downloads/

Gem Sivad said...

Thanks Kayelle. Fabulous information and great directions.

~gem

Kayelle Allen said...

You're welcome, Gem. ^_^

Vivien Jackson said...

Great post, Kayelle. I guess Photoshop automatically optimizes nowadays. I, er, probably should upgrade. :)