Category - Monday Media

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

Displaying 1 to 1 (of 1 posts)