Paul Fredericks said:
This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.
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:
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.
The following video shows, step by step, how to use the template with Inkscape:
If you are having any problems please leave a comment.
The following video explains how to use the bitmap trace tool that was mentioned in the previous video:
The following links are tutorials and articles on how to use text effects and make the text follow a path.
Post a link int he comments to your drafts and final badge design for feedback!
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/
I got feedback that the soup image was too confusing. So here is another try ... as a kind of set this time:
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.
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.
I will try Photoshop and if that doesn't work, I'll download and do this at home.
Thanks.
Nancy
vectormagic.com is good at converting normal raster images(png,jpeg) to vector
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.
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.
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
I like the shape of the badge. Did you create that yourself or do you need help to create a SVG for it?
#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.
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
a difficult task for those with limited skills
But an attempt
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.
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é
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.
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!
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! :)
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.
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é
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
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.
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
This is my first attempt at a badge. I feel much better about this whole process than I did an hour ago.
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).
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/
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?
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!
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!
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!
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.
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.
I limited myself to Google Draw to create these, and mostly using graphics that are readily available within the program.
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.
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.
These are so beautiful. Well done.
Just to second Rebecca's feedback, these pop up as a burnt umber (dark color).
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