Skip navigation

WordPress School: Header Art Images

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the first article in this mini-series on learning how to create images for WordPress header art, call-to-action images, and add text to images for your site’s design elements, I covered the basic tools and materials you will need for these tutorials.

In this tutorial, you will learn simple basics for header art, specifically how to create your own custom header art image and how to use an existing image or photograph and add text to the header image.

You will need to know the recommended width and height for your header art image. For the second part of this tutorial, you will need one or more images such as photographs, graphics, logos, branding, or other design elements.

To create an image from scratch requires imagination and experimentation. You could draw pictures, scribble, or do whatever your graphic arts skills permit.

Creating an Original Custom Header Art

Notes On Pixlr

Lorelle WordPress School Tips and Techniques Badge.Pixlr is a fairly powerful free online image editing and creation tool. It is built in Adobe Flash and requires the Flash Plugin activated on your web browser or mobile app.

You have the ability to add layers and use many features found on graphic software programs, but it is a bit tedious to use as it requires precise series of actions to make things happen.

For instance, you cannot just click on a design or image on a layer without selecting the layer first. To move text or images, while you may do so while working on them, you need to click the Move tool to move things. You must click some tools repeatedly to use them in series.

Be patient and experiment. Pay close attention to the Layers and History to note where you are and the actions you have implemented.

In this example, I will create header art from scratch on Pixlr and add text for the name of the site.

I wanted to keep this original header art project simple, so I came up with a site title, “The Splatter of My Life on the Web.” The site title influences your artistic decisions and what could be easier than a little spilled paint to represent this test site’s header art.

Begin by determining the size recommendations for the WordPress Theme. You should still be using the Twenty-Eleven WordPress Theme. The size recommendations for the header art is at least 1000 pixels width, 288 pixels height.

Images - Header Art WordPress Theme Size Recommendations on Appearance - Header Art - Lorelle WordPress School

In the Pixlr Editor, go to File > New or choose Create a New Image from the opening menu.

Images - Pixlr Interface and opening screen - Lorelle WordPress School

The New File menu offers a variety of template sizes to help you get started. Choose one close to the desired width and height, then adjust to your desired settings.

Images - Selecting the size for the custom header art using the template sizes in Pixlr - Lorelle WordPress School

In this case, 1000 x 288 pixels for our original custom header art.

Images - Custom Header Art setting the size in Pixlr - Lorelle WordPress School

Click Okay and Pixlr will display the blank canvas.

You may resize the image screen section to meet the needs of the width of the image by clicking and dragging the lower right corner. You may also move the various modular menu options on the screen like the Tools, Navigator, Layers, and History.

Zoom in or out and adjust the screen to maximize your working space.

Now take a moment to inspect the working area.

Images - Pixlr Interface - Lorelle WordPress School

At the top is a row of familiar menu options including File, Edit, Image, Layer, etc., ending in the famous Help menu.

Below the menu is a status bar. It will alert you as to the tool selected and offer options to customize the tool as well as error messages.

To the left is the Tools section. Hover over each one to see the name of each tool. Click on them to activate them. If the tool has customizable options, they will appear on the status bar below the main file navigation bar.

On the bottom of the image is the image dimensions and a zoom percentage count.

To the left is the Navigator for zooming and positioning, Layers for vector and raster layers, and below that is History that tracks each step in the process, allowing you to move back and forth within the actions and undo them.

In the bottom of the Tools menu is a color setting area.

Images - Selecting the colors for custom header art on tools in Pixlr - Lorelle WordPress School

Click on the large color swatch and the color wheel will appear. Set the first color of choice. It may be any color until you have a feel for what you wish to do.

Images - Selecting the colors for custom header art in Pixlr - Lorelle WordPress School

Once chosen, if you then click on one of the smaller color swatches, the main color will switch to that swatch, preserved for when you need it. Continue to add colors if you wish. I added some basic colors then added more as I went along with my header art experiment.

You may leave the background white or change it. I wanted it to be a soft green-bluish pastel.

To change it, choose the color, click the Fill Tool, a paint bucket, and click the canvas.

Images - Using Fill Tool for custom header in Pixlr - Lorelle WordPress School

To add color and paint the canvas, set a color then choose the Paintbrush Tool.

Images - Choosing the Paintbrush tool in Pixlr - Lorelle WordPress School

The Paintbrush Tool does more than just paint on the canvas. You have the ability to select a design element and stamp it onto the image.

The default design options are nice, but I wanted splatter. Click on the MORE and scroll down the drop down menu to find more options and click Add to add them to your paintbrush options.

Pixlr doesn’t add all the paintbrush options as you may not need them and they do take some memory power in the browser to store.

Images - Choosing a Splatter Brush by adding new options in Pixlr - Lorelle WordPress School

I found some splatter effects and added them.

I clicked on the various choices, then moved my mouse out over the canvas to see the size and outline of the shape of the splatter effect until I found one I liked. Use the slider labeled Diameter to set the size of the paintbrush shape.

Images - Choosing a Splatter Brush for Custom Header Art in Pixlr - Lorelle WordPress School

With purple, I stamped the paintbrush on the canvas.

Note that on the status bar above, you can change brushes, adjust the opacity, and select from three different effects. Click the Brush item to adjust the diameter and spacing for the image if necessary.

Images - Adding first splatter brush layers to Custom Header Art in Pixlr - Lorelle WordPress School

I continued with different splatter brushes in other colors.

Images - Adding splatter brush layers to Custom Header Art in Pixlr - Lorelle WordPress School

It was trial and error, just experimenting with different splatter brushes and colors to see what would happen. I left the upper right area clear for the text I would add next.

With some orange, yellow, green, and blue splatters, I thought I’d splattered enough.

Images - Custom Header Art ready for adding text layer in Pixlr - Lorelle WordPress School

It was time to add text to my original header art.

Click on the A for the Text Tool. Click on the canvas to start adding text.

Type in the text. Note that the text will not not automatically wrap. You must hit the ENTER key where you wish line breaks to appear. Also, don’t try to put all the text into one text area. If you need to control the spacing and positioning of different text, create each one on its own layer.

Images - Custom Header Art Text Layer Adjusted and Changed in Pixlr - Lorelle WordPress School

Don’t like the color, you can easily change it by clicking the color option in the Text Menu.

Images - Adjust the text color in Header Art in Pixlr - Lorelle WordPress School

Choosing a font is challenging. Pixlr loads the fonts from your computer not from their own collection, so you are limited to your fonts. Don’t have the right font, there are many sites offering free downloadable fonts on the web.

Tip: To test various fonts, set the size and spacing of the words so you can easily see them and move the Text dialogue menu box out of the way. Click on the font drop down and move up and down with the arrow keys to watch the fonts change as you move through the list. The scroll jumps up and down the list and arrows offer finer navigation.

When you find a font that works with the image you’ve created, select it. Adjust the font size, style, and color. You may even change the alignment to left, right, or center.

Images - Setting the Text Alignment in the Header Art in Pixlr - Lorelle WordPress School

If you click away from the Text menu or wish to change the font later:

  1. In the Layer module, select the layer with the text you wish to change
  2. Click the Move tool to move the image around on the canvas
  3. Click the Type tool and carefully click the text you wish to change to bring up the Text box. If it doesn’t show the words in the Text box, click Okay, and try again.
  4. Change the text, font, and other styles and click Okay to save the changes

Just remember that you must have that layer selected in order to make changes on it.

Images - Adjusting the Header Art Text and Size in Pixlr - Lorelle WordPress School

The History module tracks each of your actions on the canvas. Wish to go back, click the action further back on the list. Wish to undo your attempts, click on the previous action or use CTRL/CMD+Z to undo.

You may undo your actions as far back as the History tracks.

Images - Layers and Undo History in Pixlr - Lorelle WordPress School

I moved the text around and experimented with different positions until I was satisfied.

It’s time to save the image for uploading to WordPress.

Choose File > Save in the menu.

Images - Save image to hard drive in Pixlr - Lorelle WordPress School

The save menu gives you many options.

You may save to your computer’s hard drive, recommended, or save to your Pixlr library (requires registration), Facebook, Flickr, or Picasa (associated with Google+). Choose to save to your hard drive.

Type in the name if you wish to change it from your first attempt. Be very specific with the image title and use spaces not underlines in the file name if necessary.

Images - Save image as JPEG or PNG options in Pixlr - Lorelle WordPress School

The Format could be JPEG or PNG as this image isn’t a photograph and doesn’t demand high color resolution. I clicked between the two and the file size changed at the bottom to give me an idea as to the final file size.

If you choose JPEG, you have the option to set the Quality of the image. This graphic editor takes the image at 100% top quality and optimizes (reduces) it down from there. 80% is a 20% reduction, and 20% is an 80% reduction. The lower the number, the poorer the quality of the image resolution.

Images - Setting the JPEG optimization in Pixlr - Lorelle WordPress School

The final result?

Images - Header Art Project - Lorelle WordPress School.

This is now ready to upload as header art for the site.

Creating Header Art with Photograph and Text

There are many ways to add text to a photograph and customize it as header art. The image may cover the whole header image area or a section.

Images - Photograph and Text on Header Art with background color - Lorelle WordPress School

Again, check the header art recommendations from the Theme. Know where the image you wish to use is stored on your computer.

In Pixlr, choose Open image from computer.

Images - Header Art with Photography - Upload image from computer in Pixlr - Lorelle WordPress School

I’ve chosen an image of my foot stepping into a pile of leaves in autumn.

The image is vertical. The header art image is horizontal.

To rotate the image in Pixlr, select Image > Rotate Canvas and rotate in the direction you wish.

Images - Header Art with Photography - Rotating Photograph to horizontal  in Pixlr - Lorelle WordPress School

With the image laying in the right direction for my header art, notice the image dimensions are larger than I need for the header art, which is good, but I need to resize the image or crop it to meet the header art dimensions of the WordPress Theme.

Images - Header Art with Photography - Preparing to Resize Image in Pixlr - Lorelle WordPress School

I’ve decided to do a two step process to change the size of my photograph to meet the header art size.

First, I’m going to resize the image width to 1000 pixels, the recommended header image width.

Go to File > Image Size and set the width, not the height, of the image. If Constrain proportions is checked, the height will automatically adjust.

Images - Header Art with Photography - Setting the Image Size in Pixlr - Lorelle WordPress School

With the image set to the right width, I’m going to crop the image to the 288 pixel height.

Select the Crop tool and draw a box around the area you wish to crop. A grid will appear across the image.

Images - Header Art with Photography - Setting the crop tool in position and width in Pixlr - Lorelle WordPress School

In the Status bar above, you can type in the 1000 width and 288 height, then click and drag the grid crop box to the right position across the image.

When ready, click the Crop Tool again. A dialog menu will appear asking if you wish to apply changes or not. If you are happy with your positioning, select yes.

Images - Header Art with Photography - Confirm Crop in Pixlr - Lorelle WordPress School

The image is now sized to match the Theme’s header requirements and ready to start adding text or changing the look and feel of the photograph.

Images - Header Art with Photography - Cropping Image with Crop Tool in Pixlr - Lorelle WordPress School

Let’s start with adding the text.

Select the Type Tool and follow the instructions from the previous example to set the font.

I experimented with different colors for the font. If you select the Color option, a color chart appears, but you can also move your cursor over the image and hold down the CTRL/CMD key and the cursor will become a dropper. Holding down the key, click on the image to select the color in that spot. Not happy, move around selecting other colors until you find one right or close. Once selected, release the CTRL key and you may adjust the brightness and tone of the selected color in the color tool.

I decided to stay simple and go with white as I wanted the words to stand out from the leaves in the background.

Images - Header Art with Photography - Adding Text Layer in White with Site Title - lost in leaves -  in Pixlr - Lorelle WordPress School

It was a good idea, but didn’t quite work. The white text is still lost in the image. I decided to create a shadow behind the letters to make them stand out.

Most graphic programs offer a one click feature to add a shadow to text or graphics. I experimented with the built in shadow effect on Pixlr and was unhappy with the result. To use it, select the layer with the text you wish to create the shadow from. Go to Layers > Layer Styles > Dropdown Shadow.

I decided to create one manually to have more granular control over the shadow.

  1. Click on the layer with the text you wish to create a shadow
  2. Go to Layer > Duplicate Layer
  3. Select the Type tool and select and edit the new layered text and move the text layer away from the other text so you can work with it.
    Images - Header Art with Photography - Moving Duplicate Layer of text in prep for shadow in Pixlr - Lorelle WordPress School
  4. Select the words and change the color to black or a lighter dark tone
    Images - Header Art with Photography - Changing text color to black in Pixlr - Lorelle WordPress School
  5. Click Okay to set the changes
  6. Go to Layer > Rasterize Layer. To add a filter effect, the layer must be raster not vector.
    Images - Header Art with Photography - using Rasterizing Layer tool to allow blurring of text in Pixlr - Lorelle WordPress School
  7. Go to Filter > Gaussian Blur
    Images - Header Art with Photography - Adding Filter for Gaussian Blur in Pixlr - Lorelle WordPress School
  8. In the resulting dialog box, experiment with the amount of blur with the slider and click Okay when ready
    Images - Header Art with Photography - Setting the Gaussian Blur in Pixlr - Lorelle WordPress School
  9. Select the Move tool and click on the blurred text to move it around to position it. You may end up on top of the other layer of letters. Simply click and drag the layer in the Layer box below the unblurred text layer.
    Images - Header Art with Photography - Shadow Layer over Text in Pixlr - Lorelle WordPress School

This may take some time and experimentation to align the shadow layer behind the words to make them appear to float over the image underneath.

Images - Header Art with Photography - Shadow behind text set in Pixlr - Lorelle WordPress School

I still wasn’t happy with the way the words were still a bit lost on the busy photograph. It was time to experiment.

I clicked on the image layer (background) and played around with filter effects in Pixlr.

This is the sepia effect.

Images - Header Art with Photography - Changing Filter to Sepia on Photograph in Pixlr - Lorelle WordPress School

This was lovely but not quite right.

I used the Adjustment menu to darken the image using the Brightness and Contrast.

Images - Header Art with Photography - Adjusting photo brightness down in Pixlr - Lorelle WordPress School

Closer but a little too intense.

What I wanted was to screen the image back so it was slightly darker, pushing it back into a recessed effect, allowing the white of the letters to jump out more.

I added a new layer. Once added, on the Layer modular menu, I moved the new layer between the text and the photograph.

Images - Header Art with Photography - Adding New Layer in Pixlr - Lorelle WordPress School

Using the Fill tool, I selected black as the color and set the opacity of the Fill tool to 11%, barely visible, but enough to do the job. It took some experimenting with the opacity and undoing the fill to find that was the right amount.

Images - Header Art with Photograph - Adding Fill Layer between text and photograph in Pixlr - Lorelle WordPress School

I was now happy with the image and text overlay. It was time to add the tagline.

Using the Type tool, I added the tagline “Living life in recovery.”

Image - Header Art with Photo - adding tagline in Pixlr - Lorelle WordPress School

Just as I did with the site title text, I created a shadow layer under the tagline to emphasize it. It was now ready for saving. I saved it as a JPEG, experimenting with the optimization to keep the file size low while maintaining a good resolution and detail in the image.

Images - Header Art with Photograph - Adjusting the shadow layer of tagline - Lorelle WordPress School

The end result of all that work and tweaking?

Images - Header Art with photograph and layer of text in Pixlr - Lorelle WordPress School

A nice visual that supports the purpose of the site.

Assignment

Lorelle's WordPress School Assignment Badge.These tutorials are designed to create experimental images for your site. It’s up to you to use them or just learn from the process.

Your assignment is to experiment with these different methods and, if desired, change the header art on your test site.

If you choose to use the images you create in these tutorials, please find the appropriate assignment post on our WordPress School Google+ Community and describe your experience and post a link to the post, or comment below with a properly formed HTML links so other participants can see what fun you are up to in this course.

The next tutorial in this series will focus on creating an image with a text overlay, using a quote as an example.

Image Lessons Article Series

Image Lessons is a mini-series within Lorelle’s WordPress School to teach you the very basics of how to create and modify images for your WordPress site.


This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


6 Trackbacks/Pingbacks

  1. […] « WordPress Lessons: Header Art Images […]

  2. […] WordPress School: Pageviews WordPress Lessons: Header Art Images […]

  3. […] on creating images for your WordPress site, we’ve covered the basics, experimented with two ways of creating header art from scratch and with text overlaying a photograph, and learned how to put text on images for […]

  4. […] helping you learn how to create and use graphic images in your WordPress site, we’ve covered header art images, adding text overlays to images, and made a call-to-action graphic with a link wrapped around it, […]

  5. […] WordPress School: Header Art Images […]

  6. […] WordPress School: Header Art Images […]

Post a Comment

%d bloggers like this: