This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Create Your Badge Graphic


Layout a good looking badge for your course

Badge Design Essentials

You can use whatever design tools you're comfortable with to build a badge and submit it to the group. The only requirement is that the final badge graphic is a square PNG image smaller than 250K. The recommended size is 150px by 150px.

If you're not a graphic design guru, use this excellent tutorial provided by community member Jose using Inkscape (open source) to design a badge:

Using Inkscape to Design Badges

Inkscape is an Open Source Vector Graphics editor. For a generic introduction to inkscape feel free to watch this video tutorial which is the first part of an 11 parts series.

The first step will be to download and install Inkscape and the resources needed which have been compressed into this P2PU Badge resource file.

The resources file contains a template file called P2PU_Badge_Template_v1.svg, and a font file called Princeton Normal.ttf, which is the font used for the P2PU logo. (Installing a font is a platform specific task so to install Princeton Normal in your particular computer please use your favourite engine to search for "install fonts XXXX" where XXXX is Mac, Linux, or Windows. If you are having any problems please leave a comment and we will help you out.)

Once the font is installed in your system, all you need to do is open the svg provided template and start modifying it, as explained in the next section. 

Using the P2PU Badges Template

The following video shows, step by step, how to use the template with Inkscape:

http://youtu.be/8ifOysfGe7Q

If you are having any problems please leave a comment.

More information

The following video explains how to use the bitmap trace tool that was mentioned in the previous video:

http://youtu.be/mlsf3f_YI6s

The following links are tutorials and articles on how to use text effects and make the text follow a path.

Show Us Your Work!

Post a link int he comments to your drafts and final badge design for feedback!

Task Discussion


  • Paul Fredericks said:

    on Nov. 28, 2012, 6:42 p.m.
  • Christina Cantrill said:

    I kind of messed up (I think with the original) ... this is 150x147 apparently. It looks almost round but I'll work on it to get it to be round. Any comments in the meantime?

    It is for this challenge: https://p2pu.org/en/groups/digital-literacies-and-learning-going-public-with-your-work-and-inquiries/

    on Nov. 28, 2012, 3:14 p.m.

    Christina Cantrill said:

    I got feedback that the soup image was too confusing. So here is another try ... as a kind of set this time:

    on Nov. 28, 2012, 6:03 p.m. in reply to Christina Cantrill
  • clsaarinen said:

    I used Google Docs - Drawing to create mine. Then downloaded as png, then resized it to 300px res, 150w 135h. Size is 22kb. Not exactly high res, but a decent sample.

    I elected to continue with idea of creating badges for a prof dev workshop, an unconference where particpants can submit sessions topics. This badge recognizes those who submit a session topic.

    carrie's sample badge

    on Nov. 21, 2012, 12:36 a.m.
  • Ed Jones said:

    on Nov. 9, 2012, 10:46 a.m.
  • NancyJ said:

    Is there a way to use the template in other software? I'm not able to use Inkscape at work. I can use Publisher, but the template doesn't seem to work in there.

    on Oct. 16, 2012, 3:18 p.m.

    Vanessa Gennarelli said:

    Hi Nancy--do you have access to other graphics editors? Perhaps other folks who have created badges in other programs can help out here as well. Let me know if I can be of further assistance. Thank you, Vanessa On Tue, Oct 16, 2012 at 3:18 PM, NancyJ <
    on Oct. 17, 2012, 10:35 a.m. in reply to NancyJ

    NancyJ said:

    I will try Photoshop and if that doesn't work, I'll download and do this at home.

    Thanks.

    Nancy

    on Oct. 17, 2012, 11:43 a.m. in reply to Vanessa Gennarelli

    Jos said:

    Hi Nancy,

    if you follow this thread, about page 1 of comments, Leah shared a template for photoshop. That might be of help.

    cheers!

    José

    on Oct. 17, 2012, noon in reply to NancyJ

    NancyJ said:

    Jos-where is it that I can find Leah's template? Not seeing it here.

    Thanks.

    Nancy

    on Nov. 9, 2012, 4:17 p.m. in reply to Jos
  • Tyler Gillies said:

    vectormagic.com is good at converting normal raster images(png,jpeg) to vector

    on Oct. 13, 2012, 12:03 a.m.
  • Vladimir Támara Patiño said:

    Thanking Jose for tutorial and template, here attempt of a badge for 

    https://p2pu.org/es/groups/openbsd-adj-como-sistema-de-escritorio/

     

     

    My part is in the public domain.

    on Oct. 6, 2012, 7:55 a.m.
  • Stephielayne said:

     

    Here is the  badge that I created for conference attendance. I have created similar badges for presenters and sponsors. 

    I actually created this by using shapes and text in PowerPoint, and then saving as a picture to get the PNG format. 

    on Oct. 3, 2012, 12:28 p.m.
  • David Hopkins said:

    I have a general style that I want to pursue (see below) with different colours for different achievements (not necessarlity bronze/silver/gold but certainly a different one for the better results

    David Hopkins

    on Sept. 10, 2012, 11:07 a.m.

    Dirk said:

    I like the shape of the badge. Did you create that yourself or do you need help to create a SVG for it?

    on Oct. 12, 2012, 5:35 a.m. in reply to David Hopkins
  • Kimberly Seeber said:

     

    #next_pages_container { width: 5px; hight: 5px; position: absolute; top: -100px; left: -100px; z-index: 2147483647 !important; }

    This is a badge to be issued upon completion of the My Big Campus Self-Guided Training Modules.

     

    on Aug. 26, 2012, 12:55 a.m.

    David Hopkins said:

    Are you able to split the'big' and 'campus' up or do they have to appear side-by-side like that? If they don't ahve to be like that then you could make each word bigger by having them one on top of the other, and it'll suit the badge shape better?

     

    Hope this helps, David

    on Sept. 11, 2012, 2:52 p.m. in reply to Kimberly Seeber
  • John said:

    a difficult task for those with limited skills cheeky

    facilitationBut an attempt

    on Aug. 22, 2012, 8:04 p.m.

    Dirk said:

    Hi John

    The badge looks good! Only advice that I would offer is to try and make the text lie on a circle that's concentric to the badge itself.

    on Aug. 27, 2012, 6:20 a.m. in reply to John
  • fboss said:

    Hi All,

    I created two badges for attendees and speakers at a CESIMeet event that will be coming up in November. The CESIMeet is a Teachmeet-like event where teachers speak to other teachers about the work they are doing in their classrooms or in other projects involving education.

    One of the badges will be awarded to all who attend and the other will be awarded to those who get up to present/speak at the event.

    I have two changes top make still to the badges, but thought I would share them here before moving them along to the finished state.

    I'm using the CESI colour scheme (greens) for the badge. I do need to remove the word "CESI" from the bottom and add in the CESIMeet logo instead.

         

    I chose the headphones for the attendees (listeners) and the microphone for the speakers/presenters. I got the images form the free online Microsoft ClipArt Gallery - always good for ideas and images to use.

    The one thinkg I don't like is the quality of the badge images.

    Can anyone tell me how you got your badges to save at a higher resolution?
    When I used Inkscape and the tutorial above, it automatically set the resolution at about 90px for the size of badge I chose. I could only get a better resolution if I created a much larger badge.

    Fred.

    on Aug. 21, 2012, 9:11 a.m.

    Jos said:

    Hi Fred,

    the badges look nice (except for the outer frame) but there are a couple of things that IMO could work a bit better. This is a personal opinion, and you might disagree, but there is a lot of repetition in the design. If you are using an icon (headphones) but also need to use a word to communicate the message (attendee) then the icon is not really representing what you have in mind. It's like a door with a handle and a 'push' sign. There is also repetition in the fact that you have both CESI (that you will change for CESImeet), and the full 'Computer education society of Ireland' bit at the top. Do you really need both?

    Also with such generic icons you are not really branding the badges. Thinking out loud here but I'd move the Attendee and Speaker bits to the top (semi circle), that would make the badge specific. As a Icon I would use the CESI logo, maybe modified to include the microphone and speakers, or CESImeet. I don't know; this is really all about what you like and whatever works for you, so feel free to ignore all of this! :)

    Cheers,

    José

    on Aug. 21, 2012, 1:24 p.m. in reply to fboss

    fboss said:

    Hi José,

    Thanks for that feedback - very constructive and you've got me thinking again.

    The edge of the badges is all down to the resolution they've been saved at - but I can't figure out how to increase that using Inkscape. If you know, I would appreciate any help you can give on that one.

    I'm glad I posted up the badges now, before I did other edits to them, as I will be adding in your comments to my design decisions now. Love it when iteration happens like this - thanks.

    Really like the idea around dropping the CESI info and replacing it with the function of the badge itself. Hope I can quote you later about this as I will presenting badges to the CESIMeet in November. Fingers crossed others will take an interest and try their hands at designing badges (maybe even courses too in P2PU).

    Fred.

    P.S - See you're located in Dublin - I'm up the road in Drogheda but work out of DCU.

    on Aug. 21, 2012, 4:42 p.m. in reply to Jos

    AJC said:

    I think this is an excellent first draft and I hope you get to figure out your resolution stuff.

    I agree with Jose about redundancy, but if you look through the other badge drafts on this page - this is something we all do! In your second iteration reduce redundancy by perhaps just using your acronym, and image relaying the purpose of the badge and make your fonts bigger, so when the badge is viewed at a small size, folks immediately understand what it means.

    Getting into this symbolism stuff is not so casual (I'm discovering). It requires quite of bit of reflection on intention and quite a few drafts before you make your final cut!

    on Aug. 21, 2012, 5:10 p.m. in reply to Jos

    Jos said:

    Hey Fred,

    have you tried exporting to png instead of jpg? cannot think of a way to increase the resolution but the blend of colours looks more like a jpeg loss problem.

    I recorded the screencast after a couple of hours playing with inkscape, so I'm sure there's a way, but I know very little about it. Anyone out there could help?

    And yep, I'm in Dublin; used to work for TCD but left last December... looking for new adventures now! :)

    on Aug. 21, 2012, 5:11 p.m. in reply to fboss
  • Christopher Crawford said:

     

    Here is a badge design for the content curation class I facilitate. Not really a graphic designer, but what do you think of the color scheme and the scissors metaphor. Wasn't quite sure how to symbolically represent curation. The things that come to my mind are museums, libraries, and artifacts, but I decided to go in the other direction and think "what are digital curation tools like?" - one metaphor that always pops up is scrapbooking or "clipping" stories, so I went with the scissors. I toyed around with the idea of a push pin due to the popularity of pinterest as a curation platform, but never could get a pushpin to look quite right on a badge. I still need to design an assessment and rubric, but what do you guys think so far? 

    on Aug. 21, 2012, 7:38 a.m.

    fboss said:

    Hi Christopher,

    I did your course and really enjoyed it.

    Liking the colour scheme of the badge and the idea of using the scissors instead of a more usual symbol such as the outside of a museum (columns), a book and the likes.

    Your graphic is really clear which makes it look great too.

    Fred.

    on Aug. 21, 2012, 8:37 a.m. in reply to Christopher Crawford

    Christopher Crawford said:

    thanks, Fred!

    on Aug. 21, 2012, 11:07 a.m. in reply to fboss

    Jos said:

    Hi Christopher,

    nice badge! Are you intending to use it with a P2PU course? If so, it would be cool if you could keep the original P2PU font for the the bottom. Just for branding, and to make it look more like other badges https://p2pu.org/en/badges/

    cheers,

    José

    on Aug. 21, 2012, 1:28 p.m. in reply to Christopher Crawford

    Christopher Crawford said:

    It is for a challenge that has been up for several months. I actually just forgot to install the Princeton Normal.ttf font, so that is how the template's P2PU logo was rendered without it.

    Will work on a Curator mark II later this week when I get a chance.

    Thanks,

    Chris

    on Aug. 21, 2012, 1:54 p.m. in reply to Jos

    AJC said:

    Love this. It's simple and readability is great.

    I like the scissors. I would have put a needle and thread (like sewing things together) but cutting is a much better verb to relate to curation.

    on Aug. 21, 2012, 5:13 p.m. in reply to Christopher Crawford

    Christopher Crawford said:

    Thanks AJC! 

    on Aug. 22, 2012, 6:35 p.m. in reply to AJC

    David Hopkins said:

    Hi Chris.

     

    I like the badge but have one 'comment' to make - try a darker colout for the shadow/glow behind the badge itself, it'll look better on the white background.

    Hope this helps, David

    on Sept. 11, 2012, 2:54 p.m. in reply to Christopher Crawford
  • rcitow said:

     

    This is my first attempt at a badge. I feel much better about this whole process than I did an hour ago. 

    on Aug. 20, 2012, 1:58 p.m.

    AJC said:

    This is a great start. Can you tell us more about the tasks the badge represents?

    on Aug. 21, 2012, 5:14 p.m. in reply to rcitow
  • ToddF said:

     

    First pass was the badge image on the right.  I thought it made sense to use the Play logo triangle for the badge shape, so I made the badge on the left.  I'll have to struggle with the granularity of the courses.  I don't want a course to take too long to complete, but I don't want too many courses to earn the "Play Mega Badge" (assuming the community wishes to realize a full set of courses).

    on Aug. 16, 2012, 5:49 p.m.

    AJC said:

    This is an excellent first attempt! A couple questions/suggestions:

    The play logo in the badge has a white backround which disrupts the green badge background. I would cut out the white background (leaving the text transparent and change the color of the play triangle so it shows up.)

    Do you have any drafts of your courses up yet? Sounds like you're pondering how to get started. I bet eh folks at P2PU would love to help you design a full Mega course set! Perhaps join this group: https://p2pu.org/en/groups/make-a-course/

    on Aug. 20, 2012, 12:02 p.m. in reply to ToddF

    ToddF said:

    Thank you, Allison.  I agree about the white background.  I'm abandoning that design entirely.  It looks too much like other badges.  The badge on the left is closer.  The inset box looks a little off to me.  I'm also not sure about the play! logo under the triangle.  What do you think?

    on Aug. 20, 2012, 9:56 p.m. in reply to ToddF

    ToddF said:

    Here is the course I'm starting to develop:  https://p2pu.org/en/groups/play-framework-first-steps/

    on Aug. 20, 2012, 9:57 p.m. in reply to AJC

    Dirk said:

    Hi Todd, I really like the simplicity of the play badge! Maybe you could change the font or color of the text and remove the inset box?

    on Aug. 21, 2012, 3:29 a.m. in reply to ToddF

    AJC said:

    This looks like an awesome webcraft course. You should pitch it to the make-a-course group or our community list: groups.p2pu.org/groups/p2pu-community

    I like that you dont want your badge to look like others. I made this one - obviously a deviation from the norm: https://p2pu.org/en/badges/diy-u/

    I would encourage you to experiment more with your design and come up with something that fits the size standards but stands out!

    on Aug. 21, 2012, 5:19 p.m. in reply to ToddF
  • J. Robin Ward said:

    Ugh...I am having hell's own learning curve on this thing, largely because my speakers aren't working, so I couldn't really follow the tutorial video.  Regardless...here's my first attempt:  a badge for being able to make a badge.  And, hoo-boy, did I earn it!

    on Aug. 15, 2012, 5:24 p.m.

    Rebecca Kahn said:

    This badge is great! I think it's really funny, and brilliant for a first attempt! You may have climbed a steep curve, but it looks pretty damn professional to me!

    on Aug. 16, 2012, 4:57 a.m. in reply to J. Robin Ward

    Leigh Blackall said:

    agreed. a fun looking badge. could you get the badger to be stencil cutout, so you can have a digi badge and real sew on? we're going to produce real badges and then scan them back in to be digital badges too.

    on Aug. 16, 2012, 5:59 a.m. in reply to J. Robin Ward

    AJC said:

    The honey badger is a popular web meme. This badge pun is pretty funny. What is it for? If it's not for a specific P2PU course, than you can lose the P2PU logo altogether.

    Go with a lighter background and cut out the white around the badger face. Use a darker font over your lighter background for a cleaner look.

    on Aug. 20, 2012, 12:04 p.m. in reply to J. Robin Ward
  • Leigh Blackall said:

    Badge concepts

    I limited myself to Google Draw to create these, and mostly using graphics that are readily available within the program.

    1. Connect to Charles Darwin University Wireless 
    2. Use web browsers 
    3. Manage a Google Apps account 
    4. Author, share documents in Google Docs and Drive 
    5. Manage a website using Blogger 
    6. Facilitate and moderate a Google Groups email forum 
    7. Write for the web 
    8. Create and publish multimedia for the web 
    9. Manage a Youtube Channel 
    10. Assign and use Creative Commons Attribution copyrights 
    11. Publish and source content, and collaborate on Wikimedia projects 
    on Aug. 9, 2012, 2:02 a.m.

    Rebecca Kahn said:

    I think these badges look great. Is the maroon colour one of Charles Darwin Uni's colours? If not, you might want to consider making them a little brighter, but other than that, I think they're ace. 

    on Aug. 9, 2012, 5:04 a.m. in reply to Leigh Blackall

    Leigh Blackall said:

    thanks Rebecca, i might need to get a checkup. i see orange but you're not the only one to see a different colour! orange has no significance other than being thematic Northern Territory of Austalia. its the dominant colour of the earth here. we're considering using different colours for badge levels. these being "operational", the next level "teacher", and the next "leader". this might need further words.

    on Aug. 9, 2012, 5:23 a.m. in reply to Rebecca Kahn

    AJC said:

    These are so beautiful. Well done.

    Just to second Rebecca's feedback, these pop up as a burnt umber (dark color).

    on Aug. 20, 2012, 12:05 p.m. in reply to Leigh Blackall

    Joyce Seitzinger said:

    Leigh, did you ever get to implement all of this? And would it make sense for us to work together on some courses/badges with your new position here in Melbourne?

    Cheers,

    J

    on Oct. 11, 2012, 12:36 a.m. in reply to Leigh Blackall

    Leigh Blackall said:

    well, yes and no. i left before a concrete answer, but we were going to do it, and they may still... I'd like to keep working in the badge space, but now I'm in Health education, there maybe a shift to health related skillsets.. if we come to a staff professional development project, I'll recall this work for sure. On Oct 11, 2012 3:36 PM, "catspyjamasnz" <
    on Oct. 11, 2012, 3:25 a.m. in reply to Joyce Seitzinger

    Joyce Seitzinger said:

    I'm in Faculty of Health too... We may still find common ground. :-) J Sent from my iPad
    on Oct. 11, 2012, 7:12 a.m. in reply to Leigh Blackall

    Leigh Blackall said:

    let's hangout! On Oct 11, 2012 10:12 PM, "catspyjamasnz" <
    on Oct. 11, 2012, 3:46 p.m. in reply to Joyce Seitzinger