Work In Progress: Heroes and Zeros

draaaaaaaaft111this is my rough draft for my finished infographic. The font and some parts of the text need to be fixed and the images within need to help to represent the aspect of the hero’s journey more clearly.


Research: Image Manipulation Techniques

Using Illustrator as the Ultimate Type Tool

Illustrator makes it incredibly easy to work with type. Just view the options under the type tool (T) to get started.

One of the of the most useful tools is Type on a Path. First draw a path of any shape, and select the Type on a Path Tool. Then select the path with your cursor and begin typing. There are some excellent opportunities for type design using this tool.

Also note, that the usual type options are available from the Character Panel ((Cmd + T).

Using Swatches and Color Groups to Stream Line Color Management

The swatches panel contains colors, tints, gradients, and patterns that can be saved separately from your document. Why is this useful? Let’s say that your working on a project that contains 4 colors plus a gradient and two seamless patterns for a client. This is print project 1 of 8 that the client has requested, and you know that you will be using these exact colors over all of these pieces. You can simply create a new color group by choosing it from the panel drop down menu, then drag and drop each color to the group, or choose “Add Selected Colors” from the drop down.

Once your colors and gradients are contained within the panel you can save them from the drop down menu within the swatches panel.

Filling Your Shapes with Gradients, Meshes and Patterns


Gradients in Illustrator can be added from the gradient panel (Window | Gradient). In the Gradient panel, the Gradient Fill box thumbnail displays the colors and type of the current gradient. When you click the thumbnail, the selected object on the art board is filled with the gradient.
Gradients can also be added with the Gradient Tool (G), which provides some of the same features as the Gradient Panel except they are directly over the object on the art board. With the slider you can modify the angle, location, and spread of a linear gradient or the focal point and origin of a radial gradient. You can also add and edit color stops right from the slider when you hover the mouse over it.


When a mesh object is created it allows that object to contain multiple colors which can flow in different directions and transition smoothly from one point to another. Multiple lines cross the object and provide a way to easily manipulate color transitions on the object. Where these lines cross a mesh point is created. Mesh points appear as diamond shapes and act similar to anchor points but with the capability of accepting color. You can add and delete mesh points as needed.
To convert an object to a mesh, simply select the Mesh Tool (U), choose a fill color for the mesh, and begin click on the object to add mesh points.


Patterns in Illustrator are saved in the Swatches Palette. Anything can be saved as a pattern, but most likely you will be creating a seamless design. To create a new pattern simply choose (Edit | Define Pattern). Patterns can be saved along with colors and gradients in a Swatch Library.

Ultimate Shape Manipulation using Envelopes

Envelopes are objects that reshape selected objects. You can make an envelope out of an object or you can use a preset warp shape or a mesh grid as an envelope.

To distort an object using an Envelope

Select an object. Choose (Object | Envelope Distort | Make With Warp or Make with Mesh). To use a object as the shape of the envelope, make sure two objects are selected, the top most object being the envelope shape, and select (Object | Envelope Distort | Make With Top Object).

Then edit any anchor point on the envelope with the Direct Selection Tool. This gives you the ability to fine tune the object to whatever shape you desire.

Keyboard Shortcuts for Editing Shapes

Switch Pen tool to Convert Anchor Point tool (alt)PC (option)Mac
Switch between Add Anchor Point tool and Delete Anchor Point tool (alt)PC (option)Mac
Move current anchor point while drawing with Pen tool (spacebar + mouse drag)
Cut a straight line with Knife tool (alt + mouse drag)PC (option + mouse drag)Mac
Cut at 45° or 90° with Knife tool (shift + alt + mouse drag)PC (shift + option + mouse drag)Mac

Non-Destructive Design with Appearance Attributes

Appearance Attributes are similar to adjustment layers in Photoshop. Basically its Illustrator’s answer to non-destructive design. Appearance attributes are properties applied to the look of an object that do not effect its underlying structure.  If you apply an appearance attribute to an object and then decide to remove it later, it does not change the underlying object or any other attributes applied to the object.

Take a peak at the Appearance Panel (Window | Appearance). From within this panel you can control EVERYTHING about an object or group of objects. Get to know this panel and understand how to use it. It will make a huge difference in your workflow and how your vector artwork is structured.

This is very handy for my infographic because it will feature a lot of text on different angles and vectors. The information about gradients, outlines and fills are of paramount importance as well because my infographic will feature many images that represent the hero’s journey. In order to make it look appropriate to the infographic style I will need to apply the skills that have been outlined here in order to make my infographic easy on the eyes and appealing.


Brown, N. (2011). Illustrator Mastery: 25 Techniques Every Designer Must Know. Wegraphics. Retrieved from:



Research: Other Visual Reperesentations

1)                                                              2)                                                                             3)                                                                       4)                                       5)Heros-Journey





I have learnt a lot from the above representations of the hero’s journey but can also see some weaknesses in all of the above representations. For my infographic, I was thinking about basing it off image 1) but presenting it with more information and a more interesting and enticing way.  However, I am operating on a slightly different system to 1). I am working on Christopher Vogler’s version which is a 12 stage process. Part of making my image visually appealing will be using the technique of 2) which uses images to not only grab the viewer’s attention but also because it is more interesting than simply using unappealing and large amounts of text.

Retrieved from:







Research: The Different Versions of The Hero’s Journey


Act Campbell (1949) David Adams Leeming (1981) Phil Cousineau (1990) Christopher Volger (2007)
I. Departure 1. The Call to Adventure
2. Refusal of the Call
3. Supernatural Aid
4. Crossing the Threshold
5. Belly of the Whale
1. Miraculous conception and birth
2. Initiation of the hero-child
3. Withdrawal from family or community for meditation and preparation
1. The Call to Adventure 1. The Ordinary World
2. The Call to Adventure
3. Refusal of the Call
4. Meeting with the Mentor
5. Crossing the Threshold to the Special World
II. Initiation 6. The Road of Trials
7. The Meeting with the Goddess
8. Woman as Temptress
9. Atonement with the Father
10. Apotheosis
11. The Ultimate Boon
4. Trial and Quest
5. Death
6. Descent into the underworld
2. The Road of Trials
3. The Vision Quest
4. The Meeting with the Goddess
5. The Boon
6. Tests, Allies and Enemies
7. Approach to the Innermost Cave
8. The Ordeal
9. Reward
III. Return 12. Refusal of the Return
13. The Magic Flight
14. Rescue from Without
15. The Crossing of the Return Threshold
16. Master of Two Worlds
17. Freedom to Live
7. Resurrection and rebirth
8. Ascension, apotheosis, and atonement
6. The Magic Flight
7.The Return Threshold
8.The Master of Two Worlds
10. The Road Back
11. The Resurrection
12. Return with the Elixir

Campbell’s seventeen stages

The following is a more detailed account of Campell’s original 1949 exposition of the monomyth in 17 stages.


The Call to Adventure

The hero begins in a mundane situation of normality from which some information is received that acts as a call to head off into the unknown.

Refusal of the Call

Often when the call is given, the future hero first refuses to heed it. This may be from a sense of duty or obligation, fear, insecurity, a sense of inadequacy, or any of a range of reasons that work to hold the person in his or her current circumstances.

Supernatural Aid

Once the hero has committed to the quest, consciously or unconsciously, his guide and magical helper appears or becomes known. More often than not, this supernatural mentor will present the hero with one or more talismans or artifacts that will aid him later in his quest.

Crossing the Threshold

This is the point where the person actually crosses into the field of adventure, leaving the known limits of his or her world and venturing into an unknown and dangerous realm where the rules and limits are not known.

Belly of the Whale

The belly of the whale represents the final separation from the hero’s known world and self. By entering this stage, the person shows willingness to undergo a metamorphosis.


The Road of Trials

The road of trials is a series of tests, tasks, or ordeals that the person must undergo to begin the transformation. Often the person fails one or more of these tests, which often occur in threes.

The Meeting with the Goddess

This is the point when the person experiences a love that has the power and significance of the all-powerful, all encompassing, unconditional love that a fortunate infant may experience with his or her mother. This is a very important step in the process and is often represented by the person finding the other person that he or she loves most completely.

Woman as Temptress

In this step, the hero faces those temptations, often of a physical or pleasurable nature, that may lead him or her to abandon or stray from his or her quest, which does not necessarily have to be represented by a woman. Woman is a metaphor for the physical or material temptations of life, since the hero-knight was often tempted by lust from his spiritual journey.

Atonement with the Father

In this step the person must confront and be initiated by whatever holds the ultimate power in his or her life. In many myths and stories this is the father, or a father figure who has life and death power. This is the center point of the journey. All the previous steps have been moving into this place, all that follow will move out from it. Although this step is most frequently symbolized by an encounter with a male entity, it does not have to be a male; just someone or thing with incredible power.


When someone dies a physical death, or dies to the self to live in spirit, he or she moves beyond the pairs of opposites to a state of divine knowledge, love, compassion and bliss. A more mundane way of looking at this step is that it is a period of rest, peace and fulfillment before the hero begins the return.

The Ultimate Boon

The ultimate boon is the achievement of the goal of the quest. It is what the person went on the journey to get. All the previous steps serve to prepare and purify the person for this step, since in many myths the boon is something transcendent like the elixir of life itself, or a plant that supplies immortality, or the holy grail.


Refusal of the Return

Having found bliss and enlightenment in the other world, the hero may not want to return to the ordinary world to bestow the boon onto his fellow man.

The Magic Flight

Sometimes the hero must escape with the boon, if it is something that the gods have been jealously guarding. It can be just as adventurous and dangerous returning from the journey as it was to go on it.

Rescue from Without

Just as the hero may need guides and assistants to set out on the quest, oftentimes he or she must have powerful guides and rescuers to bring them back to everyday life, especially if the person has been wounded or weakened by the experience.

Campbell: “The hero may have to be brought back from his supernatural adventure by assistance from without. That is to say, the world may have to come and get him. For the bliss of the deep abode is not lightly abandoned in favor of the self-scattering of the wakened state. ‘Who having cast off the world,’ we read, ‘would desire to return again? He would be only there.’ And yet, in so far as one is alive, life will call. Society is jealous of those who remain away from it, and will come knocking at the door. If the hero. . . is unwilling, the disturber suffers an ugly shock; but on the other hand, if the summoned one is only delayed—sealed in by the beatitude of the state of perfect being (which resembles death)—an apparent rescue is effected, and the adventurer returns.”

The Crossing of the Return Threshold

The trick in returning is to retain the wisdom gained on the quest, to integrate that wisdom into a human life, and then maybe figure out how to share the wisdom with the rest of the world.

Master of Two Worlds

This step is usually represented by a transcendental hero like Jesus or Gautama Buddha. For a human hero, it may mean achieving a balance between the material and spiritual. The person has become comfortable and competent in both the inner and outer worlds.

Freedom to Live

Mastery leads to freedom from the fear of death, which in turn is the freedom to live. This is sometimes referred to as living in the moment, neither anticipating the future nor regretting the past.

The above information is crucial for my infographic because I have to have a good understand of what exactly the hero’s journey is before I attempt to represent it. In terms of picking the version of the hero’s journey that was best for my infographic I had a difficult decision to make. Initially I wanted to to Joseph Campbell’s version but when I saw just how many steps there was I thought that wouldn’t give me the room I needed for my illustrations within my lay out and could result in the image overall looking very cluttered and difficult to read and understand. Because of this I opted for the version of the hero’s journey that I thought was next best. This was Christopher Volger’s version and I thought with the 12 steps of journey, and what each step was named, I thought I could do some good visual representations of all the stages of that model. I didn’t really agree with David Adam Leeming’s version and thought that Phil Cousineau’s version was perhaps too simplified.


Volger, C. (2009). The Hero’s Journey Outline. The Writer’s Journey. Retrieved from:



Research: Use of Colour

3 Easy Ways to Pick Great Color Schemes For Your Infographics

#1 Most common mistake with colors: Adding too many colors Solution: Use more shades instead.

Color schemes influence comprehension

[This is part of the Infographic Design Series. Check out the other posts!]Is this bruise on my arm bluish black or blackish blue, if an orange is orange in color what color is a carrot? There is a large spectrum (pun intended) of uncertainty and subjectivity when it comes to using colors for art and design. This post seeks to provide some order to that chaos and some structure to guide you in picking colors and creating color schemes for your work.

Subjective as it may be, we can agree that colors affect our moods, perceptions and adds context to our content. There’s also tons of psychological research to back this claim. Hence, selecting the right color scheme will potentially enhance the effectiveness of the message that you want to get across. Remember though, like all things beautiful there’s a thin line between having an array of colors that would be a sight for sore eyes and using too many colours that would actually give someone sore eyes. As you go along we’ll help you  with some neat tips and tricks and best practices to achieve the former rather than the latter.

Here are a few things you need to keep in mind before we move on to the nitty gritty details.

  1. Stick to 2 main colors, and do not use more than 4 colours. A little goes a long way.
  2. Pick only 1 or 2 main colors (clear and bold), while the rest should be complementary colors (subtle and warm).
  3. When you’re tempted to add more colors,don’t give in- use more shades instead.
  4. Provide ample white space for the eyes to stay relaxed.


1. Follow your company branding

If you are creating work-related material, one of the best and safest ways to choose a color scheme is to follow the color of the company’s brand guidelines. For some, this may not even be a matter of choice! Use it as the primary color to hunt for complementing colors to match.

Choose color scheme by logo

Image credits: Left: redpepper | Right: Coca – Cola Infographic by Nelly Soegianto on Behance

The examples above use colors of their company branding guidelines as the main color.

  • Oreo Blue, the brand color complemented by the product color makes a clean and clear infographic.
  • An infographic themed with Coca-cola Red as the leading color in different shades with complementing colors.

Selecting complementing colors

For this, you will need an easy-to-use generator. There are many online tools you can use to generate theme colors. I personally prefer Coolors. It is a free, quick and easy color scheme generator—you just need to lock-in your company color and leave the rest to Coolors to match for you. You can also go for your own preferred tool.

Selecting shades

If you are unsure which scheme to choose, you can work with shades. You can try ColorSchemer Online. Play with the “Lighten Scheme” and “Darken Scheme” and pick a few codes in different shades and jot it down.

Color schemes by company logo

Choosing colors this way works best when used for branding infographics. Using your company color will furtherstrengthen your brand awareness.


2. Let your content decide

You can also use the subject to determine the best color to use for your infographic. For instance, if your infographic is about coffee you can use shades of coffee and its complimenting colors. Or you can select colors based on the objects in the infographic and make it more meaningful, like the following. The color scheme used based on the objects of the infographic makes the information very easy to consume.

Color scheme by content
Image credit: For this method, you can grab any preset color schemes off the Net. There are many available color sets online, for instance,

For this method, you can grab any preset color schemes off the Net. There are many available color sets online, for instance, Adobe Color CC (previously known as Adobe Kuler). It is an online color generator tool that comes with user preset themes. I pick this tool because they have a good amount of color sets providing me with ample choices. Once again, you can always pick from your own preferred site.

Color scheme by content

Colors instantly highlight the context and facilitate visual perception. So, selecting color scheme to match your content is like giving more context to your content.


3. Draw inspiration from the natural world

One other way to select color schemes is to just draw inspiration from what is natural e.g. the colors of the seasons (or trees, sea, sky etc) because simply, you can’t go wrong with nature. Here’s a list of colors by seasons to help you get inspired. You can pick one or two main colors then use Coolors to help you with the rest. Or you can play around with the shades and tints. Remember, do not exceed four colors. If you want to use more colors, play with the shades.

Color Scheme by season - Autumn
Color Scheme by season - Winter
Color Scheme by season - Spring
Color Scheme by season - Summer
You don’t have to limit yourself with mere four seasons. There are colors of the holidays and festive seasons for you to choose from too. Here are more colors of the seasons to get you inspired.
Color Scheme by holidays and festive season

Color scheme by seasons

This method works best when used for infographics for seasonal marketing purpose or season themed subject. Holidays and festive seasons are always associated with colors and mood. By applying the colors that are usually associated with these seasons, the message is easier to comprehend, making your work more effective.

How to apply colors in Piktochart?

Now, with your color codes, you can apply the colors on your background, text, icons and shapes in Piktochart accordingly. To apply the background color, you will select Background on the panel on the left as shown below.
Color scheme - Pikto background color picker
For objects like text, icons, and shapes, you will select the object and pick a color from the color picker on the toolbar as indicated below. You can also apply the Hex code you have chosen previously.
Color scheme - Pikto object color picker

4. Too much fuss? Try Pikto Templates.

If you prefer not to mess with colors, you can always use our handy preset templates. The colors are carefully picked and match by our team of designers just for you. You will notice that they follow our best practice in terms of 2-4 main colors, using shades/hues and using a lot of white space. The following are examples of Piktochart templates ready for use.
Color scheme - Pikto templates preset colors

Key takeaways.


Pick color schemes for your infographic using these 3 easy ways:

  1. Follow the color(s) of your company logo: for branding infographics
  2. Let your content decide the colors: for content marketing infographics
  3. Go with the colors of the four seasons or festive seasons: for seasonal marketing infographics

I have learnt much from the above information in regards to the use of colour in infographics which is crucial for me to creating one that people want to actually read. Initially, I was thinking about using a rainbow of bright colours for the wheel segment of my image however, from what I have learnt I came to the understanding that it is much more me to stick to just three different key colours and also tone down the brightness of them. Also because of what the above information states about visual balance in images, this has influenced me to ensure that the rest of the image is composed from shades alone as to not make the image too ‘busy’ or garish. This will most likely include a dull grey background, white in between the colours to help separate them a little and similar shades used for all other aspects of the infographic.


See Mei Chow. (2015). 3 Easy Ways to Pick Great Color Schemes For Your Infographics. Piktochart. Retrieved from:


Research: Semiotics

The Meaning of Shapes

There are truly an endless variety of shapes and combination of shapes, each communicating its own meaning and message. Often the meaning behind shapes is cultural (a red octagon as a stop sign), particularly as shapes are combined. We’ll confine ourselves to a discussion of some basic geometric shapes here and I’ll provide some links to more detailed sources of shape meaning beyond the basics.


Circles have no beginning or end. They represent the eternal whole and in every culture are an archetypical form representing the sun, the earth, the moon, the universe, and other celestial objects between. Circles are used to suggest familiar objectssuch as wheels, balls, many kinds of fruit. They suggested well-roundedness and completeness.

Circles have free movement. They can roll. Shading and lines can enhance this sense of movement in circles. Circles are graceful and their curves are seen as feminine. They are warm, comforting and give a sense of sensuality and love. Their movement suggests energy and power. Their completeness suggests the infinite, unity, and harmony.

Circles protect, they endure, they restrict. They confine what’s within and keep things out. They offer safety and connection. Circles suggests community, integrity, and perfection.

Because they are less common in design they work well to attract attention, provide emphasis, and set things apart.

rectangles and squares

Squares and rectangles are stable. They’re familiar and trusted shapes and suggest honesty. They have right angles and represent order, mathematics, rationality, and formality. They are seen as earthbound. Rectangles are the most common geometric shape encountered. The majority of text we read is set in rectangles or squares.

Squares and rectangles suggest conformity, peacefulness, solidity, security, and equality. Their familiarity and stability, along with their commonness can seem boring. They are generally not attention getters, but can be tilted to add an unexpected twist. Think of web pages that tilts framed images to help them stand out.

Every element on a web page is defined by a rectangle according to the css box model. Web pages are rectangles made up of smaller rectangles and squares.

In Buddhist symbolism a square (earthbound) inside a circle (eternal whole) represents the relationship between the human and the divine.


Triangles can be stable when sitting on their base or unstable when not. They represent dynamic tension, action, and aggression. Triangles have energy and power and their stable/unstable dynamic can suggest either conflict or steady strength. They are balanced and can be a symbol for law, science, and religion.

Triangles can direct movement based which way they point. They can be used to suggest familiar themes like pyramids, arrows and, pennants. Spiritually they represent the religious trinity. They can suggest self-discovery and revelation.

The strength of triangles suggests masculinity. Their dynamic nature make them better suited to a growing high tech company than a stable financial institution when designing a logo. Triangles can be used to convey progression, direction, and purpose.


Spirals are expressions of creativity. They are often found in the natural growth pattern of many organisms and suggest the process of growth and evolution. Spirals convey ideas of fertility, birth, death, expansion, and transformation. They are cycles of time, life, and the seasons and are a common shape in religious and mystical symbolism.

Spirals move in either direction and represent returning to the same point on life’s journey with new levels of understanding. They represent trust during change, the release of energy and maintaining flexibility through transformation.

Clockwise spirals represent projection of an intention and counterclockwise spirals the fulfillment of an intention. Double spirals can be used to symbolize opposing forces.


Crosses symbolize spirituality and healing. They are seen as the meeting place of divine energies. The 4 points of a cross represent self, nature, wisdom, and higher power or being. Crosses suggest transition, balance, faith, unity, temperance, hope, and life.

They represent relationships and synthesis and a need for connection to something, whether that something is group, individual, self, or project related..

As with lines vertical shapes are seen as strong and horizontal shapes are seen as peaceful. Most everything said about vertical and horizontal lines can be said about vertical and horizontal shapes.

Curved shapes offer rhythm and movement, happiness, pleasure and generosity. They are seen as more feminine than sharp shapes which offer energy, violence and, anger. Sharp shapes are lively and youthful and are seen as more masculine.

Additional Resources for the Meaning of Shapes

Using Shapes in Web Design

We use shapes to add and sustain interest in a design. Shapes of different visual weight can be used to create focal points in a design and direct the flow of a design. Shapes organize elements by separating some and connecting others.

Shapes can be used to convey depth by varying their size and position within a design. Larger shapes will appear closer and smaller shapes will appear further away. Shapes that are located lower in a design will seem closer and those higher up further away. Overlapping shapes is another way to create a sense of one in front of the other to add depth to your design.

Creating depth with shapes

Shapes that lean toward a protagonist appear to be blocking or stopping progress. Shapes leaning away from the protagonist give the impression of aiding progress by opening up space.

  • Try to keep background shapes simple and large. Being large can help attract attention and simplicity can put the focus back to the foreground.
  • Try to use few shapes where possible. Don’t use 3 or 4 shapes to communicate when one shape will do.
  • Try to limit the number and size of shapes where possible for clarity in conveying your message.

The above information regarding the shapes and their meanings, although a little silly at times has still really helped me to decide upon the visual approach for my image. Primarily in deciding that the base of my image will consist of a circle in the middle of the image and will contain the stages of the hero’s journey in order to effectively convey the idea that good narrative journeys are circular in their nature. From what the above information about using shapes with smooth edges in an image it is important to continue to use smooth rounded objects rather than sharp edges if you want visual harmony within your image. Because of this for the title box and the bottom box I will make sure that they have rounded edges to help to both guide the viewers eye and ensure better visual harmony.


Bradley, S. (2010) The Meaning Of Shapes: Developing Visual Grammar. Vanseo design. Retrieved from:



Work In Progress: Drafts and Crafts

I knocked together two really quick drafts of the possible directions I could take in visually portrayal of The Hero’s Journey on the ol’ faithful MS Paint. I was listening to Easy (Like Sunday Morning) by Lionel Richie on loop while was creating these. I don’t yet know if it had a negative or positive effect on my creative capacity. I guess only time will tell. It is surely a tremendous song nonetheless and boy, his mustache is definitely what the kids these days are calling “On Flek”. It has to be one of the least threatening mustaches of all time. Of all time. There’s just something so majestic about its shape. it reminds me of a majestic Bald Eagle’s spread wings as it sores high above modern consumer capitalism and the associated woes (modern consumerism obviously being symbolized by his voluptuous lips). His mustache represents everything we all wish we could be but are too scared to attempt because of fear of failure. To back up the epiphany presented by his mustache, later in Easy Lionel goes on to sing the lyrics “I want to be free. I want to be me.” Beautifully concise. And you just cant argue with rhyme. Rhyme wins every time. And so does Lionel Richie’s mustache. It has taught us so much. Honestly, if I had a dollar for every time a mustache had caused me to embark on some level of introspective reflection I could fill a paddling pool with daisies, lay in it making daisy angels, and listening to the soundtrack of ‘Guardian’s of the Galaxy’ all day (and also bride my tutor to give me an A in this assignment).

But I digress, the two drafts, and the link to Easy (Like Sunday Morning) are below. Have a beautiful day everyone. Hug a stranger. You deserve it.

heros journey draft1 heros journey draft2