EDU Graphic Design

K12 teachers do not go to college to learn how to design online components around their content. So when we learn nice tips and tricks the collegial thing to do is to share.
If your school or district does not provide you with professionally designed online learning material you might find your online content is looking – plain. While the most important component of your coursework is not if it looks pretty, it would be a nice investment in content which is already academically sound to make it visually appealing and a little more professional. Graphic design is making the visual appeal match the academic appeal of the content ~ that is my K12 interpretation anyway!

Here are my two secret weapons for EDU graphic design…

Eye Dropper

Selected color palette in EyeDropper

Color palette selected

Eye Dropper Extension offers many color codesThis is a Google Chrome extension which has been around since August 2012. And it is awesome. This allows you to select colors from most Internet pages and obtain their RBG or Hex values. Once installed you can modify the settings. This is good news because there are many beautiful designs out there which you can emulate based on a pre-assembled color palette.

Adobe KulerDesign Seeds, Pantone, Colour Lovers, Coolors all have something to offer for color inspiration and palette creation.

Picking colors means little unless you have a way to assemble them into a graphic which you can use in your content.

PicMonkey Pro Tip 1

PRO TIP: Always start with a Transparent Canvas.


Colors from the Chrome Extension used in PicMonkey

PicMonkey accepts color hex codes.


PicMonkey is free (paid option just provides more choices) and can be logged into with your Google credentials. In PicMonkey you can edit photographs which is nice for add text over top of one of the free images you can find for use on the Internet. You can also create graphics, that same text overlay with something not a picture behind it.

Look through Pinterest for ideas. You see that many people have created graphics which are eye-catching and just the size they need (also a function of a good graphic creation tool) to pique your interest; that is the same thing you want to do to add to your content!

Enter EDU graphic design, the reason for pairing PicMonkey with Eye Dropper is that the color code you picked up from your palette of colors can now be used in PicMonkey to make your graphics match each other throughout a page, unit, or course and provide that finished visual appeal you may have been missing.

Having a palette of four or more colors allows you to switch colors out easily, and the tool itself is allows changing of fonts and manipulation of shapes, as they call them overlays, to provide a lot of flexibility in your creations.

Extend your textbox beyond the shape overlay

PRO TIP: Extend your text box beyond the shape overlay

Once you have settled on a color scheme, font choices, and your ‘overlay’ fills as much of the (transparent) canvas as possible there is one more finishing touch I recommend – include your website URL on any image or graphic. Sometimes images found on the Internet are reused, if someone does this with your image you can still direct people to your website. If you do not have a web site to drive traffic to put “Mrs. Christensen, 2015” on it, just something to show YOU created this EDU graphic design work.

Always add your website to your graphics

Add your URL to graphics

When saving your designs, consider saving both large and small versions of your work. If you will utilize social media you will want to find a current social media sizing cheat sheet. Remember that you can always scale an image down, but to scale it up can get ugly. I save mine to my Dropbox so I can access them from any location.

*Bonus* Copy HTML

My Drop box also contains some seemingly benign .txt files. I make plain text files in Notepad to save my HTML to when I make an exceptional nice table layout. Often the graphics and text within the table can be changed out, but the layout of the table might have taken some time to arrive at, time which I might not want to spend doing the same work again, so I:

  1. Switch between WYSIWYG/Visual/Rich Text Editor view to HTML editor/Text view
  2. Control A/Command A to select everything
  3. Control V/Command V to copy everything
  4. (without closing the source) I open NotePad
  5. Control C/Command C to paste that HTML into a plain text file.
  6. Name it something descriptive and save it to the “tables” or whatever you name it folder.


Do you have any other secret weapons you are using to make your EDU graphic designs? I would love to hear from you.

I hope you can share your creation with me!