by on

Inspired by photos by emlyn and clarita from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4

Today’s Class

  • Talking about inspirations
  • Web Design – Photoshop Workshop (in class)

Talking about Inspiration

While you are a student you should be able to experiment as much as you can. I mean, you should claim your right to experiment in your work. Rather than always going for a conservative option.

On the other hand you never want to stop searching for inspiration in the work of others and in society, the built environment and nature in general.

As you could see with the first assessment – taking close-up photos can lead to unexpected results. Objects never look the same on screen as they do on the floor or in real life.

Close-up at Fed Square, Federico Viola 2013
Close-up at Fed Square, Federico Viola 2013, Found at p.ic

Some inspirations you will simply find in the artwork and design work of current practitioners and past masters. For current designers you want to look at sites and magazines such as Computer Arts and Computer Arts Projects, Mashable,  Design Envy and Dzineblog are just a few inspiring resources.

This week’s Visual Design Component Class covered links and some descriptions of some styles and movements that I relate to very much:

  • Swiss International Style
  • Constructivism (often called Russian Constructivism)
  • Vietnames Propaganda Poster
  • Photomontage

I highly recommend reading up on each and particularly looking at examples of the works. It is good to find out what stylistic choices each movement made and what ideas were big in their days.

Swiss International Style - Joseph Müller-Brockmann - Beethoven - found at www.designhistory.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven Concert Poster – found at http://www.designhistory.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 - click image for more information and link to her blog
Contemporary design in style of Constructivism by Teo Brito found at LauraGreen92 – click image for more information and link to her WordPress blog

It is fine to be inspired by other artist’s and designer’s work. Actually, you should look for greatness in other works and reference their works. This is done by paying a tribute to the original artist in form of a homage.

Experimental Photomontage by Robert Heinecken
Experimental Photomontage by Robert Heinecken

Web Design – Photoshop Workshop

In-class workshop. We will continue to apply the grid system to a website design. This time we will apply the grid to a gallery. The design will depend on your choices of layout and number of thumbnails that you want to feature.

Screenshot - applying 960 Grid 12 Col layout from 960 Grid System
Screenshot – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System
  1. Access the 960 Grid System site: http://960.gs/ and download their 960 Grid System Templates by pressing the ‘Big ol’ Download Button’. This will start the download of a comprehensive folder by Nathan Smith with 960 Grid System templates and plug-ins for Photoshop, DreamWeaver and many other programs.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. Add horizontal guides (View>New Guide) at 245px, 255px, 265px, 500px, 510px, 520px, 755px, 765px, 775px and 1010px. Lock your guides (View>Lock Guides or Alt+Ctrl+;) These guides will make it easier to arrange your content and to allow for 10px margins.

    Setting the grid up.
    Setting the grid up.
  6. Use the M (Rectangular Marquee) Tool to create spaces for a banner, text content, image content and a menu. Fill the spaces with colour (Shift+F5). Place each on individual layers. Name the layers (banner, text content, etc)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. Create Clipping Masks: make sure the banner image sits on top of the banner layer (with the colour space). Have only the layer with the image selected and right click on the active layer (beside the name of the layer) and click on Create Clipping Mask. Your image should take on the dimensions of the layer  below. – Alternatively you could use the short cut Ctrl+Alt+G (Cmd+Alt+G).

    Concept for Gallery Screnshot
    Concept for Gallery Screenshot

The 960_grid_12_col template is based on 12 columns. You can then place your text and images over 1, 2, 3 or more columns. The grid system allows you to organise your website in a visually pleasing way.

by on
Based on photo by dhester from morgueFile.com
Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class2     Class3     Class 4     Class 6

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will learn about DTD.

We will have a Guest Speaker.

Today’s Class

Revisiting some aspects of last week’s class, here is an example of the tree structure of an XML document:

Tree Structure of XML Document - from W3Schools
Tree Structure of XML Document – from W3Schools

The image above represents one book in the XML below:

XML document

The root element in the example is <bookstore>. All <book> elements in the document are contained within <bookstore>.

The <book> element has 4 children: <title>,< author>, <year>, <price>.

More on XML Tree

DTD

Use the DTD section on W3Schools to 1.research and 2.document the points below.

Please document your DTD research by  answering all questions in the document:>Class 5 – DTD Documentation. Upload the completed document to MyKangan!

List of Questions/ Tasks

These questions can be found in the attached Word File.

  1. What does DTD stand for and what is the purpose of a DTD or why would you use it?  Link: W3Schools – DTD Link2: W3Schools DTD Intro
  2. List an example for a DTD – the syntax!
  3. What is an internal DTD? Same link as above.
  4. Give an example of an internal DTD, use the correct syntax. Same link as above.
  5. Describe external DTD! Cover how it is linked through a DOCTYPE definition. Same link as above.
  6. Create a DOCTYPE definition for a DTD called Message. See example at same link as above.
  7. Give an example of an element declaration. Link: W3Schools – DTD Elements
  8. Give an example of an element declaration with parsed character data. Same link as above.
  9. Give an example of an element declaration with any content. Same link as above.
  10. Give an example of an element declaration declaring one occurrence of an element. Call the element process and the occurence contingency. Same link as above.
  11. Give an example of an element declaration declaring minimum one occurrence of an element. Call the element process and the occurence contingency. Same link as above.
  12. Give examples for
    • declaring zero or one occurance
    • declaring either/or content
    • declaring mixed content

W3Schools > We will use W3Schools when learning about the Markup languages.

Guest Speaker

Michael Ball is the manager of SSR at Kangan. He will provide an inside into his work and share his hands-on experience and methods of Operational Planning. As announced – this talk has been scheduled in for Operational Planning.

Please take notes and use the information for your assessment task.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

by on
Based on photo by dhester from morgueFile.com
Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4     Class 6

Today’s Class

  • Discuss your assessment progress with Assessment 1
  • Discuss your approach to your target audience
  • Inspirations

Progress with Assessment 1

Please open your assessment 1 – Student Diary Cover; I will walk around and look at everyone’s progress. Please open up anything you have done.

I would like to see some ideas and concepts at this stage, a description of the target audience and possibly you might have started on the project in Photoshop, Illustrator or InDesign. I will spend approximately 20 mins on this.

Inspirations for Assessment 1 – Student Diary

Swiss International Style – an iconic style of graphic design from the 1950s, strongly influenced by the ideals of the German Bauhaus – Click the image for a Google search on Swiss Style:

Swiss International Style Screenshot Google

Swiss International Style
Swiss International Style

Constructivism – The immensely graphic art and propaganda style of Communist Russia, or to be more precise, of the Soviet Union. Early 1920s – 1940s. Click the image for a Google search on Constructivism:

Constructivism
Constructivism

Vietnamese Propaganda Posters – this is a particular style popular in Communist Vietnam. Visually very flat with the use of rich patterns and stunning in colour scheme. I feel very attracted to this style. Vietnam particularly in 1960s and 1970s. Click the image for a Google search on Vietnamese Propaganda Poster:

Vietnamese Propaganda Poster
Vietnamese Propaganda Poster

Photomontage – Artform that became extremely popular in the early 20th Century. Particularly popular in German Expressionism and Dadaism. Click the images for links to the original images or sites:

Photomontage: Amir Ebrahim Photography
Photomontage: Amir Ebrahim Photography
Massive Attack - The Essential Mix
Massive Attack – The Essential Mix
Couple found at http://frenchbydesign.blogspot.com.au
Couple found at http://frenchbydesign.blogspot.com.au
ruthworkx -http://ruthworkx.files.wordpress.com
ruthworkx -http://ruthworkx.files.wordpress.com
Mosaic of Sofia Coppola - by Maurizio Galimberti - www.mauriziogalimberti.it
Mosaic of Sofia Coppola – by Maurizio Galimberti – http://www.mauriziogalimberti.it
Photo Montage by SGlider12 on Webdesign.org - Click image for great Gimp tutorial
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial

Assessment 2 – Design a GUI

This assessment covers this class for these units: Create Visual Design Components and  Analyse Information and Assign Meta-Tags and Create A User Interface.

Due Date: in July

Design a Graphic User Interface. You can choose to design for a Website or App.

First: think about a project. What do you want the GUI to be for? Think about a client scenario, who is your client and what is the purpose of the site or app? What do you want the user to do after visiting it?

Develop sketches and refine your design in Photoshop.

You will need 4 pages (example Website: home, about us, portfolio, …)

Make sure to include:
Platform consideration – basically decide on the output platform and write it down
Dimensions – at what size will the user view your GUI?
Target Audience – Visit class 3 for ‘Visual Design Components’ for ideas on how to develop your target audience.
Influences – ‘screenshot after screenshot’, capture screenshots of influences, look up sites that influenced you.
UCD considerations, design your GUI around User Centred Design considerations
Follow a step by step approach for your design process – Visit class 2 for ‘Visual Design Components’ for examples of a design process

You will need to supply original photos taken by you! Each photo needs meta-data assigned to it. Include photographer details, tags, image title, copyright statement. Include a folder with the edited images with meta-data.

Tutorial9 - Glossy Reflection
Tutorial9 – Glossy Reflection

Glossy Reflection Tutorial

Follow the in-class presentation of this tutorial The 5 Essential Photoshop Reflections or complete it yourself.

by on
Based on photo by hotblack from morgueFile.com
Based on photo by hotblack from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4     Class 6

Introduction

  • Today we will talk about what an organisation or business will look at when recruiting and inducting employees
  • We will have a guest speaker: Rao Diwakar. Assistant Manager of ICT at Kangan Institute
  • Work on Assessment 1
  • Guest Speaker on Thursday: Michael Ball, Manager of SSR at Kangan Institute

Recruiting and Inducting Employees

Finding suitable staff for a business is central for the success and often the survival of a business. The task of having to find the right person falls to a manager responsible for the operational side of a business. At an institute like Kangan it is the role of a department manager to find suitable candidates. Some organisations may have a more centralised approach and get their HR (Human Resources) department to conduct the recruitment.

An organisation needs to first establish what position is available. This will depend on their needs.

Their needs will be written down in form of a Position Description.  A position description will make the task of finding the right person for the job more streamlined. From the position description the recruiter will develop a set of Key Selection Criteria. Key selection criteria are the skills, attributes, knowledge and qualifications essential for satisfying the requirements of the job.

Almost every job vacancy will have a list of Key Selection Criteria attached to it. Applicants who fail to address those in their application will most likely fail at getting the job.

Finding the Right Candidate for a Job... - Photo AdamRiley from www.projectnoah.org
Finding the Right Candidate for a Job… – Photo AdamRiley from http://www.projectnoah.org

In Class Task

What job or career are you interested in? Do a job search on SEEK, CareerOne, GumTree or MyCareer for a job advertisement. Try to find the Key Selection Criteria for that position.

You might to search for a moment and you are likely to only find an excerpt of the criteria, generally the full list is available on request. Bookmark the ad.

Class Discussion

Share the Key Selection Criteria of your job advert with the class. Pick one and describe in your words what it means. Do you think that you would suit that criterion?

Guest Speaker

Rao Diwakar makes operational plans and decisions as part of his work . He is so kind to share some of his knowledge on operational planning, creation of KPIs, recruiting and inducting employees and performance monitoring and management strategies. It is a great opportunity to ask him questions. So, try to get as much information of him and use the time well.

Assessment 1

The rest of class time will be used for you to work on assessment 1. It is due on 4/6. You do not need to make the answers up, you can ask experts and get them to supply you with the answers – it is a research assessment.

Assessment 1

This Thursday

We will have a third and final guest speaker on Thursday (during our EDSS class) to give us an insight into this topic. The guest speaker is Michael Ball, the manager of SSR (Student Support and Recreation). SSR has a different purpose to ICT and it will be very interesting to hear his focus on operational planning.

The three guest speakers should make the completion of the first Assessment a walk in the park.

by on
Inspired by photos by emlyn and clarita from morgueFile.com
Inspired by photos by emlyn and clarita from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 5

Today’s Class

  • Introduction to Assessment 2
  • Web Design – Photoshop Workshop (in class)

Assessment 2 – Design a GUI

This assessment is a combined assessment for: Create User Interfaces, Visual Design Components, Information and Meta-tags!

Design a Graphic User Interface. You can choose to design for a Website or App.

First: think about a project. What do you want the GUI to be for? Think about a client scenario, who is your client and what is the purpose of the site or app? What do you want the user to do after visiting it?

Develop sketches and refine your design in Photoshop.

You will need 4 pages (example Website: home, about us, portfolio, …)

Make sure to include:

http://960.gs - A button that is hard to miss
http://960.gs – A button that is hard to miss

Web Design – Photoshop Workshop

In-class workshop. We will look at how to apply a grid system to a website design.

  1. Access the 960 Grid System site: http://960.gs/ and download their 960 Grid System Templates by pressing the ‘Big ol’ Download Button’. This will start the download of a comprehensive folder by Nathan Smith with 960 Grid System templates and plug-ins for Photoshop, DreamWeaver and many other programs.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. Add horizontal guides (View>New Guide) at 245px, 255px, 265px, 500px, 510px, 520px, 755px, 765px, 775px and 1010px. Lock your guides (View>Lock Guides or Alt+Ctrl+;) These guides will make it easier to arrange your content and to allow for 10px margins.
  6. Use the M (Rectangular Marquee) Tool to create spaces for a banner, text content, image content and a menu. Fill the spaces with colour (Shift+F5). Place each on individual layers. Name the layers (banner, text content, etc)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. Create Clipping Masks: make sure the banner image sits on top of the banner layer (with the colour space). Have only the layer with the image selected and right click on the active layer (beside the name of the layer) and click on Create Clipping Mask. Your image should take on the dimensions of the layer  below. – Alternatively you could use the short cut Ctrl+Alt+G (Cmd+Alt+G).

The 960_grid_12_col template is based on 12 columns. You can then place your text and images over 1, 2, 3 or more columns. The grid system allows you to organise your website in a visually pleasing way.

Inclass Tutorial - applying the 12 column based 960px grid to a website
Inclass Tutorial – applying the 12 column based 960px grid to a website
Examples of 16 col and 12 col variations of the 960 grid system - from 960.gs
Examples of 16 col and 12 col variations of the 960 grid system – from 960.gs

by on
Good Morning! Photo: wallyir, from: morgueFile.com
Good Morning! Photo: wallyir, from: morgueFile.com

Good morning Aylin, Blaine, Adrian, Lewis, Tom, Rached, Timothy, Dean, Tyler, Jordan, Jennifer, Daniel and Luke.

And a big welcome back to Liam, Esma, Robert, Sue and Michelle!!! It is nice to have you back…

Today we will focus on

  • Taking digital photos of textures
  • Taking a portrait of each other
  • Editing the images in Photoshop

Photoshoot

Preparation: we will all go to the p.ic blog and read the Photography Tutorial.

Next we willteam up and then see how many cameras we will have between each other. If you have a good quality mobile, you can use that to take the pictures. Otherwise you will be able to use a digital camera provided by the library.

Take 2 photos of each team member.

Take 5 pictures of each type of texture (see p.ic tutorial)

Photoshop Work

We will next combine the texture with your photo in Photoshop and apply some of the skills, that you have learnt over the past weeks.

Save your final work on your USB as a PNG.

by on
Based on photo by dhester from morgueFile.com
Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class 2     Class 3     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will learn about XML.

Today’s Class

Use the XML section on W3Schools and/or Tizag to 1.research and 2.document the points below.

Please document your XML research by  answering all questions in the document:>Class 4 – XML Documentation. Upload the completed document to MyKangan!

List of Questions/ Tasks

These questions can be found in the attached Word File.

  1. For what purpose was XML created?  Link: W3Schools – Home
  2. List some of the uses and benefits of XML!  Link: W3Schools – How canXML be used?
  3. XML documents are quite sensitive and the syntax (arrangement of words) must be followed exactly.
    Describe XML syntax:  what does it need to include and what is the structure?  Link:W3Schools – XML Tree Link:W3Schools – Syntax Rules
  4. What is an XML element and what may it contain? Link: W3Schools – XML Elements
  5. What are attributes? Give an example of the syntax (how it is used in XML). Link: W3Schools – XML Attributes
  6. What advice is given in regards to using attributes and elements in XML? What does the writer say about storing meta data and  storing data? Link:W3Schools – XML Attributes
  7. Define ‘Well Formed’ XML document and paste the example supplied on W3Schools! Link: W3Schools – Validation
  8. Define ‘Valid’ XML document and paste the example supplied on W3Schools! (Use previous link)
  9. What is the difference between a Well Formed and a Valid XML document?  (Use previous link)
  10. What does DTD stand for? What is its purpose? Paste the example of a DTD used on W3Schools.  Link: W3Schools – Validation    Link: W3Schools –Introduction to DTD
  11. W3Schools has a validator for XML. What does a validator do? Find other online or downloadable validators and provide links. Link:W3Schools -Validator
  12. View how CSS can be used to display XML. Explain what the CSS does by using an element and describing the outcome. Use the code provided at the link and a screen shot of the outcome. Link:W3Schools – XML with CSS
  13. What is XSLT? What does it do? Link:W3Schools – XML and XLST
  14. Imagine that you have an online shop and you need to adjust the prices. Use the supplied link and adjust the prices as this: Belgian Waffles:$ 4.95, Strawberry Belgian Waffles:$ 8.95, Berry-Belgian Waffles (SPECIAL):$ 7.95, French Toast $5,95, Homestyle Breakfast – $8.95
    Insert the XML code in the blue box! Link:W3Schools – TryIt Editor XML/CSS

W3Schools > We will use W3Schools when learning about the Markup languages.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

by on

Good morning!

Well, I hope that it is a good morning for you.

Today, you will do research on Social Media and present in a customised PowerPoint presentation, with a customised background in Photoshop.

Create the Background

Step 1:

Create a background for PowerPoint in Photoshop.

Follow the in-class tutorial. Save the background as a PNG.

Step 2:

Place the background in PowerPoint. Follow the in-class tutorial.

Step 3:

Research

Icons-Social-Media

Social Media Research

Step 1:

Research 7  – 10 Social Media sites.

Step 2:

Take screen shots.

Step 3:

Describe the features of the site, the navigation, the technology, the short-comings

Step 4:

Put your findings in a PowerPoint presentation

Presentation

Present in class

 

by on
Based on photo by hotblack from morgueFile.com
Based on photo by hotblack from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3

Introduction

  • We will commence the class by looking at the 5 contingency plan examples out of your own life (task from last class) and comparing them in class.
  • Next you will receive Assessment Task 1.
  • We will have a guest speaker: Sangeeta Alex. Manager of Customer Relations and Student Services

Personal Contingency Plans

Share your five plans with the other students. If in class share all your 5 examples, if online please submit your example as a comment.

Undo is not often an option in the real world... F.Viola
Undo is not often an option in the real world… F.Viola

Assessment 1

This assessment is due in 2 weeks. You do not need to make the answers up, you can ask experts and get them to supply you with the answers – it is a research assessment.

Assessment 1

Guest Speaker

Sangeeta Alex is a Manager at Kangan Institute. She is so kind to share some of her knowledge on how to implement operational plans and how to create KPIs. It is a great opportunity to ask her questions. So, try to get as much information of her and use the time well.