Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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