The Easy Way to Create Your Website Banner

Website Banner

Photo by docbaty (flickr)

There is a nasty assumption out there that all photographers are web nerds, graphic artists, and just generally technologically savvy people.

That's just not true.

Some are, most are not.

That's why I've been dedicating a lot of my time and energy on this blog to teach my fellow photographers some “how-to's” about working online.  To many photographers, the image making is easy….the web stuff is nuts.

In this post I'm going to share a tutorial where I teach you how to easily create a nice looking banner for your website.

But first, a little story…..

My First Gig as a Photographer Helper

I had a good friend at work that I used to see walking around town with a Nikon dSLR around his neck.  Back in 2004/05, dSLR's weren't nearly as common as they are today – and I'm pretty sure he was never more than 2 feet from that camera.

As I was starting to get into photography myself, I was like a little puppy dog whenever I saw him (and his camera).  I would ask him all sorts of questions about photography and we had some great conversations in the lunchroom about our love for this great hobby (neither of us were using our cameras for profit back then).

Naturally, I asked my friend if I could see some of his photos.  He said sure but I'd have to come by his house because all of his images were either framed on his wall or on his computer's hard-drive.


His photos were awesome.  And they were just sitting there on his hard-drive; available to my friend and almost no one else.

It was sad.

Though there was no Facebook yet, this was the time of Flickr and MySpace and Yahoo! and I knew the 2.0 age was upon us.

It was MY DUTY to let my friend know that there was so much more to photography than just taking great photos and hoarding them on his hard-drive and bathroom walls.

He didn't care. Not like I did, anyways.

But I was persistent and eventually he signed up with SmugMug (I was a raving SmugMug fan – even back then).

He had no idea how to set up a SmugMug account – nor did he have any desire to try to figure it out on his own.  Over time he saw the value (and joy) of having his own website – to share photos with loved ones and to get the all important feedback (“great shot!”) from Aunt Tilda.

And soon he realized his website, like his photos, were an extension of himself.

He was ready to customize and do a bit of branding.

Banners, Font Families, Color Schemes, CSS, HTML…….

“No thank you”, said my friend.  “I'll just pay you to do it for me”.

“Sure”, I said.  I think the payment included use of one of his new 2.8 lenses.  It was a fair deal.  :smile:

Here's my friends SmugMug site — mostly unchanged from 2005.  Great photos, aren't they?

My friend is now retired, and making a pretty good “beyond pension” income through his photography.  Magazines, Newpapers, and Online Publishers consistently find photos on Phil's site that they are more than happy to pay for.

I'm thrilled that my friend helped me take my photography to the next level (he took me down the Nikon path…) and that I was able to help him build his website in return.

And I'm more than happy to help you too.

Now on to that banner tutorial….

Website Banner Tutorial

In this tutorial I show you how to use Photoshop Elements to create your own text-based website banner.

As I explain in the video, I use Photoshop Elements because that's a program I already have on my computer and it works just fine for the kind of text-based banner I want to create.

If you don't have Photoshop Elements, there's a good chance you'll have some sort of image editor program you can use to create a banner.

Please don't go out and purchase Photoshop just to create a banner.  There are lots of free online tools you can also use.   Just keep in mind that I have only had a quick glance at these sites and can't vouch for their product. I just wanted to give you options.

The goal of this tutorial is to get you a nice looking banner FAST, EASY, and FREE (by using software you already own, or something free online).

Sweet.  I Have a Banner Now…But No Website.  What Now?

Follow my Complete Pro Photography Website Tutorial….and when you get to Step 4, that's when you'll upload your awesome new banner to your new SmugMug website.

(Note: The SmugMug links in this post are affiliate links and if you sign up with SmugMug through these links you'll not only save 20% on your first year with SmugMug, you'll also be supporting me and this site.  For which I am hugely grateful for…)


Banner Show and Tell!

Please leave a comment below and make sure you include a link to your website where we can see your banner in action.

I don't care if your banner is new, old, text, home-made, outsourced, ugly, or beautiful.

I just want to see it….and others do to. :smile:


  1. Hi Ryan ! You have provided a great tutorial.Can you share any tutorial or resource for creating animated gif banners ? Thanks and waiting to hear back.

  2. Hey Ryan. Great article and really useful for creating a website banner. I also used this template to design a business card too. Thanks. James

  3. Ryan, I’m in the middle of setting up a SmugMug website and your tutorials on here are super helpful. Thanks for putting all this info out there!

  4. Hi,
    I am looking for free web banner creation for website. Here I read your blogs and get more information from it. thank you very much


  5. BillieOnWheels says:

    Thank you for sharing your knowledge. It’s a big help for a beginner like me.

  6. Lexi Opoien says:

    Hi Ryan, do you have a tutorial out on how to create an image banner? Your text banner video was great and easy to follow!!

  7. I can’t stop looking at my newly designed web site! I wish I would have found you 4 months ago when I first started working with Smugmug. You have helped me take it to the next level!

    Thank you for your help.


  8. Allison Brinkley says:

    Thank you so much for your lessons…  I have a banner, but when I upload it, it is HUGE!!!  What is the ideal dimension for the file?

    • Ryan Oakley says:

      @Allison Brinkley You’re most welcome for the lesson Allison. My pleasure. So in my tutorial I recommend 600 pixels wide by 115 pixels tall……that should fit nicely on your site.

  9. I stumbled on your article here – (Great Mentor Story bud!) Reason I ended up here was because of my wanting to make a new (Ultimate Web site Banner)  The one I have I made, but it’s not PRO enough – I was directed to Fiver, a web site where you can apparently purchase a banner, but this way seems more fun and will give me more control with the quality.
    If you would like to check out my pages header – (It’s the old one) I expect the new one up before the new year.
    Great site, great stories (Stories teach better than text books any day) and great knowing there is another person out there – sharing great information on photography for free.
    (Now off to bookmark that post on logos you may have written)

    • Ryan Oakley says:

      @Xfilespoker  Hey Tom – Thanks for your nice comment. Much appreciated. is a great place to get a logo or any graphics done for your website.  DYI with Photoshop is only one way.

  10. geekdrummer says:

    Sweeettttt!!!! Great video!

    I have been in IT networking and security for years and all the graphic design stuff is so foreign to me. This is SO helpful! You are the man!


    • Ryan Oakley says:

      @geekdrummer Hey – you’re welcome Scott. I’m a big fan of the KISS rule – Keep It Simple Stupid! :) Glad it helped.

  11. Ryan Oakley says:

    As I don’t actually know how to create a logo myself (nothing that I would want to brand myself with, anyway)….the logo creation tutorial will show you a great way to outsource that work…….Stay tuned! And thanks for the comment Rob.

  12. Very easy to follow. I can’t wait for the logo creation tutorial!

Speak Your Mind


Time limit is exhausted. Please reload the CAPTCHA.