Visual Design Components – Class 7

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 textposition 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

Implement Operational Plan – Class 7

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 5

Work on Assessments

Today you have a chance to work on your assessments in class and get my feedback on the work.

Assessment 1 – Research Assessment

Assessment 2 – Cert IV PGA – Operational Plan

Presentation by Manager Sangeeta Alex

Operational Plan 2013 – First in-class Presentation by Kangan Mangager

 

Create User Interfaces- Class 6

Inspired by photos by emlyn and clarita from morgueFile.com

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

Today’s Class

  • Talking About Inspiration and Good Design
  • Reflection Tutorial – Photoshop Workshop (in class)

Talking About Inspiration and Good Design

Following up on last week’s conversation about inspiration: I was extremely pleased with some of the works seen by students for student diary entries as well as the GUI workshop. It is good to see that you are being inspired by works that I introduced in class and that you take feedback on board.

It is important to question your work, to seek feedback and to refine it. It is never easy to produce work that will satisfy your own standard. You are actually lucky if you set a high standard for yourself, I often teach students who do not set a high standard and therefore just aim for mediocrity. Their work is generic and looks like something they have found on Google.

You want to aim to first understand a question.You can do this by looking at the design problem and creating a clear project outline, including a design brief, a close look at the target audience and the overall technical details.

Next you look at providing an answer, that suits the brief and that covers all the points of the project outline. If the answer reflects your style or has your signature, that is an added bonus.

Illustration by Kate Miller, found on DzineBlog.com

Illustration by Kate Miller, found on DzineBlog.com

As stated before you will find some inspirations in the artwork and design work of current practitioners and past masters. I have selected an inspiring post from Dzineblog for today:  Some Amazing Retro Style Illustrations Part 2

It looks at retro style illustrations and I appreciate the amount of texture and depth that can be found in a lot of the works.

Gary Neill

Below are illustrations by Gary Neill. His illustrations are rich in texture and show depth in the use of colour, tone and pattern. All his works are simple in shape and visually engaging. I like to look at his work, it makes me feel something, may this be happiness or a sense of wanting to explore the work in more detail. The orange and blue illustration is such a strong statement, it makes me think of online chatting, online dating or any form of digital interaction.

Gary Neill has created illustrations for impressive publications, such as The Guardian, The New York Times, The Economist, Business Week, New York Magazine, Wall Street Journal, The Times, The Independent, Saatchi & Saatchi, Mens Health, Wired, Sunday Telegraph, National Geographic, The Washington Post and many others. Explore his work in more detail on Gary Neill’s SiteGary Neill’s Tumblr SiteGoogle Image Search

Illustration by Gary Neill found on Dzineblog.com - http://garyneill.com/  http://garyneill.tumblr.com/

Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/

The illustration below is a more sinister and serious work by Neill. It was used by The Economist and has a focus on torture applied by a government. We have all heard the saying an image says a thousand words and this illustration is a powerful attempt at raising awareness of torture happening nowadays and how different Western countries view it. I like the simplicity of the image and the use of only black and red. Red is always a strong colour to represent emotion and it is used here symbolic for blood. This is a link to the article The Dark Pursuit of the Truth – Spies, Torture and Terrorism.

Illustration by Gary Neill found on P.A.P.-Blog - http://garyneill.com/  http://garyneill.tumblr.com/

Illustration by Gary Neill found on P.A.P.-Bloghttp://garyneill.com/ http://garyneill.tumblr.com/

Tavis Coburn

The illustrations below are works by Tavis Coburn. His works look very retro and represent a style and feel often found in book cover illustrations and comics of the 1940s and 50s. The style is often referred to as Pulp Fiction – see this Google link for examples for Pulp Fiction book covers.

I find his work very appealing, the stylised use of halftone patterns can look cool – even though it has been overused in recent years. The image of the newly-weds has depth – the back ground is blue and white and mostly flat (except of a few scratch marks above her head), the couple are very textured in an over exposed halftone pattern, the dotted line and suitcase with money sit above it all and suggest that the bride is focusing on the money. The work is a dynamic play on figure/ground relation or negative and positive space.

Here are two links to video tutorials on how to create halftone patterns:

The images he uses look friendly as in the advertisments of the late 40s and 50s, but placed in our time they seem to criticise and poke fun at the consumerism of the 50s.  Explore Tavis Coburn’s work in more detail: Tavis Coburn’s Site, Google Image Search

Illustration by Tavis Coburn found on DzineBlog.com

Illustration by Tavis Coburn found on DzineBlog.com

The second illustration by Coburn is from an article predicting the future of iOS in 2011. What appeals to me is the bright colour scheme, the icons representing the infographic nature of mobile app design. Yet, the image looks like a SciFi take from the 1940s or 50s if not even earlier. I feel reminded of Fritz Lang’s Metropolis. Again, it seems that Coburn looks at our time through a mirror of the past.

Illustration: Tavis Coburn - Illustration for for an article predicting trends in Apple's mobile strategy. Found on: TavisCoburn.com

Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com

Jessie Ford

The illustrations by Jessie Ford have an appealing softness to them. Her work is retro and yet very contemporary. Her work looks very vector-based, it is rich in overlaying textures. I like how she uses dirty looking textures to add to an otherwise plain background. Her generous use of white space and rich textures with her vector graphic or stamped shapes is very attractive. It has depth and I always feel like looking at her work longer and a second time to see what it actually is.

Find her works at: Jessie Ford’s Site, Google Image Search

Illustration by Jessie Ford, found on DzineBlog.com

Illustration by Jessie Ford, found on DzineBlog.com

The second illustration has that simple texture that I described as dirt above. It is like rolling a drying roller brush with black paint over a rendered wall. The texture that she has applied to her illustration makes it more interesting and gives it depth. Without it it would look more digital and clean, maybe flat and polished. The grittier look of her work is strong.

Illustration by Jessie Ford, found on DzineBlog.com

Illustration by Jessie Ford, found on DzineBlog.com

Reflection Tutorial – Photoshop Workshop

This tutorial was listed in previous classes and will be presented today. It is a Photoshop tutorial that shows several easy to follow steps that will allow you to create the illusion of a glossy finish and reflections. This is very suitable for creating a glossy interface, buttons or logo, as well as adding a fold line to your work to make it look more realistic (as if scanned of a poster).

I suggest some alternative shortcuts to the steps used in the tutorial by Tutorial9.

Tutorial9 - Glossy Reflection

Tutorial9 – Reflection Tutorial

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

1- Upload PSD

Upload the PSD file for the tutorial or use a PSD of your choice. You will need a basic button against a dark background.

2 – Create Basic Surface Reflection

  • Select Group 2, the layer with the cloud in it. Duplicate the layer by pressing Ctrl+J (Cmd+J).
  • Press Ctrl+T (Cmd+T) to activate Free Transform. Right click on the selected cloud and select Flip Vertical. The cloud will have flipped over.
  • Drag the cloud down manually while holding shift (to keep it aligned) or use your arrow keys (with shift – to go in larger steps) to move the cloud down.
  • Complete the Free Transform by pressing Enter or double clicking on the cloud.
Image 1 - Add a Layer Mask

Image 1 – Add a Layer Mask

  • Add a layer mask (click the button for layer mask – see image 1)
  • Press D (to reset the standard foreground/background colours to White and Black)
Image 2 - Apply a Gradient Mask

Image 2 – Apply a Gradient Mask

  • Activate the gradient tool (press G) and drag (while still in the mask mode – the mask needs to be outlined) from point 1 to point 2 (see image 2). Your reflection should be partly invisible.
  •  Last steps: apply the layer mask(right click on the layer text and select apply layer mask) and change the layer opacity to suit (I chose 65%).
Image 3 - Change Layer Opacity

Image 3 – Change Layer Opacity

3 – Create Environment Reflection

The Environmental Reflection is white on top and gets lighter towards the bottom.

The Environmental Reflection is white on top and gets lighter towards the bottom.

This reflection works in 2 mayor steps:

Make the Selection

  • Select the cloud on the layer Group 2. The fastest way is to hold Ctrl while you click the layer thumbnail.
  • Make a round selection with the Elliptical Marquee Tool (Shortcut: M or Shift+M to toggle between Rectangular and Elliptical Marquee) and drag it over the top part of the selection of the cloud. Make sure to hold Shift+Alt (or pressing the Intersect with Selection button in the options panel) while dragging your round selection.
  • The result should be a top part selection of the cloud with a arch at the bottom.

Apply a Gradient Fill

  • Create a new layer on top of the cloud layer (Group 2). Call it Env Reflection.
  • Make sure to have white as foreground colour.
  • Fill the new layer with a white to transparent gradient. Select Gradient Tool (Shortcut: G) and choose the option: Foreground to Transparent (in options panel). Drag the cursor from above towards the selection. This will apply the white. Try it a few times until happy.

Adjustments

  • Reduce the Opacity setting in the Layers Panel to reduce the intensity of the gradient.
  • Save your file for the Web: as a PNG.

4 – Create Glossy Reflection

The Glossy Reflection is transparent on top and gets whiter towards the bottom.

The Glossy Reflection is transparent on top and gets whiter towards the bottom.

Do everything as in the steps for the Environmental Reflection, except: call the layer Glossy Reflection and apply the gradient fill from the bottom up. This will make the cloud shape look like a glossy object.

Save your file for the Web: as a PNG.

5 – Create a Fold Line

The Fold line is doubled up and the flare gives it a bit of depth. Look at the Tutorial9 link for the flare.

The Fold line is doubled up and the flare gives it a bit of depth. Look at the Tutorial9 link for the flare.

The fold line is a good way to create the illusion that your artwork is a poster that has been scanned in. The illusion of the fold looks like the shade in a photo or worn.

Make the Selection

  • Select the cloud on the layer Group 2. The fastest way is to hold Ctrl while you click the layer thumbnail.
  • Make a straight selection with the Rectangular Marquee Tool (Shortcut: M or Shift+M to toggle between Rectangular and Elliptical Marquee) and drag it over the lower half of the selection of the cloud. Make sure to hold Shift+Alt (or pressing the Intersect with Selection button in the options panel) while dragging your selection.
  • The result should be a lower half selection of the cloud.

Apply the Darkness

  • Create a new layer on top of the cloud layer (Group 2). Call it Fold Line.
  • Make sure to have black as foreground colour (or simply press D).
  • Select the Brush Tool (Shortcut: B) and a size of 170 or more with a hardness of 0% (this can be found in the Options Panel under the brush tip (called brush preset picker).
  • The next bit is important: Do NOT draw inside your selection but a bit above it. The thickness and softness of the brush will still provide a hint of black.

Adjustments

  • Reduce the Opacity setting in the Layers Panel to reduce the intensity of the colour.
  • Copy and move that layer to get a more natural and slightly overlapping or blurred fold.
  • Save your file for the Web: as a PNG.

Feedback

I hope that you have enjoyed the tutorial. Please leave me your feedback in form of a comment. If the tutorial did not make sense to you, I would like to find out about that, so that it can be made clearer. Thanks!

BWE – Media Class – Reflections Tutorial

Good morning Aylin, Blaine, Adrian, Lewis, Rached, Timothy, Tyler, Jordan, Jennifer, Daniel, Luke, Liam, Sue and Michelle!!!

I am sorry about the bad news, but this will be our last class together.

Today we will focus on

  • Reflections Photoshop Tutorial

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.

EDSS – Class 6

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 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

  • XML Summary
  • Creating a Style Sheet
  • Including Meta-Data in a Website
  • Internal DTD Declaration
  • Assessment

XML Summary (>W3Schools)

XML can be used to exchange, share, and store  data.

XML documents form a tree structure that starts at  “the root” and branches to “the leaves”.

XML has very simple syntax rules. XML with  correct syntax is “Well Formed”. Valid XML also validates against a DTD.

XSLT is used to transform XML into other formats  like HTML.

All modern browsers have a built-in XML parser  that can read and manipulate XML.

The DOM (Document Object Model) defines a standard  way for accessing XML.

The XML examples on W3Schools also represent a summary of this XML tutorial.

Creating a Style Sheet

Look at the style sheet used in the example of this XML/XSLT editor on W3Schools. It uses XSLT. Change aspects of it, replacing style elements. Change the colour, the border…

Including Meta-Data in a Website

Including meta-data in a website is best done in the HTML code. Use the head section to include your meta-data. Look at this link to see how to include it: Head Element With Meta Tags in HTML.

Examples:

  • Define keywords for search engines: <meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
  • Define a description of your web page: <meta name=”description” content=”Free Web tutorials on HTML and CSS”>
  • Define the author of a page: <meta name=”author” content=”Hege Refsnes”>
  • Refresh document every 30 seconds: <meta http-equiv=”refresh” content=”30″>

Internal DTD Declaration

The internal DTD declaration is placed inside the XML document. See example on W3Schools.

Assessment Task

You will use the  XML/XSLT online editor on W3Schools to create an XML document with internal DTD declaration as well as a XLST document with integrated Meta-data.

Task:

Create two price lists with the help of two well formed and valid XML and XSLT files. Use the W3School online editor (as per last link above) and save the xml file as menu.xml and the xslt as menu.xslt.

Price List 1 is supposed to be for a cafe menu. Include a column for 8 or more food item and one for the price and description. You will need to make the descriptions and cost up.

Include an internal DTD in the XML document. You need to rename the individual parent and child elements. Do not use the elements in the example!

Incorporate the meta data into the HTML part of the XSLT document. The meta data needs to include: keywords, description and author.

Price List 2 is supposed to be for a purpose of your choice (eg a book catalog or supermarket stock). Apply the same principle and save as xml and xslt.

Submit the 2 xml and 2 xslt files on MyKangan.

Due Date: 19/7

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

Visual Design Components – Class 6

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

Implement Operational Plan – Class 6

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 5

Introduction

  • Hand in Assessment 1 by 11am
  • Assessment 2 Handout

Complete and Hand in Assessment 1

Your first assessment is due today and I will allow you to double check all the info rmation prior to handing it in. Check your answers with your team member. Make sure that all your details are listed (name and student ID). Upload the assessment on MyKangan.

Assessment 2

Create an operational plan for yourself. Pick a medium term goal for your career or education and list all the things that you need to plan for by answering the questions.

This can be done individually or in teams of 2.
Upload the assessment on MyKangan.

Due Date: 16/7/13

Assessment 2 – Cert IV PGA – Operational Plan

Below is an example of an approach to Assessment 2: Let’s say my overall goal is to learn Adobe Dreamweaver by 30 January 2014.

So, my clear objective would be to able to design a website in Dreamweaver with an interactive menu, a minimum of three linked pages (home, about us, portfolio) and images that upload. I will be able to include HTML, CSS, JavaScript or JQuery and XML elements.

Where am I now might be: my current Dreamweaver skills are very basic. I need to learn how to develop a web page to suit a specific layout. I need to learn how to add and link images, and add meta data to images. I need to be able to get a better overall understanding of the interface, at the moment I feel to intimidated by it.

The resources that I need are: a computer with Adobe Dreamweaver CS 6, the Internet, and an online tutorial site, eg Adobe TV, Digital Arts Online or Noupe.

I hope this gives you a bit of an idea, what is expected. Make it as realistic as you want.