1. Creating a Multi-Relationship Circle VisualizationSetting the stage for a circle relationship visualization| 00:00 | In this lesson series we're going
to walk through how to design a very
| | 00:03 | specific type of infographic, one that
visualizes the relationships between multiple parties.
| | 00:08 | You've probably seen examples of this kind
of infographic on the web and in magazines.
| | 00:13 | It's a very common design called the
radial chart, and it's often chosen because of
| | 00:17 | its visual complexity.
| | 00:19 | In this video we'll set the stage
for recreating a multi-relationship
| | 00:22 | infographic that originally
appeared on onstartups.com.
| | 00:26 | It's about who invested
in which social networks.
| | 00:29 | When you visualize a one-to-one
relationship, you might use a pedigree chart or
| | 00:33 | another type of graph, but when you
visualize a many-to-many relationship, your
| | 00:37 | graph gets a little more complicated.
| | 00:39 | Many-to-many relationships are often
best drawn as radial charts, using circles
| | 00:44 | or ovals in order to leave room for all
the characters, the pertinent data the
| | 00:48 | legend, or the key that describes what's
going on, and the relationship indicators,
| | 00:52 | which are usually lines between the characters.
| | 00:54 | Normally we would start by creating a blank
canvas and drawing a wireframe in Photoshop.
| | 00:59 | You can use Illustrator if you like, but I
prefer to draw my infographics in Photoshop.
| | 01:03 | In this case we'll use a
wireframe that's been previously made.
| | 01:06 | The original graphic uses a font
called amplitude, which was free.
| | 01:11 | We're just going to use Myriad Pro
since its pretty standard on most computers.
| | 01:15 | We'll also pretend that we have
all the data collected already.
| | 01:19 | See my other lesson, Infographics:
Planning and WireFraming, for more on collecting
| | 01:23 | and storing data for infographics.
| | 01:25 | There as an Excel spreadsheet included
in the exercise files with this lesson
| | 01:28 | that has all of the data we need.
| | 01:30 | This chart is going to represent the
relationships between prominent social
| | 01:33 | networks like Facebook and Linkedin and
the investors who put money into them.
| | 01:37 | The investors are divided into two
categories: Angels and Venture Capitalists.
| | 01:43 | The relationships between these
characters are categorized by what kind of
| | 01:46 | investment was made in the company, the
social network, and in some cases if that
| | 01:51 | investor also found in another social,
network or if one social network was
| | 01:55 | acquired by another.
| | 01:56 | We'll use this data later on to figure
out the placement if characters around
| | 01:59 | the radial diagram, and we'll also use
it to help us draw lines between the
| | 02:03 | characters who have relationships.
| | 02:04 | So you'll see in this Excel spreadsheet
that in column A we have the characters,
| | 02:09 | the Angel investors or the Venture
Capitalists, and you'll see column B tell us
| | 02:13 | what kind of investor they are.
| | 02:15 | At the bottom we have one character
for a social network Facebook, because it
| | 02:19 | made an acquisition of FriendFeed.
| | 02:21 | You'll see in column C we have the
type of relationship and in column D the
| | 02:25 | object of the relationship.
| | 02:26 | So for example here, Ron Conway, we can
see invested an Angel investment in Daily
| | 02:32 | Booth, Stack Overflow,
Foursquare, Twitter, and Digg.
| | 02:36 | This is the data that we're
going to visualizing in our chart.
| | 02:39 | Now let's open up the PSD for this
project. It has a wireframe drawn up for this
| | 02:44 | infographic already.
| | 02:45 | Basically, it just give us space for a
title, a legend, a big circle for the
| | 02:49 | radial chart, labels for the characters,
and then at the bottom credits for the
| | 02:54 | author and the sources.
| | 02:56 | Since we're going to be drawing on
top of this wireframe, let's adjust the
| | 02:59 | transparency of the layer containing the
wireframe group here in the Layers palette.
| | 03:04 | Select the Wireframe layer and then adjust
the Transparency here. Let's put it at 30%.
| | 03:10 | This way we can still see it vaguely, but
it won't interfere with what we're drawing.
| | 03:15 | Also, since we don't want to
accidentally select and move this wireframe, let's
| | 03:18 | lock the layer by
clicking on this lock icon here.
| | 03:22 | Now once you click off of the
wireframe, you can't select it anymore.
| | 03:26 | We can hide the wireframe by
clicking on this eye icon here on the Layers
| | 03:30 | palette, in case we want to
just see what we've drawn.
| | 03:32 | And we can also toggle on the
finished infographic in case you want to see
| | 03:37 | what it looks like.
| | 03:38 | My infographics designs typically
have a bit of a cartoon or construction
| | 03:42 | paper feel to them,
| | 03:43 | so we'll be drawing this infographic in
that style, but the key concepts you'll
| | 03:48 | learn as we build this infographic
will apply to any style of design you wish
| | 03:51 | to use on your own
relationship or radial diagrams.
| | 03:54 | Now that we've set the stage, we're
ready to start labeling our characters and
| | 03:58 | use our data to illustrate their connections.
| | Collapse this transcript |
| Drawing relationships for your characters| 00:00 | In this video series, we are
recreating a radial chart to visualize
| | 00:03 | relationships between a
bunch of different characters.
| | 00:06 | Our circle-relationship infographic
has twenty-four different entities--and I will
| | 00:10 | call them characters--
| | 00:11 | and three different groups: venture
capitalists, angels and founders, and the social
| | 00:16 | networking startups they invested in.
| | 00:18 | In this lesson, we're going to draw the
labels for these characters, so that we
| | 00:22 | can then position them to create
a beautiful and useful diagram.
| | 00:26 | We're going to start with the
wireframe we left off with in the last video
| | 00:29 | and first create big category
labels and then smaller character labels.
| | 00:33 | As you can see here in this exercise
file, you can toggle the wireframe on and
| | 00:37 | off and you can toggle on that
completed infographic for reference if you want,
| | 00:42 | and even layer them over each other.
| | 00:45 | Since the social networks are the
object of the relationships in this diagram--
| | 00:49 | investors and angels are
investing money into the social networks--
| | 00:54 | it makes sense to put the social
networks at the bottom and then have the money,
| | 00:58 | so to speak, flow down to them.
| | 01:00 | Now let's switch back to our
wireframe and go to Excel to count how many
| | 01:04 | characters we have in each category so
can see how big we need to make the labels.
| | 01:08 | Here in Excel, we're going to count
how many angels and how many venture
| | 01:11 | capitalists we have, so we can know how
many we have to squish in each corner.
| | 01:15 | You can see here we have one, two, three, four,
five, six angel investors and seven
| | 01:22 | venture capitalists.
| | 01:23 | So now we'll go back into Photoshop and
create big labels for each of those categories.
| | 01:27 | Here in Photoshop I am going to
create a label for the angels, the venture
| | 01:30 | capitalists, and the social networks.
| | 01:33 | Using the Text tool here on the left
toolbar, I am going to go and I am going to
| | 01:37 | set the font size to 24 pt. with the
Myriad Pro, and we will use semibold.
| | 01:44 | By clicking on the canvas, I can start the text.
| | 01:47 | It's a little bit smaller right now,
so I am going to hit Command+Plus to
| | 01:50 | zoom in a little bit.
Here is the Angels and Founders label.
| | 01:57 | I am going to put it up here in the
top corner so we can have the smaller
| | 02:00 | labels go beneath it.
| | 02:03 | To make the next label, I am just going
to copy this layer by holding in the Alt
| | 02:08 | or Option key until I get these two
arrows here and then clicking and dragging
| | 02:13 | to copy it so I have the
exact same font for the next label.
| | 02:17 | Now I will use the Text tool by hitting
T or by clicking on the icon, and I will
| | 02:21 | click here, delete it, and
change this to Venture Capitalists.
| | 02:27 | I will click the Move tool to exit out of that.
| | 02:31 | I'll do a copy one more time, and scroll
down to put a label for the social networks.
| | 02:45 | On the original infographic, I drew
some little icons for each of the labels,
| | 02:49 | but that's just a little bit of extra detail
that you can reproduce on your own if you like.
| | 02:54 | Back in Excel, let's now grab the
first character so we can make a small
| | 02:58 | label to go under Angels.
| | 03:00 | Josh Schachter. I am going to copy his
cell so I have the text of his name and
| | 03:04 | now I am back in Photoshop, I am going
to zoom out and move to put a label for
| | 03:10 | him over here, under Angels, where he belongs.
| | 03:13 | To make this label I am going to
create a background really quick, using the
| | 03:16 | Shape tool, which is the U key for
shortcut, and I am going to have the
| | 03:20 | background to be black.
| | 03:21 | I am going to draw a little rectangle and
then zoom in so we can type inside of it.
| | 03:26 | I am going to use the font Myriad Pro,
Regular, and the 13 pt, which I can
| | 03:33 | just type in here and hit Enter.
| | 03:36 | Now if I mouse over right here, it's
going to try and put it into that box and
| | 03:40 | put it on the edges.
| | 03:41 | So instead first, I am going to create
a new layer on top of the label that I
| | 03:44 | created, and now I am going to type here.
| | 03:47 | And I am going to paste in Josh's
name, which you'll notice is black.
| | 03:50 | So I will select his name and change it to white.
| | 03:54 | Now we have Josh Schachter here. I am
going to move him over and then click
| | 03:58 | on the box to adjust the size so that it
has just a little bit of padding around him.
| | 04:04 | This is the label we'll use as the
template for the rest of our labels.
| | 04:07 | So once I have him how I wanted, I'll
select both of those labels and click
| | 04:13 | the Link button here, so now anytime I click
on one of them, I can move any of them anywhere.
| | 04:19 | So I am going to copy this over to Venture
Capitalists, and we will put our first VC down.
| | 04:25 | Digital Sky Technologies. So I will
copy this name and go back to Photoshop.
| | 04:29 | I am going to edit this text, and here
Digital Sky extends off of the black box,
| | 04:36 | so I'm going to adjust the size of the
black box by clicking on it. And it has to
| | 04:41 | be unlinked from the text in order to work.
| | 04:45 | So if it's then linked, you can
click on the Link icon here to unlink it.
| | 04:49 | Since it's a copy, it's not linked to
anything yet, so I can simply click and
| | 04:52 | drag the edge and hit Enter when I am done.
And I can move this around until it looks right.
| | 04:58 | So now you can go in and fill in the
rest of the characters. I am just going to
| | 05:02 | go ahead and add the rest of labels right now.
| | 05:04 | And I will zoom out so you can see all of them.
| | 05:07 | Now that we've got labels for all of
our characters, we are ready to start
| | 05:09 | arranging them in the next video so
they fit around the circle and so that they
| | 05:13 | can actually point to the
lines that they are labeling.
| | Collapse this transcript |
| Arranging your characters around the circle| 00:00 | In this video, we are going to
arrange the characters for our radial
| | 00:03 | relationship chart around our
wireframe's circle in a way that lets us
| | 00:07 | visualize each group as a whole, while making
room for each label to fit in its own section.
| | 00:12 | Since we're working with a vertical
canvas and horizontal labels, we will have
| | 00:16 | to get creative with our spacing.
| | 00:17 | There are two considerations for
the arrangement within each group:
| | 00:21 | How many connections does each character have
with others and how big is the label itself?
| | 00:25 | These will both affect where we put them.
| | 00:28 | In this case, we aren't really
concerned with the order of the characters by
| | 00:32 | size, as I'd like to have the
lines appear a little random.
| | 00:35 | But in some cases, you'll want to
start from small to large, or you will want
| | 00:39 | to have the characters with the largest number
of relationships in the center of their groups.
| | 00:43 | Now I'm going to zoom in so we
can arrange these characters.
| | 00:45 | We are going to use the Move tool to
group, link, and drag multiple layers
| | 00:50 | around our labels easily.
| | 00:51 | So I am going to select these two and link them.
| | 00:57 | You can either link all of them, or you can
just plan on selecting everything as you go.
| | 01:00 | Since we are arranging these around
the circle and the labels themselves are
| | 01:04 | remaining horizontal, we are going to
place the labels and then use lines to
| | 01:08 | point the labels to their spots on the circle.
| | 01:10 | We don't want to run the labels into each other,
| | 01:13 | so we are going to arrange them
using a technique I call stair-stepping.
| | 01:16 | Basically what that means is arranging
the labels like stairs, either hugging the
| | 01:21 | curb of the circle or
going against it, like this.
| | 01:28 | You can use multiple staircases, if
you want to make lots of room, or you can
| | 01:35 | use one big staircase.
| | 01:50 | As you can see, I have arranged these
staircases pointing inwards toward the
| | 01:53 | center of the circle, but we
could also arrange them the other way.
| | 01:56 | The point is we are trying to make room
for each of these labels so that we can
| | 02:00 | then have a line go straight
down to some part of the circle.
| | 02:03 | Your stair-step arrangement depends on
what you want the overall shape to look like.
| | 02:08 | Sometimes people will rotate their
labels so they look like spokes, extending
| | 02:11 | from the outside of their circle.
| | 02:13 | Sometimes people arrange labels in a
deliberately random way, but to make the
| | 02:17 | most room and the most sense, we'd like
to get some symmetry, and that's why I am
| | 02:21 | arranging the labels with stairs so they
look like little rabbit ears like this.
| | 02:25 | On the bottom, I'd like the labels to
all go in the same direction since they're
| | 02:30 | part of the same group,
| | 02:31 | so we will make the
stairs all flow this direction.
| | 02:35 | You will notice that on the one side
it hugs the curve of the circle, but on
| | 02:40 | the other side, the stair is going to
have to look into the circle like this.
| | 02:55 | You can see the nice pattern that we
have going on here with these three
| | 02:58 | staircases, which gives us plenty
of room to put lines for our labels.
| | 03:06 | You can play with your
staircases however you want, but trust me,
| | 03:09 | this is the easiest way to
get things that match up.
| | 03:12 | Once we start drawing the diagram itself,
we will likely adjust these labels a
| | 03:15 | bit, but before we do that, we've got
to create a legend for our graphics
| | 03:18 | so we know what's going on and
what colors we are labeling things.
| | Collapse this transcript |
| Creating a legend for the relationship lines| 00:00 | We're in the middle of recreating a
radial chart, a visualization of the many
| | 00:04 | relationships between different
investors and different social networks.
| | 00:08 | We've got a wireframe and labels for
all of the characters, and we're going to
| | 00:11 | connect them with lines to
demonstrate their relationships.
| | 00:14 | But before we start drawing
relationship lines all willy-nilly, we're going to
| | 00:18 | come up with an illustrate a legend
| | 00:20 | so we can draw everything with the
right colors the first time around.
| | 00:23 | This way we won't have to go back and
change everything, and we'll make it easy
| | 00:27 | on the reader to figure out what's
going on in this complicated graph.
| | 00:31 | So I'm going to zoom in and show you the legend.
| | 00:35 | You'll see here in the top-right corner
this box has the six colors indicating
| | 00:40 | what the lines meaning.
| | 00:42 | In our infographic we're going to draw
these lines to show who is connected to
| | 00:45 | whom, but we want to color-code our
lines, so we can tell what kind of
| | 00:49 | relationship is had between them.
| | 00:51 | Now let's go see where we got this
information, so we can recreate this legend.
| | 00:55 | As you can see here we have our Excel
spreadsheet here with the data we're using
| | 01:00 | for this infographic. As we discussed
in previous videos, this sheet is arranged
| | 01:04 | with our character data in rows, and the
relationships and types of relationships
| | 01:08 | are in different columns.
| | 01:09 | So we have here the characters, what
kind of character they are, what type of
| | 01:13 | relationship they have, and
who the relationship is with.
| | 01:16 | We're going to draw the lines to show
the relationships between the characters
| | 01:19 | and the object of the relationship, but
we want the colors to indicate what type
| | 01:23 | of relationship they have.
| | 01:24 | Now let's go back to our wireframe.
| | 01:27 | You can see here we have our
wireframe with our labels of our different
| | 01:30 | characters, so let's re-create the
legend at the top using the different types
| | 01:34 | of relationships that we
identified in our spreadsheet.
| | 01:37 | I'll zoom in here and
start recreating the legend,
| | 01:40 | first by putting a gray box so that we
can use it as a background. I'm going to
| | 01:45 | create a new layer at the
top of our Layer palette,
| | 01:47 | then use the Shape tool to draw a
rectangle box over our wireframe. We'll change
| | 01:55 | the color to a nice light gray.
| | 01:59 | Now the first kind of character we have
is an angel. We're going to make a little
| | 02:04 | arrow with the color we want to use for angels.
| | 02:07 | To do that Photoshop has a nice custom
arrow shape already, so switching to the
| | 02:11 | Shape tool you can see the different
shapes you can make, including this blob,
| | 02:15 | which is the custom shape tool.
| | 02:16 | If you select this box here, there are
all these different shapes you can use.
| | 02:19 | We're going to use this
arrow, and then we'll modify it.
| | 02:23 | I want to use the color cream for
the arrow, so I'll select that here.
| | 02:29 | Now I'm going to draw the arrow and
hold Shift so the arrow maintains its shape
| | 02:34 | and then place it here.
| | 02:36 | Now this is a little too light, so
I'm going to change it a little bit by
| | 02:39 | clicking on this box till the handles up
here, changing to the U tool, and change
| | 02:46 | the color a little bit. There we go.
| | 02:48 | We have our arrow here, and I want to
make it a little bit longer, so to do that,
| | 02:53 | I'm going to select the Direct
Selection tool, which is this white arrow here.
| | 02:56 | It's also the A short key. Click on the
arrow and if you click on the edges these
| | 03:01 | little handles appear.
| | 03:02 | When I click on two corners, one corner
hold Shift and then the other corner, and
| | 03:06 | then I can use the arrow keys on my
keyboard to elongate this arrow. I have it how
| | 03:12 | I want it now. I'm going to
move it over using the Move tool.
| | 03:16 | Now I'm going to put a label on it.
| | 03:17 | Using the Text tool, I'm going to
change the font to black and just type in
| | 03:24 | Angel and move it to the right spot.
| | 03:28 | Now I may want to adjust the
font. I think 14 is probably fine.
| | 03:34 | So now for our next label I'm simply
going to select both of these and copy
| | 03:38 | them, holding the Alt or Option key down, so we
use the same kind of arrow and the same font.
| | 03:44 | But to change the color of the arrow,
I'm going to go over here again, select the
| | 03:47 | layer, select this box until handles
appear, choose the Shape tool, and then
| | 03:52 | change this to nice yellow orange.
| | 03:55 | Now I'll go back to our Excel
spreadsheet and see that the second type of
| | 04:00 | relationship we have is a founder.
| | 04:03 | You can use any color you want for your
legend, as long as you stay consistent.
| | 04:07 | So we'll make founders be yellow and
we'll do this again. We'll copy these two,
| | 04:14 | pull it down, and find the
next type of relationship.
| | 04:19 | We have Series B or Greater, Series A,
Multiple Rounds, so we'll add those.
| | 04:26 | Series A. We'll change the color to a
nice red, and we'll move it down a little bit
| | 04:36 | to give it some space.
| | 04:37 | Now I'm going to copy all three so we
can reduce the amount of work we have to
| | 04:40 | do on the next three, by selecting them,
holding down Alt or Option, and moving them over.
| | 04:46 | So now these Series B+, Multiple
Rounds. And then if we go back to our
| | 04:59 | spreadsheet, you'll see we have one
final relationship type, Acquisition. Facebook
| | 05:05 | acquired FriendFeed, so we need
a special color for that as well.
| | 05:09 | Back in Photoshop I'm going to
write Acquisition for our final type.
| | 05:14 | Now we need different colors for these.
| | 05:18 | Series B we'll make blue.
| | 05:23 | For multiple what we have is Series A
and Series B combined. So we'll take the
| | 05:28 | Series A color, which I can just select
the color here using the eyedropper tool,
| | 05:36 | and we'll draw the Series B blue stripe on top.
| | 05:39 | To do that, select the arrow
that we want to drawn on top of.
| | 05:42 | First let's use the Eyedropper tool to
select blue, and we'll go to the Pen tool and
| | 05:48 | we'll draw little stripe.
| | 05:51 | Now let's select this arrow here and
create a new layer on top of it, so we
| | 05:54 | don't combine this shape
with the shape below it.
| | 05:57 | Now I'll use the Pen tool to draw
stripe, a little trapezoid, on top of it, but
| | 06:02 | first I need to make sure that I've selected
shape layer and not paths with the Pen tool.
| | 06:07 | The shape layer will let us draw a
custom shape, in this case our stripe.
| | 06:11 | So now I'll go to this arrow and
left-click the mouse on the top of it to
| | 06:16 | create a point. I'll hold Shift and click
again to create a straight line, which
| | 06:21 | will form the top of our band.
| | 06:22 | Down at the bottom, I'm going to click
again to create this diagonal line, which
| | 06:26 | is starting to fill in with our shape.
| | 06:28 | Now I will hold Shift to create the
rest of the trapezoid here at the bottom.
| | 06:32 | To adjust the size of the trapezoid and
the angles, I'll zoom in a little bit and
| | 06:37 | use the Direct Selection tool. You can
select these little handles and use the
| | 06:41 | arrow keys to move them around. Say one
of our angles is a little bit off. Arrow
| | 06:47 | keys to move it until it is just right.
| | 06:50 | Zooming out, you can see we now have a
stripe to indicate that this is multiple rounds.
| | 06:53 | This will just change the color
of Acquisition to a nice green.
| | 07:01 | You can use any colors you want for
your legend. Just make sure that they make
| | 07:05 | sense and that they're visible and legible.
| | 07:07 | All right now that we've our color
codes figured out, we're ready to start
| | 07:10 | drawing in our circle in the next few videos.
| | Collapse this transcript |
| Separating and spacing characters around the radial chart| 00:00 | In this video we're going to take a
look at the data we have our radial
| | 00:03 | relationship diagram and we're going
to determine how much space around the
| | 00:07 | circle we want to allot for our characters,
and then we'll illustrate that space accordingly.
| | 00:12 | So we're going to look at our Excel
spreadsheet and make room for each of our characters.
| | 00:16 | This way we don't have to go
back and adjust things later.
| | 00:20 | Here we are, back at our wireframe,
which includes the labels that we created
| | 00:23 | before and also the legend.
| | 00:25 | We're going to use the Shape tool and
masks to create a circular strip around
| | 00:29 | the parameter of this radial chart, so
we can draw lines in it, and we can create
| | 00:33 | little platforms for each of our characters.
| | 00:36 | I'm going to draw so that we can hide
the edges of the lines that we draw later
| | 00:39 | underneath a little platform for each company.
| | 00:42 | I'll show you what I mean.
| | 00:43 | Zooming in, we're going to draw a circle
for our background using the Shape tool.
| | 00:49 | I'll make it a dark gray color, and I
will hold in Shift so we can make the
| | 00:54 | circle perfectly round. We'll put it
roughly in the middle of our wireframe.
| | 01:00 | Now I'm going to draw a circle on top
of that that's slightly smaller and a nice
| | 01:04 | light gray color. I'll hold Shift again.
And we want to line these two circles up, so
| | 01:10 | I'll select them both, align the
vertical centers and then align the horizontal
| | 01:14 | centers, so now one is
directly in the middle of the other.
| | 01:17 | Now I want to cut a hole in this circle.
We'll select it and then create a layer
| | 01:21 | mask here at the bottom of the Layer palette.
| | 01:24 | Now we'll select this circle by holding
Command and clicking on the vector mask
| | 01:29 | thumbnail here on the layer. You can
see these marching ants indicate that we
| | 01:32 | selected the whole circle.
| | 01:33 | I want to contract this selection by going
to Select > Modify > Contract on the menu bar.
| | 01:40 | We'll contract this by 15 pixels and hit OK.
| | 01:43 | Now we'll select then layer mask again and
we'll fill this in with the color black,
| | 01:48 | which erases everything that's inside of it.
| | 01:51 | I'll deselect it, and now we have here
a nice little band around our circle
| | 01:56 | that we can then hide our lines underneath,
and we can build our platforms on this band.
| | 02:01 | But first we need to figure out
how big the platform for each of our
| | 02:04 | characters needs to be,
| | 02:05 | so let's scroll down and zoom
in and take a look at Facebook.
| | 02:10 | We're going to make a line from the
Facebook's label to a position on this band
| | 02:14 | that is big enough to house
all of Facebook's connections.
| | 02:18 | To figure out how big we need to make
that, let's look at our spreadsheet again.
| | 02:21 | We're going to sort our spreadsheet by
Facebook. So we will select the entire
| | 02:26 | spreadsheet and then we'll sort it by
Object of relationship so that we can see
| | 02:30 | everyone who's connected to Facebook.
| | 02:32 | There's one caveat with Facebook is
it's also a character that connects with
| | 02:36 | another startup, because it acquired FriendFeed.
| | 02:38 | So we're going to add one for Facebook to
FriendFeed so we have enough space for that as well.
| | 02:43 | So I hit Data > Sort on the menu bar.
We'll sort my Column D, which is the column
| | 02:49 | that contains all the social networks.
| | 02:53 | Scroll up and we'll see we have four
connections with investors in Facebook. That
| | 02:59 | combined with the Facebook's
connection with the FriendFeed gives us five,
| | 03:02 | so we need to make room for five
connections on the perimeter of our circle.
| | 03:07 | Back in Photoshop we need to determine
how to we make equally sized spaces for
| | 03:12 | each of the connections?
| | 03:13 | Since we're using a circle, it'll be
easier for us to use small circles to
| | 03:17 | determine the size that each needs to be.
| | 03:19 | So I use my Circle tool, and we'll
create some small black circles. But
| | 03:25 | there's one thing we need to know
before we start drawing circles and making
| | 03:28 | this Facebook character.
| | 03:29 | We need to know how many connections
there are in total, so let's look back
| | 03:32 | at our spreadsheet.
| | 03:33 | We'll scroll down to the bottom.
| | 03:35 | We'll see that there are 46 connections.
| | 03:37 | We will subtract the two for the title up here.
| | 03:40 | So we have 44 connections that
need to happen on both sides.
| | 03:44 | Back in Photoshop you'll see we have
44 connections that we need to fit in
| | 03:48 | roughly this bottom section of the
circle and then at the top split the 44 among
| | 03:53 | the two parties: the Angels &
Founders and the Venture Capitalists.
| | 03:58 | So we need to draw our lines so that
44 of them can fit roughly down here.
| | 04:02 | With that information in mind, I'll
draw a circle about this size, so we can
| | 04:06 | definitely fit 44 of those down here.
| | 04:09 | So now I want to duplicate this circle
five times, so we can know roughly how
| | 04:13 | big we want the Facebook platform to be.
| | 04:16 | These circles will represent the
width of the lines we're going to draw.
| | 04:19 | I'll duplicate them so they're just
touching, so they're around the circle.
| | 04:24 | Now we know this is how many
connections Facebook will have,
| | 04:26 | so we'll carve about this chunk of
the parameter of this circle and let
| | 04:30 | that belong to Facebook.
| | 04:31 | To do that I'll just do a little trick
with the Pen tool. Switching to the Pen
| | 04:35 | tool, I'll change the color to
the same color as the background.
| | 04:38 | We're going to draw boxes, little
rectangles on top of the strip.
| | 04:42 | So I'll select the strip, create a
new layer, and use the Pen tool to make a
| | 04:50 | little shape that sections it off.
| | 04:52 | I do the same thing on this other side.
| | 04:56 | Create a new layer.
| | 04:58 | Create a shape with the Pen tool.
| | 05:02 | Now if we remove our circles, you can
see we've built a little platform here
| | 05:06 | that's the size of the number
of connections that Facebook has.
| | 05:09 | We want to draw a line from
Facebook's label to this. So I will move these
| | 05:13 | little stairs out of the way.
| | 05:16 | We'll move Facebook so that we can draw a line.
| | 05:18 | I use the Shape tool, I will make a
line of 3 pixels, and draw a straight line
| | 05:24 | from Facebook to that.
| | 05:26 | You'll see this color is the same as
the background, so I'll change it to black.
| | 05:29 | But you can also see that it
disappears under this first circle.
| | 05:36 | We want it to connect to this one, so
we're going to move this on our Layer
| | 05:40 | palette in between the
background and the stripe.
| | 05:43 | Here they are. I will label these
so that we can refer to them later:
| | 05:48 | stripe, background.
| | 05:52 | Anything that's in between these
two will show up on the background but
| | 05:54 | disappear behind this stripe,
which will help us hide the edges.
| | 05:58 | Now that we have Facebook, let's do one more,
| | 06:00 | so we can set ourselves up to draw some lines.
| | 06:03 | Let's go up here to someone who
invested in Facebook, which we'll find out in
| | 06:07 | our Excel spreadsheet.
| | 06:09 | So looks like Peter Thiel invested in Facebook.
| | 06:12 | Now let's see how many connections he has.
| | 06:14 | I'll select our spreadsheet, and then we'll sort,
Data > Sort, by Column A, which has the investors.
| | 06:24 | Then we'll scroll down till we find
Peter Thiel, and we'll see that he has two
| | 06:27 | connections: Facebook and Zynga.
| | 06:29 | So let's make a platform that allows us
to have two connections for Peter Thiel.
| | 06:33 | We'll use our circle, and we'll
duplicate it so we can make the two-circle-sized
| | 06:39 | platform, and we'll draw using
the Pen tool and section this off.
| | 06:42 | There we go. Now we have a
platform for Peter Thiel.
| | 06:50 | And we'll draw a line from him to the platform.
| | 07:01 | You'll see once again it's going
underneath the background so we'll move it up
| | 07:05 | on the Layer palette so it's in
between the background and the stripe.
| | 07:10 | Once again this is the wrong color, so to make
it show up, we'll turn it black, and there we go.
| | 07:17 | So I let you do the rest
of these on your own time.
| | 07:20 | So now that we've got everything set up,
we're ready to start drawing the actual
| | 07:23 | relationship lines for our graph.
| | Collapse this transcript |
| Using a pen tool to draw relationship lines| 00:00 | Here we are with the final version of a
radial relationship diagrams that we've
| | 00:03 | been recreating in Photoshop.
| | 00:05 | We've got 24 characters in three
groups around our circle, with these colored
| | 00:09 | lines indicating the
relationships between everybody.
| | 00:12 | Now let switch back to our work in
progress that we've been building over a
| | 00:14 | wireframe. We've got our labels for
our characters, a legend telling us how
| | 00:18 | we're going to color-code things,
we've even created a few of our character
| | 00:22 | platforms here, connected to their labels.
| | 00:24 | So now we're going to connect these
characters and visualize there relationships
| | 00:28 | using color-coded, elastic-looking lines.
| | 00:30 | In this video we'll draw the lines,
and in the next video we'll tweak them.
| | 00:34 | First let's figure out who we want to
connect to whom. We'll zoom in. We'll start
| | 00:39 | with Peter Thiel. He is an angel investor.
| | 00:41 | In Excel we'll take a look at Peter's
connections. So we'll scroll down. Right
| | 00:46 | now it's sorted by character alphabetically.
| | 00:48 | So we can see here Peter Thiel has
two connections. He is an angel investor.
| | 00:53 | Both of them are angel investments, and
one is with Facebook and one is with
| | 00:56 | Zynga, so let's draw that.
| | 00:58 | Up at the top of our infographic we
can see here that angel investments are
| | 01:03 | delineated by this cream color, so
we'll select that color to use for our line.
| | 01:09 | Now here we have Peter.
Down here we have Facebook.
| | 01:12 | In the previous video we used this
circle to help us figure out how big our line
| | 01:17 | should be and how much space we should allot.
| | 01:19 | So place one circle down on Facebook
and one circle here on Peter Thiel.
| | 01:24 | This is going to approximate how
thick we draw our line. We want to draw
| | 01:27 | the line underneath this stripe so
that it disappears and we don't have to
| | 01:32 | worry about the edges.
| | 01:33 | So to do that, I'm going to select the
background and then switch to the Pen
| | 01:38 | tool. You can see we've already
selected the cream color, and now using the Pen
| | 01:43 | tool, I'm going to draw this
relationship line. Click once on Peter Thiel and
| | 01:47 | once on the edge of Facebook and hold
it in to create this curve. I can make the
| | 01:52 | curve however I want: tall, fat, short,
wide, angled at the bottom, but I'm going
| | 01:57 | to approximate the handle about in the
middle of the curve, so we can have a
| | 02:02 | nice gentle curve. And you can see
it starting to fill it in already.
| | 02:05 | So now I'm going to hold down the
Option or the Alt key to click this line to
| | 02:09 | discontinue this curve, then click over
here to the edge of the circle. You can
| | 02:15 | zoom in if you want, so you can make
sure you can get it right to the edge. Then
| | 02:19 | click and hold again. We'll
zoom out to see what happened.
| | 02:24 | You can use the Direct Selection tool
to adjust the curve once you've clicked
| | 02:27 | and made it. So I'm going to use this
to make the elasticity a little bit bowed
| | 02:32 | in the middle, see that here.
| | 02:33 | Now we'll switch back to the Pen tool,
hit Option, and click this point again, and
| | 02:38 | then finish off the curve. Zooming in,
you can see we've made a nice curve.
| | 02:43 | Something happened here. As you remember,
we made this little platforms by drawing a
| | 02:48 | little section of a rectangle using the
Pen tool, and now it's overlapping this.
| | 02:52 | So let's use the Direct Select tool to
select the edges of this to move it in
| | 02:57 | so it's not interfering with our line.
| | 03:00 | Now we can move this line too to compensate.
We can adjust the curvature like so.
| | 03:08 | This really only is the problem on the
edges, when you're doing the first or the
| | 03:12 | last line in the relationship. You can see here
| | 03:15 | now we have a nice line. I'll adjust it a
little more so it's curved the way I want it.
| | 03:20 | Now we're ready to do the next one.
Let's do one for Greylock Partners.
| | 03:26 | Back in Excel, we'll scroll up to
Greylock. You can see there are three
| | 03:29 | connections. Let's do the one
for multiple rounds for Digg.
| | 03:32 | The Greylock is up here. Digg is down
here, and we've already determined how many
| | 03:37 | sections we need, so let's move our
little circles and do the edges again.
| | 03:45 | It's important to start from the edges
when you're drawing these lines instead
| | 03:48 | of starting from the middle. That way
you don't have to adjust them later on.
| | 03:52 | So the color for multiple rounds is the
same colors as the Series A, so it's a
| | 03:56 | red with a stripe for Series B. So
we'll make the base color red. I'll zoom in
| | 04:02 | here, click a point, click and hold,
drag that point, Option+Click to end the
| | 04:10 | line, click again, use the Direct
Select tool to move that out a little bit,
| | 04:17 | click and hold to make rest of this
curve, Option+Click, complete the line. Then
| | 04:23 | we'll use the Direct Selection tool to adjust
this curve, so it's a little more symmetrical.
| | 04:28 | Now you'll notice that we
accidentally drew this above the stripe, so all I
| | 04:33 | have to do is select this, go over to
the Layer palette, and swing it down so
| | 04:37 | it's below the strip, which we have set
out here. There we go. We can move these
| | 04:42 | circles out, make sure everything looks
good, and adjust this. Come to the edge a
| | 04:46 | little bit. There we go.
| | 04:52 | Before I fill in the next view so
you can see how this takes shape,
| | 04:55 | if you'll remember, multiple rounds
have this blue stripe on it. So we'll draw
| | 04:59 | blue stripe real quick by selecting
this blue color using the eyedropper tool.
| | 05:04 | We'll zoom in, and we'll just drag blue
stripe on top of this. So I'll create a
| | 05:08 | new layer above this line and
we'll draw stripe using the Pen tool.
| | 05:14 | Essentially, it's a little trapezoid
that we make. You can adjust it how you want.
| | 05:19 | I'm drawing this in a rather cartoony
kind of cardboard cutout style, so that's
| | 05:24 | how it looks, but you can do
this in any style you want.
| | 05:26 | Now I'll go ahead and fill in
the rest of this real quick.
| | 05:29 | So you can see I've added a few more
lines. We're starting to make a big mess
| | 05:33 | here, but it's going to look awesome.
| | 05:35 | In the next few videos we'll learn how
to make adjustments, such as adjusting
| | 05:38 | the transparency and adding arrows, so
that we can more clearly to see what's going on.
| | Collapse this transcript |
| Adjusting the curvature and transparency of the lines| 00:00 | This is a quick little video on how to
adjust the curvature and transparency of
| | 00:04 | the lines we drew with the Pen tool
when we created our relationship diagram
| | 00:07 | lines in the last video.
| | 00:09 | As you can see here, we have this work
in progress of our relationship diagram
| | 00:13 | and if we zoom in, you'll notice
that some of these lines intersect.
| | 00:18 | It's kind of hard to see what's going on.
| | 00:20 | So I want to add some transparency to
these, and also we want to adjust these
| | 00:23 | lines, once we have many of them in here,
because there's a lot going on and soon
| | 00:27 | there will be even more going on and
you may want to make changes later.
| | 00:30 | So first the transparency,
| | 00:32 | There are few ways you
can adjust the transparency.
| | 00:34 | One is by selecting one of the shapes,
one of the lines that we have created,
| | 00:38 | and using the shortcut keys 1 through 9
to take the transparency down, say 80%.
| | 00:44 | The other way is over here on the Layer
palette: you can adjust the transparency here.
| | 00:48 | So you have 44 lines and you want to
adjust the transparency of all of them at once.
| | 00:53 | How can you do that without clicking on
every one of them and adjusting it like this?
| | 01:00 | How we can do that is pretty simple.
| | 01:02 | I will back up and make
everything 100% transparency.
| | 01:07 | First let's adjust the transparency on
one line, and then we will copy that layer
| | 01:11 | style to the rest of the lines.
| | 01:13 | So I will select this line here, take it
down to 80% opacity, and I will go over
| | 01:18 | here to the Layer palette, I'll right-
click and click Copy Layer Style.
| | 01:23 | Now we can paste this layer
style on the rest of our layers.
| | 01:27 | I will select a cross section of the
infographic here, and I will also select
| | 01:31 | this little guy because we missed him,
and then deselect our background layers.
| | 01:37 | So now here we have the five lines that
we've drawn, and all I have to do is pick
| | 01:40 | any of them in the Layer palette,
right-click, and click Paste Layer Style.
| | 01:45 | Now all of them are 80% transparency.
| | 01:48 | The next thing I want to do is talk about
how to adjust the curvature of these lines.
| | 01:53 | Say for example, these lines up here, it
looks like we drew them a little bit weird,
| | 01:57 | a little too close together,
| | 01:59 | so to adjust that, I will select it
with the Move tool and then change to the
| | 02:03 | Direct Selection tool, which
gives me these little handles.
| | 02:05 | I can select the corner and move that
corner around so that I can get a little
| | 02:11 | bit better positioning.
| | 02:12 | But now you can see that the
curve has gotten a little bit fat.
| | 02:17 | So I can grab these handles and change
how the curve goes, to make it come more
| | 02:21 | through the center of the curve.
| | 02:23 | You can see this handle here adjusts
this bottom curve. To adjust the top curve,
| | 02:27 | I will pick the second point in the
curve and then adjust the handle like that.
| | 02:32 | You can click and drag to adjust any of
your handles, and depending on how thick
| | 02:37 | or thin you want, you may adjust all of
your lines at some point. So there we go.
| | 02:42 | You can play around with these things
until your diagram looks the way you want it to.
| | 02:45 | And as you add more lines, you can
always come back and adjust the curvature and
| | 02:49 | the transparency of them all at once.
| | 02:51 | When you're ready to move on, we're
going to work on adding directional arrows
| | 02:54 | to your lines in the next video.
| | Collapse this transcript |
| Adding directional arrows| 00:00 | In this video, we will be adding
directional arrows to the relationship diagram
| | 00:03 | we have been drawing so we can
show the flow of where money is going.
| | 00:07 | In this case, most of the money is
flowing downward from the investors to the
| | 00:11 | social networking startups, but in
one case, the acquisition where Facebook
| | 00:16 | bought FriendFeed, the arrow is
going to be particularly important, so we
| | 00:20 | know who paid for whom.
| | 00:22 | The first thing we want to do is we
want to draw a dot in the center of
| | 00:26 | our diagram so we can make all of the arrows
point towards the outside of the circle.
| | 00:30 | To do this, I will zoom in, and I'll add a
dot using the Shape tool, just a black circle.
| | 00:38 | I am going to create a new layer at
the top of our Layer palette so I know
| | 00:42 | where the dot is and just
draw a little circle there.
| | 00:45 | Now I want this circle to line up in
the exact center of our background, so I
| | 00:49 | will select also the background.
And then up here on the toolbar, I will align
| | 00:54 | the vertical and the horizontal centers.
| | 00:56 | So now our black dot is in
the middle of our background.
| | 01:01 | Next, since we will be doing a lot of
drawing on top of this which has a lot of
| | 01:05 | layers, I want to lock
everything below the black dot.
| | 01:09 | So here, I will select everything
and then group it in the Layer palette.
| | 01:14 | So if you look here, in our Layer palette,
we have all of the layers we have selected.
| | 01:18 | Simply click on one of them and drag down to
this icon here, which is the Create Group icon.
| | 01:24 | You can see we have our
group here now at the top.
| | 01:27 | What happened is we accidentally put
our dot inside the group too, so we will
| | 01:32 | simply pull it up to bring it out of the group.
| | 01:34 | Now you can see our black dot is in a
layer above our group, which we can now make
| | 01:40 | invisible if we want, but in this case, we want
to select the group and then lock it.
| | 01:45 | So anytime we select something over
it, we don't move the group as well.
| | 01:49 | Now let's zoom in again and start
drawing some directional arrows.
| | 01:52 | Before we get to that, we want to
know what direction the arrows are going.
| | 01:56 | So the first one we will do is this
relationship between Peter Thiel and
| | 02:00 | Facebook, this cream-colored line we drew.
| | 02:03 | Let's go to Excel and see which
direction the relationship flows.
| | 02:06 | It's pretty obvious because all of the
investors put money into the startups,
| | 02:10 | but we will double-check just in case.
| | 02:12 | So Peter Thiel, the angel, put an
investment into Facebook, so that directional
| | 02:17 | arrow should go towards Facebook.
| | 02:19 | Back in Photoshop, we are going to add an
arrow here on this line, so let's zoom in.
| | 02:25 | To make sure that this arrow points
towards the outside of the circle, we are
| | 02:28 | going to draw a line from our center dot.
| | 02:31 | Using the Shape tool, I will make a
black line that I draw from that center dot
| | 02:36 | to the center of our line that we drew here.
| | 02:39 | Now we will draw the arrow.
| | 02:40 | Also using the Shape tool, I will go
up here to the custom shape, this little
| | 02:44 | blob icon, click on that, then make
sure that the shape is set to this arrow.
| | 02:48 | Now on our canvas, let's create a new
layer and now hold the Shift key to create
| | 02:54 | this shape with the right proportion.
| | 02:56 | We want this arrow to fit inside of the
line, so you can kind of eyeball it this
| | 03:01 | way, or we can adjust it later also.
| | 03:03 | Let's change the color of the arrow to black.
| | 03:05 | I will move this arrow down here and
then use the Move tool to rotate it so
| | 03:13 | it points in the
direction of the line that we drew.
| | 03:15 | If you zoom in, you can see this
bent arrow appears when you're on the Move
| | 03:21 | tool and you put the mouse a
little bit outside of the corner.
| | 03:24 | So click it and then turn to rotate
that arrow until it points the direction of
| | 03:29 | the line we drew. You can see these are parallel.
| | 03:31 | Now hit Enter to keep that change.
| | 03:34 | You can move it to the middle of
this, and then we will delete our line.
| | 03:38 | So now if we zoom out, you can see our
arrow points directly from the center to
| | 03:45 | the outside of the circle.
| | 03:45 | I am going to make this a little bit
transparent, since we'll be putting it on
| | 03:49 | different backgrounds.
| | 03:50 | I will press the 6 key to
make the arrow a nice gray.
| | 03:53 | Now let's do one more of this practice.
| | 03:56 | A tricky one we have here
is FriendFeed and Facebook.
| | 03:59 | Let's quickly check our Excel
spreadsheet to make sure we have put the right
| | 04:02 | arrow in the right spot.
| | 04:04 | As you can see down here, Facebook made
an acquisition of FriendFeed, which means
| | 04:08 | Facebook paid money for FriendFeed,
| | 04:10 | so the arrow will point
towards FriendFeed in our diagram.
| | 04:13 | I am going to take this same
arrow and copy it and bring it down
| | 04:17 | towards FriendFeed.
| | 04:20 | This is where the arrow is going to point,
towards the platform that we made for
| | 04:23 | FriendFeed. But first, let's
create a line from the center.
| | 04:28 | Using the Shape tool, we make a line
that points to the center of this. Then
| | 04:31 | we will zoom in, select our arrow, and
rotate it, until it points the right direction.
| | 04:41 | Now we can delete our line, move the
arrow to the middle of this where we want it.
| | 04:48 | Now we will zoom out, and you can see we
have two directional arrows of many that
| | 04:54 | we will be drawing shortly.
| | 04:55 | I'll let you practice the
rest of this on your own time.
| | 04:58 | With some relationship diagrams, you
won't have directional arrows at all.
| | 05:02 | Perhaps you will use your own tricks to
show direction, such as color gradients
| | 05:06 | or making the lines arrows themselves.
And sometimes the relationship will be a
| | 05:09 | two-way relationship, such that
you won't want to show an arrow.
| | Collapse this transcript |
|
|
