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

Photo by hotblack on morgueFile.com
Photo by hotblack on morgueFile.com

Today we will look at:

  • 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 Shortcutsand 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: 500 (in px for web), the height: 600 (in px) and the resolution: 150 (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.

Image>Adjustments>Brightness/Contrast

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) or use: Image>Adjustments>Levels

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.

Photo by matthewbridges on morgueFile.com
Photo by matthewbridges on morgueFile.com
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 or: Image>Adjustments>Curves). 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 (or: Image>Auto Tone). 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  (or: Image>Auto Contrast). 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  (or: Image>Auto Color)

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 shadow and 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. Click: Image>Adjustments>Vibrance

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 or Image>Adjustments>Hue/Saturation)

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. Press: Image>Adjustments>Photo Filter.

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. Click: Image>Adjustments>Shadows/Highlights.

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 500px x 600px at 150ppi (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) and keep a copy for yourself.
  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).
    Create a before and after version of the image.

Student Submissions:

Work by Benan Ü
Work by Benan Ü
Work by Michael T
Work by Michael T
Work by Tristan S
Work by Tristan S
Work by Vlad K
Work by Vlad K
Work by Jo W
Work by Jo W
Work by Justin A
Work by Justin A

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

Content:

  1. Bullying and RSI
  2. Assessment
  3. Feedback

Photo by Alvimann on morgueFile.com

Photo by Alvimann on morgueFile.com

Bullying and RSI

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.

Complete the Assessment

Assessment – OHS 2 – Bullying and RSI

Upload the Assessment:

Upload the document on 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!

Good Morning! Photo: wallyir, from: morgueFile.com
Good Morning! Photo: wallyir, from: morgueFile.com

Today we will focus on

  • Taking digital photos of textures
  • Taking a portrait of each other
  • Editing the images in Photoshop

Photoshoot

Preparation: we will all go to the p.ic blog and read the Photography Tutorial.

Next we will team up and then see how many cameras we will have between each other. If you have a good quality mobile, you can use that to take the pictures. Otherwise you will be able to use a digital camera provided by the library.

Take 2 photos of each team member. The photos need to be taken in front of a white background.

Take 5 pictures of each type of texture (see p.ic tutorial)

Photoshop Work

We will next combine the texture with your photo in Photoshop and apply some of the skills, that you have learnt over the past weeks. Make sure to use your own photos that you took for this one.

Follow the instructions on this tutorial (that we used in the previous two classes): 3 Images

Save your final work on your USB as a PNG.

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

Today’s Class

Assessment 1 – Work

Assessment 1

You will have time to work on assessment 1 in class. I will be available to offer assistance and answer 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!

Banner_Cert IV WebBTech-C1

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

Today’s Class

  • Assessment 2
  • Inspirations
  • Webdesign with Photoshop 960 Grid System
  • Feedback

Assessment 2

Today you will receive Assessment 2.

For the moment I would like you to commence the first two tasks of the assessment:

Instructions:

Based on your brief that you have developed for   assessment 1 develop a concept for a web site with 5 pages, including   e-business aspects: the user must be able to purchase units online. PayPal is   a good option for this, include a PayPal logo and a PayPal payment option   (visually).

Task 1:

Describe each of the 5 pages. Include a page title and a list of keyword suggestions.

Task 2:

Sketch out each page! Create a minimum of 10 wire frame sketches. This means 2 concepts per page.

Create these sketches by hand and scan your sketches and supply as an attachment or paste into Word document.

Inspirations

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, MashableDesign Envy and Dzineblog are just a few inspiring resources.

Below are links and descriptions of some styles and movements that I relate to very much:

  • Swiss International Style
  • Constructivism (often called Russian Constructivism)
  • Vietnames Propaganda Poster

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 - found at www.designhistory.com

Swiss International Style – Joseph Müller-Brockmann – Beethoven Concert Poster – found at http://www.designhistory.com

Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 - click image for more information and link to her blog

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

Looking at some bad website might be a good idea to know what possibly to avoid: http://www.webpagesthatsuck.com

Webdesign with Photoshop – 960 Grid System

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 - applying 960 Grid 12 Col layout from 960 Grid System

Screenshot – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System

  1. 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.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. 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.Setting the grid up.
  6. 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)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. 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 ScrenshotConcept 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.

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!

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

Today’s Class

  • Assessment 1
  • Discuss Assessment 1
  • Feedback

Assessment 1

Assessment 1 is a planning assessment. Your focus will be on creating an interactive PDF for an event of your choice. Assessment 2 will then focus on the creation of the interactive PDF. We will go through the steps of creating the interactive PDF in the next 2 weeks.

Assessment 1 MM Production The Event

Below is an example of the Experience Planner completed in class: Experience Planner- filled in partly after class 04.

Discuss Assessment 1

Assessment 1 requires of you to plan an interactive PDF for an event of your choice. Assessment 1 will not require for you to create this interactive PDF, you will just plan for it.

Example of interactive PDFs: Adobe Magazine, Font Magazine, Know-It-All Guidebook to King West, Vektoria Magazine, Blanket Magazine Revolution Art Magazine, Revolution Art Issue 40,

Ideas for Events, Style and Feel

Look at the text for class 5 for ideas for events: Multimedia Production – Class 4

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!

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

Today we will look at:

  • Custom Shape Tool
  • Layer Blending Options
  • Today’s Task

Custom Shape Tool

The Custom Shape Tool allows you to draw custom shapes. These are actually vector graphics, which is uncommon in Photoshop.

Custom Shapes and Custom Shape Icon
Custom Shapes and Custom Shape Icon

The Custom Shape Tool can be activated with the U shortcut and by scrolling through the shape tool options using Shift+U until the custom shape tool appears. Load all custom shapes in the options (in CS6 click on the cog or in earlier versions click on the arrow). Use any of the shapes that you like. I opted for the dog and the cat with a rounded rectangle in the background.

Draw shapes by dragging the cursor. Hold shift to keep the proportion.

Layer Blending Options

Double click around the name of the layer.
Double click around the name of the layer.

Activate the Layer Blending Options by double clicking next to the name of a layer (in the Layer Palette) in the high-lighted area (not the thumbnail). In class I will give an introduction to the various options. I want you to focus on the Stroke option. Click on the word (not just the tickbox) and change the colour of the outline.

Vary your line thickness on the different shapes.

Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0%
Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0%

Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0% and vary the Fill Opacity with the different shapes.

Today’s Task

Create an image with shapes that have outlines and no or low Fill Opacity.

Suggested dimensions:

Web Preset, 800px(width) x 600px (height) 72ppi (resolution). Save your work for on-screen viewing, as JPEG or PNG.custom shapes 02

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

Today’s Class

  • Assessment 1
  • Assessment 2
  • Feedback

Assessment 1

You will need to complete your questionnaire in today’s class. Have a minimum of 10 questions listed.

The assessment is due next week, so if you could contact businesses asap, either over the phone, in person or by email. If you have any difficulties please speak to me.

Please send more than one e-mail out. You cannot expect everyone to reply to your email.

Your Email:

Make sure to use a professional email address. I would prefer if you would use your Kangan student e-mail, but if you use a Gmail or Hotmail account please ensure that it just has your name in the email address and not the name of your favourite song.

Below is an example of the text you may use in your email:

To Whom It May Concern,

I am currently studying a Cert IV in PGA (Print and Graphic Arts) at Kangan Institute.

I need to research employment opportunities in your industry and was hoping that you could help me with your expertise. Would you be so kind to answer the questions below? There is also an attached document with the questions.

Kind regards,

Name: First and Surname

Email: your email address

Phone: your phone contact number (in case that they have a question)

Report:

You will need to write a report (Task 4). Make sure to write what your findings are, what you learnt from the responses and if there is anything that surprised you. You can make some comparisons between responses and businesses.

Assessment 2

Assessment 2 Multimedia Industry is called a research diary. You need to research and answer all the questions on 8 pages. You will need to supply your own definition, a researched definition, an image and a video. All found material needs to be referenced. See attachment.

Note: Sometimes a video might not help in understanding the term (eg Adobe DreamWeaver). In that case you can write n/a.

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!