Slides badge

Computer Graphics

Learning Intentions

  • Understand the two types of computer graphics

  • Understand some key effects we can apply to computer graphics

Success Criteria

  • I can explain the term information architecture
  • I can build a website with an appropriate information architecture

Computer graphics

  • Competence in computer graphics is now becoming one of the most important skills in the industry.
  • Learning how to develop graphics using the techniques used in the industry is more important now than it was 10 years ago since there has been a shift in the way graphics designers are employed (most of them are also website designers)
  • Graphics designers get paid well (up to and beyond £40,000) for their work.

Graphics design

  • Graphics design is the first stage of development and starts with a concept.
  • In this stage, much like building a mockup website, several designers produce their own ideas writing them on paper and then suggesting them to other designers. The process needs to be completely individual so that the ideas are their own and no one else's’ designs.

Types of graphics

  • There are two kinds of computer graphics; bitmap and vector.
  • Bitmap graphics are more common across the world wide web because they are supported by more devices, but vector is more common in the industry.
  • One of the greatest features of vector graphics is that they can easily be converted to bitmap graphics, so it is often best to develop a vector graphic and turn it into a bitmap. We will be doing just this.

Bitmap graphics - theory

  • Bitmap graphics store the data in a large grid made up of pixels. Pixels are made up of three colours, red, green and blue.
  • If you look closely at a computer screen these pixels become obvious.

Bitmap graphics - theory

  • Bitmap graphics store the data in a large grid made up of pixels. Pixels are made up of three colours, red, green and blue.
  • If you look closely at a computer screen these pixels become obvious.

Bitmap graphics - theory

  • Bitmap graphics are made up of pixels which contain information on the amount of red, green and blue in each cell.

Bitmap graphics - theory

  • Bitmap graphics are made up of pixels which contain information on the amount of red, green and blue in each cell.

Bitmap graphics - theory

  • Increasing the number of cells in the table (called resolution) allows us to generate better pictures

Complete the tasks on Google Classroom and try to draw this penguin on each of the tables.

Task

Bitmap graphics theory - Summary

  • The more cells in the table/grid we have, the more detailed our picture can be.
  • Bitmaps also take up a lot of space as the number of cells gets bigger.
  • Bitmaps are made up of pixels which store red, green and blue data in them

Vector graphics - theory

  • Vector graphics are very common in design since they can later be converted to bitmap (whereas the other way is not as easy) but also because changing them is very easy.
  • Vector graphics store information about each object within a graphic, for example an object could be a rectangle, circle or polygon (a shape with no defined number of sides).
  • Vector graphics programs are often more difficult to learn but that is what we are going to start on.

Vector graphics - theory

  • Each time a vector graphics file is opened, the computer reads the data from the file to ‘redraw’ the image. The code of a vector graphics file is shown on the following slide.
  • The computer can then figure out what to draw in which pixel of the screen.

Vector graphics - theory

  • Each time a vector graphics file is opened, the computer reads the data from the file to ‘redraw’ the image. The code of a vector graphics file is shown on the following slide.
  • The computer can then figure out what to draw in which pixel of the screen.

Vector graphics file example

The following code sample is how a very simple vector graphic is stored on a computer. Does it look slightly familiar?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1">
	<path id="dp_path001" transform="matrix(1,0,0,1,-251.604,-249.712)" fill="white" fill-rule="evenodd" stroke="black" stroke-width="1.33333" d="M 252.271,250.377 L 607.393,250.377 L 607.393,514.373 L 252.271,514.373 Z "/>
</svg>

Work through all three tasks starting with the Basic graphics task.

Task

Presentation Overview
Close
JB
Computer Graphics
© 2020 - 2024 J Balfour
10:16 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files