storyboarding a serious comic
DESCRIPTION
Newly discovered design methodologies including art direction, asset management, voice over recording, and general project management.TRANSCRIPT
![Page 1: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/1.jpg)
STORYBOARDING A SERIOUS COMICCase Study
![Page 2: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/2.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/3.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/4.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/5.jpg)
Splash screen concept sketch
![Page 6: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/6.jpg)
![Page 7: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/7.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/8.jpg)
THE SCRIPT
![Page 9: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/9.jpg)
SCRIPT – ORIGINAL
![Page 10: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/10.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/11.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/12.jpg)
THE STORYBOARDING PROCESS
![Page 13: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/13.jpg)
STEP 1: Sequential narrative sketches
![Page 14: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/14.jpg)
STEP 2: Adjust flow
![Page 15: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/15.jpg)
STEP 3: Get a really big board
![Page 16: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/16.jpg)
STEP 4: Create storyboard from sequential narrative sketches
![Page 17: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/17.jpg)
STEP 5: Rinse & Repeat
![Page 18: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/18.jpg)
STEP 6: Keep working and refining the storyboard from script
![Page 19: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/19.jpg)
StoyrboardingSTEP 7: OMG! What have I got myself into?!
![Page 20: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/20.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/21.jpg)
CHARACTER DEVELOPMENT
![Page 22: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/22.jpg)
GREG Need Pro
Artist Dude
STEP 1:
@hubriscomics
![Page 23: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/23.jpg)
STEP 2: Feed the artist!
![Page 24: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/24.jpg)
STEP 3: Pick a style, research, and draw a lot of concepts
![Page 25: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/25.jpg)
INITIAL character development model sheet lineup
![Page 26: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/26.jpg)
FINAL character development model sheet lineup
![Page 27: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/27.jpg)
•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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/28.jpg)
CHARACTER MODEL SHEETS
FOUR INCH THICK FOLDER of ARTWORK
![Page 29: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/29.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/30.jpg)
ART DIRECTION
![Page 31: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/31.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/32.jpg)
USE REAL OBJECTS TO MODEL
Frances’ bracelet
![Page 33: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/33.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/34.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/35.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/36.jpg)
speech334
‘nuff said!
bubbles
![Page 37: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/37.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/38.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/39.jpg)
Slide out panel to review character backgrounds and biographies
![Page 40: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/40.jpg)
Slide out panel to review an interactive map of the three agencies
![Page 41: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/41.jpg)
Slide out panel to review an interactive DVD-style [Menu]
![Page 42: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/42.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/43.jpg)
ASSET MANAGEMENTGet and STAY organized!
![Page 44: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/44.jpg)
Audio file naming convention matches script.
![Page 45: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/45.jpg)
ALL artwork split out from background and followed same script naming convention
![Page 46: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/46.jpg)
ALL speech bubbles follow same script naming convention including dialogue number and character name.
![Page 47: Storyboarding a Serious Comic](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/47.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/48.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022061119/5462dc58b1af9fba388b50e5/html5/thumbnails/49.jpg)
THANK YOU!LET’S DO IT AGAIN!
Kevin ThornStoryboarding, art direction, development
@learnnuggetsNuggetHead Studiozhttp://nuggethead.net
Greg CravensIllustrations
@HubrisComicsHubris Comicshttp://hubriscomics.com