C1 – Design a Website – Week 08

Banner_Cert IV WebBTech-C1

Link to all Weeks     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment 2
  • Feedback

Assessment 2

Assessment 2 has been posted: C1 – Assessment 2.You will be able to work on it in class and complete it by next week.

I will be available for help with Photoshop and other questions.

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!

Multimedia Production – Class 7

Link to all Classes     Class 2     Class 3     Class 4     Class 5     Class 6     Class 7    

Today’s Class

  • Discuss Assessment 2
  • Inspirations for Tables of Content
  • Feedback

Assessment 2

You can work on Assessment 2 in class and I will help with questions:

Assessment 2 Multimedia Production

Below is an example of the Multimedia Production Cycle:

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

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

Inspirations for Tables of Content

Below are some ideas for a table of content. You can always go for a traditional table of content or do something more exciting.

Make sure that the information is easy to find. A good design is one that is easy to understand. This should not stop you from making it fun though.

Some of the images can be found at this good compilation of table of content designs: Smashing Magazine – Table of Content: Creative Examples.

Colourful Table of Content - Ribbons in Primary Colours - found at: LifeBlue.com

Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com

Text and Shapes - This design lends itself to an interactive use - found at: Klafferty.com

Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com

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)

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)

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)

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)

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)

Table of Content from an old Textbook – This design lends itself to an interactive use, the bird silhouettes could get highlighted when touched – found at: Smashing Magazine (click image for inspiring article on table of content design)

Fruity Design - This is great for a menu, very appetizing thumbnails - found at: WeddingPhotography.com

Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com.ph

Colours, Numbers and Boxes - very happy and alive, personally I do not like the distortion of the word content - found at: Flickr

Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr

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

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

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!

Multimedia Industry – Class 7

Link to all Classes     Class 2     Class 3     Class 4      Class 5     Class 6     Class 7

Today’s Class

  • Assessment Work
  • Feedback

Assessment Work

Today’s class will be used for assessment work.

Assessment 1

If you had trouble getting responses from businesses please do a refined Google search including your questions with the terms print industry (or similar: Print sector, print employment, print employee, etc). Look for articles and posts about  the print industry and the employment opportunites.

Next formulate your answers to your questions based on your findings. Always state your source of information.

Assessment 2

First look up the definition for the term in question. Fill in the textbook definition, write down the source (book title, author, publisher and year or URL/web address of web page and next write your own definition. There are 47 terms to look up in total. You will need 30 correct answers for a COM.

A tipp: If you cannot find the correct term, do a Google search and include words like:

  • printing terms
  • printing terminology
  • printing industry
  • printing vocabulary

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!

HTML Class – Week 08

Link to all Classes     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment Task
  • Inclass Demonstration
  • Feedback

Assessment Task

Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.

Content: include a

  • banner with an image and title,
  • menu with 5 menu items. The menu items need to be links. Link them to a file with the name of the menu item (it will be an incomplete link).
  • 2 sections (divs) with text content
  • 1 section with an image
  • footer with a Copyright statement including this year and your name.

The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.

Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.

Inclass Demonstration

We will work through the steps to create a website in HTML and CSS:

Start off with the HTML script:

We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:

<!DOCTYPE html>

<html>

</html>

_____

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note: Add the closing tag straight away to make sure that you do not forget it!

Add your title in the Head as well as your main meta data:

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>  (Add your own title here)

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”” />  (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)

<meta name=”author” content=”Federico Viola” />(put your name in here!)

</head>

<body>

</body>

</html>

Now create your divs in html

It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.

Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

</head>

<body>

<div id=”wrapper”>  (This will be the div for the overall webpage. It will be like a frame for all the elements.)

<div id=”header”>

<h1>This is the header/banner</h1>

</div>  (This closes the header div.)

<div id=”container”>  (This will be the div for the menu and content divs)

<div id=”menu”>

<p>Menu</p>

</div>  (This closes the menu div.)

<div id=”content1″>

<p>Content1</p>

</div>  (This closes the content1 div.)

<div id=”content2″>

<p>Content2</p>

</div>  (This closes the content2 div.)

<div id=”content3″>

<p>Content3</p>

</div>  (This closes the content3 div.)

</div>  (This closes the container div.)

<div id=”footer”>

<p>Copyright Statement</p>

</div>  (This closes the footer div.)

</body>

</html>

Now create your CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {;}

#header{;}

#container{;}

#menu{;}

#content1{;}

#content2{;}

#content3{;}

#footer{;}

ul{list-style-type:none;}  (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

Add your dimensions to the CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {width:960px;height:690px;margin:0px;}  (the site will go to the edge due to having no margin)

#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)

#container{width:960px;height:410px;}  (always make sure to use a semi-colon at the end of a CSS declaration)

#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;

#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}

#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}

#content3{width:410px;height:410px;padding:5px;background:#0099FF;}

#footer{width:960px; height:140px;}

ul{list-style-type:none;}

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

To be continued

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!

Online Cluster – Week 6

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

Content:

  1. Sustainability Assessment
  2. Feedback

Sustainability Assessment Task

Please check today’s entry on MyKangan for this class the Sustainability component of the Online Cluster.

Source: morgueFile, Photo by matei

Source: morgueFile, Photo by matei

Today’s online class looks at how to integrate sustainable work practice into a print business in Victoria. Use the links provided or research independently:  Greenfinder | Printers on Greenfinder |Thegreendirectory | Sustainability Victoria | SustainableBusiness.com

Please complete the attached file Assessment Sustainability and upload it to MyKangan.

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!

BWE – Create an Animated GIF

Today we will focus on

  • EVERYONE will have created an image with background, foreground, 2 text layers
  • Create an animated GIF

Image With Background, Foreground, 2 Text Layers

Based on last week’s photos that you took create a new Photoshop document:

  • create a background with one of the close-up images that you took last week
  • place the self portrait in front of that layer and use a selection tool (Quick Selection or Magic Wand) to get rid of the white background from your portrait.
  • Add two text layers with your name and the name of this class: Media III

Create an Animated GIF

The teacher will present how to create the animation in class. Please follow the presentation.

C2 – SEO – Week 08

Link to all Weeks     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Photoshop Work
  • Assessment 2 – Next term

Photoshop Work

We will use this class to inprove your Photoshop skills and you will be able to work on your website designs for class C1.

Assessment 2: Next Term

Assessment 2 will be conducted next term when you will have a better understanding of how to upload web content.

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!

C1 – Design a Website – Week 07

Banner_Cert IV WebBTech-C1

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

Today’s Class

  • Inspirations
  • Webdesign with Photoshop – Revised Tutorial
  • Assessment 2
  • Feedback

Inspirations

Colour Palette for Quentin Tarantino Movie: Inglorious Basterds. Source: Flavorwire.com - Image Credit: Roxy Radulescu

Colour Palette for Quentin Tarantino Movie: Inglorious Basterds. Source: Flavorwire.com – Image Credit: Roxy Radulescu

When it comes to webdesign the appeal of a site will depend on the taste, preferences and experience of a target audience. We can safely say that children tend to be attracted to bright colours and shapes they can relate to. When it comes to older audiences I recommend to focus on the common interest and purpose of the website. A website for a SciFi purpose (eg a Conference of Star Wars Fans) will need the colour palette and visual appearance of that genre: See Colour Palette Star Wars Colour Palette SciFi Colour Palette Blade Runner. If you look at a wider scale you find that every genre has its own preferred and collectively agreed set of colours: Colour Palettes of Films.

Try a Google Search for Color Palette Generator, you may find this one: DeGraeve Color Palette Generator (degraeve.com). Kuler is another excellent Color Palette Generator.

When it comes to website layout it is important to come from an organised starting point. Initially you should look at applying a grid. We looked at Nathan Smith’s 960 Grid System last week, which can be found at 960 Grid System.

A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web

A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web

The design above for a portfolio website is an elegant and simple (in its beautiful sense) approach to the display of thumbnails. Please notice that the rectangles of the thumbnails match the rectangular shape of the thumbnail cluster as well as the proportions of a screen. This design was based on the 960 Grid System.

Once you have started with the layout and the initial idea for the the website you can create something that suits the need or purpose, the genre and target audience. An excellent read on grid design, how to create your own or how to apply the 960 grid system: Smashing Magazin: Grid-Based Web Design, Simplified.

Some other clean layouts:

Ink WordPress Theme, found at: DzineBlog.com

Ink WordPress Theme, found at: DzineBlog.com

An example in Spanish with a retro appearance: Hodei Design

An example in Spanish with a retro appearance: Hodei Design

Sam McCoist Website - Photography. Not exactly my cup of tea, actually coffee, but I like the daring aspect of using large fonts for the menu.

Sam McCoist Website – Photography. Not exactly my cup of tea, actually coffee, but I like the daring aspect of using large fonts for the menu.

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.

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.

Webdesign with Photoshop – Revised Tutorial

In-class workshop. I will show you some basic elements of Photoshop that will help you in your design of a website. It has become obvious last week that the Photoshop skills in the class are below what I expected, so that this Photoshop crash course today will make it easier for you to create the 5 concept pages for your final assessment. It will be good for you to attend to make sure that you get the most out of this workshop.

  • Creating a file from scratch – for Web or Print
  • Saving files for the Web, formats
  • Viewing and changing the sizes of a file
  • Working with grids
  • Showing grid and guides
  • Snap to grid option
  • Creating a portfolio page
  • Working with layers
  • Merging layers (Ctrl+E)
  • Grouping Layers (Create group and drag layers in)
  • Working with move tool (using Alt + drag to copy a file)
  • Hiding layers
  • Tick the Auto Select option in the options panel for the Move tool
  • Creating Thumbnails and placing images inside the file
  • Creating a banner by placing an image in a banner sized file
  • Placing the banner and thumbnails
  • Working with Layer masks
  • Using the gradient for layer masks
  • Creating the menu, looking at alignment
  • Creating the title for the header
  • Saving the portfolio page
  • Saving the portfolio page as home page
  • Adjusting the home page
  • Adding an image and text to the home page

Assessment 2

Please check MyKangan for the assessment. It will be uploaded today and link provided here.

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!

Multimedia Production – Class 6

Link to all Classes     Class 2     Class 3    Class 4      Class 5     Class 6       Class 7

Today’s Class

  • Work on Assessment 1
  • Compare the Completed Experience Planner
  • Inspirations for Layout
  • InDesign Workshop
  • Assessment 2
  • Feedback
A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web

A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web

Work on Assessment 1

You will work on Assessment 1 in class for the first 2 hours. You should be close to completion and hopefully be able to complete Assessment 1 by the end of class.

Compare the Completed Experience Planner

Use the attached experience planner, that we completed in class based on the CentreLink experience: Experience Planner- filled in partly after class 04.

Use it to help you create an experience planner for the event PDF that you are creating. This will give you the ability to focus on fixing negative experiences and planning for a positive experience with a product or service.

Inspirations for Layouts

Inspirations for layouts can be found at various places:

  • Creative Hotlist this site has a large selection of solid design ideas. You will find many design concepts that are inspiring to look at and are complete as a work.
  • Born Book is a beautiful and inspiring interactive PDF document.
  • Issuu is a site that allows you to publish your work and you can find a large number of publications there.
  • Lonny is the website of the Lonny Magazine, a online home decor magazine that highlights inspiring interiors, innovative designers, and the latest things to buy for interiors. Their online interactive magazines are good examples of interactive PDFs and layouts.

More example of interactive PDFs (posted last week): Adobe Magazine, Font Magazine, Know-It-All Guidebook to King West, Vektoria Magazine, Blanket Magazine Revolution Art Magazine, Revolution Art Issue 40,

Swiss travel poster from 1934 by Herbert Matter - Source: http://swisstype.wordpress.com/work/

Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/

Look at art styles and movements for layout ideas:

'For Great Road Trips: Switzerland' Poster by Herbert Matter in (Swiss) International Style -  Source: http://swisstype.wordpress.com/work/

‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/

InDesign Workshop

This InDesign workshop will look at the creation of interactive buttons.

The workshop will be held in class.

Check for updates!

Assessment 2

To be handed out. Check for updates within the next hours.

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!

Photoshop + PDF Class 7 – Assessment Task

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

Photo by Seemann on morgueFile.com

Photo by Seemann on morgueFile.com

Today we will look at:

  • Create a PDF form (upload the example on MyKangan)
  • Assessment – Portfolio of in-class work

PDF Form

Upload the file below and create form fields using Adobe Acrobat Pro. Make all blue text fields, the name and date active.

Next fill all the data in and save and upload the file to MyKangan.

Due Date: 20/9

Sample Task

Assessment – Portfolio

STEP 1: In Photoshop or Illustrator create a PDF portfolio page like the sample. Dim: 1024 px x 1645px x 150 ppi (resolution). (These dimensions are more a guideline and you can vary it if you have a different idea for your layout)

Include:

  • 6 images from previous classes and your own work
  • add descriptions of the images: what tools and techniques did you use?
  • place a banner of your own work on top
  • a title (Portfolio of Work)
  • your name
  • save the file as a Photoshop PDF or Illustrator PDF

STEP 2: Create text fields in Adobe Acrobat Pro and add descriptions to your work. The descriptions need to state what tools and functions you used.

STEP 3: Save the final PDF and upload to MyKangan.

See example of Portfolio:

Photoshop Portfolio

Photo by matthewbridges on morgueFile.com

Photo by matthewbridges on morgueFile.com