Vector and Raster5:41 with Shon Dempsey
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
- 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.
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 up