Designer Courses / Create in Ceros

Create an Infographic

In this lesson, we will be building an Infographic that has multiple clickable areas to uncover additional information. Below we have outlined the basic steps to create this experience, however, for additional context be sure to check out the video above. Additionally, you can also upload the finished experience to your studio if you would rather deconstruct this infographic. We have included an embedded version below to assist with your build.

Steps to Create an Infographic

Background

  • Create a new Ceros Experience entitled “Infographic” and dive into the city
    • Adjust canvas size to be 600px wide, 600px fold, 1,250px high
  • Create 6 layers (top to bottom): “Popup 1”, “Popup 2”, ”Popup 3”, “Header”, “Footer”, “Background”
  • Drag all “BG” assets from your desktop to canvas
    • Rearrange” BG” assets on canvas
    • Reorder Background assets (top to bottom): “Plus”, “Cloud”, “Balloon”, “Stars”, “Planets”, “Timeline”, “Background”
    • Align “Timeline” and “Background” to “center” and “bottom” of canvas
    • Align “Planets” and “Stars” to “center” and “top” of canvas
    • Align “Balloon” to right portion of canvas right above fold
    • Align “Cloud” to left portion of canvas right above balloon
    • Align “Plus” in first timeline loop
  • Duplicate “Plus” for the other two timeline loops — align appropriately
  • Select “Background” layer – draw a textbox object near plus icon and type “1839”
    • Assign Google font “Oswald” – Size 50 – Color #F98B8A
    • Duplicate year text for 2 remaining areas (next to plus icons)
    • Additional years should be “1868” “1878”

Footer

  • Select “Footer” layer and drag all “FT” assets from desktop to canvas
    • Reorder Footer layer assets (top to bottom): “Fireflies”, “Birds”, “Forest”, “Mountains”, “Sun”
    • Send all objects to center and bottom of canvas
    • Move “Sun”, “Birds” and “Fireflies” layout to be more appropriately aligned on the canvas

Header

  • Select “Header” layer and drag all “HD” assets from desktop to canvas
  • Reorder “Header” image assets in the layer panel (top to bottom): “Evolution”, “Visual Content”, “UFO”, “Shooting Star”
  • Align all objects to center and top of canvas
  • Realign text objects at top of canvas (Evolution of Visual Content)
  • Align “UFO” to right side of canvas near the top
  • Align “Shooting Star” to left side of canvas towards top

Popup

  • Select “Popup 1” layer
    • Draw a rectangle that covers the entire canvas
    • Change color to black – lower opacity to 60-70%
    • Draw a white rectangle which will contain popup text
    • Draw an additional square to point towards plus icon and rotate it 45 degrees
  • Create a text component inside of popup rectangle
    • Paste text “Louis Daguerre creates the first practical photographic process, which he names the daguerreotype.”
    • Assign Google font “Oswald” – Size 17 – Center alignment – off black color
    • Copy both “Plus” icon and year text from background layer, and paste into popup 1 layer
    • Rotate “Plus” icon 45 degrees to make an “X” icon

Interactions

  • Select “Plus” icon in background layer
    • Apply an “On Click” trigger, “Show” action, and “Popup 1” as target
    • Select “Plus” icon (functioning as a Close Icon) in popup 1 layer and apply an “On Click” trigger > “Hide” action >and “Popup 1” as target
  • Hide popup 1 in layers panel
  • Repeat Popup and Interaction steps for “popup 2” and “popup 3” layers
    • In 1868 text box: “The first flipbook is patented by John Barnes Linett under the name kineograph (latin for “moving picture”).”
    • In 1878 text box: “Richard Leach Maddox invents a heat-ripened gelatin emulsion, paving the way for “instantaneous” photo exposure using dry plates.”

Animations

Popup layers:

  • Multi-select “Plus” icon (functioning as a close icon) in Popup 1-3 layers
    • Apply an “On View” animation > “Spin counter-clockwise fade in”> default timing
    • Apply an “On Hide” animation > “Fade out”> default timing
  • Multi-select 3 black square shapes (screen overlay) in each popup
    • Apply an “On View” animation > “Fade in”> default timing
    • Apply an “On hide” animation > “Fade out”> default timing
  • Multi-select popup text objects popup 1-3 layers
    • Apply an “On View” animation > “Fade in up”> default timing
    • Apply an “On Hide” animation > “Fade out”> default timing
  • Multi-select popup square objects
    • Apply an “On View” animation > “Fade in down”> default timing
    • Apply an “On Hide” animation > “Fade out” > default timing

Header Layer

  • Evolution of Text
    • Apply an “On View” animation >  “Fade in down” >default timing
  • Visual Content text
    • Apply an “On View” animation > “Slide in from right” > .5-second duration
  • UFO Object
    • Apply an “On View” animation of “Slide out to the left” > 20-second duration
  • Planets
    • Apply an “On View” animation of “Spin clockwise” > 100-second duration
    • Turn off easing
  • Stars
    • Apply an “On View” animation of “Pulse” > 20-second duration > repeat
  • Shooting stars
    • Apply an “On View” animation of “Enlarge fade in” > default timing
    • Apply a second animation of “Fade out” > 2-second duration

Footer Layer

  • Forest & Mountains
    • Apply an “On View” animation > “Slide up from bottom” > 2-second duration
      Sun
    • Apply an “On View” animation > “Slide up from bottom” > 10-second duration
      Birds
    • Apply an “On View” animation > “Slide out to left” > 30-second duration

Background

  • Balloon
    • Apply an “On View” animation > “Slide up from bottom” > 50-second duration
      Cloud
      Apply an “On View” animation > “Slide out to right” > 50-second duration

If you get stuck at any point, please consult the videos above as they will provide the additional context needed to complete this build. 

Create an Infographic