Creating and Uploading Header Art In WordPress

Before you begin this tutorial, there are some prerequisites you already should have completed. You should already have an idea or foundation for your header. Your design concept, images, and logos should already be developed. The later portion of this tutorial will simply show you how to create the banner, set it to the recommended size, and then upload it using WordPress. If you are not already prepared, here are some basic suggestions to help get you to where you need to be in order to complete this tutorial.

Brainstorm

The first start to any creative process is to throw down all the possibilities onto paper. There are some obvious rules and guidelines to designing your idea. Your header should embody or accent your site’s purpose. How you choose to pursue this is up to you. I’ve always found writing down all the images, symbols, and words that come to mind when I think about my subject.

Research

Sometimes brainstorming can get you started, but you need the extra help in order to begin seeing how everything will come together. It’s not a bad idea to look up 5-10 websites who have banners that you like. Write down what you like about them and then try to think how you can incorporate that into your design.

Begin Drafting

Take your photos; create your artwork; pick your fonts and logos. If your site already has a color theme, you should try to match your graphics against it. If you like your graphics more than your color theme, then change your color theme to match your graphics. Either way, your header, color theme, and overall site structure should flow and fit together.  Your site, just like a room, needs to have a good feng shui.  You should always be thinking about your site as a whole while you’re making each individual piece. This could mean tweaking your work many times. My suggestion is to make as many different drafts as you can possibly stand and then pick the one that works the best.

For more design help and resources check out the following sites:

For more information on how to prep your images for WordPress check out this great article by Stephen Miller, “The Right Way to Prepare Images for WordPress.

Create Your Header Art

You can use many programs to create your header art. Adobe Photoshop is well known. I use Gimp to create and edit images because it’s free. It’s not as user-friendly as Adobe so, if you have the money, I recommend getting it. However, if you’re patient and resilient, Gimp will do just fine.

Once your editor is open, you want to make sure you set your canvas size to Width: 1000 Height: 288 pixels. This is the size settings WordPress recommends.

Screenshot of program GIMP with canvas size window open. Red rectangle frams the dimension cells.

Once the canvas is set, you can adjust and play with your images, fonts, logos, etc., until they are situated the way you like.  For this example I’ve thrown together a quick header sample for an education blog about Computer Science.

Graphic of a Computer Screen with words describing computer science.

Once the image is complete, you want to save the file. How you save the file will determine the quality of your image among other things. To keep things simple, we’ll go ahead and save my header art as a JPEG.

So Much Clicking:

Now that you’re image is created and saved, you can upload it into WordPress:

  1. Go to your Dashboard
  2. Click the icon that says “Appearance,”
  3. Click “Customize.”
  4. Click “Header”
  5. Click “Add New.”

Screenshot of WordPress Dashboard with a red frame around the "Appearance" icon.

A window will open for you to upload media into. If your images are not already uploaded into the Media Library, go ahead and do so. Make sure you always edit your image’s Title, Alt Text, etc., as needed for your site. The Media Manager will prompt you to “Select and Crop.” Crop your images, if needed, although you should have already set the size when you were designing it. Lastly, save the file as your header.

Screenshot of Website with Banner uploaded.

Check your site to make sure everything successfully came through, and there you have it. Your WordPress header is finished!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s