Dr. Jones – Getting out alive

Thought I should post up some the the animated .gifs I did earlier in the year.  I liked the idea of trying to convey a bit of a story through a series of 3 panels. The first two are a bit choppy, but I got a nice fluid motion on the third one. I’ll probably try to do more of these as I am planning to continue doing ds106 assignments this fall. I followed the instructions and used the tools recommended here.

A design assignment is born

Not long ago Mr. Grant Potter assigned me a secret mission, which I accepted. I can’t disclose the final purpose of that mission at this time, but now that I’m done, I can reveal my contribution to the project. This was a pretty straightforward task, giving me a chance to draw on my recent experiments with stencilling, and combined with my love for pixel art. What I was not expecting was for this to turn into an assignment which I would submit to ds106… but it did! More on that later.

I thought I would describe my design process as general background first for the future students of DS106 who will be stampeding over each other to do this assignment, The Favi-Stencil mashup (link forthcoming)

The mission:
I was asked to create a stencil of specific dimensions and form. The dimensions requested were 5 x 5 inches, and the form was of a skull and cross bones, pixel style. ( I guess he had read my first post expressing an interest in the subject)  It would also need to be a 2 color design as stencils are by default are limited to two colors, (if you include the background as a color) in this case it was going to be white on black.

Grant supplied some reference artwork to get me started. I love it when clients do this. You get a much better sense of what they are looking for when they can point to it. This is the artwork I was sent.

“Well this will be pretty easy” I thought, looking at the image. A medium level of detail, simple B&W design, and a full month to work on it, a very generous deadline indeed. I would have to make some adjustments to convert this to a white on black design, but it seemed like it was all pretty much there.

With about a week to spare on my deadline, I decided to sit down at the drawing board to begin. Literally, at the drawing board. Even though I have been working with computers and in computer aided design most of my adult life, my background is in fine arts, and one of my great passions to this day is still drawing. I feel no matter what the project is or what the final medium will be, a couple of quick sketches at the beginning (and ongoing throughout) can work out early issues, or offer possibilities that were not obvious at first. Really it just gets me thinking. My first sketches.

These  were done over breakfast, and my intention was only to doodle, play around and see what happened.  Typically a skull & crossbones design will be symmetrical, but I started liking the idea of a slightly quirky, ‘off center’ expression. However because the whole piece was to be ‘pixel art’, it was going to limit the range of detail I could include. The other constraint, that of being a stencil, also complicated things. The point here is that you cannot cut out a shape within a shape or else the whole piece will fall out.  The eyes in the drawing above for instance would never work because the eyes are not attached to the surrounding area, they are floating.  An impossible stencil to make.

At this point I did jump into the software. I had figured out some of the design challenges, and moving around squares on a grid in software is much easier and quicker than drawing them. So I took the sketching into Adobe Illustrator to continue experimenting. I chose Illustrator because I assumed (incorrectly) I’d eventually print out the design to transfer it to my stencil.  Without Illustrator, I would probably use something like Inkscape. Once you get going in a drawing program like that, it forces you to determine some things from the outset, namely grid size. I needed to decide, what was going to be the final ‘resolution’ of this piece. How many pixels by how many pixels. The final size was 5×5 inches, but I could squeeze as many squares into that as i wanted. Looking at the original artwork I approximated roughly 20×20 pixels, so I tried to simply recreate the original photo to see what I could do with it. I was also able to start seeing it as white on black design as intended. The result.

Kinda goofy.  I did not like the final expression even though it was a dead match for the original (which I did like), and I had not solved the problem of the floating eyes. I was feeling here that I either needed more pixels to work with or less… and then it struck me. Favicons. My own drawings were a little rougher than the sample, intentionally 16×16.  I am not sure why i was sketching with that resolution in mind, but it may have something to do with the fact that the 16×16 pixel icon format is the ultimate expression of pixel design. Universal. Its like an industrial designer designing a chair or a pastry chef making a wedding cake.

Clearly i needed to design this stencil AS AN ICON FIRST, whilst keeping the limitations of stencil art in mind. So off to Photoshop I went! Using a 16×16 canvas on max zoom I was able to continue ‘sketching’ adding white or black squares as needed very quickly and easily. It was at this point I hit upon another challenge.  The designs looked like crap!  case in point:

If I got it working as an icon, it failed as a stencil. More often, I could come up with a cool looking stencil, that utterly turned to mush once you looked at it reduced down to its natural size. I was pretty determined at this point to have the design work in BOTH formats, so I went back in the design process a bit to stage that I had actually skipped, research. Being a fan of pixel art, I know there are many amazing 16×16 skull icons out there, so I gathered a few examples to see how I could get the icon part of the design right. These were the examples that drew my attention.

What makes most of these work so well, is the inclusion of multiple tones and colors, which I was not going to have the luxury of having. I decided to base my design on the 4th icon, the one that is all black and looks like the poison warning pictograph. Now it was just a matter of pushing the pixels around until something clicked. Brute force… and only a couple of hours.  Every once in awhile I would get up and walk away from the computer getting a look from a distance. Or take  break, do some chores, and come back to it. Staring at pixels up close for extended periods of time can be a strain on the eyes and mind. Eventually I arrived at this.

I knew almost instantly once all the pixels fell into place that this was the one. I was happy with it as an icon, not thrilled, but honestly in 2 colors this assignment is a big challenge. More to the point I loved the design as a stencil, and couldnt wait to get started cutting it!

I had finally figured out how the eyes would work which was giving me the most difficulty and although there was some complexity to the design, I was pretty sure it would hold together once I started building it in the real world. I was ready to go.

(I was going to continue this post with a complete play by play of the cutting and stenciling process, but since it is already quite long now I will keep you all in suspense and save it for my next post. or actually maybe I will use a different mode for this story, like images)


pimp my blog

Not blogging much at all about it, but I have been making progress on my #ds106 assignments. Time to update you!

First on project #2 “Experimenting with my blog.”

This is something I have sorely needed to do. Even though I like to keep things pretty sparse, some of the little extras on a blog really make it or break it. FINALLY went through and got my Akismet key, for some reason never realized before you could move the slider to pay nothing for this.  But I didnt like the sad face it gave me when i did. 🙁

This post will be the test of the twitter tools hook up. (always wondered how others were doing that)  *fingers crossed*

I’m definitely planning to add some of the flickr plugins when I post about the photo assignments.

Other than that, my favorite addition through the “pimp my blog” phase was the addition of the ds106 radio player! More on that later.

Another major hurdle (for me) in getting truly set up to do digital storytelling the way its done in #ds106 is subscribing to the various web services that add value to your blog and form the vital social links to connect you to the cloud. First off was flickr. It had been awhile since I had a pro account, and I was pretty firmly against it.  I was kinda getting into the “host your own” idea.  I mean Im paying for the hosting anyway, and there are so many good tools for managing and archiving photos right?  but when it comes to the quantity of photos we are talking about , and indeed those damned social networks, well nothing can beat it.

Since I was going there, I thought why not bite the bullet and reload my last.fm subscription as well (even though im not sure hom much i will listen to it while #ds106radio is on the air!). I forgot how awesome last.fm radio is! Both of these I am familiar with, and have paid for in the past, but now there is something new on the scene… SOUNDCLOUD.  What with all my recent sound crafting, I am going to need someplace special to keep those as well.  For some reason this most recent subscription pleases me the most. Stay tuned boppers!