Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video is an introduction to the two different types of digital graphics and how they compare and contrast with each other.
Check out the 'Downloads' tab for more information on Raster vs. Vector
New Terms:
- Vector - A line or shape with given points rendered and resized through math. Unlimited resolution.
- Raster - An image made up of individually defined pixels. Sometimes referred to as bitmaps.
- SVG - A vector file type/extension typically used for the web.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that we've learned about displays,
resolution and color,
0:00
we've got one last thing to cover in
regards to digital graphics, the two main
0:04
types of image files, raster, sometimes
referred to as bitmap, and vector.
0:10
Raster images are a grid of individual
pixels that make up an entire image.
0:15
Photos are the best example.
0:21
Pixel by pixel an image is created
in an application like Photoshop,
0:23
Corel Draw or
Captured from a camera or scanner.
0:29
We can zoom in to any raster image and
see individual color pixels.
0:34
Common file extensions associated
with raster images are .jpg,
0:39
.tiff, and
I'm pronouncing it .gif, and .bmp.
0:44
There are other proprietary extensions
0:48
based on applications such
as Photoshop's PSD format.
0:51
One of the major considerations
when thinking about raster graphics
0:56
is that the highest resolution depends
on the original size of the image.
1:00
They cannot be enlarged without
losing fidelity and become pixelated.
1:05
You can absolutely make them smaller but
if your camera takes images
1:10
at 800 x 600 pixels,
that's the largest your image will get.
1:15
Which is a really good
segue into vector graphics.
1:20
Vector graphics are made up of lines,
commonly referred to as paths,
1:24
that contain specified points to create
the shapes that make up the graphic.
1:29
Vector graphics are only created
through applications, so
1:34
it isn't possible to take a vector photo.
1:38
Since vector graphics use paths and
points,
1:41
we're able to manipulate vector graphics,
large or small, without losing fidelity.
1:45
A smooth line or shape is drawn with
tools that will determine specific
1:51
points to define the shape.
1:55
Those shapes can then have a stroke or
a fill to produce color.
1:57
Some of the most common and
2:03
prevalent examples of vector graphics
are app icons and company logos.
2:04
Take a look at your mobile phone.
2:10
99% of those icons are vector graphics.
2:12
Common file extensions for
vectors are .eps, .sbg,
2:17
Adobe's proprietary .ai,
and sometimes .pdf.
2:21
A quick side note about PDF files,
PDF's are not graphics.
2:27
They contain graphics and
in some cases only contain a graphic or
2:32
image, but
only occasionally can they be edited.
2:37
Essentially if the vector
was exported directly from
2:43
a vector base app such
as Adobe's Illustrator.
2:46
Speaking of apps, two of the main
vector drawing apps include
2:50
Adobe's Illustrator and Bohemian Sketch.
2:54
Applications like Photoshop also
have vector drawing abilities,
2:58
in addition to photo editing and painting.
3:02
One last example of raster versus
vector that I found helpful,
3:06
taking a look at a curve,
say quarter of a circle.
3:09
In the teacher's notes download the file
associated with this video and unzip it.
3:12
Once you've opened the zip folder
locate the file that says raster.jpg.
3:17
Double click to open the file in your
computer's default image viewer.
3:23
I'm on a Mac so I'm showing it in preview,
on Windows this is usually photos.
3:28
Zoom in a few times, say, three or four
times by pressing the Cmd and + key for
3:32
both Mac and Windows or
3:37
locate the magnifying glass icon,
click on that a few times.
3:39
Notice how we see the stair
steps of pixels and
3:44
even the shades of black
that make up their curve.
3:47
You can try the same process for
any photo you may have.
3:49
Now let's have a look at our vector file.
3:53
Just to ensure that we're using the same
process whether you're on a Mac or PC,
3:55
open this file using your web browser.
3:58
Once the browser is open, select File and
4:03
navigate to the folder where
we saved our project files.
4:05
Select the Vector.svg file, and then
once it's open you'll notice we'll see
4:11
the same shape as our raster file but
this is a vectored graphic.
4:15
If we zoom in we get a perfectly
smooth curve that never pixelates
4:20
as it's redrawn each time we zoom in or
enlarge it.
4:24
Now that we've learned about
the differences between vector and
4:28
raster, which one are we going
to choose for a project?
4:31
What should we consider?
4:36
Similar to color mode, it depends
on where our project will end up.
4:38
I've got you covered
with a simple graphic.
4:42
We've got some examples of when to
use a vector and when to use raster.
4:45
As you can see, both are great for print.
4:50
But remembering that our raster images are
only as large as the original resolution,
4:53
we'll want to ensure that image is,
4:58
indeed, large enough for
all assets we may eventually create.
5:00
Luckily these days, photos we may use in
creations are more than large enough for
5:05
just about any medium.
5:11
For display, again,
both raster and vector are great.
5:13
In fact, while app icons are created
with vector graphics programs,
5:18
more often than not,
they actually end up as raster files.
5:22
We'll explore that later in the course.
5:26
But other common uses for choosing
vector might be prototyping an app,
5:29
drawing a logo, icon, or a web based asset
we may want to scale such as social icons.
5:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up