Portfolio Muhammad 'Roel' Islam

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



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


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 The images are then heavily faded so that they don’t fight for attention with the overal foreground.


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.


I used ‘Komik Axis’ as the title font and ‘Wild words’ for the content font, as a comic creator I usually go to that usually provide (proper) free comic fonts for Indie publishers (or you can pay).


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).

Full size can be seen here

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.