CONTENTdm Consortium Banner (DIY – Illustrator)

I have been privileged with the opportunity to participate as a panelist at the National CONTENTdm Webinar coming up this Thursday, November 2nd. I’ve been asked to talk about how we’ve designed our instance to provide access to collections consortia-wide while maintaining each institutions’ and each collections’ individuality (I will posted slides after the webinar is over in case anyone is interested.)

In light of the upcoming webinar, I’ve broken down how I created the “PALNI-wide Default Header” in Illustrator. Apologies for not using the open-source software in this DIY, the header was created before the blog was established. Please note, however, that this header CAN be made using the open-source software – Inkscape – but your tools will be found in different areas of the software 🙂


  1. Open up a new document using the recommended dimensions for the interface you are creating the header for (in my CONTENTdm case, the recommendations were 828px X 76px)CDM Banner New Document Screen
  2. Next, I like to lay out all the text and images I need to include in the design. (I can always add more later if needed, I just like to make sure I have the required information on there first.) As you can see, there’s quite a few PALNI Libraries to include in the header!CDM Banner Text and Images
  3. I begin to arrange the text and images within the header and change size, color, typeface, and font weight to make it more aesthetically pleasing. I can already tell that having so many institution names is not going to make my job easy.CDM Banner Layout
  4. It was beginning to look text heavy and I knew that adding the rest of the institutions was just going to increase the problem. I needed some kind of divider to break up the text and bring more emphasis to the actual title, “CONTENTdm Digital Collections.” As you can see, I started to get creative with the logo as a divider and played with the title a bit. One of the easiest ways to emphasize text is to up the font’s weight to BOLDCDM Banner Divider
  5. It was obvious that there wasn’t a good way to put the “list” of institutions in the header so I started to separate the names into their own text boxes using the good ‘ol fashioned “copy and paste.” I dragged the newly pasted names onto the header to mess with later and started to see some space-saving potential with the random arrangement.CDM Banner Institutions
  6. The random order helped to save space but the more names I added, the more it became a blur of green text with the names indistinguishable. To make the design not only more readable but also more dynamic looking, I varied the colors and the size of the names. To save myself some design time, I used the “Eyedropper tool” to copy the style of one name to another. How-to: Click the text you want to change the style of > Select the Eyedropper Tool > Click on the text you want to copy the style of CDM Banner Institutions 2
  7. Some more adding, tweaking, and arranging later… and voila! A new CONTENTdm header. Be sure to save your design under the “Save for Web and Devices” (compresses the image for optimum download speed and quality for web) as a GIF or a PNG.  (I like to save in PNG-24 for the highest quality despite the fact it makes the image a little bigger in file size. It’s a preference more than a suggestion, really.)CDM Banner SavingCDM Banner Saving 2

Any questions? Feel free to leave a comment or send me a message and I’ll be happy to walk you through any problems! I can’t wait to see what you come up with!

Leave a Reply

Your email address will not be published. Required fields are marked *

eight × 1 =