Lesson video

Hello.

My name's Mrs. Jones.

And I'm really pleased that you decided to learn with me today.

In this lesson, we will look at different image types, how the quality differs between them, and the file types associated with them.

We will then look at using software to create digital graphics.

So let's get started.

Welcome to today's lesson.

Today's lesson is called Creating Digital Graphics, from the unit Digital Media.

And by the end of this lesson, you'll be able to describe the differences between image types and use software to create a digital graphic.

There are four keywords to today's lesson.

Raster.

Raster, also known as bitmap.

Raster graphics are composed of pixels containing colour information.

Vector.

Vector graphics are composed of mathematical paths and colour information.

Lossy compression, reduces file size by removing some data but reduces quality when resized.

Lossless compression, reduces file size and retains all the data so that it can be resized with the same quality.

There are three sections to today's lesson.

The first is explain the difference between raster and vector.

The second, describe the difference between lossy and lossless.

And the third, use software to create digital graphics.

So let's start with explaining the difference between raster and vector.

Images are used in lots of different digital artefacts.

You can create images, take photos, or scan images.

There are two types of images, raster and vector.

A raster image is made up of a grid of tiny, individual coloured squares called pixels.

Each pixel has a specific colour.

And when you put millions of these together, they form a complete picture.

This can also be called a bitmap image.

This example image here shows very pixelated because you can see all the pixels a lot clearer here of the grapes.

Jun asks, "When are raster images used?" Good question.

Raster images are every photo you take with your phone or a digital camera, a scammed drawing or document, and most images you find online.

Raster images are best for photographs, detailed images, and web graphics.

Jun asks, "How do you know if it is a raster image?" Again, a good question.

A raster image is stored using file types including jpeg, which stands for Joint Photographic Experts Group, a GIF, which stands for Graphics Interchange Format, a PMG, which stands for Portable Network Graphics, and BMP, which stands for bitmap.

Let's have a quick check.

What are raster images best for? Is it a, fonts, b, web graphics, c, illustrations, d, photographs.

Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was b, web graphics, and d, photographs.

Well done if you got that correct.

A vector image is made up of paths, points, lines, curves, and shapes, all defined by mathematical formulas.

The computer draws the image by recalculating based on the formula.

The quality is retained as it is redrawn each time it is resized.

Laura asks, "When are vector images used?" Good question.

Vector images are used for company logos, digital artwork that isn't a photo, fonts, line art, technical drawings, and maps.

Vector images are best for logos, illustrations, fonts, icons, and print designs.

Laura asks, "How do you know if it is a vector image?" Another good question.

And a vector image is stored using file types including an SVG, which stands for Scalable Vector Graphics, PDF, which stands for Portable Document Format, and AI, which stands for Adobe Illustrator.

Let's have a quick check.

What are vector images best for? Is it a, fonts, b, web graphics, c, logos, d, photographs.

Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was a, fonts, and c, logos.

Well done if you've got that correct.

Let's do an activity.

And you'll need your worksheet for this.

Complete the table to explain the differences between raster and vector images.

You have a table with raster image and vector image across the top.

And then on the left, you have a description row, best for row, and common file types row.

Pause the video, go back through the slides, and then we'll check your answer.

Let's check your answer.

Raster image, the description, it's made up of a grid of tiny, individual coloured squares called pixels.

Each pixel has a specific colour.

And when you put millions of them together, they form a complete picture.

It is best for photographs, detailed images, and web graphics.

And the common file types are JPEG, GIF, PNG, BMP.

For a vector image, the description is its made up of paths, points, lines, curves, and shapes, all defined by mathematical formulas.

The computer draws the image by calculating these equations.

It is best for logos, illustrations, fonts, icons, and print designs.

And the common file types are SVG, PDF, and AI.

Well done if you've got those correct.

Let's move to the second part of today's lesson, describe the difference between lossy and lossless.

Images that have been created have to be stored.

How they are stored affects the quality of the image.

Compression is about making files smaller so they're easier to store and send.

There are two main types of compression, lossy and lossless.

In lossy compression, the computer identifies and removes information that you won't notice, like very subtle colour variations in a photo.

This significantly reduces the file size, but there is a permanent loss of quality.

And let's have a look at this image that was there.

And as you zoom in, the quality reduces.

You can see the square there on the neck of the bird, and you can see the quality on the left is reduced as we zoom in.

That is where we have lost quality through the compression.

Aisha asks, "How do you know if it is using lossy compression?" A really good question.

If the image has been stored as a jpeg, then it is using lossy compression.

Let's have a quick check.

What happens when an image is stored using lossy compression? Is it a, the image retains the quality, b, the computer identifies and removes information, c, you identify and remove information, d, the computer finds ways to store the image data.

Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was b, the computer identifies and removes information.

Well done if you got that correct.

In lossless compression, the computer finds ways to store the image data more efficiently without discarding any information.

When you decompress it, you get an exact pixel-for-pixel replica of the original.

To decompress means to return it to the full file size.

Alex asks, "How do you know if it is using lossless compression?" A really good question.

If the image has been stored as a PNG, GIF, TIFF, or ZIP, then it is using lossless compression.

Let's do an activity.

And you'll need your worksheet.

Identify the images that have used lossy and lossless compression.

You have two images and you have the file name and file type associated with that image.

Pause the video, go back through the slides, use your worksheet, and then we'll check your answers.

Let's check your answers.

The first image, fruit.

png, is a lossless image because the file type is a PNG.

The second image is lossy, field.

jpg.

Because it is a JPEG, it is using lossy compression.

Well done if got that correct.

Let's do the second part of the activity, describe how to tell whether an image is using lossy or lossless compression.

Pause the video, go back through the slides, use your worksheet, and then we'll check your answers.

Let's check your answer.

In lossy compression, the computer identifies and removes information that you won't notice, like very subtle colour variations in a photo.

This significantly reduces the file size, but there is a permanent loss of quality.

It is stored using a file type like JPEG.

In lossless compression, the computer finds ways to store the image data more efficiently without discarding any information.

When you decompress it, you get an exact pixel-for-pixel replica of the original.

It is stored using file types like PNG, GIF, TIFF, or ZIP.

Well done if you got those correct.

Let's move to the last part of today's lesson, use software to create digital graphics.

There are lots of different software options to create images.

The software allows you to combine different elements to create a new digital artefact.

You can use a graphics programme to create either vector or raster images.

Setting the file type will set the type of image and quality.

And here you can see we have the file types.

So we have SVG, which is a vector and is lossless compression.

A PNG is a raster image and has lossless compression.

A JPEG is a raster image and has lossy compression.

So the file type you select when you save it will depend on whether it is lossy or lossless compression and whether it is a raster or a vector image.

Let's have a quick check.

What type of image would a PNG file type be? Is it a, lossy and raster, b, lossless and vector, c, lossy and vector, d, lossless and raster.

Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was d, lossless and raster.

Well done if you got that correct.

Canva has a wide range of templates to use and edit, and you can search the templates by selecting templates and typing in the type of image you want to create.

So you can see here in a screenshot of the view when you open Canva and you select templates, you have that search millions of templates option there to add in a search term.

Aisha asks, "How do I use a template?" A really good question.

You can search the templates by using a keyword like logo to view the options.

Select the template by clicking it and select customise this template.

You can then edit the colours, text, and fonts used, as well as add elements to personalise the template.

There is a main toolbar on the left when you open any template or blank area within Canva.

The Design icon is where we can look at different templates.

Text has text boxes and template text styles.

Uploads is where we can upload our own assets.

Brand is where we can set brand colours, fonts, and a logo.

And Elements is where we can add different assets, including images, shapes, and graphics.

On the elements bit, we can add elements to personalise the design or template.

You can type in a search term to look for a range of elements, including a shape, a graphic, a sticker, or a photo.

Once you add a graphic, you can edit it further, including colours, rotation, crop position, et cetera.

So when you have selected the element that you want and you click to add it to the template, the toolbar at the bottom there will appear when you've selected that new element.

So you can edit it, we can crop it.

You then have the flip, which is to do with the rotation.

We've got the colours associated with that element, which you can click and edit to change to personalise it yourself.

And the other options there are to do with the line, the thickness of the line.

And we can change the position and animate it.

Let's have a quick check.

Which toolbar option allows you to add different assets like shapes? Is it a, design, b, elements, c, text, or d, brand? Pause the video to consider your answer and then we'll check it.

Let's check your answer.

The answer was b, elements.

Well done if you've got that correct.

Let's do an activity.

You've been asked to create a logo and one-page menu for a new restaurant.

Open a digital graphics package of your choice.

Examples in this lesson use Canva.

And there are three parts.

One, use a template to create a new logo and menu.

Two, download the logo as SVG.

Three, download the menu as PNG.

Pause the video, go through the slides, use your digital graphics package to create your logo and menu, and then we'll go through an example solution.

Let's check your answer.

So this is an example here of a logo and a one-page menu for a new restaurant.

So your logo menu will differ.

So here we have a Dessert Emporium logo.

You also have the menu that is associated with that.

Well done for completing your logo and menu.

In summary, a raster image is made up of a grid of individual tiny coloured squares like pixels.

Each pixel has a specific colour.

A vector image is made up of points, lines, curves, and shapes, all defined by mathematical formulas.

The computer draws the image by calculating these equations.

Lossy compression is where some information is removed.

The file size is reduced, but there is a permanent loss of quality.

Lossless compression is where the quality of the image is retained.

Different file types set whether it is vector, raster, lossy, or lossless.

Well done for completing this lesson on creating digital graphics.