49
STORYBOARDING A SERIOUS COMIC Case Study

Storyboarding a Serious Comic

Embed Size (px)

DESCRIPTION

Newly discovered design methodologies including art direction, asset management, voice over recording, and general project management.

Citation preview

Page 1: Storyboarding a Serious Comic

STORYBOARDING A SERIOUS COMICCase Study

Page 2: Storyboarding a Serious Comic

Created by the Community Prevention and Intervention Unit of University of Texas Southwestern Medical Center with a grant funded by the Centers for Disease Control (CDC).

PROFILE

Page 3: Storyboarding a Serious Comic

SITUATION

Prevention with Positives (PwP) is an initiative to help persons living with HIV to get assistance and care through 10 components and related resources.

•UTSW wanted to share the importance of PwP. •Did not with traditional elearning.•More of an awareness campaign in support of CDC initiative. •Tell a story about the journey of two people with different circumstances

learning of their HIV positive status and the managed care received.

Page 4: Storyboarding a Serious Comic

SOLUTION

Write a story with an educational emphasis presented in a graphic novel format and comic style artwork. Develop in an accessible authoring software for packaging and delivery to the PwP website.

Page 5: Storyboarding a Serious Comic

Splash screen concept sketch

Page 6: Storyboarding a Serious Comic
Page 7: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 8: Storyboarding a Serious Comic

THE SCRIPT

Page 9: Storyboarding a Serious Comic

SCRIPT – ORIGINAL

Page 10: Storyboarding a Serious Comic

Audio filename indicator

Example: 2A.wav included 2.1, 2.2, and 2.3 dialogue

SCRIPT – REVISED FOR VO

Page 11: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 12: Storyboarding a Serious Comic

THE STORYBOARDING PROCESS

Page 13: Storyboarding a Serious Comic

STEP 1: Sequential narrative sketches

Page 14: Storyboarding a Serious Comic

STEP 2: Adjust flow

Page 15: Storyboarding a Serious Comic

STEP 3: Get a really big board

Page 16: Storyboarding a Serious Comic

STEP 4: Create storyboard from sequential narrative sketches

Page 17: Storyboarding a Serious Comic

STEP 5: Rinse & Repeat

Page 18: Storyboarding a Serious Comic

STEP 6: Keep working and refining the storyboard from script

Page 19: Storyboarding a Serious Comic

StoyrboardingSTEP 7: OMG! What have I got myself into?!

Page 20: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 21: Storyboarding a Serious Comic

CHARACTER DEVELOPMENT

Page 22: Storyboarding a Serious Comic

GREG Need Pro

Artist Dude

STEP 1:

@hubriscomics

Page 23: Storyboarding a Serious Comic

STEP 2: Feed the artist!

Page 24: Storyboarding a Serious Comic

STEP 3: Pick a style, research, and draw a lot of concepts

Page 25: Storyboarding a Serious Comic

INITIAL character development model sheet lineup

Page 26: Storyboarding a Serious Comic

FINAL character development model sheet lineup

Page 27: Storyboarding a Serious Comic

•No change to Frances and Carlos•#1 RJ look became #2 Stu•#2 RJ got a new look•Tiffani needed to be “cuter”•Jan needed to look “older”

#1

#2

Page 28: Storyboarding a Serious Comic

CHARACTER MODEL SHEETS

FOUR INCH THICK FOLDER of ARTWORK

Page 29: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 30: Storyboarding a Serious Comic

ART DIRECTION

Page 31: Storyboarding a Serious Comic

SCENE 4:Frances reviews Tiffani’s file

SCENE 4:Frances leaves en route to Tiffani’s apartment

SCENE 5:Frances knocking on Tiffani’s apartment door.

Q: Health Department to Tiffani’s apartment. How do we know that’s Frances knocking on the door?

A: The prop. The large purple beaded bracelet in earlier scenes establishes the character in later scenes.

Page 32: Storyboarding a Serious Comic

USE REAL OBJECTS TO MODEL

Frances’ bracelet

Page 33: Storyboarding a Serious Comic

Health Department Community Health Clinic Community Support Center

The story revolved around three Community-Based Organizations (CBOs) that had to look similar as they are all in the same urban neighborhood.

Page 34: Storyboarding a Serious Comic

Parkside CommunityThe overhead shapes need to match the building elevations (previous slide).

Health Department

Positive Empowerment

Community Health Clinic

Page 35: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 36: Storyboarding a Serious Comic

speech334

‘nuff said!

bubbles

Page 37: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 38: Storyboarding a Serious Comic

UI LAYOUT & DESIGN

Global access to slide out panels

Global access to slide out panels

Global access to slide out panels

Page 39: Storyboarding a Serious Comic

Slide out panel to review character backgrounds and biographies

Page 40: Storyboarding a Serious Comic

Slide out panel to review an interactive map of the three agencies

Page 41: Storyboarding a Serious Comic

Slide out panel to review an interactive DVD-style [Menu]

Page 42: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE

Page 43: Storyboarding a Serious Comic

ASSET MANAGEMENTGet and STAY organized!

Page 44: Storyboarding a Serious Comic

Audio file naming convention matches script.

Page 45: Storyboarding a Serious Comic

ALL artwork split out from background and followed same script naming convention

Page 46: Storyboarding a Serious Comic

ALL speech bubbles follow same script naming convention including dialogue number and character name.

Page 47: Storyboarding a Serious Comic

PROCESS

•Script writing•Voiceover (VO) recording•Storyboarding•Character Development•Art Direction•Speech Bubbles•UI layout & design•Asset Management•Lessons Learned

IDEA DONE7 months-ish

Page 48: Storyboarding a Serious Comic

LESSONS LEARNED

Script before StoryboardCharacter Development early and DEFINE characteristicsCharacter voice actors record dialogue at same timePrioritize visual design changes in phasesArt directing an artist in an unfamiliar industry

Page 49: Storyboarding a Serious Comic

THANK YOU!LET’S DO IT AGAIN!

Kevin ThornStoryboarding, art direction, development

@learnnuggetsNuggetHead Studiozhttp://nuggethead.net

Greg CravensIllustrations

@HubrisComicsHubris Comicshttp://hubriscomics.com