Tag - How-to's

Building Your Author Website – Part 4: Creating a Header Banner


Hell all! Welcome to this week's installment in the Building Your Website series. As I've mentioned in Part 1-3, building your own professional website is easier than ever. Once you've chosen your platform, as we discussed, and you've started designing it, you want to add your own graphics. Believe it or not, making your own graphics isn't as hard as it sounds. It only takes a little practice.

When it comes to the graphics on your site, it's best to have as much original content as possible. I create all my graphics, some of it from scratch, some using stock photos. I also always try to use purchased stock photos rather than free stock photos. If it's for graphics that will be used for a blog post or something small, then I tend to use free images and give credit. For you website's main header banner, you'll want something original, which means either creating from scratch or buying graphics. Compare stock photo sites, some are cheaper than others. Make sure to read the site's Term & conditions, as there may be restrictions on how they allow their photos to be used. Most won't allow you to take an image and turn it into a logo.

Dashboard > Appearance > Header. Where it says Select Image, you'll see your banner dimension.

Let's use Pixlr.Com and their PIXLR Editor (the one with the butterfly). Pixlr is setup very similar to Photoshop without the insane price tag. In fact, it has no price tag because it's awesomely free. When you click on the editor, the first window you get is a list of options from Create a new image to Use pixlr on your mobile device. We're going to choose the first option: Create new image. Now you'll get a box with settings. Enter your image name, the width of your banner and your height.

small_385047244For the sake of this tutorial, we're going to say our banner needs to be 980 x 350 pixels. We'll enter that into the Width and Height boxes and click okay. Now you see your white banner. So this tutorial doesn't run super long, we're going to make a simple romance banner using free stock images from Photo Pin. Let's say the color theme of our website is black and pink. I went to Photo Pin and in the search box, typed in 'romance'. One image jumped out at me right away.

I've downloaded the 'original' size which is big enough for our banner: 1172 x 1172 px. Now go back to your banner and using the little paint bucket tool, click on the banner and fill your space with black. (click to enlarge images)

Banner tutorial 1

Go to File > Open Image and find where you saved your image. It pops up in a new window. Learning keyboard shortcuts will make the whole process easier. But you can also do it through the menu at the top. Holding down the Ctrl button and hitting A will select the whole image. You'll see what one of my instructors used to call the 'line of ants' walking around all sides of your image. This means it's selected. Now hit Ctrl+C to copy the whole image. (You can also access these in the menu under Edit).

Banner tutorial 2

Okay, your image is selected, now click the top of your banner to select it. Hit Ctrl + V. The image has been pasted onto the banner, but the high resolution means it's crazy big. We need to re-size that sucker.

Banner tutorial 3

Hit Ctrl + T or go to Edit > Free Transform. You'll see a white line with small blue boxes appear around the image's original size. When you move your cursor over one of those blue boxes, you'll see your cursor change. Hover over the top left blue box and hold down the Shift key as you drag the box to make the image smaller. Holding the Shift key means your image will retain it's proportions, so no warping or stretching the image.

Banner tutorial 4

Here's what I re-sized it to and where I positioned it. Now double-click inside the image and it will transform to that size. If for some reason double-clicking doesn't work, just try to click on any other tool and a box will pop up asking you if you want to apply the changes. Click 'Yes'.

Banner tutorial 5

Now I want to add my author name and tag line. Click the Text tool on the left which is the A and click on your banner. A text box will pop up. Let's do my name first, since I plan to make the tag line a smaller font. Type your text inside the Text box and on the bottom right, you'll see it'll let you choose your color. When you click the color, the color picker will pop up. You can choose a color inside your flower. So position your eye-dropper over the flower and click anywhere. You'll see your text has changed color. Keep click inside your image until you find a hue you like. Click OK. Now you can change the font style and font size. Choose a font that fits with your sites theme. Make sure it's easy to read. I also chose Italics for the font. Now whatever font I choose, I'll be using in my other website graphics and author swag, to make it all look uniform. That's part of the process of branding. Once I'm done I click OK. Now with the arrow tool, you can position it to wherever you like.

Banner tutorial 6

Following the same steps as above, I made my tagline smaller, and for the color, I clicked throughout the stem of the flower until I found just the right shade to match. It's all about coordination. Now you can add a little description if you want underneath. It's up to you. Like I said, this is a super easy banner. If you have a busy background on your site, try and keep your graphics and header banner simple. If you have a simple background, you can have busier graphics, though try not to put in too many images.

Banner tutorial 7

Tip: When copy/pasting images with different backgrounds, try using the airbrush tool to airbrush sharp edges around the pasted image to give it a softer feel. Don't be afraid to use gradients.

Tip: Limit the font types to two or three at most.

photo credit: Vanessa Pike-Russell via photopin cc photo credit: mackenzie jean via photopin cc

Building Your Author Website - Part 4: Design

CCochetdesignHello all! Welcome to another installment of my series on building your author website. In this post we’re going to talk about the design aspect of your website. As an artist, the look of a website is one of the first things that jump out at me.  It’s also one of the most difficult parts to get right. But just because you can’t pay a designer (or aren’t one yourself), doesn’t mean you can’t have a snazzy looking site.

Now that you’ve decided on what pages to have and you’ve filled in your content, it’s time to dress up your site. Professional doesn’t have to mean boring, but you should keep in mind your website represents you. For some authors, meeting readers face to face isn’t always possible, so you want something that reflects who you are as an author, which brings me to:

Author Brand

The first thing I had to think about before creating my website was my brand. This is what will require the most thought and shouldn’t be rushed. As you come up with your author brand, you should ask yourself several questions. Who are you as an author? What can readers expect from you? What do want to be known for? What kind of feel are you going for? What do you write?

Your author brand is something that will grow with you. When choosing your brand, think about what you’re promoting. My brand reflects me as an author and my writing. I love vintage and retro. It shows in everything from my clothes to my home décor. I have historical romances set in the 1920s and 1930s—though it’s not the only genre I write in, which is why I didn’t go for a full on vintage look for my brand. My romance leans heavily on the sweet side and my fellas always get their happily ever after. I chose a style with both soft and bold retro colors and fonts, but made them flat to give them a more modern edge.

If you’re a historical romance writer and don’t intend on writing another genre any time soon, then by all means, make that your part of your brand. Remember, you don’t want to have to change the whole design of your site if you suddenly change your mind and decide to write a different genre. If you need more time to figure out your brand but have to get your website up, you can still design your site. Here are a few things you need to consider:

Theme | Template

Whether you use Wordpress or Blogger or any of the many website building platforms, it’s likely you’ll have to choose a theme or template. Depending on your needs and how much control you want, will determine the theme you choose. I like having as much control over my design as possible, especially things like fonts, colors, and layouts. You’ll want to choose a theme that will allow you color options. I have very specific colors I use for my sites, so I’ve chosen themes that have color pickers or where I can input color codes. Wordpress has some fantastic themes that give you complete control on everything from the width of your content to your fonts to the color of your links with easy to use tools. I chose themes that require little to no coding.

If you’re on shared hosting (Hostgator, GoDaddy, etc, you’ll want to be mindful of your theme and plugins, because if your website uses too many resources and causes spikes in CPU, your site will be temporarily suspended until the issue is fixed. Believe me, you don’t want that kind of hassle. Having twenty plugins, a huge slideshow on every page, loads of widgets, and large image files may not be a good idea, not to mention your loading time will suffer.

Color Theme: I love to coordinate, as many of you may already know. Once I knew my branding and the look I wanted to go for, I set out to find just the right color swatches. As you can see on my website, I have three main colors which I use across the board for all my branding: white, teal, and coral. Everything from my banners to my avatars and email signature uses those three colors. For the THIRDS website, it’s black, white, gray, and blue. You want to keep it uniform. Even if your color theme is rainbow, you’ll want to pick one specific shade of each color to use on everything from social media icons to text. This will give your brand a clean, uniformed look.

Headers: I recommend themes that allow you to add your own custom header and background. If you’re creating your own header, make sure to check the dimensions of your themes header. You should be able to find the image in either the theme’s information or in your dashboard. For example in Wordpress, it’s located in your Dashboard under Appearance > Header. It will give you the exact size your header should be for your theme. Your header image needs to be thought out carefully. Will it be something you can use on your business cards? Will it include a logo? Your author tagline? Make you’re your landing page or front page has your name somewhere, whether as part of your banner or above it or below. You want readers to know where they are the moment they arrive.

PatternBackground: If you choose a theme where the content area and sidebar(s) are transparent, you’ll need a solid colored background. Keep in mind your readers might not all have 20/20 vision. Tiny text might look just fine to you, but what about your readers? I never go below 14pt for my main content. If you really want to go for an image or pattern with a transparent content are a and sidebar(s), make sure the background image is subdued enough for your text to be easily read.

textText: If your content area is dark, I suggest not using white text as that’s very hard on the eyes. I’ve come across websites that were completely black with bright yellow text. Sure it stands out, but after a few seconds of reading, my eyes couldn’t take it and I have 20/20 vision. Use a light colored text instead of white. For example on the THIRDS website, it’s primarily dark colors. Since the content area is dark gray, I tried to avoid white text wherever possible, using a lighter gray instead, so there isn’t a sharp contrast between the content background and text. If it’s information that will be digested quickly, white on black isn’t too bad, but it’s different when you have whole blog posts.

If you’re going to have a busy header image with a lot going on or a large quantity of images throughout your website, go for a solid color background, a subtle texture, or somewhat faded pattern. You don’t want your background image to overpower your content because that’s what draws readers to your website to begin with.

Sidebars: Don’t fill your sidebar(s) with unnecessary widgets. Do those swimming goldfish really need to be there? Try and keep the sparkling to a minimal. It’s not to say you can’t have any sparkly gifs or fun widgets, but what purpose do they serve? It’s okay to stick some fun or quirky widgets, but again, don’t let it overshadow your content.

Images: What kind of images do you want to display? Again it comes down to your author brand and your writing. If you’re a romance author, do you want erotic images all over your website? Will your website be safe for work? Do you want it to be? Don’t forget copyright! Finding an image on Google does not make it safe to use on your website. There have been authors who’ve been sued for using photographs without permission.

I know this is a lot to take in, but once you start playing around with your websites design features, it will get a lot easier. I think this is enough info for one day. On July 14th we’ll have Building Your Author Website – Part 4: Creating a Header Banner using free online image editing tools.


If you have any questions, feel free to leave them in the comments below.

Displaying 1 to 2 (of 2 posts)


Follow Charlie on Amazon.com

Appearances & Events

Romance Author Mastermind

Dec 03-06, 2020

Houston, Texas


Jul 16-17, 2021


Join Charlie's Mailing List

Join Charlie's mailing list to receive news on upcoming books, exclusive content, giveaways, first access to extras, and more.


Book List

Not sure where to start? Check out Charlie's Book List here.

Current Main Series

Join Charlie's Facebook Reader Group
Join Charlie's Facebook Reader Group

Out Now