How to Create a Website Header Image Using PowerPoint

Ads by Google

00 Shake hands   How to Create a Website Header Image Using PowerPointI’m sure everybody is familiar with the terms “Love at first sight” and “First impression will last forever”. Those statements tell you the importance of first impression. There’s even a statement saying “You only have three seconds to make your first impression”.

In the terms of web presence, the first thing that people will see on your website is the header. So if you want your web page to give a good impression, you should create a nice header image. It is like a handshake and will tell the visitor about your personal quality.

There are many ways to create a header image. But for those who have an allergy towards graphic editors, you can use just about any application with the ability to insert images and edit text to create one.

Beyond The Power Of Points

Let’s try using PowerPoint for our project today. The reason for choosing this app is because I’m sure most of office computers have this application installed, and as one of our readers pointed out in the comment section from the article “Create Cool Desktop Wallpapers Quickly using Microsoft Word” – it has the ability to save the document as an image.

Before starting to create a header image, we have to be ready with the concept first. Because we want to create something that is simple and cool (and quick), the concept should not be too complicated either — the header should contain an image as a background, adorned with a short title and sub-title. That should be easy enough, right?

Ads by Google

So the first thing to do is to launch PowerPoint. I’m using the Mac version of the app, but the other version should not be too far off.

01 Blank Canvas   How to Create a Website Header Image Using PowerPoint

Start by resizing the size of the slide to the size of web header that you need. Go to “File – Page Setup” menu to open the setting window.

01b Page Setup   How to Create a Website Header Image Using PowerPoint

Then choose the appropriate size from the drop-down menu. The nearest choice for a web header is “Banner“, but that might not be what you need. If the size that you want is not on the list, you can always adjust the size manually. I chose to go with the proportion of 720 x 180 for this project.

01c Resizing the paper   How to Create a Website Header Image Using PowerPoint

Continue by inserting the background image. Click the “Insert Picture” icon, or use the “Insert – Picture” menu.

02 Insert Picture   How to Create a Website Header Image Using PowerPoint

Resize the image and drag it to the position that you want.

03 Drag and resize the picture   How to Create a Website Header Image Using PowerPoint

Please note that even though the image is bigger than the canvas, PowerPoint will only show the part that stays within the boundary of the canvas. So always refer to the thumbnail on the left.

Send the image to the back by choosing the action from the right-click context menu. If you do not do this, your text will be placed behind the image.

03b Arrange the image   How to Create a Website Header Image Using PowerPoint

Another right-click, this time is at the blank whitespace, and choose “Format Background” from the pop up menu.

04 Format Background   How to Create a Website Header Image Using PowerPoint

Choose how you want to fill in the background. You can choose solid color, gradient, picture or texture.

04c Format Background   How to Create a Website Header Image Using PowerPoint

Now all that’s left to do is to type out the title and the description of the webpage, then modify the fonts (type, size, and color), alignment, and all other accessories to get the best appearance. My personal favorite font is Gill Sans Light with a drop shadow.

05 Writing the words   How to Create a Website Header Image Using PowerPoint

Saving the picture

Now, all that’s left to create your header image is to save the canvas as picture. The process is a snap: just go to the “File – Save As Picture” menu and choose the save destination.

06 Save as Picture   How to Create a Website Header Image Using PowerPoint

But you might want to adjust the quality of the result by going to the “Preferences“, click the “Save” tab, and set the “Advanced Resolution Settings“. The figure could be at “DPI (dots per inch)” – the bigger the better, or in “Pixel” – using the size that you need.

06b Preferences   How to Create a Website Header Image Using PowerPoint

And here’s the result of our little project.

07 The Final Result   How to Create a Website Header Image Using PowerPoint

Have you tried to use PowerPoint beyond creating presentation? Or do you have personal favorite non-graphic editor app to create quick graphics for everyday use? Share using the comment below.

Image credit: Aidan Jones

Ads by Google

17 Comments - Write a Comment

Reply

Justin

Sorry, but I completely disagree with this process. I actually thought it was a joke when I saw the title.

I’m not quite sure why someone would “have an allergy towards graphic editors” and then choose to use something as convoluted as Powerpoint to do the same thing 10x harder.

Powerpoint is not a graphics application and does not allow you to save the files correctly for the web. Not to mention your tutorial is incorrect. When you save out the image, you should NOT be saving at 300DPI, but by size at 72DPI.

If I were to use anything from the high-end Photoshop to the absolutely free Gimp (http://www.gimp.org), you can do this same thing in half the time with only a few steps.

I mean I get what you’re trying to do by helping those without graphic knowledge, but why not post a tutorial for Photoshop/Gimp that explains how to do the same thing?

Just my 2¢!

Reply

Jason

Wow this is real? I totally agree with Justin. This tutorial actually pisses me off!

Reply

Rodney

While I would not use this method, remember that many, many people are already familiar with PP (thorough school or work.)

If all someone wants is a banner, why not?

Justin

I have a problem with it simply because it’s bad practice.

Instead of teaching someone how to use Powerpoint to create header graphics (bad practice, not web-ready graphics), why not teach them to use a graphics program instead?

Isn’t that what a good tutorial is all about? Not just how to do something, but how to do it well.

Reply

Jason

If people can’t take the time to learn something as free as GIMP (free version of Photoshop) then they shouldn’t be trying to build a site.

Reply

Justin

Sorry, but I completely disagree with this process. I actually thought it was a joke when I saw the title.

I’m not quite sure why someone would “have an allergy towards graphic editors” and then choose to use something as convoluted as Powerpoint to do the same thing 10x harder.

Powerpoint is not a graphics application and does not allow you to save the files correctly for the web. Not to mention your tutorial is incorrect. When you save out the image, you should NOT be saving at 300DPI, but by size at 72DPI.

If I were to use anything from the high-end Photoshop to the absolutely free Gimp (http://www.gimp.org), you can do this same thing in half the time with only a few steps.

I mean I get what you’re trying to do by helping those without graphic knowledge, but why not post a tutorial for Photoshop/Gimp that explains how to do the same thing?

Just my 2¢!

Reply

Jeffry Thurana

Thanks for the input, guys. Noted.

Here’s another perspective.

While I agree that there are easier and – some would say – more ‘proper’ way to do this, not everybody has the luxury of doing it the easy and proper way. There are poor souls who don’t have access to graphic editor, even the free one like GIMP.

Believe it or not, for many people, the only computer they have access to is their office computer and the office won’t allow them to install any new softwares in it.

There are also others who only need to do this once or twice, maybe for their WordPress blogs (which can be built easily by anybody without any graphic manipulating knowledge). Instead of looking for, downloading, installing and learning how to use new software(s); they will likely choose to just use app that they already have.

Plus, people would naturally feel less intimidated using the application(s) that they are already familiar with (even though it would require them to take more steps to produce the same result).

Ronny

True statement. I know how to use GIMP, but our company employees are not allowed to install GIMP. Thanks for the tutorial. It was very helpful.

Reply

Saikat

Sometimes we are so dismissive of a software because it’s not the default tool for the job. But hey, does it ‘intellectually’ harm us if we learn a few other ways of doing something? In fact, it is our very lack of knowledge that makes us seek out new ‘better’ tools instead of looking at what we might have right in front of us.

A real world situation – I ask Jeffry to knock me up a quick demo of a website header on my machine. There’s no net connection and no Photoshop or GIMP. He opens up PowerPoint and voila…a relative mock-up is ready.

Believe me guys, it happens.

Reply

Marcelle

This was a great tutorial. I sent the link along to a friend who is “technically” challenged and would not have a clue with what to do with Photoshop or Gimp.

The “experts” out there should make allowances for the fact that not everyone is technically capable. By the way my friend is a doctor, he has other capabilites.

Luckily there is software availble for all abilities.

BYW: I Love the APP!

Reply

Ben

I’m quite happy using GIMP, but I have come across incidents when I need a certain font (for example) and GIMP doesn’t have it…but PP does!

I think this little article is great and there are always more ways than one to skin a cat! Some are just more efficient, but use the tools/knowledge you have never be scared of some ‘Bush Mechanics’.

Reply

Ben

I’m quite happy using GIMP, but I have come across incidents when I need a certain font (for example) and GIMP doesn’t have it…but PP does!

I think this little article is great and there are always more ways than one to skin a cat! Some are just more efficient, but use the tools/knowledge you have never be scared of some ‘Bush Mechanics’.

Reply

Todd Lohenry

I appreciate the tutorial as I’m actually happier using PowerPoint to do this than GIMP [which I also use at a basic level]. Thanks…

Reply

Adam

Thanks Jeffry that was helpful not because I was trying to make a web banner add but trying to set up slides sized for a specific thing and this showed me the way. If someone wants to get really good at one peace of software it is always helpful to see many things that a software can do something (wether or not another software does it better).

By the way I use Fireworks and Gimp just confused the heck out of me I have given it a try a few times now, but not really the point anyway. Always bugs me when people trash on others showing one way to do something.

Anonymous

Hi Adam,

I’m glad this could be helpful to you. :)

Reply

Adam

Thanks Jeffry that was helpful not because I was trying to make a web banner add but trying to set up slides sized for a specific thing and this showed me the way. If someone wants to get really good at one peace of software it is always helpful to see many things that a software can do something (wether or not another software does it better).

By the way I use Fireworks and Gimp just confused the heck out of me I have given it a try a few times now, but not really the point anyway. Always bugs me when people trash on others showing one way to do something.

Reply

thurana

Hi Adam,

I’m glad this could be helpful to you. :)

Your comment