Create a Web Banner in Microsoft Word


I’ve reviewed some of the things that can be done using Word 2007 – but it is not a web tool.  Well, it’s not necessarily a web tool.

What if you are stuck and need a simple web banner?  You can actually create web banner ads directly in Microsoft Word.  The following tutorial shows you how to do just that.

Step 1

Open up Word 2007.  You will automatically have a new blank document.  Go to the tab Page Layout, choose Size  and choose More Paper Sizes at the bottom.

 

Step 2

From the pop-up window Page Setup, choose Paper, Paper Size and then Custom Size.  There enter 7in by 2 in. This gives you approximately 195px by 680px. You can turn on showing pixels when shapes or boxes are inserted. Simply go to the Office button, choose Word Options and then click Advanced. There you have to scroll down until you see Display, then tick the Show Pixels for HTML features box.

 

Step 3

Next click on the Margin Tab and set all margins to zero.

 

Step 4

Then click on the Layout Tab and set the size for the header and footer to zero as well.

 

Step 5

Go back to the Page Layout Tab and set the Page Color to a blue.

 

Step 6

Now we want to add some visuals. Since the background is blue, let’s add some clouds. Go to the Insert Tab and select Shape and insert round shapes filled with white and no outline color.  Align those along the bottom of the banner.

 

Step 7

Let’s add an easy gradient to the background. Go back to the Page Color in the Page Layout  Tab and  select Fill Effects from the drop down.

 

Step 8

Choose your gradient from the pop up window. You have tons of choices here. I chose a horizontal blue to light gradient.

 

Step 9

Go back to the Insert Tab and insert a Simple Text Box.

 

Step 10

Add some text, give it a styling and make it stand out. Place it to the left, or wherever you think it would be noticed.

 

Step 11

Now you will notice that the text gets aligned to the top in the text box. To change the vertical alignment, right click on the text box and choose Format AutoShape.

 

Step 12

Now you can choose top, center or bottom alignment from the pop up window.

 

Step 13

I’ve added more shapes (e.g. a speech bubble – cloud shape) and added more text. You can also change the transparency of shapes and their fill color. To do so, repeat the previous step and  play with the transparency slider. It works kind of backwards in Word, meaning 0% is opaque and 100% is transparent.

 

Conclusion

The end result is your very own web banner. The only way to get a gif, jpg or png is to either export it as a PDF or hit the PrintScreen button on your keyboard and paste it into MS Paint. There you can crop and change it and save it as an image.

 


Popular search terms for this article:

how to make a banner in word, how to create a banner in word, create web banner, how to make a web banner, How to make a website banner, how to create a web banner, create a web banner, how to make a website banner in word, create website banner, create a banner in word

Discussion

  1. Christina Fowler on the 19th August

    Are you kidding?? This is a joke, right??

    Is it April 1st and someone hasn’t told me?? Have I been transported back to 2001 and someone hasn’t told me?? Shame on you Envato! I have followed this blog since it’s inception and always considered it’s content on career and work place advice some of the best on the web but this post all on it’s own makes me consider unsubscribing straight away.

    • Mike Vardy on the 19th August

      Christina,

      Thanks for the comment and I hope that you don’t stop reading based on one post that you didn’t like. Not everyone is going to like what we put out there all the time, but we strive to deliver what our readers ask for. Some of our readers asked for these kind of “how to” articles that enable them to make better use of the software that they already have.

      Again, thanks for reading and for the comment. We take into account all feedback and hope you’ll stick around.

  2. bsmity on the 19th August

    really? Word?

  3. Drew on the 19th August

    I don’t know if we should be encouraging this.

  4. Aaron White on the 19th August

    This is terrible. I think it would be best if you remove this post.

  5. Dan on the 19th August

    Yeah i’m not a fan of it either.

    Word is great for alot of things …. banner’s unfortunatly isn’t one of them.

  6. Ellen on the 19th August

    Please, please, please don’t tell people to do this. It would be better to go banner-less.

    Word Web anything.

  7. Tahsin on the 19th August

    Even i dontt hink that this post should be here. So childish! Why a designer who’s working on great softwares like Photoshop, illustrator etc will prefer to design a banner on Word?

  8. Daniel Tan on the 20th August

    people, apparently this post is for non-designers! =.=

  9. Geoffrey Gordon on the 20th August

    I think this post is humorous, I used this technique a lot when I started out with website design, and I didn’t know any design programs yet. Some designers couldn’t believe the graphics were designed in MS word. Brings back memories. lol

    • jay12 on the 8th July

      Hi,

      I followed the steps, but I still don’t understand how do you save it as a banner file that I can insert into a web page? Anyone know? tks

  10. Lifeisgay on the 21st August

    In the end we got a nice banner? yeah. Stop complaining about the process. we got a result.

  11. BrigittaV on the 29th August

    Gosh, how condescending some people can be! This is a great post for people who aren’t designers and don’t own Photoshop , or for those who may be intimidated by the complexities of illustration software. Are you all seriously such snobs? Do you all think this sort of savage disapproval is the best way to treat people? Especially newbies? Do you think good design must necessarily require Photoshop? Wow, I guess I’ll never understand why some people need to be so mean.

  12. Just Stopping By on the 5th October

    I actually like this post! It’s a great option for someone who doesn’t know how to use an image editor like Photoshop or own it. True, Word is not the best option for creating banners, but if that’s all you have, that’s all you have. Who would have thought you could create a pretty cool and attractive banner like this in Word? It’s quite creative, actually. I liked the idea of exporting the finished product as a picture. Stay encouraged, Simona, and keep up the good work!

  13. Matt on the 16th December

    As E.H. Gombrich points out in his book “the story of art”, it’s imperative that we don’t become elitists in our perspective otherwise we start to limit ourselves and therefore place boundaries on what art is or isn’t and how it is produced. I’m thoroughly unimpressed by the initial comments by so called “artists/designers” on this post.

  14. Chris on the 8th February

    I really appreciate this article actually. It looks a lot better than what I have on my site at the moment.

    I can’t afford a designer every time I want to announce something on my site so this will give me a nice place to start.

    Thanks.

  15. Belinda on the 20th April

    Thanks for this! I LOVE it!

    As much as I love photoshop we just don’t have it here at my workplace so I will be using your helpfull MS Word Step by Step instructions to get me through.

    Thanks again! 🙂

  16. Janice Maddox on the 17th June

    I just Googled “Making a website banner in Word,” because I’m home in the middle of the mountains, just maxed out my budget for the week and need something to get me by. So, this was actually helpful for the temporary fix I’m looking for. I think psychology majors (like me) who use word to make banners could be the new nerd? Next, I’ll go put on some knee socks and tennis shoes.

  17. sheena on the 12th August

    I woke up from my afternoon nap and googled tutorial for making a banner and came across your site. My! what a surprise to learn that you can make it in Word. for beginners like me, this is VERY USEFUL. Thanks for the tips.

  18. Mommajen on the 14th August

    THANK YOU!! THANK YOU!! THANK YOU!! I stumbled upon this and I am ever-so grateful. I am a seamstress, along with a few friends we are starting our business on hyenacart. We are not webdesigners, we just want to get our handmade products to the public. I was banging my head trying to figure out how to create a banner and this was a dream. I own Photoshop but have no idea what I’m doing, I spent hours upon hours in frustration.

    If you’re already a webdesigner, good for you that you know how to do this already and have the money/time invested in the software necessary to do webdesign. This is great for folks who want a one-time page and don’t want to invest several hundred dollars and hours of tutorials trying to figure out software.

    Thank you, thank you, thank you.

  19. Edward on the 18th August

    I appreciate the information. I do not program but I can use a WYSIWYG application and that’s how I set up my web site. Now I need to create a banner that I can swap with other sites. This definitely helps. Now if I can only figure out how to embed a Youtube video into the darn thing…

  20. Jo on the 20th September

    I am designing a new website for work as we can’t afford to pay someone to do it or fancy software. It is an extremely steep learning curve, and I hit brick walls all the time. Most of what I Google is people’s opinions on how to do it, what I should and shouldn’t be doing, full of code that I don’t understand. I like Word, used it for years and am not intimidated by it. Thank you very much for showing me a friendly program I can use to help me! To all the people who moaned about this article – you were a beginner once, we all have to start somewhere.

  21. Christine on the 24th October

    I definitely want to thank you for this article. We can’t all be designers (or don’t have time to learn). Also, if I’m not mistaken, some of those software programs are pretty pricey. And guess what? I’m not trying to get it perfect–I’m just trying to get it started! Until I have a budget for a designer, this will get the job done. It certainly beats haggling with a designer and getting attitude when I try to explain what I want…

  22. JR on the 17th January

    AWESOME POST!!!

    I love designers/artist, but let’s face it… we can’t always afford professional to design such a easy task. Plus if you need a change, they moan and complain about revisions. Websites are constantly evolving and making web banners in word is a excellent idea to keep up and stay relevant with-out the crutch of a designer/artist.

    If you need a really good designer/artist to get your project going check out http://www.99designs.com

    If you need a easy way to put up quick websites, so easy a highly trained monkey could do it, check out http://www.weebly.com

    I don’t get any credit for sending people, just trying to be helpful. You really hit a home run with the post. THANK YOU!! THANK YOU!! THANK YOU!!

    BEST

  23. Mian Shahid on the 3rd April

    Hi,

    I like to work in MS Word, this is such a nice way to create banners specially for those who not expert in high class graphic programs ( Like me 🙂 ).

    Keep it up.

  24. Jen on the 9th May

    Many thanks. Ditto to the others who are more gracious than the first. Googled, stumbled, and now am a bit closer to designing my own banners. Thanks for taking the time to share this.

  25. Maria on the 9th August

    Thank you very much for this post. I don’t think people should be so mean about it, there are plenty of us who need a banner for many diferrent reasons, and aren’t professionals or can’t afford a professional. We are not looking for perfection obviously!…
    It is a very good tutorial given that it shows us how to do it without having to spend money and time for complicated programs.
    Thank you!

  26. Amy on the 7th September

    I never leave posts, but I just had to write something here! I am a fashion/graphic designer and I have Illustrator and Photoshop…but I think this is really cool! Some of the people at the top, I believe need to just STEP AWAY FROM THE COMPUTER! You are taking yourselves waaaaaaayyyy to seriously. Not everyone has graphic design programs, and they take a long time to learn anyway.

    The gradient sky looks great, and the instructions are very user friendly,

    Nice tutorial Mike 🙂

  27. mohit sharma on the 9th September

    really nice post. there are lot of people who don’t know photoshop and other program. word can do many like other programs. this post is very useful for the people who want effects in their banner . once again pls continue the post like this

    thank you for awesome post

  28. Ralph James on the 20th September

    I am in the process of creating a newsletter and stumbled upon your word banner creation. My thoughts concerning your word banner were that you offered a good basic word creation for individuals who are at the entry level. And that’s what knowing your audience is all about.

    Thanks for the post; it will motivate me to get started on my newsletter and eventually: my website. If you have any tips on web design, I’d appreciate if you could share them. Respectfully, Ralph James, real estate broker, Sacramento, California.

  29. Niki Buskell on the 25th September

    Excellent…shame on you those degrading this post. I need to create banners ‘without photoshop’ as do others it seems…great blogs do cater for everyone’s needs

  30. Mila on the 14th October

    It would be nice if you spent more time on the “saving” part. I’ve spent a few hours on this and now I can’t save it appropriately. I would hate to have all that time and effort go to waste.

  31. Bless on the 21st October

    It is a very good post for novices. I have stuck on your above article while searching for a software to make banner. I need some help to beautify my blog, If someone can help me I shall be very grateful. Thanks

  32. Alek on the 6th March

    Great example of how much one can accomplish with just Word

  33. Stacey Devine on the 25th March

    An awesome article carrying all the useful details to create a web banner easily.

  34. Naeem Deswali on the 4th May

    creative…very useful for beginners…very much appreciable post.

  35. Bryan O'Malley on the 25th June

    This was really helpful. I didn’t need a overly professional banner, I just needed something that works. This did the job and helped us out on a very tight budget.

    Thanks.

  36. Char on the 25th October

    I have to laugh – I use Microsoft Word ALL the time, and often feel as though I am a rare breed who actually like (and appreciates) the program. That said, although I regularly create documents and form templates etc – often inserting my own self created graphics- it didn’t even occur to me to use the program I know so well. I guess, when it came to wanting to create a banner for the website I am currently putting together for my home business, I assumed I needed to find a Banner making program to get the job done. But, thank you for writing this tutorial: As soon as I skimmed through the tutorial I realised I should have thought of Microsoft Word my own self!

    Actually, Microsoft PowerPoint will probably be better, because at least you can group shapes when using PowerPoint to create your own images – or, if you know what you are doing, alter existing clip art and make alterations so you aren’t infringing upon someone else’s copyrighted images.

    As someone who will never be able to afford to buy Photoshop or any other expensive professional image editing programs, this tutorial has been a great reminder that although it is not as straight forward as using one of those high-end programs, you CAN use programs you already have to great effect – Microsoft Office suite is a lot more powerful than most people give it credit.

    Now off I go to try an unleash my creative side – I have a web banner and logo to design!

  37. Tarottee on the 16th October

    Thanks for a nice easy banner creation, I am sure there are many fab software programs that outstrip Word that I could use but time, money, expertise etc make it prohibitive so happy to try this out as I try to master it.

Add a Comment