Countdown banners for Ubuntu 9.10

Post your ideas for a countdown banner here. Guidelines are:

  • width: 180px
  • height: 150px
  • optimized png, gif or jpg, or
  • iframe containing interactive content (using static html, css, js and images - no PHP)
  • no flash - must work perfectly with only free software

A successful implementation will countdown the days from the Beta to final release. This means 28 images numbered 28 - 1 plus one for day 0 that says "coming soon" and one more that says "it's here" (30 images total).

For reference see the JauntyCountdownBanners

Post your drafts and mock-ups here along with any extra information you feel is useful then send a message to the web presence team mailing list so we can discuss it.

A few of the best will be selected to be syndicated from www.ubuntu.com/getubuntu/countdown and one of the best that harmonizes well with the Ubuntu website colors and look will be shown on the Ubuntu.com homepage.


Andrew H's design

I decided to base my idea for the countdown on the Canonical Art Teams new boot designs. (Note: Please click the Full Size' link to see the original)

First draft:

andrewhs-design-1.png Full Size

Different Colours:

andrewhs-design-colours.png Full Size

Please give your comments both negative and positive! -- rugby471 2009-09-04 17:04:38

I must say I really like these, and these are definitely the most professional out of the lot. I feel these really reflect the professionalism Ubuntu strives to compete with, and I think these are the best ones for the job. I was going to do something similar, but to deny these ones the chance for fame would be a shame, so I'll defer my design to the next release. As for the coloration, i think your best color choice was the one from your first draft (very neutral), but if I were to make a second choice, I would choose (from the colored ones) the one in the top row, third from the left (brown). I feel that this one is the most "Ubuntu-esque" of the lot and I like it a lot. Good job, mate! -- supergamesoftoday 2009-09-22 21:47:38

I thought I'd mention, as a note for ALL submissions, how much better and more professional Ubuntu's countdowns are than Windows 7's. Just putting that out there... http://w7.adminease.com/ -- supergamesoftoday 2009-09-23 22:01:38

I do like the "brown" one mentioned (third from left, top row). That looks very Ubuntu-like and natural. -- tero-miettinen 2009-09-30 19:25:11

Juan Carlos design

More colorfull version. (Note: Please click the Full Size' link to see the original)

http://img34.imageshack.us/img34/9208/bannerday7.jpg http://img38.imageshack.us/img38/7397/bannerday0.jpg http://img38.imageshack.us/img38/2381/bannerday30.jpg

Full Size Full Size Full Size


Juan Carlos design

More polished version, technology and nature, koala faded with bamboo on the background.

  • (Note: Please click the Full Size' link to see the original)

http://img121.imageshack.us/img121/2606/bannerkarmic2dayd2.jpg http://img23.imageshack.us/img23/697/bannerkarmic2day0.jpg http://img245.imageshack.us/img245/7374/bannerkarmic2day30.jpg

Full Size Full Size Full Size


Chin's design

karmic28.gif karmic10.gif karmic01.gif karmic00.gif karmic_itshere.gif

Complete set of banners here: http://www.chinwong.com/Documents/Chins_Karmic_Countdown.tar.gz

Seph's design



ncli-design-1 (big text).png

ncli-design-1 (with logo).png

ncli-design-1 (with logo & big text).png

thorwil's Slideshow

slideshow_steps.png slideshow_stream.png

Proposal for a slideshow similar to the one used last time. Sideway scrolling should make it look like one continuous line, but the text should remain stationary and fade in and out for each step. The current countdown image must be scrolled in to complete this stream.

The 2nd image here is filled up to make sure that there will never be parts of 2 steps visible at the same time.

A black 1px border should be drawn around the slideshow/banner.

Launchpad branch with all my material

thorwil's Countdown

Check the full set!



leogg's design

leogg_30.png leogg_12.png leogg_01.png leogg_00.png

Full set and .svg source can be downloaded here. All artwork released as Public Domain.

aPNG Idea

I was thinking about how we could make this year's countdown banners different and I thought about using aPNG. aPNG gives us the advantage of being able to animate our images, but without the colour palette restriction of GIFs.

At the moment it is the most widely supported animated PNG format and it has a very useful feature which is you can choose to not show the first frame to viewers who can view aPNGs. This means that to people who cannot view aPNGs, they will be presented with the image on the first frame (ie. the basic static image countdown) but to those who can, they will be able to see the animation.

No Javascript option

Something should be done for situations where Javascript cannot be used, like on Wordpress.com blogs. Perhaps have a server-side PHP option as mentioned here: https://answers.launchpad.net/ubuntu/+question/66429 ?

I have done this for the two offical Banners.



<a href="http://www.ubuntu.com"><img src="http://neogates.ath.cx/~huwa/ubuntuKarmic/karmic1.php" id="countdownimage" alt="Ubuntu 9.10 Countdown"></a>

<a href="http://www.ubuntu.com"><img src="http://neogates.ath.cx/~huwa/ubuntuKarmic/karmic2.php" id="countdownimage" alt="Ubuntu 9.10 Countdown"></a>

The scripts are available under http://neogates.ath.cx/~huwa/ubuntuKarmic/

Huber Florian <itshorty@gmail.com> - http://itshorty.soup.io

Need help

I can't find the "here" and "coming soon" pictures for the two offical Banners. It would be nice, if somebody can provide this pictures.

Best regards Huber Florian <itshorty@gmail.com> - http://itshorty.soup.io

SVG Template

In case anyone else would like to create a banner where something more than just the number changes, here's an SVG template. It's derived from the set I created for Intrepid.

Usage: Keep the export_targets layer locked until you want to export. Then unlock it, lock the other layers. Select all in the export_targets layer (simply hit Ctrl-A). File -> Export_Bitmap. In the export dialog, switch on "Batch export all selected objects". This will result in a bunch of PNG images with filenames like "countdown_09-04_a_15_days.png". The template is prepared for 5 series (a, b, c, d, e), if you use less, just delete the superfluous columns (don't forget to include the contents of the export_targets layer).

I left the text and numbers in for orientation, feel encouraged to change everything or to start from scratch.

Thorsten Wilms | t_w_@freenet.de | http://thorwil.wordpress.com

Website/KarmicCountdownBanners (last edited 2009-10-05 17:16:34 by 125-167-19-84)