Monthly Archives: March 2013

HTML Class 6

Link to Class 5     Class 4     …     Class 1

You have by now gained a basic understanding of HTML and CSS.

Screenshot of a Sample Design Gallery - Source: www.addesignlink.com

Screenshot of a Sample Design Gallery – Source: http://www.addesignlink.com

Today you will look at how to:

  • Look at the CSS reference on W3Schools
  • Create a vertical navigation bar
  • Create a horizontal navigation bar
  • Create an image gallery using the div element
  • Your Task: Create a Web page with a horizontal navigation bar and a 6 image gallery

CSS Reference

It is easy to get overwhelmed when applying CSS to HTML.

Take 5 mins to look through this excellent reference: W3Schools CSS Reference

Create a Vertical Navigation Bar

Learn how to create a vertical navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a vertical navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Example for Vertical Navigation from www.graphicblog.net

Example for Vertical Navigation from www.graphicblog.net

Create a Horizontal Navigation Bar

Learn how to create a horizontal navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a horizontal navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Various Designs for a Horizontal Navigation Bar from PSD Graphics

Various Designs for a Horizontal Navigation Bar from PSD Graphics

Create an Image Gallery

Learn how to create an image gallery, but this time use the div element when creating it. Base your images on existing images found on morgueFile.

Instructions on how to create an image gallery with images and image descriptions

TryIt Editor example of a image gallery

Example of a Web Gallery:blogs.adobe.com

Example of a Web Gallery: blogs.adobe.com

Your Task – Assessment

Due: 18/4/2013

Create a Web page with a title, horizontal navigation bar and an image gallery with 6 – 9 images.

Make the buttons active hyperlinks, link them to different posts on this blog. Make the image gallery linked to actual images (use morgueFile) and insert thumbnail images for it as well.

Include a radio button feature. (See last week’s class).

Theme for the web page: Urban Environment (Cityscape)

Create a title for your page (that needs to be used in the head section).

Test your HTML file on the TryIt Editor as well as a pure HTML file on a minimum of 2 browsers.

Submit the HTML file on MyKangan.

Example of morgueFile Image Sourcing

Sourcing an image on morgueFile.com

Sourcing an image on morgueFile.com

Adjust the size of your image manually and click 'Finish'.

Adjust the size of your image manually and click ‘Finish’.

Screen shot 2013-03-21 at 9.39.52 AM

Insert the HTML into the TryIt Editor

Insert the HTML into the TryIt Editor

The cropped image is displayed.

The cropped image is displayed.

E-Learning Class 7

Link to Class 6        Class 5     …      Class 1

E-Learning found on: www.emedicus.co.uk

E-Learning found on: http://www.emedicus.co.uk

I have broken the Assessment brief from last week down into 2 Assessments.

Assessment 1 will focus on step 1 – your research and establishing your target audience.

Assessment 2 will focus on step 2 – designing an e-learning concept (game) and documenting the idea in a  paper-based format. Paper-based means that you will create the design and planning of the e-learning resource without the actual final product. You may do this as a PDF.

Assessment 1

Brief

In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.

The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.

Team Work

You are required to team up in a team of up to 3 students. There is the option to work alone, but you need to inform me and get confirmation. If your name is not in the list below you need to inform me about the people in your team. Send a message to this blog with names of all the team members.

Teams so far:

Lucine Y, Fatma Y & Benan Ü

Justin A & Joe W

Berna K, Emel & Naşide S

Vlad K

Michael T & Tim B

1 – Establish Your Project

Read the assessment task fully and write in one or two sentences: When do you know that the E-Learning resource is complete? When do you know that this project is finished?

This will help you establish clear boundaries for your project – for any project and you will know when you have finished.

2 – Establish Your Target Audience

Write a extensive description of your Primary Target Audience as well as your Secondary Target Audience.

If your Primary Target Audience is the user group of your product (students), then your Secondary Target Audience would be a related group of people (friends of the school children), who could be a user group or maybe a provider of the service (eg teachers) or a group that is interested in the well-being of the school children (eg parents). I would focus on the teachers and other staff at a school, they would be involved in the purchase of the product.

3 – Learner Needs Analysis

Write down the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.

This is a good point to brainstorm. What is it that you need to expose your learner to?

4 – User Experience

In a paragraph describe what user experience you are designing. What will the child playing the game experience? What emotions will the user go through? What emotions will your user not have?

You could aim for a user experience that is fun or interesting, you could say that the experience may be challenging and the learner will always feel like he or she needs to think and try things out before achieving success. This could result in the learner feeling more engaged and claiming the acquired knowledge.

5 – Platform

Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets  or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based  Windows 7, 8, Mac-based OS, Android, Linux, Open Source…

Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.

6 – Research of existing E-games

Collect research on existing e-learning games for your target audience. List a number of websites and available games on the platform of your choice. Take screenshots or find images on Google or other search engine.

Describe your favourite 3 sites / favourite 3 e-games. Describe what you like about each (graphics, game play, actions)

Format

This project needs to be submitted in digital paperformat, either as a PDF, PowerPoint presentation  or a Word document.

Due Date:

16/April 2013       Upload your completed Assessment on MyKangan!

Example of interface interaction - Source: http://developer.android.com/design/media/swipe_views3.png

Example of interface interaction – Source: http://developer.android.com/design/media/swipe_views3.png

Online Class 6

Link to Class 5     Class 3 and 4    Class 2     Class 1

Please check today’s entry on MyKangan for this class:  ICP40210-ICTPGA4N-PRIMU-2013-ICPSU260C (Maintain a Safe Work Environment)

Today’s online class covers Bullying and RSI. It is the last OHS task!

Use the links provided or research independently:  Preventing and Managing Bullying at Work | Workplace Info |OHS Reps@Work

Please complete the attached file and upload it at MyKangan.

Class 06 Task – Online Units

Typography and Illustrator Class 6

Link to Class 5         Class 4       Class 3      Class 1

Menu of Yong Green Food , Fitzroy, MelbournePhoto: F. Viola

Menu of Yong Green Food , Fitzroy, Melbourne
Photo: F. Viola

Today’s content:

  • Handout and discussion of Assessment 1 – Typographic Collection
  • Time to work on Assessment 1

Assessment 1

You will need to produce a typographic  collection in digital format.

Due Date

15/April 2013 – 5:30pm

Format

The format can be a PowerPoint presentation, a Word document (saved as a PDF), an interactive PDF created in Adobe Acrobat or InDesign or a Website (created from HTML coding, Adobe DreamWeaver or in Adobe Bridge).

You will also need to supply a separate folder by name fonts with 8 font files.

Upload the file on MyKangan. This link will go active by Easter Monday.

Content

The content for your collection needs to include digital documentation (digital photographs, scans, font files and Illustrator-based EPS).

  • 5 photographs of different display types – retails signs
    A paragraph of text describing two or more of your choices. Describe the purpose and what appealed to you (colour, shape, legibility)! Who might be the target audience?
  • 5 images of interesting layouts (photos, scans, downloads). These could be from magazine, book covers, restaurant or cafe menus, or websites (screen shots of the webpage that appeals to you or of home page).
    A paragraph of text describing two or more of your choices. Describe the purpose and what appealed to you (colour, shape, legibility)! Who might be the target audience?
  • 5 photographs of product labels (this may include Ladies’ Cosmetics brands, in the higher price bracket and prestigious, Sport clothing brand for ball sports, to be used on shirts, pants, socks and shoes, Brand of healthy food products from sustainable ethical plantations with a fair trade commitment, bottle labels on wine, French champagne, boutique beer, etc)
    A paragraph of text describing two or more of your choices. Describe the purpose and what appealed to you (colour, shape, legibility)! Who might be the target audience?
  • 5 logos (digital format, GIF, JPEG, PNG, EPS, they can be found online or scans from books)
    A paragraph of text describing two or more of your choices. Describe the purpose and what appealed to you (colour, shape, legibility)! Who might be the target audience?
  • 5 film titles according to genre (scans or photos of movie posters, downloaded files from the internet), from these genres:
    • Wild West movie title
    • Sci-Fi movie or book title
    • Film Noir film title
    • Zombie titles
  • 5 type choice for themes (scans or photos of movie posters, downloaded files from the internet)
    • for a Wedding Day or Wedding Invite
    • for Children’s books, toys, games
  • A list of 8 fonts in the font and attached Font Files in a separate folder by the name fonts (chose your fonts on http://www.dafont.com)
    • 2 Sans Serif Fonts
    • 2 Serif Fonts
    • 2 Fonts that you really like
    • 2 good display fonts for signage

Tips for Assessment

Try some of the links supplied in Links for Learning and Links to Inspire You, particularly Dzine Blog and search for logo designs there. You might want to look at Mashable or Communication Arts and use either of their search boxes.

Use a program that you feel comfortable with.

Advertisement on Banner, Brunswick, MelbournePhoto: F. Viola

Advertisement on Banner, Brunswick, Melbourne
Photo: F. Viola

How to Install a Font on Your Computer

Italian movie poster found on Abduzeedo.com

Italian movie poster found on Abduzeedo.com

Installing fonts has been easy with Macs in the past, and has become very user-friendly with Windows 7 as well. If you use earlier versions of Windows you should be able to drag and drop (the destination folder is called Fonts and is located on the C-drive: C:\Windows\Fonts).

I recommend to get free fonts from www.dafont.com Visit this tutorial to learn how to Install Fonts in Mac OS X  and how to Install Fonts in Windows 7.

Photoshop Class 6

Link to Class 5     Class 4     …      Class 1

Photo by hotblack on morgueFile.com

Photo by hotblack on morgueFile.com

Content for Today’s Class

  • Crop Tool
  • Image Adjustments:
    • Brightness/Contrast
    • Levels (Ctrl+L)
    • Curves (Ctrl+M)
    • Auto Tone (Shift+Ctrl+L)
    • Auto Contrast (Alt+Shift+Ctrl+L)
    • Auto Color (Shift+Ctrl+B
    • Vibrance
    • Hue/Saturation (Ctrl+U)
    • Photo Filter
    • Shadows/Highlights
  • Adjustment Layers
  • Tasks

Crop Tool

Follow the in-class instructions on how to use the Crop Tool or follow the tutorial below the image.

The crop tool works on two basic levels:

  • free-hand – simply select the crop tool (Shortcut C) [Visit Shortcutworld for more Photoshop Shortcuts] and drag a window over your image. You can adjust the size of the crop selection by dragging the edges and corners. You can even rotate your crop selection (with CS4 or higher).
    Hit Enter to complete the crop action and accept the new size.
  • key in dimensions – after activating the crop tool enter the width (in px for web), the height (in px) and the resolution (72 is suitable for web)- the values need to be entered in the options bar (also called properties bar). See image below as an example. Next drag the crop window and press enter to except the change.
    Note that the window is restricted in its scale.
See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.

See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.

Cropping and Straightening Images in Photoshop Essentials

Cropping Tool in Photoshop Essentials

Brightness/Contrast

Follow the in-class demonstration. A nice and basic function, it allows you to change the brightness and correct the contrast. Move the slider to change the values.

Tick and untick the Preview box to observe the changes before accepting it.

Use the sliders. It is self explanatory.

Use the sliders. It is self explanatory.

Levels

With the Levels function you can adjust problems with tone (eg a photo that is very grey and does not show enough dark and light aspects) or colour related problems (eg too much blue).

The Short Cut: Ctrl+L (Cmd+L)

Overview: follow my in-class introduction to how to use the Levels in simple steps. Use the attached photo by Matthew Bridges of the old house at a lake.

Image>Adjustments>Level

Image>Adjustments>Level

The easiest and most basic way to apply the Levels function is by moving the sliders for the highlight (white) and shadows (black) below the graph of the input levels inwards. Moving the highlight will brighten the image up and moving the shadow will darken the shadows.

This is a good basic function to start of with and it is useful for the majority of your photos, may they be basic shots or more sophisticated and at higher resolution.

Follow this tutorial to learn how to use the Level Adjustment more detailed and how to create an Adjustment Layer:

Fix Tone and Color with Levels in Photoshop – Photoshop Essentials

Improving Image Tone With Levels In Photoshop – Photoshop Essentials

Curves

Follow the in-class demonstration (shortcut: Ctrl+M). The Curves function is similar to the Level function, but the graph is a lot more visual and intuitive. You can manipulate it with your mouse.  See image:

Try the presets and see how it affects your image, and then manipulate the curve yourself.

Try the presets and see how it affects your image, and then manipulate the curve yourself.

Curves Tutorial on Photoshop Essentials

Auto Tone

The short cut is Shift+Ctrl+L. Follow the in-class demonstration. The Auto Tone function readjusts tonal settings in your image and in most cases this results in a crisper image with the click of a button. The Auto Tone option looks for the darkest and lightest points in an image and resets them to pure white and black, resulting in clearer tones.

Because  Auto Tone adjusts each color channel individually, it may remove color or introduce color casts.

Auto Contrast

Follow the in-class demonstration.

The short cut is Alt+Shift+Ctrl+L (maybe not that short after all). Auto Contrast adjusts image contrast automatically, at the click of a button. Unlike Auto Tone it will not affect colours. It clips the shadow and highlight values in an image and then maps the remaining lightest and darkest pixels in the image to pure white and pure black . As a result the image will have lighter highlights anf darker shadows and a crisper contrast.

Auto Color

Follow the in-class demonstration.

The short cut is Shift+Ctrl+B.

Auto Color adjusts the contrast and color of an image. It is able to search images for shadows, midtones, and highlights. It then neutralizes the midtones using a target color of RGB 128 grey and clips the shadowand highlight pixels by 0.5%. Personally, and from experience it effects images less and Auto Contrast and Auto Tone bring more convincing changes in image quality.

Vibrance

Follow the in-class demonstration.

As the name suggests this function will help you making a photo look more vibrant. Colours can be shown more intensely with higher saturation. It is easy to grasp this function, simply move the sliders to the right to increase vibrance or move them to the left to decrease vibrance.

Based on a photo by delboysafa from morgueFile.com

Based on a photo by delboysafa from morgueFile.com

Hue/Saturation

Follow the in-class demonstration.  (Ctrl+U)

Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.

Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.

Photo Filter

Photo Filter

Photo Filter

Follow the in-class demonstration. One of the best image adjustment options, you can select from a set of preset filters: use a warming filter to create a lighting sense that you would encounter indoors, in autumn (fall) or during a sunset when there are more yellow, orange and red colours around.

Use a cool filter to create a typical outdoor setting or a winter atmosphere. You can tick the Color box and select your own colour or select a colour from the image itself (simply click on the part of the image).

You can also change the amount of density, more density results in a stronger impact of your filter. Find a level that you like – try to be more conservative and chose a little less density than you like for a print).

Shadows/Highlights

Follow the in-class demonstration. With the shadows and highlights you can easily lighten up an underexposed, dark image. Use the functions sparsely to not overdo the changes, which can easily create an unrealistic look. The image shows the changes on a dark photo.

Based on photo by o0o0xmods0o0o from morgueFile.com

Based on photo by o0o0xmods0o0o from morgueFile.com

Use an Adjustment Layer

All the image adjustments that we have looked at above can be done directly to an image or in from of an adjustment layer. It is far better to create an adjustment layer, this allows you to create changes in form of a layer. You can always delete or hide the layer and your original image remains unaffected.

How do you create an adjustment layer?

With your original layer selected click on the Create a new fill or adjustment layer button and select what type of adjustment layer you want to create. Next do all the adjustments to it.

Alternatively you just click on the Adjustments tab and select the Adjustment Layer that you want to create.

(See image)

Create an Adjustment Layer

Create an Adjustment Layer

Task in Class

Perform these two tasks to show that you understood today’s class ( If you have missed this class you need to do this!!!)

  1. Use the image by Matthew Bridges (or select an alternative image). Use the crop tool and resize to 450px x 400px at 72ppi (resolution). Apply 6 different image adjustment layers and mask them off in strips (see examples of student work). Add titles to your strips.  E-mail the file to me as a PNG (not PSD).
  2. In your second task I would like you to use Matthew Bridges’ image only. The photo is very grey and it looks foggy. I would like you to improve the image using any of the image adjustment functions that you have learnt about. When you are happy with the improved image e-mail me a PNG version of it (no need to crop the image).

Student Submissions:

Work by Benan Ü

Work by Benan Ü

Work by Michael T

Work by Michael T

Work by Naşide S

Work by Naşide S

Work by Tristan S

Work by Tristan S

Work by Berna K

Work by Berna K

Work by Vlad K

Work by Vlad K

Work by Jo W

Work by Jo W

Work by Justin A

Work by Justin A

HTML Class 5

Link to Class 6     Class 4     Class 3     …     Class 1

Last week you have created some beautiful web pages for a seaside town. I was very pleased with some of the results. Please still submit your work if you have not already done so.

Check for feedback, a few of you have to add small components that were not yet included.

screen

How to Create Forms in HTML

Discover these HTML elements (use this W3Schools Link) by trying each in the TryIt Editor

  • Input Element (what does it do and how does it work?)
  • Create input text field
  • Create input password field (what are the differences to plain text fields?)
  • Create radio buttons
  • Create checkboxes
  • Create submit button.

Your Task:

Create a form for a student to enroll in a class. Create a minimum of 10 classes to pick from in a drop down list and cover each of the points above.

Include a title for the form in a Sans-Serif font and include a large image (sourced at morgueFile.com) that is related to Learning at an Institute.

See screen shots below regarding how to crop an image in morgueFile and copying the HTML code. The HTML code can be used in your HTML document.

Sourcing an image on morgueFile.com

Sourcing an image on morgueFile.com

Adjust the size of your image manually and click 'Finish'.

Adjust the size of your image manually and click ‘Finish’.

Screen shot 2013-03-21 at 9.39.52 AM

Insert the HTML into the TryIt Editor

Insert the HTML into the TryIt Editor

The cropped image is displayed.

The cropped image is displayed.

E-Learing Class 6 – update

-ba Link to Class 5     Link to Class 3/4      Link to  Class 2     Link to  Class 1

Design an E-Learning Resource -The Design Document

Team Task and Brief

In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.

The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.

Format

This project needs to be submitted in digital paperformat, either as a PDF or a Word document. The sketches and flow charts as well as brain storms and mind maps can be created by hand sketching and scanning.

Teams

Get together in teams of 3 for this first assessment task. Please leave a comment on this post with your team number and the names of all team members. You will be allowed to work as individuals, but please check with me.

First Things First

The first task is to ask yourself a central question: When do you know that the E-Learning resource is complete? When do you know that this project is finished?

Write it in a sentence. The sentence should include the tasks that you will have to perform to complete this project.

Learning Experience/User Experience

Define the Learning Experience that you want your learner to have. What exactly do you want the user to experience? Describe the motions that your typical user might have when using your product.

When describing the user experience I would like you to look at or think back of a positive experience that you have had with a product. What was it that made the experience so good and how did it make you feel?

How can you integrate that experience into the resource that you are creating?

This is a far important question to answer than you may initially think. By answering this question you actually find out what your e-learning resource will or should feel like. Every decision that you will make will have to fit this criteria.

Target Audience

Define the target audience, what age group, gender, socio-economic (culture, income group, education) group are you dealing with. Next describe what a person from this target audience likes and he or she may enjoy in your resource.

You may deal with a primary and secondary target audience – who else will be important in the purchase of the product besides the end-user? What other groups of people are affected by your product?

Learner Needs Analysis

What are the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.

This is a good point to brainstorm. What is it that you need to expose your learner to?

Platform

Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets  or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based  Windows 7, 8, Mac-based OS, Android, Linux, Open Source…

Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.

Tools and Activities

This point is for research only: What tools can you currently find out there? What type of apps,  Video viewers, Sketch Pads, audio apps, games and other activities are currently available?

Consider primary tools that could be integrated into the resource. For example a Sketch Pad that allows children to draw shapes of letters that look like fruit or animals. A video viewer window for instructions or fun songs performed by other children.

Consider secondary tools that can be external and your learning resource can hyperlink the tool. You need to ensure that there is no copyright infringement.

Research hardware – are there any new developments (eg a touch sensitive modelling tool) and existing hardware product: stylus, graphic pads, tec

Learning Resource

Goals of the Learning Resource

The overall goal describes what the learner will be able to do after completing the instruction.

Content of the Learning Resource

The content describes what will be taught in order to achieve the objectives. What content will you need to include in the resource? This is just a list of points. Write down what you want to include in the resource. This could be: using video resources to explain the alphabet with sing-along-songs, or drawing instructions with an interactive sketchpad.

How will the content be presented. See example below of PBS Kids.

Create a layout concept for the menu of the overall learning resource.

Methods of instruction

The methods of instruction describe how the content will be taught. This is about the specific tools, that you want to use. Mention the use of supportive tools such as sound. Will there be a narrative (a story) told by a voice over or a character  (eg a teddy).

How is the learner informed about what to do? What type of instructions are available? Give a text example in the layouts.

List a number of 10 potential tools, and describe 2 tools and methods in detail.

Create a flow-chart for each with a step-by-step  instruction of what the learner will do in the activity.

Create layouts with instructions on how to interact with the application (eg how to move things) and instructions for users.

Create basic concepts for icons

Learner evaluation strategies (test with results)

The learner evaluation strategies describe how the learner will be evaluated to see if he or she has obtained the objectives (eg a test or a level is achieved and a new level unlocked).

Useful Links:

10 Best Educational Websites for Kids

Top Ten Educational Websites for Children

Below are examples of graphics.

Example of interface interaction - Source: http://developer.android.com/design/media/swipe_views3.png

Example of interface interaction – Source: http://developer.android.com/design/media/swipe_views3.png

Online Class 5

Link to Class 3 and 4      Class 2     Class 1

Photo by Grafixar on morgueFile

Photo by Grafixar on morgueFile

Why Communications Skills Are So Important?

Your online units cover 4 different topics:

  • Team Effectiveness
  • Communication Skills
  • Environmental Sustainability in the Workplace
  • Maintain a Safe Work Environment (OHS)

Today we will focus on the aspect of Communication Skills.

Photo by mcconnors on morgueFile

Photo by mcconnors on morgueFile

Read Introduction to Communication Skills

Think about the questions below while reading the post Introduction to Communication Skills on MindTools.com. Think about these questions:

  • What are the elements or steps of the communication process (look at the diagram at Introduction to Communication Skills)?
  • What are 5 typical communication barriers or what goes wrong when two parties fail to communicate?
  • When and with  whom do you communicate well (think in terms of family, friends)?
  • When and with whom do you communicate poorly with?
  • What steps can be taken by a sender or source to ensure the best possible outcome?
  • What steps can be taken by a receiver to ensure the best possible outcome?

Are you a Good Communicator?

Do the MindTools online Communication Quiz.

Complete the Task

Class 05 Task – Online Units

Upload the Task:

Upload the document on MyKangan

 

Typography and Illustrator Class 5

Link to Class 4         Link to Class 3     Link to Class 1

Photo by taliesin on morgueFile

Photo by taliesin on morgueFile

Today’s content:

  • Word Meanings: Look at tasks from last class and homework
  • Read the attached file About Type  from Designing with Type, C.Foster, I.K.Scala, 2010:
  •  revisit:
    • Type Tool (T),
    • Character Panel (Ctrl+T),
    • Outline Text (Shift+Ctrl+O),
    • Alignment and Distribution (Shift+F7) and
    • Pathfinder (Shift +Ctrl + F9)
  • Practice the tools above

Word Meanings

We will commence by looking at the homework from last class. Please open it up on your computers and be ready to speak about it for 2-5mins.

I am very interested in looking at your word creations, particularly your own word and meaning.

About Type

Read the attached document ‘About Type’ from Designing with Type, C.Foster, I.K.Scala, 2010:g 

About Type

Think about a typeface suitable for a Ladies’ Cosmetics brand, in the higher price bracket and prestigious. What typeface/fonts can you think of?

Find a typeface that suits:

  • Ladies’ Cosmetics brand, in the higher price bracket and prestigious
  • Sport clothing brand for ball sports, to be used on shirts, pants, socks and shoes
  • Brand of healthy food products from sustainable ethical plantations with a fair trade commitment

Revisiting Tools and Functions:

Open Illustrator at A4 with a landscape orientation and 4 art boards. Copy the words that your teacher writes and play with them as suggested.

Using Effect>Warp>Bulge on the word Expansion

Using Effect>Warp>Bulge on the word Expansion

Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.

Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.

Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt

Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt

Photoshop Class 5

Link to Class 4    Link to Class 3     Link to Class 2     Link to Class 1

Monkey follows every Photoshop class on RAE:

Photo by deanjenkins on morgueFile

Photo by deanjenkins on morgueFile

I hope that today’s class will be extremely useful to you and point out some strong features of Photoshop (that may even win Lucine over – Lucine?)

Today’s Content:

  • Free Transform
  • Transform
  • Layer Style (Blending Options)
  • Practice of Selection, Refine Selection and Mask Selection
  • Tasks for today
  • Image Files to be Used in Class

Again, please refrain from anything that interrupts your learning, and be mature about it. The F_____k word is a dirty word in today’s class – and of cause I am NOT referring to firetruck, but Facebook and the likes…

Free Transform

Free Transform is a function that you will use almost every time when you use Photoshop. The short cut is Ctrl+T (Cmd+T) and it is nested in the Main Menu under Edit>Free Transform. This tool needs little explanation and is fairly easy to get your head around.

Let us start off by starting a new document (Ctrl+N or Cmd+N)  with the dimensions 800x600px with 72ppi resolution. Next click on the image of the girl in the turquoise/bluish T-Shirt towards the bottom of this post to open a larger version and right click it to copy the image. Back in Photoshop just paste it: Ctrl+V.

Okay this is a common scenario, that can be avoided by choosing the Place option in Photoshop (File>Place). Let us use the Free Transform now.

Manual dragging  with shift – After clicking Ctrl+T you can decrease the size of the large image manually by dragging a visible image corner while holding shift towards the centre. If your image is too large you can press Alt + scroll down to zoom out or  hold Space+Alt while left clicking to zoom out. Click on the tick in the options bar or simply press Enter to accept the new size.

Key in the new size – You can instead simply type in the new size. Follow these steps in the options bar: (1)Place the reference point in a position that you want fixed – in our case top left (2)Click on the chain icon between the W and H responsible for the aspect ratio (scale) and last enter a value into the W text box. 37% will give you a good result. (see image below to guide you) Press Enter to accept the new size.

Options for CtrlT

Ctrl and Free Transform – Now, Free Transform becomes really powerful in combination with the Ctrl (Cmd) key. Let us try this: copy Monkey (from the top image) and paste him into the open document. Next hold Ctrl (Cmd) while dragging a corner point of Monkey into the eMac screen. Repeat this with all points. Readjust them before accepting the changes by pressing Enter.

Free Transform and Ctrl - I am loving it!!!

Free Transform and Ctrl – I am loving it!!!

Transform

Transform can be used on its own. Access it from the main menu Edit>Transform>

Screenshot of Transform drop menu

Screenshot of Transform drop menu

Use Scale to change the size of the image. Use Rotate to rotate the image. Use Skew, Distort or Perspective to play with levels of perspective with the photo. Use Warp to get really creative on a image and achieve a more Psychedelic outcome.  The Rotate option is self-explanatory and the two flip options are handy to know.

For 5 mins play around with the different options. Copy your layer (Ctrl+J) and do a horizontal flip on your layer. Move it down and change the opacity settings in the Layers Panel.

Layer Style (Blending Options)

The Layer Styles can be accessed from the Layers Panel Menu (small down arrow at the top right of the Layers Panel) by selecting Blending Modes. The faster way is simply clicking on the blue area around the layer name (not on the name itself though).

Practice Selection, Refine Selection and Mask Selection

Selection Tools

Buttons from left to right:standard - add to selection (Shift) - subtract from selection (Alt) - intersect selections (Shift + Alt)

Buttons from left to right:
standard – add to selection (Shift) – subtract from selection (Alt) – intersect selections (Shift + Alt)

Attempt to select Monkey (see image above) and use a layer mask to separate him from his surroundings. You might need to use a blend of Selection tools available. Try the Quick Selection combined with Elliptical Marquee and Polygonal Lasso (see icons in image). Make sure to add to your selection by holding Shift while selecting or use the buttons in the Options menu (see image to your right for example) or hold Alt to take away from your selection.

After selecting Monkey use the Add a Mask  button in the bottom of the Layers panel (or from the Menu pick: Layer>Layer Mask>Reveal Selection).

If you did everything correctly you should now just view Monkey on his own. (Keep this file open)

Mask Mode vs Standard Editing Mode – Please look at your Layer in the Layers panel. A black and white thumbnail next to the layer thumbnail indicates that a layer mask is in place. You all know this from previous classes, but it is extremely important to understand the difference between the normal editing mode and the mask mode. The mask thumbnail should have a black part outline around it to indicate that you are in the mask mode. Please left click on the layer thumbnail (or image thumbnail) to activate the standard editing mode and observe any changes in the interface. Next click back on the Mask thumbnail and again look at the interface. What changes did you observe?
When in mask mode your foreground and background color boxes will be only in shades (black/white standard, tones of grey if you play around). The Mask mode does not need colours! Why do you think masks do not need colours?

Well, the mask mode simply works with masking parts of the image:

  • you use white to show the selected part
  • you use black to hide the selected part
  • and you use grey to partly hide/show the selected part

Adjusting size of brush

After writing Monkey in Mask Mode

After writing Monkey in Mask Mode

Easy? Well, let’s try it. Make sure you are still in the Mask mode and select the brush tool (short cut: B) use a standard brush tip and a size of 13px and hardness level of 0%. This can be adjusted in the options menu bar (see image to your left). Now with the brush, write the word Monkey 3 times in the masked area: once with white selected, once with black selected and once in grey (click on the foreground colour and shift tone to grey). When writing in white there should not have been a change, in black it should show Monkey in the colours of the background, while the grey should show a faded background. – I hope that this clarifies the use of masks to some extend.

Now change the grey tone back to what it was (we need black and white for the mask mode) NOTE: Benan, I don’t want to hear it… and can every one hide the monkey writing again (an easy way is to increase the brush size to over 100 and the hardness to 100% and go over it with black.

Mask Edge/ Refine Mask

Mask Edge/ Refine Mask

Finally, let us move towards using the Mask Edge/ Refine Mask function. Get there by (layer mask needs to be active) clicking on the Masks tab in the Masks Panel (above the Layers Panel and hidden behind the Adjustments Panel) – see image. Click on Mask Edge and with the Refine Mask window open adjust the Edge as you see fit. Try it against a black background as well as a white background (click down arrow next to View:) Click here for for a detailed tutorial on how to use the Refine Mask window.

Today’s Tasks

Task 1: Use the photos with the window, mask out the background and place the photo with the monkeys into it. Put your first name in one of the bottom corners and apply a layer style of your choice to your name. Save the file as a PNG, with the title: Photoshop_class5_task_1.png. Keep a copy and e-mail the file to me.

Select one of the encircled links for Task 3

Select one of the encircled links for Task 3

Task 2: Open the image of the girl in the bright green T-Shirt in front of the eMac. Next take a screen shot of your computer (Mac: command+shift+3, PC: press PrtScn) and either place or drag that image into the open file. Use  Free Transform to place your screen shot into her screen. If it does not look quite right you can place a black or dark blue fill behind the layer with the screen shot and play with the Layer Blending Mode or opacity levels of the Screen shot layer. Put your first name in one of the bottom corners and apply a layer style of your choice to your name. Save the file as a PNG, with the title: Photoshop_class5_task_2.png. Keep a copy and e-mail the file to me.

Task 3: Select one of the links in the Links for Learning section and look for a tutorial on any of the topics that we have covered today: Free Transform, Transform,

  • Layer Style or
  • Practice of Selection, Refine Selection and Mask Selection and place a comment with a link to the tutorial in this post!  Thank you! 🙂

Image files to be used in class: