Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
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:
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up