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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s