1
00:00:00,520 --> 00:00:04,950
Now that we've learned about displays,
resolution and color,

2
00:00:04,950 --> 00:00:10,264
we've got one last thing to cover in
regards to digital graphics, the two main

3
00:00:10,264 --> 00:00:15,684
types of image files, raster, sometimes
referred to as bitmap, and vector.

4
00:00:15,684 --> 00:00:21,570
Raster images are a grid of individual
pixels that make up an entire image.

5
00:00:21,570 --> 00:00:23,710
Photos are the best example.

6
00:00:23,710 --> 00:00:29,180
Pixel by pixel an image is created
in an application like Photoshop,

7
00:00:29,180 --> 00:00:34,030
Corel Draw or
Captured from a camera or scanner.

8
00:00:34,030 --> 00:00:39,660
We can zoom in to any raster image and
see individual color pixels.

9
00:00:39,660 --> 00:00:44,196
Common file extensions associated
with raster images are .jpg,

10
00:00:44,196 --> 00:00:48,680
.tiff, and
I'm pronouncing it .gif, and .bmp.

11
00:00:48,680 --> 00:00:51,260
There are other proprietary extensions

12
00:00:51,260 --> 00:00:55,490
based on applications such
as Photoshop's PSD format.

13
00:00:56,500 --> 00:01:00,480
One of the major considerations
when thinking about raster graphics

14
00:01:00,480 --> 00:01:05,530
is that the highest resolution depends
on the original size of the image.

15
00:01:05,530 --> 00:01:10,570
They cannot be enlarged without
losing fidelity and become pixelated.

16
00:01:10,570 --> 00:01:15,660
You can absolutely make them smaller but
if your camera takes images

17
00:01:15,660 --> 00:01:20,460
at 800 x 600 pixels,
that's the largest your image will get.

18
00:01:20,460 --> 00:01:24,470
Which is a really good
segue into vector graphics.

19
00:01:24,470 --> 00:01:29,110
Vector graphics are made up of lines,
commonly referred to as paths,

20
00:01:29,110 --> 00:01:34,230
that contain specified points to create
the shapes that make up the graphic.

21
00:01:34,230 --> 00:01:38,750
Vector graphics are only created
through applications, so

22
00:01:38,750 --> 00:01:41,590
it isn't possible to take a vector photo.

23
00:01:41,590 --> 00:01:45,200
Since vector graphics use paths and
points,

24
00:01:45,200 --> 00:01:51,200
we're able to manipulate vector graphics,
large or small, without losing fidelity.

25
00:01:51,200 --> 00:01:55,600
A smooth line or shape is drawn with
tools that will determine specific

26
00:01:55,600 --> 00:01:57,900
points to define the shape.

27
00:01:57,900 --> 00:02:03,320
Those shapes can then have a stroke or
a fill to produce color.

28
00:02:03,320 --> 00:02:04,670
Some of the most common and

29
00:02:04,670 --> 00:02:10,510
prevalent examples of vector graphics
are app icons and company logos.

30
00:02:10,510 --> 00:02:12,511
Take a look at your mobile phone.

31
00:02:12,511 --> 00:02:16,380
99% of those icons are vector graphics.

32
00:02:17,400 --> 00:02:21,389
Common file extensions for
vectors are .eps, .sbg,

33
00:02:21,389 --> 00:02:27,790
Adobe's proprietary .ai,
and sometimes .pdf.

34
00:02:27,790 --> 00:02:32,484
A quick side note about PDF files,
PDF's are not graphics.

35
00:02:32,484 --> 00:02:37,997
They contain graphics and
in some cases only contain a graphic or

36
00:02:37,997 --> 00:02:43,130
image, but
only occasionally can they be edited.

37
00:02:43,130 --> 00:02:46,870
Essentially if the vector
was exported directly from

38
00:02:46,870 --> 00:02:50,530
a vector base app such
as Adobe's Illustrator.

39
00:02:50,530 --> 00:02:54,860
Speaking of apps, two of the main
vector drawing apps include

40
00:02:54,860 --> 00:02:58,400
Adobe's Illustrator and Bohemian Sketch.

41
00:02:58,400 --> 00:03:02,480
Applications like Photoshop also
have vector drawing abilities,

42
00:03:02,480 --> 00:03:05,090
in addition to photo editing and painting.

43
00:03:06,220 --> 00:03:09,430
One last example of raster versus
vector that I found helpful,

44
00:03:09,430 --> 00:03:12,588
taking a look at a curve,
say quarter of a circle.

45
00:03:12,588 --> 00:03:17,170
In the teacher's notes download the file
associated with this video and unzip it.

46
00:03:17,170 --> 00:03:23,810
Once you've opened the zip folder
locate the file that says raster.jpg.

47
00:03:23,810 --> 00:03:28,280
Double click to open the file in your
computer's default image viewer.

48
00:03:28,280 --> 00:03:32,980
I'm on a Mac so I'm showing it in preview,
on Windows this is usually photos.

49
00:03:32,980 --> 00:03:37,380
Zoom in a few times, say, three or four
times by pressing the Cmd and + key for

50
00:03:37,380 --> 00:03:39,350
both Mac and Windows or

51
00:03:39,350 --> 00:03:43,200
locate the magnifying glass icon,
click on that a few times.

52
00:03:44,570 --> 00:03:47,230
Notice how we see the stair
steps of pixels and

53
00:03:47,230 --> 00:03:49,900
even the shades of black
that make up their curve.

54
00:03:49,900 --> 00:03:53,230
You can try the same process for
any photo you may have.

55
00:03:53,230 --> 00:03:55,610
Now let's have a look at our vector file.

56
00:03:55,610 --> 00:03:58,840
Just to ensure that we're using the same
process whether you're on a Mac or PC,

57
00:03:58,840 --> 00:04:01,560
open this file using your web browser.

58
00:04:03,151 --> 00:04:05,407
Once the browser is open, select File and

59
00:04:05,407 --> 00:04:08,510
navigate to the folder where
we saved our project files.

60
00:04:11,049 --> 00:04:15,999
Select the Vector.svg file, and then
once it's open you'll notice we'll see

61
00:04:15,999 --> 00:04:20,550
the same shape as our raster file but
this is a vectored graphic.

62
00:04:20,550 --> 00:04:24,590
If we zoom in we get a perfectly
smooth curve that never pixelates

63
00:04:24,590 --> 00:04:28,660
as it's redrawn each time we zoom in or
enlarge it.

64
00:04:28,660 --> 00:04:31,890
Now that we've learned about
the differences between vector and

65
00:04:31,890 --> 00:04:35,020
raster, which one are we going
to choose for a project?

66
00:04:36,190 --> 00:04:38,140
What should we consider?

67
00:04:38,140 --> 00:04:42,550
Similar to color mode, it depends
on where our project will end up.

68
00:04:42,550 --> 00:04:44,450
I've got you covered
with a simple graphic.

69
00:04:45,620 --> 00:04:50,410
We've got some examples of when to
use a vector and when to use raster.

70
00:04:50,410 --> 00:04:53,190
As you can see, both are great for print.

71
00:04:53,190 --> 00:04:58,300
But remembering that our raster images are
only as large as the original resolution,

72
00:04:58,300 --> 00:05:00,690
we'll want to ensure that image is,

73
00:05:00,690 --> 00:05:05,560
indeed, large enough for
all assets we may eventually create.

74
00:05:05,560 --> 00:05:11,030
Luckily these days, photos we may use in
creations are more than large enough for

75
00:05:11,030 --> 00:05:12,330
just about any medium.

76
00:05:13,500 --> 00:05:18,060
For display, again,
both raster and vector are great.

77
00:05:18,060 --> 00:05:22,500
In fact, while app icons are created
with vector graphics programs,

78
00:05:22,500 --> 00:05:26,750
more often than not,
they actually end up as raster files.

79
00:05:26,750 --> 00:05:29,650
We'll explore that later in the course.

80
00:05:29,650 --> 00:05:34,180
But other common uses for choosing
vector might be prototyping an app,

81
00:05:34,180 --> 00:05:40,720
drawing a logo, icon, or a web based asset
we may want to scale such as social icons.