Beer app icon set
Android, Graphic

Beer app icons

When I was writing the Letchworth Beer Festival app I knew I had to have visual cues to aid scanning the long list of beers and ciders/perries. Failing a to find any free icons within the same set, I turned to Inkscape and the Tango guidelines. Here are my personal guidelines that I have used:

  • Resize the document to the final size in icons – you can easily review the generated PNG. And it’s a vector, so if you want it larger then just do so in a new and larger document.
  • Keep things simple applies here as the smaller they get, the icons lose their details but the user still needs to recognise what it is. Thick-ish bold lines and simple shapes are key.
  • If the icon set represents a ‘type’ or well-defined option, try to restrict the colour palette. I did used the restricted Tango palette, but the each of the icons have an obvious main colour – this helps to ease scanning the list (I’d hate to do ‘pyder’ – a combination of apples & pears!)
  • Skip the bottom surface shadow when you are using them in a list that has a ‘line break’. This is a personal preference as the line denotes a division between items. If I styled the list without them I would probably have the shadow to enforce an ‘invisible line break’ between items. But since this is for a small screen, a proper line is more user-friendly.
Standard
Splash page - Rabbit
Graphic, Web

Flash wins – Integrating interactive SVG into webpages

Splash page - Aliss

Whoa, I started this post in November last year. It’s another long-winded one, so if tl;dr : I played around with SVG and Javascript (again – note it’s not guaranteed to work with all browsers.)

What seems like ages ago I created 2 SVG drawings which I then made manipulatable via ECMA script. Then I hooked it into a webpage and used Javascript to invoke the SVG methods in a simple interactive interface as a basis for an RPG. ‘Post harddrive fire’; being unable to find the original HTML or Javascript I used for that first version, I was just left with the drawings crying out to be used once more. It has been a while between the old version and the new, and though the browser capabilities and available Javascript libraries have definitely improved it seems like not much has truly progressed. The support is still poor, and sometimes incorrect. The Javascript libraries, though making content creation easier, sometimes seems to have strange limitations (probably due to the SVG combination.) Such factors lead to my dismay that to Flash still has a better coverage on capabilities over more textual and non-propriety alternatives like the canvas element.

Below are the steps I used that recreates the interactive SVG/Javascript splash page (which normally is found randomly at the base-level URL).

Begining with SVG

Inkscape was a new thing when I drew the 2 graphics. It was excuse to exercise the tablet too – which wasn’t too old at the time either. I started small: simple drawings and simple shapes, so I can make movement easier to deal with. The first thing was ensuring that sections of the drawing were logically grouped into layers – arms have a layer each and the entire head has one layer.

Inkscape - layers screenshot

Inkscape - layers screenshot

One thing I have not yet figured out back then (and at still haven’t) is if through the Inkscape UI you can create nested layers: after all it employs shape groupings ( items) for layers and object groups. However, as with a plan XML document you can edit the file manually, and I promptly discovered that Inkscape can at least pick up nested layers. This makes things easier for the first interactive function in ECMA you can write: a character flip. If all the layers were inside one root layer then it is just the trivial matter to call the transform function over it.

Woo, remember your matrix transforms? (I don’t, but clearly I did in the past..)

/**
 * This goes in the SVG file itself, in <script></script>
 * What this does is flip the grouping with ID completeheadlayer to the right.
 *
 * I escape all the quotes, unless you put it all in <![CDATA[ CODE HERE ]]>
 */
function headdirection_right()
{
        M = &quot;matrix(&quot;;
        M = M + &quot;1 0 0 1 0 &quot;;
        M = M + &quot;0&quot;;
        M = M + &quot;)&quot;;
        Q = svgDocument.getElementById(&quot;completeheadlayer&quot;);
        Q.setAttribute(&quot;transform&quot;,M);
}

Frame animation

If you are familiar with Javascript, ECMA is like its strict older brother (as seen in the previous example.) Some things are native to both, and thus if you have done frame animation in one it is practically interchangeable.

To kick off the start-up function that starts the timing place in the SVG head tag the attribute onload with value STARTUP_FUNCTION(evt). Here is the example in the Aliss file:

/**
 * Some handy globals
 */
var svgDocument;
var svgRoot;
var running=true;
var animateFrameRate = 100;
 
function startup(evt) {
        O=evt.target
        svgDocument = O.ownerDocument;
        svgRoot = svgDocument.documentElement;
        normalSize(); // a prep function
        animate(); // start the animation timer
}
 
function animate(){
        if (!running) return;
        blink(); // if blinking, do blinking sequence
        walkingstep(); // if walking, do walking sequence
        talkingstep(); // if talking, do talking/expressions sequence
        window.setTimeout(&quot;animate()&quot;, animateFrameRate) // the familiar setTimeout repeat loop
}

Inclusion of drawings in HTML

After all the functions are in place and tested, we can safely consider adding it to a HTML page. It seems – if my memory serves me correctly – things are added a little cleaner than they were in the past, using objects and params.

For the sake of ease of manipulating the position of the SVG files, I placed them in a div. At the beginning, the scene is hidden so it is useful to set the SVG objects as transparent as so:

<div id="aliss" class="character">
        <object id="alisssvg" data="/splash/aliss/aliss.svg" type="image/svg+xml" width="250" height="440" wmode="transparent">
                <param name="wmode" value="transparent">
        </object>
</div>

Now that the SVG is present, we need a way to access the actual object so you can invoke the ECMA functions within. Here is an example of how to retrieve the object then invoke the function doFunction which is assumed to be defined in the SVG file:

function getLoadedSVG(svgID) {
        var ok= true;
        var svgdoc = null;
        var object = document.getElementById(svgID);
        if (object.contentDocument) {
                svgdoc = object.contentDocument; // works in Mozilla
        }
        else {
                try {
                        svgdoc = object.getSVGDocument();
                }
                catch(exception) {
                        // ignore errors
                }
        }
        if (svgdoc!=null) {
                return svgdoc.defaultView;
        }
        return null;
}
 
// Get the SVG object with ID attribute svgID
var svgview = getLoadedSVG('svgID');
if (svgview!=null) svgview.doFunction();

Javascript integration

Now that things are embedded nicely, you can use Javascript to move the SVG elements (via its parent) like any other HTML element. To make this task easier, I used JQuery since it makes accessing the parent elements trivial, with the bonus of introducing a slew of special effects. For example, for the final splash page there is a state where Aliss or the White Rabbit walk from their current position to another point on the X-axis: I invoke the ‘walk’ animation which is embedded in the SVG itself then use the animate JQuery function to move the position (and stop the animation when completed.) Another bonus with JQuery is finding elements of a particular class, so when the splash page is viewed on the root level where it has access to the latest 5 posts some content is added to what Aliss ‘says’.

The applications possible is only limited to your imagination!

..Actually, there are limits..

Bah, if there were no limitations then you would of already seen commercial examples by now. But the actual fact of the matter is that SVG support, and SVG-Javascript implementation is not the same in all (modern) browsers despite the time difference of this and the first incarnation.

The methods I have used are still rather more complex than the standard methods of producing animation, and with the double blow that Flash support is normally pretty spot on for most known browsers it is highly unlikely that the SVG+Javascript+HTML would catch on. But I do like seeing it all in action; and if things change in the future then I can reuse the same old SVG files once again – hopefully not forcefully next time!

Standard
Lloyd in Letchworth
Graphic

Cleaning up scanned sketches with GIMP and Inkscape

I’m no professional designer, but I do feel the need to get some sketching done once in a while. Sometimes I feel the urge to make a full colour image like my TNP fan art and various (now more-difficult-to-find) mini illustrations for Yvan’s blog. Without the formal training, and the expensive professional tools, I’ve used GIMP for years. For cleaner lines I’ve been including Inkscape to my routine – as SVGs can be easily resized without loss of detail. Look ma, no pricely-licensed software!

Lloyd in Letchworth

Lloyd in Letchworth - reminds me of "Dot and the Kangaroo"

The sketch to convert

Lloyd sketch - finalized design

Lloyd sketch - finalized design

The comic industry had to start off without computers in the beginning.. If you prefer the use of the ever-reliable pen/pencil and paper method like me you will need to come up with the cleanest copy of your subject to make the computer cleanup faster. Try to keep your guidelines as light as possible or in a colour you can ignore while you complete the sketch in a dark colour. It is common to use yellow pencils, or the aid of a lightbox and another piece of paper.

In the case of this drawing, I had a few ideas already in mind and used the best sketch. Though the main parts – the face and body – were clearly defined I planned to clean up the other sections in GIMP (it was also necessary as I photographed, rather than scanned, the sketch). I definitely could of created another cleaner sketch but I didn’t have the means to trace anew without losing some of the nuances with the lines, but for what it was worth the parts I didn’t detail (the legs/feet, arms) I was planning to make different interchangeable versions. GIMP is used to make the contrast much clearer from the original scan and an opportunity to correct rough parts. Of course, you are sufficient with a tablet then drawing straight into GIMP is nothing new.

Lloyd sketch - rough cleaned

Lloyd sketch - rough cleaned

The clean line

After processing the sketch to be as clean as possible, I import the image (just a link rather than embed) into a new SVG page in Inkscape. Then, with a Path → Trace Bitmap I produce a path of the sketch. After the path is made I can remove the imported bitmap and process the raw path.

Lloyd - 'final ink' stage in Inkscape

Lloyd - 'final ink' stage in Inkscape

At this stage, the aim is to ensure that the lines are smooth and crisp. If you need to make replaceable elements, create separate layers so it is easier to manage. For breaking up parts of the image faster I created duplicate layers and removed sections with the path tools as described here (though the “select offending nodes then remove from path” method is also effective).

Here, I have separated the arms, tail and beer mug from the main body. This way, not only can I produce better looking sections I can reuse them for other versions of the image. For example the forearm can be drawn holding something else like a flag rather than the beer mug. Though it is not seen, it makes sense that these individual layers are ordered from fore- to back- grounds.

Adding colour

Lloyd - lined and coloured

Lloyd - lined and coloured

Now, the fun starts. For each of the separate layers define by any means necessary paths to place behind the sketch-line paths. As with the line art, these paths are borderless, filled blobs. When you are satisfied with the colour, then you can add finer details like shadows and textures.

As the lines were already black, I was able to keep my shadow paths (with the exception to the bottom round shadow) as a separate layer above all the paths. Because the lines were simple, I also did this to the highlights (shine on the beer mug, boots). Both the highlights and shadows are semi-transparent so they can be reused for different colour schemes.

Name it; then go forth and reuse

As the sketch is now in SVG you can produce higher quality versions in any size you desire. The first illustration was produced by simply importing the sketch into GIMP and flipping horizontally onto a blurred background. Then final touch ups were made to try to create more of a fur texture and roughed-bottom shadow.

I had started to brainstorm name for the poor squirrel sketches but wasn’t satisfied with one until it started nearing completion. If you may know the background and the relevance of the beer mug then you could make an educated guess that it’s my take on the logo of the CAMRA-run beer festival down in Letchworth Garden City. My complaint is that ‘Lloyd’ needs to be a black squirrel – a common mutation of the grey squirrels in these parts – but I need to explore how to keep the line work from ‘fading into the background’.

For now, I’m quite happy how he’s turned out. I can tweak the colours later just by changing the path fill colour. Hope to see you around more often, Lloyd!

Standard