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
Vectors, Vector vs. Raster Images, and Scalable Vector Graphics.
Key Terms
-
Vector Graphics: the use of geometrical primitives such as points, lines, curves, and shapes or polygons to represent images in computer graphics.
- Raster Graphics: made up of a grid of pixels, commonly referred to as a bitmap. Raster graphics can typically be scaled down with no loss of quality, but enlarging a bitmap image causes it to look blocky and "pixelated."
-
SVG: an XML-based vector image format that is dynamic. SVGs will automatically scale depending on browser screen size and not lose quality regardless of the screen density.
-
Common Vector file types: .eps, .ai, .svg
- Common Raster file types: .jpeg, .tiff, .png
Learn More about Responsive Web Design
Other Treehouse courses to check out:
Before we get into the application and
begin working on the wire frame, let's go
0:00
over some of the basic concepts and
find out what makes Illustrator unique.
0:04
Most images you see on the web
are one of two major types.
0:10
Raster graphics or Vector graphics.
0:14
Raster graphics would include the most
common file types such as .jpg,
0:17
.gif, .png, .tiff, or .psd.
0:22
A Raster graphic is made up of
a set number of individual pixels.
0:27
These are squares of assigned color in
a rectangular grid as you can see here.
0:32
Raster images are better for
imagery with lots of variance and detail,
0:39
where there are smooth transitions of
color, such as a photograph or a painting.
0:42
In this example,
there is a nice paper texture and
0:48
line quality we would want to keep.
0:51
You can decrease the size and
not lose quality.
0:54
However, if you enhance the size
of a Raster Graphic over 100%,
0:58
it will begin to lose quality,
degrade, and become blurry.
1:02
However, with Vector Graphics,
this is different.
1:07
Illustrator is the industry standard
in vector graphics editors.
1:11
Common vector file types are .eps,
.ai, and .svg.
1:15
Vector graphics, rather than being
made up of squares of color,
1:20
consist of areas of color that
are defined by points and paths.
1:26
These points called vectors
are defined by X and Y coordinates.
1:31
The geometry of a vector
graphic is projected precisely
1:37
onto the pixel grid using
a mathematical formula.
1:40
Rather than made up of squares of pixels
itself, like its raster counterpart.
1:44
You can zoom in infinitely or scale up,
and the sharpness of lines and
1:50
shapes in your image never loses quality.
1:54
The same small vector file can be
used both as a small logo graphic or
1:58
as a large billboard
without losing detail.
2:03
Illustrator also has the ability
to create what's called SVGs, or
2:06
scalable vector graphics.
2:12
An SVG is an XML-based vector
image format that is dynamic and
2:15
will automatically scale to any
screen size without losing quality.
2:19
Because screen sizes in browsers often
vary from user to user depending on what
2:25
platform they are using.
2:29
Having one fixed size for a website for
all users is no longer adequate.
2:32
There is a need for
flexibility and design.
2:37
In our project, we will be using
responsive design principles.
2:40
Responsive web design relies
on modularity, percentages,
2:45
fluid proportion-based grids,
and flexible images such as SVGs,
2:50
to provide optimal viewing and
interactive experiences.
2:55
With responsive design in mind,
let's move on to setting up our workspace.
2:59
You need to sign up for Treehouse in order to download course files.
Sign up