Cobwebs The Movie:
Production Techniques

Greetings from #rdcHQ! We have an update from the Animation Department which has been diligently working on the final cut of the movie. New production techniques are being learned to make the process of movie editing more efficient. One such technique is the use of animated storyboards.

A typical storyboard panel showing scenes to be animated by the animators (with shorthand captions).

Storyboards have been used in Cobwebs since the beginning to guide story lines and develop characters. However, as the final segment of the movie is in production and a Director’s Cut featuring all three parts will be released, mentor Jerry McManus has stressed incorporating the actual storyboards into the video footage as it is being edited. Text is used when a visual has not been sketched.

A text storyboard explains the action to be animated when a visual is not available.

Director’s Note: The footage below is a Director’s Storyboard Sketch with some rough audio parts dubbed in. This is not the final cut :-)

“Cobwebs — The Movie — Part Three” in Director Sketch Mode.

In other news, We are pleased to announce that Cobwebs — The Movie — Part Two has been entered into The Oregon Coast Film Festival! Part Three is the next segment to complete, and then the long-awaited Director’s Cut featuring Parts One, Two and Three. All of the work in progress will be screened at the next Point.B Studio art event! … Details and Artists to be announced!

HTML 101: Image Maps

Greetings from #rdcHQ! We had another fantastic meetup as we enter the homestretch of preparing the new website for our movie launch and the upcoming art show … (details soon!) … which opens Labor Day Weekend. In yesterday’s meetup, The Crew worked on coding the new site design and worked with GIMP to create image maps on our home page spider graphic.

Image maps are useful in that they provide a simple and clean way to create clickable areas within a single graphic. Image maps work with any image type since the code resides in the HTML. The first step is to open the graphic in GIMP at the size it will appear on your final web page. Once the graphic has been imported into GIMP, open the “Image Map” tool under Filters → Web → Image Map as shown below:

When you are in the “Image Map” window, select the appropriate tool to create a clickable region over your graphic. We used the polygon tool to create an irregularly shaped area over the word “About”:

Once the polygon shape is successfully drawn, you will be prompted to enter the hyperlink for the clickable region you just created as shown below (Note: closing a polygon shape can be tricky, and requires a Control-double click action on a keyboard or a left double click action with a mouse). As you can see with GIMP, many types of links are supported, and again it can be used with any type of image since the final result is HTML code:

Once all of your clickable regions are defined, save the image map file to your desktop or working folder. This will create a small snippet of code (see below) that can be transferred into any HTML page.

This is a very straightforward method of creating image maps – SO much more straightforward than the Photoshop CS5 and Fireworks method … and using 100% open source tools to boot! In our sandbox, all of our links currently lead to our secondary page template as we await the final design from The Cobwebs Crew. We’ll have more progress next meetup!

Cobwebs Code: Body Tags

Greetings from #rdcHQ! We have yet another report from a most productive week during our Cobwebs Meetup + Open Lab. We created another handout focused on Body Tags as The Crew gets ready to code the secondary page of the website.

We quickly discovered that the font Jim Nightshade does not read well in long blocks of text as shown in our new design template. We’ll choose an alternative typeface while the header for the secondary (i.e. “content”) pages is being designed.


A little CSS magic springs our home page to life!

The next step for the home page is to link the secondary pages of the site from the navigational items over the legs of the spider. We’ll be using a method to make imagemaps out of our scalable vector graphics to create interactive regions in modern web browsers.

Stay tuned for more from The Cobwebs Crew and news of the Rural Design Collective Launch Party which takes place Labor Day Weekend!

Cobwebs OpenLab Success!

News From The Cobwebs Crew – Hexapod Progress!


Ben Garratt centering the robotic legs.

Today at Cobwebs Open Lab, things were done, and things were made! The first thing is that we are happy to announce that the robot that we built on National Maker Day is near completion. Below are some pictures of our progress:


The wild wires of the robot.

Mentor Jerry McManus and Devon Richard going through the building progress.

Devon Richard celebrating his success on completing the Cobwebs Home Page.

The Crew also made a lot of progress on the coding of the website, and the movie is completely storyboarded and remaining scenes are being animated. We’ll cover this in our next update. Stay tuned for more Cobwebs!

Return top