How to Use Office Suite for Graphic Design

By John Bath

If you’ve been paying attention to contemporary design like me, you’ve likely noticed the massive shift towards flatter, simpler graphics present across the web. Metro CSG even made this shift itself in 2015 when I redesigned our logo:

Love this new trend or hate it (I like it quite a lot), it has made graphic design somewhat more accessible. If you have Office suite, believe it or not, you may have a pretty decent graphic design program on your hands.

Looking over some collateral from Microsoft recently, I noticed that most, if not all, of the design was made up of simple shapes found in the Office suite. Intrigued, I looked around more and found that a good deal of their visual content & icons were produced this way. Simple graphics, simple shapes, all right there in Word, PowerPoint, OneNote, etc.

So I tried it out for myself, and the results are actually pretty good for someone with limited Illustrator experience. In this post, I want to show you how you can use Office to create your own graphics for the web and print. I’ll be creating a “Computer Alert” icon that can be included on an IT site (Feel free to use it for your own purposes!)

When making designs and icons I like to use PowerPoint, because it gives you a sizeable work space that you can create multiple images in that may be specific to a theme. I found this comparable to Illustrators artboard function, where you create multiple images within the same document.

So, let’s get started!

First and foremost, the Insert Shape button is going to be your best friend here. Anything you add in (Except maybe some text) is going to come from this tool. In the image below you can see the variety of shapes you can work with.

So I start by making a sort of “D” shape.

I then rotate and flatten it so I get a platform shape as can be seen below. When rotating, you can hold the SHIFT key to get level surfaces.

Next, I’ll add a rectangle shape above the platform, giving us a nice laptop shape to work with.

Outside of just making shapes you can also widen borders and add gradients to your image by right clicking and selecting the Format Shape option. On the right-hand side of the screen you’ll get a series of options to adjust your image. In the image we’re making, I widen the borders to help define our laptop screen.

Once we have that set up, I add in an “Alert!” sign consisting of a triangle, rectangle and circle.

So these are all of the shapes I’ll be using! Next, I want to make everything the color I want. The pallet you have available for adjusting fills and outlines is useful for determining colors that will appear nicely alongside one another.

Once we’ve added in our colors and turned off the outlines for a few of the images, we select all the images present by Shift-Clicking each one. We then right click and select the Group option. This associates all of the images into one unit, which can be dragged around as we wish.

With the image selected, I then copy the image, and go to the Paste Special… option in the top right-hand corner.

Clicking here brings up a menu where I can determine what I want to paste the image as. Rather than pasting as a Microsoft Office Object, I select the PNG option, since I want the image to be transparent in places.

And voila! The image is created, all you have to do is right click and save. Below, we can see the actual image I created.

Granted, this is a fairly simple icon to make. More advanced images may just require a little bit of practice, patience before you have something ready to show off for your business. So for companies not looking to invest in getting some graphic work done and want a cheap way to take advantage of this new “flat” trend for their website, this may be worth trying out! Or at least maybe playing around with if you’re an art hobbyist like me!

And just for fun, here’s a self portrait I did after getting a bit of practice in.