Link to Class 4    Class 3     Class 1

Welcome to your second class. I don’t know about yourself, but I actually get pretty excited about HTML. Today we will focus on:

  • the use of Cascading Style Sheets – short CSS (W3Schools-CSS)
  • head elements in a HTML file (W3Schools-Head)
  • how to view HTML code of a website
  • use of html code in a blog (example: WordPress)
  • creating a good folder structure in HTML

The last 3 points will be covered in class.

We will again use the site and their TryIt Editor. We will use the Mac specific TextEdit editor to write the HTML and CSS code.

Please follow the instructions in your Class 2 task sheet below:

HTML Class 02 Task

  • All questions related to the Head section of an HTML file can be researched at W3Schools-Head
  • All questions related to CSS can be researched at W3Schools-CSS

Good folder/file structure is paramount in web design. It is a beginner’s mistake to upload a website with all its content and to find that files do not link, eg images do not load. The link below has a good explanation on folder structure:

Simplify File Structure for Dummies

Other useful links:

HTML Dog – this site is a well written and well structured resource with many HTML and CSS tutorials! A must visit!!!

This week you will have two tasks, please check for a second task by the end of the week. The focus of this week is (how to) Promote team effectiveness.

You will closely work with this excellent online resource: Make sure to bookmark it, it will prove useful on many occasions.
Download the task below. Complete it and e-mail a copy to me (see e-mail in document). Upload the document to MyKangan (Moodle) and keep a copy of the completed task.

Class Task 1 Week 2 – Online Units

Link to Class 5       Class 4           Class 1

Today we will commence with student presentations on the 5 Classic Typefaces.

Make sure to understand the differences and to be able to visually distinguish between the typefaces. Use the image below as a reference:

Example of 5 Classic TypefacesSource: Designing with Type, J.Craig, I.K.Scala, 1971, 2006
Example of 5 Classic Typefaces
Source: Designing with Type, J.Craig, I.K.Scala, 1971, 2006

You will receive a basic testing task. Please complete the task in 10min.

Next we will move towards Type as a tool of communication. Follow the in class presentation and perform the 2 tasks at the end (view the attached presentation for tasks).

Here is a copy of the presentation:

Type in Context Class03

Link to Class 4     Link to Class 3     Link to Class 1

It is an exciting time to commence something new, so wear the badge Absolute Beginner with pride and get ready for a love affair with one of the best software packages of our time- welcome to Photoshop.

Photo by agathabrown on morgueFile
Photo by agathabrown on morgueFile

Suddenly life broke out in warm colors again, so young and beautiful that a lot of people couldn’t stand to look at it.

Quote from the film Absolute Beginners

We will work with Photoshop CS5 on a Mac.
Prerequisites: 10 photos of you and 10 photos of a background saved onto your USB and in class (the excuse of the forgotten USB at home is lame) 😉

Today we will look at:

  1. The CS5 Workspace (overview)
  2. Differences between the Mac keyboard and Windows keyboard
  3. Ways to open an image
  4. Selection Tools
  5. Use of Hue/Saturation function (Image adjustment)
  6. Layer overview
  7. Perform a task

Feel free to ask questions throughout class and to slow me down at any time. It is important that you view the instructions on the overhead first and then try them out yourself.

The CS5 Workspace (overview)

Please open this Link –CS5 Overview– of a 10 page PDF file (from Adobe Systems Incorporated 2010) in a new window or simply follow instructions in class.

On your screen find the application bar, the menu bar, the options bar, the document window, the tools panel as well as the other panels or palettes.


Activity:  Click on Window in the menu bar. (Here are all the panels and palettes that you can activate or deactivate.) Click on Navigator and see the palette becoming active. Next drag the Navigator palette to the very left of the  workspace or document window. Do the same with the Character Palette (this one is a bit harder to find and I leave it up to you to figure it out).
Next select New Workspace from the workspace switcher menu, name your workspace and tick the 2 boxes.

You have just created a new workspace for yourself. To get back to the standard workspace layout select Reset Essentials from the workspace switcher menu. Changing the workspace to suit your need can speed up your work and is more fun.

Differences between the Mac keyboard and Windows keyboard

These are the two main differences:

Ctrl (Win) = command (Mac)

Alt (Win) = option (Mac)

Ways to open an image

First ensure that you use a good folder structure. Save your 20 or so images from your USB onto the PC that you are working on into a folder with a short, yet descriptive name, eg images.

Select File>Open – find your images folder and select the image that you want to open. Photoshop will open the image at the image pixel size and at the resolution of the file.

Open the images folder and have Photoshop open and accessible. Now drag the image into the Photoshop window.

Create a New Document in Photoshop and choose File>Place. Next place the image into the document.

There are other options, such as dragging an image directly from a webpage into the Photoshop window or selecting File>Open As Smart Object. Photoshop is a very versatile software package. The most important is to know a way that keeps the resolution high.

Selection Tools

The Selection Tools in Photoshop are one of many strong points of this package. We will work with this slow loading instructions from the Teacherlink site: Selection Tool Instructions

Below is an screen shot of the Selection drop menu with annotations:

Source: The Graphic Designer's Digital Toolkit, Alan Wood, 5th Edition, 2011
Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011
  • The Rectangular Marquee Tool (Short cut M) – This tool draws square (with the help of Shift) and rectangular selections (freehand). It is important to understand that you are actually not drawing as such, you are simply creating a selection and will be able to do something to that selection only and only on the current layer. Drag the image below into your Photoshop workspace and select a rectangular shapes. Press Ctrl + U and change the colour settings – just play with it. Keep the file active.
    Image Source:
    Image Source:

    Open this excellent tutorial on Rectangular Marquee Tutorial

  • The Elliptical Marquee Tool (Short cut M) – This tool draws circlular selections (with the help of Shift) and elliptical selections (freehand). You can draw the ellipse or circle commencing from the centre by holding Alt (option for Mac) while you draw your selection. Visit this tutorial on to see a good example on how to use the Elliptical Marquee Tool.
    For this class select the red cylinder and change the colour as per instruction above.
  • The Lasso Tool (Short cut L). Basically you draw your selection freehand. It is an early Photoshop tool and has some good uses still (like creating a quick shadow underneath a vehicle with the help of Gaussian Blur). It requires a high level of mouse skills. Try to select the handshake with the Lasso tool and change the colour. Visit this tutorial on to see one good use of the Lasso Tool.

    Image Source:
    Image Source:
  • Polygonal Lasso Tool (Short cut L). You draw your selection by dropping points. It is an advanced version of the basic Lasso tool and can be very useful. It requires practice. Try the tutorial from Polygonal Lasso Tool.
  • Magnetic Lasso Tool (Short cut L). You draw your selection by clicking once to select the outline of your object and then you simply follow along the outline and the tool does the rest for you. If a mistake occurs use Backspace to go back one step. It requires practice. Try the tutorial from Magnetic Lasso Tool.
  • Magic Wand Tool (Short cut W). You make your selection by clicking in the field of what you want to select (eg inside the suit). The Magic Wand selects pixels based on tone and colour. You can change your selection criteria, for example by increasing tolerance your selection will be wider and less affected by tonal variations in the picture. That will result in a larger selection. If you bring the tolerance down it will result in a smaller selection, which means that changes in tone or colour will affect your selection earlier.
    Try the tutorial from Magic Wand Tool.
  • Quick Selection Tool (Short cut W). This tool is extremely useful as a selection tool. It is similar to the Magic Wand, but it is more advanced and user friendly. You make your selection by clicking in the field of what you want to select (eg inside the suit). The Quick Selection Tool selects pixels based on tone and colour, but it also has the ability to detect similar textures in an image. As a result it is better at detecting the edges of an object.
    You can change your selection criteria by changing the size of your brush tip: increasing it will widen your selection and decreasing it will narrow your selection. For a more in detail description please look at this informative tutorial at Quick Selection Tool.
  • How to add to or subtract from a selection
    Hold the shift key to add to an existing selection. Hold the Alt key to subtract from a selection. You will need to hold the key while adding or subtracting.

Use of Hue/Saturation function (Image adjustment)

This is a very quick intro to this function: Press Ctrl + U. 3 sliders allow you to change either the hue (the exact colour), the saturation (the amount of colour) and the lightness (the tone, lightness and darkness). You can also tick colorize to get a nice retro effect, it makes your selection monochromatic.

Layer overview

We will cover this in more detail in the next class. We basically will just have a look at the layers to get a broad understanding in class.

Perform a task – Important

Use the photos that you prepared for this class or simply copy the image of the gorgeous Tammi Terrell and Marvin Gaye below from the provided link and use it to apply your understanding of the Selection Tools. Select various parts using the different tools. Make sure to keep a copy of your final file in JPEG format and upload to MyKangan next week.

Example of applied changes
Example of applied changes

Student Submissions:

Work by Justin Anderson
Work by Justin Anderson

Link to Class 3/4

Link to Class 1

For your second class we will start off by discussing the different learning styles.

What category do you fall into?

Team up and brainstorm a basic learning resource for How to make Italian style coffee. 

Focus on 3 types of coffees, Caffe Latte, Cappuccino and Espresso. What steps are there in making a coffee? What ingredients will you need?

Think of a resource that will allow the user to use a smart phone, tablet or computer.

Brainstorm ideas for how the interactive content can be taught to the user. Brainstorm the ideas based on different learning styles. List the learning styles and develop ideas for each (except the solitary learning style) – use this site to aid you:

Document your ideas in form of a mindmap.



Please complete a mind map or PowerPoint presentation for last week’s Word document on Printing Processes. Include all the processes mentioned in the file.

When completed we will look at more print related terminology. Today we will focus on paper finishes. Follow my in-class instructions and afterwards complete the questionnaire below. You can use the supplied resources or the Web.

Class 02 Task – Print Terms 02

Sources of information:

Print Related – Graphic Design School   MediaWorks-Chapter3

Keep a copy of your completed document and upload onto MyKangan asap.


Link to Class 4

Link to  Class 3

Link to Class 2

Hello and welcome to your first Friday class. This class will be focussing on Adobe Photoshop CS5 and the creation of a PDF file.

You will be expected to work in a blended learning context. You will receive instructions in class and complete tutorials and tasks outside class. Class time will be used to answer your questions and work on projects.

We will commence the class with some information on file formats. Please open the attached PDF file. This file has descriptions on file formats.

Class 01 – file formats

Afterwards complete the file below.

Class 01 Task_Photoshop

On completion of these tasks we will have a break! After the break I will organise you into 4 teams and get you to take a range of portrait/full portrait photos of each other and landscape shots of backgrounds.

There will be 2 Canon 1309 (10Mp) and 2 Canon PowerShot A560 (7.1MP) available from the library in building C. You can also use your mobile phone to take some of the pictures.

Shot List:

10 Full portraits (serious, thoughtful)

10 backgrounds with person in front. (Arrange camera so that the Rule of Thirds applies)

When taking the photos I would like you to consider:

Framing: When framing the picture, try to fill the frame with relevant and interesting elements.

 Emphasis: Include a focal point of the photograph, a subject that is emphasized.

Angle of view: Take pictures from the subject’s eye level to capture it realistically, or change the angle to alter the point of view.

Balance: Create a sense of weight for the elements within the frame; some objects will have a large sense of weight and some will have a small sense of weight.

Rule of thirds: Offset your picture to help focus the viewer’s eyes on the subject.

Close-ups: Take close-up pictures to capture details and highlight specific objects.

Tone and sharpness: Use light and shadow to focus attention on or draw attention away from your subject. Have your subject in focus and blur the extraneous elements to draw viewers to the subject.

Arrangement: Remove objects not essential to the composition, or eliminate them by changing the camera’s perspective.

Return to class by 3pm.

Homework: Watch the Lynda Tutorial Introducing the Photoshop CS5 Interface.

Thank you for your work!