myknowledgemap ltd badge maker: badge making 101

©2013 MyKnowledgeMap Ltd

Inspired assessment learning technology

1

www.openbadges.me



2

What is an Open Badge?

A digital badge is an online representation of a skill you’ve earned.

Open Badges takes that concept one step further, and allows you to verify your skills, interests and achievements through a credible organisation. And because the system is based on an open standard, you can combine multiple badges from different issuers to tell the complete story of your achievements — both online and off. Display your badges wherever you want them on the web, and share them for employment, education or lifelong learning.



3

So, how do I make my own badge?

The Open Badge Builder allows you to combine different visual elements, colours and text to create an Open Badge graphic. You

can then use this graphic in your Open Badge issuing systems when creating your rewards. Here, you see the Shape Categories,

Colour Picker, Opacity and position sliders and File Uploader to help you along the way.



4

Step 1: Pick a Shape

Shapes are the base of your badge and are usually the first thing you'll want to add. There's tons of shapes to choose from spread across seven different categories so look around and give some a try. If you decide against a shape (or any other layer) you can use the remove button to reset that layer.Tip: If you're creating a family of badges why not choose a consistent shape for all of them - this is a great way of making each badge feel like part of a set while each containing something unique.



5

Step 2: Pick an Inner Shape

Sometimes you might want to add some extra texture or colour to your base shape - that's where the inner shapes come into their

own.

Try layering an inner shape on top of a base shape and then use the colour picker and opacity picker to create some crazy effects. Or, take a simpler approach and use an inner shape to help define

a coloured border around your badge - it's up to you!



6

Step 3: Pick an Icon

Each image is provided in four different styles - a black and white version aligned at the top of the badge, and a blank and white version aligned in the middle of the badge. Each one will work differently with each base shape so make sure you experiment to get the layout you're after. White icons will never be affected by the colour picker and will always show up white whereas black versions will take on whichever colour you have selected.



7

Step 3: Continued…

Using your own images

If you have your own shapes, icons, logos or images that you'd like to use in your badge then you can use the simple file upload mechanism inside the badge designer. You can upload images to use as either shapes or icons by clicking the "select file" or "browse" button and finding an image file on your computer.

Once loaded you'll be able to position your image, change its colour and even its opacity, if you're uploading an icon. Remember that your badge is sized 200x200 pixels so make sure your image fits inside that space!



8

Step 4: Pick a Banner and Banner Text

Using a combination of the banners panel and the text panel you can add even more detail to your badge. The banners panel provides ribbons, boxes and backgrounds for your text and works in exactly the same way as the shapes panels. Just browse for a banner and click to see it displayed in your preview.

The text panel gives you two lines of banner text as well as a colour picker, a great range of fonts and a vertical positioning slider so you can get your text just where you need it. As with all of the panels, give things a try, have an experiment and see what works for you!



9

Text Icons and Picture Fonts

To give you even more options we've built in a number of picture fonts that you can use when adding text to your badges. These fonts simply turn normal letters and numbers into graphical images and icons that can be dropped into your design.

Use the badge text panel add a letter or a number into the badge text field, make sure you're using one of the picture fonts and watch as a graphic gets added to your badge! You can even use the position slider bars to move your icon around for pixel-perfect positioning.



10

Step 3: Publishing and Saving

Depending on how you're using the badge designer you might get a publish button, a download button or maybe

even both. Publishing a badge sends the badge graphic back into your main software application while download lets you

save a copy of the file to your computer in PNG format. Whichever option you get, publishing or downloading is the

final step in creating your awesome badge!

myknowledgemap ltd badge maker: badge making 101

Education