What does the badge designer do?
The badge designer tool provides a simple way to layer different shapes and images on top of each other to create an attractive Open Badge graphic. The tool lets you add text, colour elements, move certain elements and even fade items in and out - all presented in an easy-to-use web page.
Finding your way around
The main design functions are all held on the left hand side of the designer in handy collapsible panels. Each panel relates to a layer in your badge image and can be expanded by clicking it to show all of the things you can do with that layer.
The right hand side of the screen shows a preview of your badge as you build it, you'll see your changes take effect here in realtime! Links to download, publish, reset and cancel are all held here too but you might not see all of them depending on how you're using the designer.
1. Shape categories
Some layers have so many available shapes that they've been split into categories for you - to preview all of the shapes in a category just click the category button. When you find the shape you want to use, just click it to add it to your preview.
Note: You can change shapes as many times as you like while keeping your other settings, why not experiment?
2. Colour picker
You can change the colour used for each layer and see how your badge graphic looks. To change colours just open the panel for the layer you want to edit, click on the colour picker and choose a new one. You can even type an HTML color code into the box if you want something specific.
3. Opacity picker & position sliders
Some layers let you change their opacity (meaning you can alter how visible they are) and their position. This can help you to create some great effects especially when different colours mix! Just slide the toggle left and right and your changes will show when you release your mouse.
4. File uploader
Some layers let you upload your own image file directly into your badge, you'll find this feature against the shapes layer and the icons layer. Just browse for an image on your computer to add it to your badge.
Using shapes
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 
button to blank it.
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. Take a look at these badges from the Mozilla WebMaker project https://badges.webmaker.org.
Inner shapes?
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!
Using the image icons
The icons panel holds tons of pre-built images that you can use in your badges.
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.
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 color and even its opacity, if you're uploading an icon.
Remember, your badge is sized at 200x200 so you should make sure your image fits inside that space but apart from that you're free to upload whatever you like, based upon our inappropriate content policy. If you want to give it a try you can download the shape from the example above here and the icon here.
Using text icons?
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. Why not check out all of the available icons using our fonts page.
Banners & 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!
Publishing & 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!