by on
Photo by dhester on morgueFile.com
Photo by dhester on morgueFile.com

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Content:

  1. Introduction
  2. Applying Meta Data in HTML
  3. Create an Image for a Web Page
  4. Email the Example
  5. Student Examples
  6. Feedback

Introduction

Today we will look at how to create meta tags in HTML and where to place the information.

Applying Meta Data in HTML

Meta Tags for Web Pages

Create a HTML file with all the meta tags for:

  • keywords
  • description
  • author

Use the W3School’s TryItEditor or Notepad to write your code.

Follow this link to see how it is done: The HTML Head Element.

Save your html file and move to the next task.

Create an Image for a Web Page

Use photoshop to create a photo montage image like the one below.

Search for specific technique: 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

Create the Image in Photoshop

Create a similar photomontage to the one above by Amir Ebrahim Photography. Find a photo to base it on and copy and paste layers and change the image colour and tone.

Make sure to apply the meta data to the final product before saving it as a JPEG and PSD.

Email the JPEG

Email the JPEG to me.

Student Examples

Below are examples by students:

to be posted

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

by on
Photo by dhester on morgueFile.com
Photo by dhester on morgueFile.com

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Content:

  1. Introduction
  2. Applying Meta Tags
  3. Applying Meta Data in Photoshop
  4. Creating a Poster in Photoshop
  5. Feedback

Introduction

Analyse Information and Assign Meta Tags is a unit that focusses on:

  • Identify the purpose of the meta-tags
    What will they need to communicate?
  • Analyse the material that needs to be stored as meta data
    What information needs to be stored as meta data?
  • Create meta tags
  • Test and monitor meta tags

Attached is the unit of competency: ICAWEB510A Analyse Data and Assign Meta Tags

Please read the text word by word and … no actually, let us move to greener pastures:

Applying Meta Tags

It would help to actually know what meta tag means:

A meta tag is basically a tag in HTML that describes the contents of a Web page.

We will look at different ways to apply meta data to files:

  • Applying meta data with Photoshop
  • Applying meta data with Adobe Bridge
  • Applying meta data with meta tags in HTML

Applying Meta Data in Photoshop

Question to the class: why do you think it is important to apply meta data in the first place?

Do not read any further…

We will apply meta data in Photoshop with File>File Info… or with the shortcut: Alt+Shift+Ctrl+I.

This opens a window and you will be able to enter information in there. Let us focus on a title, the name of the creator (you) a copyright statement, a description and keywords.

Creating a Poster in Photoshop

Before you can apply any data to a Photoshop document though, you need to have a Photoshop document. So, let us begin with some fun:

In 1:20h create a poster that is inspired by either Swiss International Style, Constructivism or the Vietnamese Propaganda Poster.

Feel free to use some of your own art work or appropriate imagery found online.

Make sure to apply the meta data to the final product before saving it as a JPEG and PSD.

E-mail the JPEG to me! 🙂

Inspirations for today’s task:

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

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Student Examples

Below are examples by students:

Milk Poster - Swiss International Style Reference - by Annabel Stephen Salip
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Constructivism Reference - by Lylah Livingston
Constructivism Reference – by Lylah Livingston
Pink Ribbon Day - Swiss International Style Reference - by Hwan Rochanabuddhi
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Zig Zag - Swiss International Style Reference - by Nawras Shakeer
Zig Zag – Swiss International Style Reference – by Nawras Shakeer

 

Peace- Swiss International Style Reference - by Maryam Chananeh
Peace- Swiss International Style Reference – by Maryam Chananeh

 

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 5     Class 6

Today’s Class

  • Feedback on both Assessments
  • Assessment Files
  • Adding Meta-data to an Image in Photoshop
  • Inspirations

Feedback on Both Assessments

I will walk around and provide feedback on your work. Make sure that you consider the Visual Hierarchy of your work.

Create a layout of your work from basic outlines and place numbers against the different elements or pieces.

Is there one element that stands out the most? Are they all equal? Boring!!! You want to create a piece that is dynamic! For it to be dynamic it needs:

  • some movement
  • an entry point to the work (this is the first piece or element in your visual hierarchy)
  • a second, third, and other pieces in your Visual Hierarchy
  • A focal point – this can be achieved by an arrow pointing, a person pointing, a person looking at the focal point, the direction of text, etc
Example for Visual Hierarchy - based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960
Example for Visual Hierarchy – based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960

The image of the Beetle advertisement by iconic graphic designer Helmut Krone is a good example for a clear Visual Hierarchy.

  1.  Product image – due to position (we are trained to look at the top left first), high contrast (darkness of the beetle against the white background helps to make it stand out), generous use of white space (makes the image visually more important).
  2. Heading – due to position (it is positioned on the path to the next elements), bold and larger than body text, high contrast.
  3. Body text – position and size of text area. You could argue that the logo is visually as important.
  4. Logo – position, size (opposed to text) and white space around the logo.

The advertisement can be found at the AIGA Design Archives (and many other sites).

Scale – play with the size of things! Do not accept the first concept that you create. Rearrange it and change the scale of one element. How does the work look if one element is much larger?

Playing with the scale should be a lot of fun! In illustrator you might need to group some elements (Ctrl+G/Cmd+G) and select with V, the Selection Tool and drag to increase or decrease.

Assessment Files

Below are copies of both your assessments:

Assessment 1 – Student Diary Cover

Assessment 2 – Design a GUI

Adding Meta-data to an Image in Photoshop

The easiest way to integrate Meta-data into a file in Photoshop is to open the File Info Sheet: click File>File Info from the drop menu or use the short cut: Shift+Ctrl+Alt+I to open the window.

Next enter your information into the text fields. You want to add a title, name of author (creator), description, keywords and a copyright status.

Shift+Ctrl+Alt+I or File>File Info...
Shift+Ctrl+Alt+I or File>File Info…
Example of File Info being filled in.
Example of File Info being filled in.

PS Screenshot - File Info 02

Inspirations for Your Assessments

We were discussing different trends and inspirations in class. Here are some ideas and inspirations. Click on the images to activate a Google Image Search for the type of images in the thumbnails.

Retro Book Cover Illustrations 50s - Click the image for a Google Search
Retro Book Cover Illustrations 50s – Click the image for a Google Search
Retro Futurism - Click the image for a Google Search
Retro Futurism – Click the image for a Google Search
Vintage Book Illustration - Click the image for a Google Search
Vintage Book Illustration – Click the image for a Google Search

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 5

Today’s Class

  • Feedback on your Student Diary Cover for Assessment 1
  • Work on Student Diary Cover
  • Inspirations

Progress with Assessment 1

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

You will receive feedback and be able to work on your assessment.

Inspirations for Assessment 1 – Student Diary

You want to visit and bookmark these two online resources:

Typographic images can be a strong visual treatment of thought and ideas someone may have. The thoughts could be made visual in a comic-like sense.

The Face by drfranken
The Face by drfranken, found on ChromoArt.de
What Time is it Now? by King_Bobbles
What Time is it Now? by King_Bobbles, found on Templates Blog

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.