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