How to Design a Website Button in Microsoft PowerPoint 2007

If you’re visually inclined but Adobe CS poor, and you want to create graphics for web sites, business cards or other logos, you probably feel stuck.   How do you create  web banner in pixels? How can you create a simple business card graphic?  For years my choices were to:

a) download Gimp and learn the steps from YouTube videos recorded by 15 year-olds,
b) to find a 15-year old to do it for me, or
c) to hire an agency who’s going to charge me $150/hour to micromanage them to draw what’s in my head.

Outside of buying the Adobe Creative Suite and spending 100 hours to master it (which admittedly is on my list), what’s a girl to do? Here is what – Microsoft PowerPoint! I can’t believe that nobody taught me this before now, but it appears to be a little known trick and it is really, really easy to do it!

Two Key Prep Items:

1) Learn How to Convert Inches to Pixels
PowerPoint works in inches.  The web works in pixels.  You need to know how to convert them so you can build your graphics the right size.  Google this topic and you’ll find other resources but this one works well. You can download the tool here or just plug in measurements on this tool each time you need them.   Bookmark this site at least.

2) Update your Power Point to Export Higher Resolution Graphics
Do this only when you need to develop graphics for PRINT, or else it will mess with your pixel size.  If your graphics are for the web skip this step.  But for print, your graphics may look fuzzy or pixilated because the standard Power Point export setting is 96 dpi.  To fix this, you change your MS Registry files to 300 dpi.  Wait… don’t run! Microsoft gives great instructions on how to change it –and its easy to change and later change back. Visit this Microsoft page to do it.

P.S. If you do this step and later you want to develop web graphics you can also go back and undo.

Now Let’s Create Some Graphics!

We are going to create a website button.  PowerPoint is actually perfectly suited for this – especially version 2007 because you can use the Smart Art feature to add depth and shadows and more.

Pro Tip for creating web graphics – any time you create a web graphic it will look better and load faster if you create it in the exact size it needs to be rather than resizing it once it is live.  That is why the pixel size converter is important.

How to Create Website Buttons
Open PowerPoint, go to Home –> Insert –> Smart Art  then choose a style button you like. You may select one wqith 4 or more on the same page – just delete all the extemporary items you don’t want.  When you have one button,  type in your data you want to show.  Now comes the cool part. Spice it up a bit by double clicking your button and exposing the Smart Art Tools.  Select a pre-drawn design option to access pre-built shadows and glows you don’t have to create yourself.   When it looks good, here is how to save it:

1. Click on your graphic to select it.
2. Size it. If your graphic is smaller than the graphical area, then cut it and then re-paste it on the same page outside that larger graphic area that you started with.  This is to prevent you from saving a big white square around your graphic.
3. Group all the items you have created together if more than one by selecting  them all (hold shift button while you select each one) then right clicking to “group”
4. Save as picture – right click and select this option when everything is looking right.
5. Select a format that matches your need such as jpg, png.   Tip: Png typically saves a little higher quality.

Next week we’ll create a web banner in no time!