Link to Class 6     Class 5     Class 4     …      Class 1

Photo by Seemann on morgueFile.com
Photo by Seemann on morgueFile.com

Content for Today’s Class

  • 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: 3/5

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:

  • 1 image from Class 6 (Task 2 – applying image adjustment functions the image of Matthew Bridges is below)
  • 2 images from Class 5 (Tasks 1 and 2 – combine image of monkeys with image of window and put new screen onto the computer of the girl)
  • 2 images from Class 4 (Create a banner and create a clipping mask with your initials in front of image of birds)
  • place a banner of your own work on top or use an image from morgueFile (please state the name of the photographer)
  • 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
 

Link to Class 6     Class 5     …     Class 1

Sustainability Assessment Task

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

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 and upload it to MyKangan.

Class 07 Task – Online Units

Link to Class 6     Class 5    Class 4      Class 1

Today’s content:

  • Handout and discussion of Assessment 2 – Logo Design
  • Time to work on Assessment 2

Assessment 2

Design 2 Logo concepts for a business called UCV (United Creative Victoria) an imaginary organisation for Designers of different disciplines of Victoria.

Due Date

22/April 2013 – 5:30pm

Please read all the instructions carefully before completing the assessment task.

Brief

Design 2 Logo concepts for a business called UCV (United Creative Victoria) an imaginary organisation for Designers of different disciplines of Victoria.UCV will be located in Victoria Street, Carlton and will hold events for Graphic Design, Industrial Design, Interior Design, Fashion Design and showcase some local Craft, from jewellery to small artefacts. UCV has a global outlook and would like a design for their logo that is modern and timeless. They would like you to base your concepts on Calibri or Bauhaus 93. Combine the type with a symbol.

Tasks

  1. Write a list of information about your client. What do you know about UCV?
  2. Brainstorm the terms: global outlook, modern and timeless. What do they mean? How could that be described visually? Collect your ideas in form of a mindmap or brainstorm.
  3. Sketch concepts for your logo on a minimum of 6 A4 pages (3 A4 pages per typeface). Draw symbols and icons that you could use as inside shapes to cut out of the main letter shapes. Scan your pages.
  4. Select your strongest ideas of your sketches and develop them in Adobe Illustrator. Have 3 versions per concept. Present each concept on an A4 pages (a page for each typeface).

Upload the file on MyKangan. Thank you!

CertIV_PGA_Type_Assessm2

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.

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

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

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

Link to Class 5     Link to Class 3     Class 2     Class 1

Create a simple web page for a small fishing village that would be a beautiful spot to visit.

Photo by dieraecherin on morgueFile
Photo by dieraecherin on morgueFile

Specs for site:

  • Think of a colour scheme that suits the theme of a maritime, small seaside port and apply this colour scheme to the web page
  • Title: name of your town or name of web page in title (how it will be displayed in the title bar of the web browser)
  • Heading: (H1 in Helvetica) This can be an enticing heading or the name of the town and the country (or state)
  • Photo by dieraecherin on morgueFile
    Photo by dieraecherin on morgueFile

    Text: (p in Gill Sans) This is a write up about your little town. Feel free to borrow from the text below based on Apalachicola, Florida and borrowed from a SmarterTravel:
    Name, Country
    Population: 2,231 The Catch: Oysters, shrimp, redfish, mullet
    In its 19-century heyday, this northwestern [name of country] town was the third largest port of the Gulf of [name]. Today more than 900 historical homes and buildings remain. Old net factories and ship chandleries are now trendy shops, restaurants, and galleries; meticulously restored homes are B&Bs. But [name of town] is hardly a polished tourist area like nearby [name] Island. Nearly half of the hardworking locals wear rubber oyster boots around town. They harvest oysters (90% of those sold in [name of country]) by hand with large tongs in small wooden skiffs. Spend an afternoon on the beach, kayaking the Forgotten Coast barrier islands, or at the 1921 Dixie Theatre.  Local Eats: Hole in the Wall Seafood & Raw Bar serve some of the freshest local oysters, and the popular buttermilk pie sells out almost daily. For a table overlooking the [name] River, try Owl Cafe or Boss Oyster.

  • A table of 3 x 3 images (each square 200px x 200px or 250px x 250px) found on morgueFile cropped in morgueFile and transformed into HTML. Copy the HTML code and insert the link to the photo into your HTML file.
  • List of ten reasons to visit the seaside town (make them up and make them fun)
  • Use the TryIt Editor to edit the file and then save your file with TextEdit (or Notepad) as a  HTML with the text set as Plain Text and UTF-8.
  • Test your HTML file with a minimum of 2 browsers
  • Upload your HTML file to MyKangan! ► ICP40210-ICTPGA4N-PRIMU-2013-ICAWEB429A

Link to Class 5     Link to Class 4     Link to Class 2     Link to Class 1

Welcome to your third Photoshop class. Be honest: did you practice what you have learnt last week? Make sure to practice Photoshop as much as you can, preferably daily. If you create a habit and make it fun your learning curve will be steep. If you are to busy to practice every day, try more than once a week.

Only practice will help you learn!Photo by  BreonWarwick on morgueFile
Only practice will help you learn!
Photo by BreonWarwick on morgueFile

In today’s class we will look at:

  • the Layer panel
  • how to create a new layer
  • how to move layers
  • how to make a layer active
  • how to hide and show a layer
  • how to link layers
  • how to group layers
  • how to delete layers
  • how to draw shapes
  • how to create a clipping mask
  • how to use the Gaussian Blur
  • how to rasterize a layer
  • how to merge two layers and
  • how to flatten an image

You can see that we will be rather busy. You will also need to provide me with an image as a result.

If you already now all of the tasks above you can do this straight away –

Your Tasks for this class:

Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.

Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.

If you are in doubt about Toni Varsetti ask Lucine… 😉

The Layer Panel

The ability to create layers is a central aspect of Photoshop. It works like a collage, you place one photo on top of another and the one on top covers up the photos below it.

Layers Panel - Source: The Graphic Designer's Digital Toolkit, Alan Wood, 5th Edition, 2011
Layers Panel – Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011
layer_drop_menu
Layer Drop Menu
Click image to see larger version

The Layer palette is located in the bottom right-hand corner with a tab called LAYERS. There are two menu items you should be aware of in the drop down main menu: Layers and Window.

Click on Layers to see a lot of actions that you can perform with layers. (See image) You can perform these functions directly from the layers palette as well, by clicking on the Layer Options Tab (small icon in the top right of the layers palette).

Click on Window in the main menu and see Layers ticked. This is were you can activate the Layer palette if you cannot see it on your screen. (If you are using a Windows PC notice the shortcut F7? This allows you to activate or deactivate the layers palette.)

Please read all the options of the image of the Layers panel (above) before advancing.

How to create a new Layer

  • You can simply click on the small icon in the Layers panel that looks like a sheet of paper (too slow)
  • You click on the Layer tab in the menu bar: Layer>New>Layer (too slow) or
  • You use the short cut: Ctrl+Shift+Alt+N (Mac: command+shift+option+N) – Nice! This will immediately create a new layer on top of your active layer.
  • You can use this short cut: Ctrl+Shift+N. This will open a options panel before the layer is created.
Layers in Photoshop are like a Collage of images stuck on top of each other...
Layers in Photoshop are like a Collage of images stuck on top of each other…
Monkey photo by deanjenkins and Green photo by omdur, both on morgueFile

How to move a Layer

  • Drag the layer in the layer panel into the new position. You can move it up (=on top of other layers in the workspace) or down (it will be partly hidden by layers above.
    This is an easy and intuitive way. You will need to sometimes move it right between two layers and wait for a dark line to appear before releasing the layer.
  • You can also use the shortcuts: Ctrl+[ (or Cmd+[ on Mac) to move the layer up and Ctrl+] (or Cmd+] on Mac) to move the layer down.
  • You can use the Menu bar:  Layer>Arrange>Bring Forward (or Backward)

How to make a Layer active or inactive

A layer needs to be active for you to be able to work with the artwork on the layer. Photoshop allows you to work on one layer at the time.

  • The active layer is high-lighted or shaded (generally it is the layer with the blue background and white text in the layers panel.)
  • To activate a layer simply click on the layer in the layer panel

If you want to select numerous layers hold the Ctrl button (Mac: Cmd) while selecting more layers.

How to hide and show a Layer

You can make the content of a layer invisible by clicking on the eye icon in the Layers panel. Clicking it again will make the content visible.

How to link Layers

Linking layers can be done by selecting numerous layers (with Ctrl) and then clicking on the chain symbol in the Layers panel.

How to group Layers

Group layers by selecting numerous layers and then either pressing Ctrl+G (Mac Cmd+G) or create a new group by clicking the Create a new group icon in the Layers panel (it looks like a folder) and drag any layer you want into it.

How to delete Layers

The easiest way is to select the layer and hit Backspace; this happens immediately.

If you are the old school type you might to simply drag the layer into the bin icon or click the bin icon and press enter to delete the layer.

How to draw Shapes

Using the Custom Shape Tool to draw a Rabbit - The rabbit is below the grass
Using the Custom Shape Tool to draw a Rabbit – The rabbit is below the grass

Before you draw a shape place an image in the document (File>Place). In the example I have placed a photo of grass (found on http://www.morguefile.com > Petersphoto)

There are several tools that allow you to draw shapes. They basically draw vector graphic shapes that are linked to a layer. Try the Rounded Rectangle Tool tool. (If the tool is not visible, hold down the Rectangle tool near the bottom of the toolbox.) The shortcut is U – and Shift+U allows you to scroll through the tools options (it should be the second.)

Draw a rounded rectangle with a 25px radius (drag to draw). You will notice that drawing a shape will create a new layer as a default!

Try the other drawing tools as well.

I chose the rabbit custom shape. To find it choose the custom shape tool, it looks like a blob, see the sample images! Then go into the options menu bar and select the down arrow next to the custom shape (most likely a black arrow). This will open all the different custom shapes. Next click on the small outward arrow head in the top right of the box you have just opened. Select all and Ok. This will open all the custom shapes that Photoshop comes with. The rabbit should be in the selection.

How to create a Clipping Mask

The grass layer has been turned into a clipping mask with the shape of the rabbit below.
The grass layer has been turned into a clipping mask with the shape of the rabbit below.

Keep only one shape layer and delete all the others.

Place an image in the workspace: File>Place. Make sure the image is larger in size than the shape on the layer below. Right-click on your image layer and select Create Clipping Mask.

Male sure that you do this to your image layer and that the image layer is on top!!!

Your image layer has been reduced to the shape of the shape layer below. 🙂

  • Try to move just the image by selecting the image layer.
  • Try to move just the shape layer.

What is the difference?

How to use the Gaussian Blur

Make sure your shape thumbnail on your shape layer is selected. Go to the menu bar: Filter>Blur>Gaussian Blur and enter 7.4px for the Radius.

You should be prompted if you want to rasterize the layer. Click yes.

How to merge two Layers

Select two layers (left click + Ctrl) then right click and select Merge Layers.

How to flatten an Image

Right click on any layer and select Flatten Image or press Ctrl+Shift+E (Cmd+Shft+E on Mac)

Tasks

This completes today’s tutorials, please perform the below tasks:

Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.

Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.

—–

Here is a link to a Clipping Mask tutorial on SalinStudio.com

Student Submissions:

Yong - Clipping Mask
Yong – Clipping Mask
Justin Clipping Mask
Justin Clipping Mask
Naşide Clipping Mask 1
Naşide Clipping Mask 1

 

Naşide Clipping Mask
Naşide Clipping Mask
Clipping Mask by Lachy Carter
Clipping Mask by Lachy C
Clipping Mask by Brandon M and Anthony W
Clipping Mask by Brandon M and Anthony W
Clipping Mask Amelia B
Clipping Mask Amelia B
Clipping Mask Dom U
Clipping Mask Dom U
Clipping Mask Dejanah P
Clipping Mask Dejanah P
Clipping Mask Dylan C
Clipping Mask Dylan C
Selection by TerranceMcG
Selection by TerranceMcG
Clipping Mask by Surour D
Clipping Mask by Surour D

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

It is an exciting time to commence something new, so wear the badge Absolute Beginner with pride and get ready for a love affair with one of the best software packages of our time- welcome to Photoshop.

Photo by agathabrown on morgueFile
Photo by agathabrown on morgueFile

Suddenly life broke out in warm colors again, so young and beautiful that a lot of people couldn’t stand to look at it.

Quote from the film Absolute Beginners

We will work with Photoshop CS5 on a Mac.
Prerequisites: 10 photos of you and 10 photos of a background saved onto your USB and in class (the excuse of the forgotten USB at home is lame) 😉

Today we will look at:

  1. The CS5 Workspace (overview)
  2. Differences between the Mac keyboard and Windows keyboard
  3. Ways to open an image
  4. Selection Tools
  5. Use of Hue/Saturation function (Image adjustment)
  6. Layer overview
  7. Perform a task

Feel free to ask questions throughout class and to slow me down at any time. It is important that you view the instructions on the overhead first and then try them out yourself.

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 or simply follow instructions in class.

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

Differences between the Mac keyboard and Windows keyboard

These are the two main differences:

Ctrl (Win) = command (Mac)

Alt (Win) = option (Mac)

Ways to open an image

First ensure that you use a good folder structure. Save your 20 or so images from your USB onto the PC that you are working on into a folder with a short, yet descriptive name, eg images.

Select File>Open – find your images folder and select the image that you want to open. Photoshop will open the image at the image pixel size and at the resolution of the file.

Open the images folder and have Photoshop open and accessible. Now drag the image into the Photoshop window.

Create a New Document in Photoshop and choose File>Place. Next place the image into the document.

There are other options, such as dragging an image directly from a webpage into the Photoshop window or selecting File>Open As Smart Object. Photoshop is a very versatile software package. The most important is to know a way that keeps the resolution high.

Selection Tools

The Selection Tools in Photoshop are one of many strong points of this package. We will work with this slow loading instructions from the Teacherlink site: Selection Tool Instructions

Below is an screen shot of the Selection drop menu with annotations:

Source: The Graphic Designer's Digital Toolkit, Alan Wood, 5th Edition, 2011
Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011
  • The Rectangular Marquee Tool (Short cut M) – This tool draws square (with the help of Shift) and rectangular selections (freehand). It is important to understand that you are actually not drawing as such, you are simply creating a selection and will be able to do something to that selection only and only on the current layer. Drag the image below into your Photoshop workspace and select a rectangular shapes. Press Ctrl + U and change the colour settings – just play with it. Keep the file active.
    Image Source: www.photoshopessentials.com
    Image Source: http://www.photoshopessentials.com

    Open this excellent tutorial on PhotoshopEssentials.com: Rectangular Marquee Tutorial

  • The Elliptical Marquee Tool (Short cut M) – This tool draws circlular selections (with the help of Shift) and elliptical selections (freehand). You can draw the ellipse or circle commencing from the centre by holding Alt (option for Mac) while you draw your selection. Visit this tutorial on PhotoshopEssentials.com to see a good example on how to use the Elliptical Marquee Tool.
    For this class select the red cylinder and change the colour as per instruction above.
  • The Lasso Tool (Short cut L). Basically you draw your selection freehand. It is an early Photoshop tool and has some good uses still (like creating a quick shadow underneath a vehicle with the help of Gaussian Blur). It requires a high level of mouse skills. Try to select the handshake with the Lasso tool and change the colour. Visit this tutorial on PhotoshopEssentials.com to see one good use of the Lasso Tool.

    Image Source: www.photoshopessentials.com
    Image Source: http://www.photoshopessentials.com
  • Polygonal Lasso Tool (Short cut L). You draw your selection by dropping points. It is an advanced version of the basic Lasso tool and can be very useful. It requires practice. Try the tutorial from PhotoshopEssentials.com: Polygonal Lasso Tool.
  • Magnetic Lasso Tool (Short cut L). You draw your selection by clicking once to select the outline of your object and then you simply follow along the outline and the tool does the rest for you. If a mistake occurs use Backspace to go back one step. It requires practice. Try the tutorial from PhotoshopEssentials.com: Magnetic Lasso Tool.
  • Magic Wand Tool (Short cut W). You make your selection by clicking in the field of what you want to select (eg inside the suit). The Magic Wand selects pixels based on tone and colour. You can change your selection criteria, for example by increasing tolerance your selection will be wider and less affected by tonal variations in the picture. That will result in a larger selection. If you bring the tolerance down it will result in a smaller selection, which means that changes in tone or colour will affect your selection earlier.
    Try the tutorial from PhotoshopEssentials.com: Magic Wand Tool.
  • Quick Selection Tool (Short cut W). This tool is extremely useful as a selection tool. It is similar to the Magic Wand, but it is more advanced and user friendly. You make your selection by clicking in the field of what you want to select (eg inside the suit). The Quick Selection Tool selects pixels based on tone and colour, but it also has the ability to detect similar textures in an image. As a result it is better at detecting the edges of an object.
    You can change your selection criteria by changing the size of your brush tip: increasing it will widen your selection and decreasing it will narrow your selection. For a more in detail description please look at this informative tutorial at PhotoshopEssentials.com: Quick Selection Tool.
  • How to add to or subtract from a selection
    Hold the shift key to add to an existing selection. Hold the Alt key to subtract from a selection. You will need to hold the key while adding or subtracting.

Use of Hue/Saturation function (Image adjustment)

This is a very quick intro to this function: Press Ctrl + U. 3 sliders allow you to change either the hue (the exact colour), the saturation (the amount of colour) and the lightness (the tone, lightness and darkness). You can also tick colorize to get a nice retro effect, it makes your selection monochromatic.

Layer overview

We will cover this in more detail in the next class. We basically will just have a look at the layers to get a broad understanding in class.

Perform a task – Important

Use the photos that you prepared for this class or simply copy the image of the gorgeous Tammi Terrell and Marvin Gaye below from the provided link and use it to apply your understanding of the Selection Tools. Select various parts using the different tools. Make sure to keep a copy of your final file in JPEG format and upload to MyKangan next week.

Source: http://obladoo.se
Source: http://obladoo.se
Example of applied changes
Example of applied changes

Student Submissions:

Work by Justin Anderson
Work by Justin Anderson