Design guest post: Placing images in the custom header

Back in June, we ran a post showcasing some great examples of Eventbrite page design. Since then, we’ve received a ton of questions asking how to pull off those snazzy header tricks. That’s great! Enticing page design makes a big difference, and it’s actually not hard to create. In this post, our design team shows you how to jumpstart your next event with a great-looking custom page.

Decorating your event page with images or graphics that mimic your existing website helps ensure the viewer that they’re purchasing tickets from the right place. Or if you don’t have a website and just want your event page to look really cool to your attendees, this post should be helpful as well. The final result of this example page is located here:

Here is what you will need before you get started:

  • An Eventbrite account
  • Image editing software (ie: Photoshop, Illustrator, Snag-It or Skitch)
  • Image hosting site / account (twitpic, photobucket, flickr)

Here are the 3 easy steps to adding an image to your header:

Step One: Create your image

In the image editor of your choice, create a document that is 956 pixels wide by 189 pixels high (the height can vary). NOTE: we’ve shrunk the example to fit this space:

Step Two: Upload to an image hosting site

There are many image hosting solutions to chose from. For this post we will use Photobucket. Log in to your Photobucket account (signing up is free) and upload your image. After you have added tags and descriptions (this is optional) you will see a thumbnail of your image. Mouseover your thumbnail to view the sharing options and copy the code next to the “Direct Link” option.

If you are uploading multiple images from your account you may want to enable the tabs feature in your browser so it is easy to go back and forth from your event page.

Step Three: Inserting your image

If you have not done so already, check  “Show custom header & footer” under “Additional Options” in your event creation page.

Once the custom header box pops up, enter this line of code, pasting your code in the highlighted area. Remember to put quotations before and after your pasted code.

Now just click on the “View” or “Preview” button to see what your page looks like. Voila! Your event page just got briter. Once you’re finished with your event page, post a link to it here in the comments so we can all marvel at your creations!

Want more design tips? Send us an email at design@eventbrite.com and we will do our best to include your question or topic in a future post.