For E-learning challenge #204, the articulate community has challenged us to make  a Comic Book Theme Template. This mini template pack consists seven slides which are:

  1. Welcome slide
  2. Menu
  3. Text and Image
  4. Process
  5. Tab Interaction
  6. Pick one interaction

Usually template packs consist of more than those slides.

Full size of the template pack can be seen here

Process:

Wireframing/storyboarding

This is basically a light sketch of how the rough layout of the slides will be.  I tried to avoid typicall ‘retro comic”/pop art approach and focus more on visualizing ‘the grid’ as comic panels. Due to time constrains I made only about 7 sketches.

Original Characters

Comics need characters, again avoiding the typical ‘superhero’ association, I sketched office people characters which are scanned and then inked and coloured in photoshop

These OC will be used for the Menu and as fillers on some of the slides

Backgrounds

In an ideal world, I would’ve preferred drawn background to emphasize the comic feel of the template. I used an old paper texture to give an old comic book to the overall feel of the template. The background were sourced from Pexels.com. The images are then heavily faded so that they don’t fight for attention with the overal foreground.

Frames

A dominant sign of comics are its panels, of frames. In comics the frames are used to tell the story in this tempate pack the frame and gutter separates the text and the images or other text. I also used dialog balloons and description boxes for the comic feel of the slide.

Fonts

Comics Sans are not standard comic fonts despite the new shoved down people’s throat by Microsoft. I used ‘Komik Axis’ as the title font and ‘Wild words’ for the content font, as a comic creator I usually go to Blambot.com that usually provide (proper) free comic fonts for Indie publishers (or you can pay).

Build

The template size is 1280 x 800 with a classic chromeless player, build in Articulate 360. Additional navigation buttons are made in photoshop (Back and Next Button) or directly in Articulate Storyline (Submit and Start button).

 

Final Output

Powered by elearningfreak.com

 

Full size can be seen here

 

Comments

comments