Link to all Classes Class 2 Class 3 Class 4 Class 5 Class 6
Today’s Class
Introduction to Delivery Format
Looking at RAE
Looking at MyKangan
Introduction to the Content
In-class Task
Introduction to Delivery Format
This class will be delivered in 2 hour schedules every Monday morning . The content will be posted on this blog as well as on MyKangan. Tasks, discussions and research will be conducted inside the 2 hour slot and at home.
You are expected to work towards goals independently and to be able to operate as part of a team. In a work place you will sometimes be lucky to work with people that you easily get along with, but unfortunately you might often have to work with people that you might not easily get along with. A professional looks beyond this and finds ways to function in a professional environment with a range of personalities.
Assessments:
Important: You need to submit all your assessments on MyKangan. It is your responsibility to follow up due dates and access to MyKangan.
Day 1 Task – this task is a simple comprehension task to establish student participation. (due: after the first class)
Assessment 1 – Portfolio of Work (Interactive PDF)
Assessment 2
RAE – Research and Exploration or Class of Federico
This blog will be or main form of contact. It will be accessible from anywhere as long as you have internet access.
Make sure to explore the links when you have some free time. The best learning is done by yourself exploring and questioning.
MyKangan
MyKangan is Kangan’s content delivery platform for all classes. You will find all the content on MyKangan and as stated before: you will submit your assessments here.
To access MyKangan please open Kangan’s student portal and click on MyKangan. Next find the class by unit title. This can be a bit hard to see, so make sure to know the unit titles.
I will run you through this in person.
This is also where you will submit your assessments. You will find hyperlinks with names such as Submit Assessment 1 here.
You can send messages to your teacher and you can leave comments as well. I am always open to suggestions, so please feel free to forward ideas about content or software that you would like to cover.
Please click on the link to view the Unit of Competency Text. Please look over the text and at least read through the Elements to get an idea what you will learn in this class.
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.
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.
Source: Steve-hamlin.com
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.
In-class Task
I would like to emphasise how useful the Adobe TV site is:
Please activate this link to a Adobe TV Tutorial: How To Get Started with Photoshop CS6 – 10 Things Beginners Want to Know How to Do It will give you an introduction to Photoshop CS6 by introducing 10 functions. By the way: the shortcuts given are for Mac and if you want to use them on your PCs you need to use the Ctrl function instead of the twirly symbol.
Please do not expect to understand everything, it is an introduction. Try it out with any image that you have.
Your task: manipulate an image of your choice while viewing the video. E-mail me a copy (JPEG) of the original image and a copy of the image that you have manipulated. I do not expect any big changes, just have some fun with it and next week we will work on it together.
Thank you!
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!
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
The image of the Beetle advertisement by iconic graphic designer Helmut Krone is a good example for a clear Visual Hierarchy.
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).
Heading – due to position (it is positioned on the path to the next elements), bold and larger than body text, high contrast.
Body text – position and size of text area. You could argue that the logo is visually as important.
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.
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…Example of File Info being filled in.
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 SearchRetro Futurism – Click the image for a Google SearchVintage Book Illustration – Click the image for a Google Search
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
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 Site – Gary Neill’s Tumblr Site – Google Image Search
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.
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
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
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.
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
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.
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
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
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
3 – Create Environment Reflection
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.
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 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!
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.
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!
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.
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.
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, 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 Concert Poster – found at http://www.designhistory.comContemporary 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
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 – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System
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.
In template>Photoshop open the 960_grid_12_col template
Save the file under a new name and in your class folder.
Make sure the guides are visible (Command+; or Ctrl+;)
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.
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)
Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
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 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.
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
The image above represents one book in the XML below:
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>.
Give an example of an element declaration with parsed character data. Same link as above.
Give an example of an element declaration with any content. Same link as above.
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.
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.
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!
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
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
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
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 PhotographyMassive Attack – The Essential MixCouple found at http://frenchbydesign.blogspot.com.auruthworkx -http://ruthworkx.files.wordpress.comMosaic of Sofia Coppola – by Maurizio Galimberti – http://www.mauriziogalimberti.itPhoto 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.
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Text and Shapes – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Lines and Gradients- Courtesy of: psdtuts+
Free Transform and Ctrl – I am loving it!!!
Based on photo by dhester from morgueFile.com
The gentle curve of the river and the light green tones of the grass give this image a calming feel. The montains and the clouds have a less calming effect. Image: courtesy of Icon Photography School – http://www.photographyicon.com/line/
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Photo by omdur on morgueFile
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Work by Jo W
Italian movie poster found on Abduzeedo.com
Photo by dharder on morgueFiles.com
Jenga, photo courtesy of: Design-Crit.com
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Custom Shapes and Custom Shape Icon
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Illustration by Tavis Coburn found on DzineBlog.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Peace- Swiss International Style Reference – by Maryam Chananeh
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
ruthworkx -http://ruthworkx.files.wordpress.com
Illustration by Jessie Ford, found on DzineBlog.com
Photo by clarita on morgueFile
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Photo by DTL on morgueFiles
Table of Content from Textbook – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
I Want You – Emily Strange, The lovable Emily Strange came to life in 1991, designed by Nathan Carrico for Santa Cruz Skateboards. She is referred to as a counterculture icon. I would just call her a sceptic. Image found at: Kollectable Kaos
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Photo by hotblack on morgueFile.com
Grassy Rabbits
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
Setting the grid up.
Couple found at http://frenchbydesign.blogspot.com.au
He loves OHS! – Photo by Karpati Gabor on morgueFile
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Typographic with Colours and Photos – The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com
Massive Attack – The Essential Mix
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Michael Pointing in GTA V – Courtesy of Rockstar
Photo by frenchbyte on morgueFile
Illustration: Jamie McKelvie – Art Brut Record
Examples of Output and Display for web-content. Image: live.surveyshack.com
Close-up at Fed Square, Federico Viola 2013
Illustrator unknown – found at: Ephemera – World of Rare Books
Photo by agathabrown on morgueFile
Courtesy of The Art of Mass Effect Universe’, 2012
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Based on photo by xandert found on morgueFile
Image Source: www.photoshopessentials.com
Work by Justin Anderson
Image source: Data Center Knowledge
Photo by clarita on www.morguefile.com
Based on image by hotblack on morgueFile.com – F.Viola
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Courtesy of The Art of Mass Effect Universe’, 2012
Geese in Ameland, Photo by Frans Schouwenburg
Multimedia Production Cycle – This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Work by Egon Schiele, found at Mom.org
Photo by matthewbridges on morgueFile.com
Light Streaks – Courtesy of: PhotoshopEssentials
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Found at Inc.com
Based on a photo by delboysafa from morgueFile.com
Layers in Photoshop are like a Collage of images stuck on top of each other…
Photomontage: Amir Ebrahim Photography
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Image from morgueFile by lemai13
Experimental Photomontage by Robert Heinecken
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
The concept was used on the German side as well with this ‘Auch du sollst beitreten zur Reichswehr’ [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss
What Time is it Now? by King_Bobbles
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Based on photo by hotblack from morgueFile.com
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Illustration by Jessie Ford, found on DzineBlog.com
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Photo by mconnors on morgueFile
“Step into my office” Source: The Age, click image for link
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
Illustration by Kate Miller, found on DzineBlog.com
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Screenshot from What’s Your Story by Joyce Hostyn
Source: morgueFile, Photo by matei
Photo by Seemann on morgueFile.com
Photo by ariadna on morgueFile
Concept for Gallery Screnshot
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Photo by mcconnors on morgueFile
The Face by drfranken found on ChromoArt.de
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Constructivism Reference – by Lylah Livingston
Vista Lighting Effect – Courtesy of: Tutorial9
Good Morning! Photo: wallyir, from: morgueFile.com
A Beautiful Piece by Aerosol found on his Facebook
Text-based Table of Content – Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)
Example of applied changes
Luminescent Lines – Courtesy of: PSDLearning
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org