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

Photo by mconnors on morgueFile
Photo by mconnors on morgueFile
Photo by xandert on
Photo by xandert on
Photo by jdurham on morgueFile
Photo by jdurham on morgueFile
Photo by jdurham on morgueFiles
Photo by jdurham on morgueFile

Today’s class has been conducted on MyKangan. This is the title of the unit on MyKangan:

ICP40210-ICTPGA4N-PRIMU-2013-ICPKN315C-Apply knowledge & requirements of the multimedia sector

Photo by dharder on
Photo by dharder on

Please check for previous weeks and upload all the in-class tasks now.

Please download the assessment task and complete and upload before the due date.

Here is an attachment of that assessment, if you have questions please e-mail me or leave a comment.


Link to Class 5     Class 2     Class 1

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

Photo by Alvimann on
Photo by Alvimann on

Text from MyKangan:

Participate actively in the discussion forum on OHS.

Open the attached document with a set of tasks for you to explore.

Your task:
Download the attached word document and:Look up the Occupational Health and Safety Act 2004 (OHS Act).
Find out who is responsible for workplace safety and who has duty of care at a workplace.

Define the term ‘hazard’ in a OHS context.
Define the SAM principle and what the Think Safe steps are!
State six methods to respond to a hazard

Upload your completed document

The Forum and the task are available on MyKangan. Please participate in the forum. A humorous response is more than welcome as long as it is in context and not vulgar.

All the tasks from previous weeks can be uploaded as well.

Link to Class 4   Class 2   Class 1

I am glad to announce that MyKangan is now fully functional. You will still be able to visit the content on this WordPress blog. Above are the links to previous classes.

Photo by clarita on
Photo by clarita on

So, you might feel like you are starting to get a feel for how to use HTML in TextEdit (or NotePad). HTML is reasonably easy as long as you approach it systematically. The content for today’s class is directly related to the chapters in W3Schools HTML Tutorials: HTML CSS, HTML Images, HTML Tables and HTML Lists. You can simply click on the links for each point below.

Always trial your HTML code in the TryIt Editor or even use the Real-time HTML editor (that we looked at in Class 1).

Content for today’s class:

Using External CSS Documents

Work with the W3Schools chapter: HTML CSS

Last week we looked at the three ways to include CSS styles in an HTML document. Today we will just look at external CSS documents (created in a text editor). By now you should be aware of the benefits of using external CSS documents:

  • It is easy and faster to create one CSS stylesheet and having the link to in each HTML document
  • It is faster to change one CSS stylesheet than changing the CSS code in numerous HTML documents

Obviously you have learned in last week’s class that you place a link to an external CSS style sheet into the head of a HTML document:

<!DOCTYPE html>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>

<h1>The text in this heading is formatted in an external stylesheet called styles.css</h1>
<p>The paragraph text is formatted by the same external stylesheet</p>


Please notice the difference between the Head and Body sections of the HTML file. The Head element includes only the link to the CSS stylesheet. Think for a moment and ask yourself what other components you could place in the Head section! (We covered that in last week’s class)

The Body section has all the visible parts of the website. The heading and the paragraph.

A CSS stylesheet uses different brackets:

[NOTE: This is code for an external CSS, created in a text editing program like TextEdit or NotePad and saved as styles.css]

body {background-color:#98FB98;}
h3 {color:#000080; text-align:center;}
p {color:#000080; text-align:center;font-family:”Garamond”; font-size:20px;}

This stylesheet specifies

  • the colour of the background
  • the text colour of the h3 heading
  • a central alignment for the h3 heading
  • the text colour of the paragraph
  • the alignment of the paragraph and
  • the font of the paragraph: Garamond at 20px

Please note that more properties can be added to a line with a semi colon in between, before the closing bracket place a semi colon.
Click on the image to view the syntax (style of writing) of a CSS document on W3Schools:


More information on CSS stylesheets: W3Schools-CSS


  1. Please create a HTML document in TextEdit or Notepad for the text of the poem below
    Use h3 for the heading and p for all the other text.
  2. Create a Head section in the HTML document that links to your stylesheet called Heine
  3. Create a CSS document in TextEdit or Notepad called heine.css that has the specs as below

Text of poem:

Why the Roses are so Pale

Oh, dearest, canst thou tell me why
The rose should be so pale?
And why the azure violet
Should wither in the vale?

And why the lark should in the cloud
So sorrowfully sing?
And why from loveliest balsam-buds
A scent of death should spring?

And why the sun upon the mead
So chillingly should frown?
And why the earth should, like a grave,
Be moldering and brown?

And why it is that I myself
So languishing should be?
And why it is, my heart of hearts,
That thou forsakest me?

Poem by Heinrich Heine
(English translation by Richard Garnet)

Specs for CSS document:

Background colour: CCFF66
H3: font: Garamond colour: 330099
P: font:Geneva colour: 3333CC

Inserting an Image in HTML

Work with the W3Schools chapter: HTML Images

This section is looking at how to insert an image into a website.

In HTML you need to use an image tag: <img>

The <img> tag is empty which means that it does not need a closing or end tag. The reason is that you are only inserting one image per <img> tag, so there is no need for an end tag.

After the tag you will need to insert attributes:

  • src: this is the Source attribute, which defines where the browser will find the image to upload. This will be a url (web address) if your HTML, CSS  and image files have been uploaded to the url.
  • Example: <img src=””&gt;

So, notice that the closing bracket is not placed right after img, but after all the attributes. It is smart to put all your images in an image folder. The example shows that the image is a GIF and it is placed in the images folder. Make sure to specify the path with a forward slash / and always check your spelling. If your images folder is called images and you mistakingly spell:   <img src=””> the image will not display!

Besides the image you will want to display alternate text. Alternate text will show if the image does not load, the attribute is: alt=”image name”. See the revised example:

Let us also look at the option of you working from your computer. The website has not been uploaded, so it is still sitting on your computer. The reference to the image location is always relative to where you have the HTML file. All this means is if you have your HTML file on your USB in a folder called “HTML class” and your image in a folder called images (inside the HTML class folder) – do you follow?- this would be the src attibute:

  • <img src=”images/boat.gif” alt=”The Boat”>

Inserting a Table in HTML

Work with the W3Schools chapter: HTML Tables

Work through the chapter on how to insert a table. Ensure that you use the correct code.

Create a List in HTML

Work with the W3Schools chapter: HTML Lists

Work through the chapter on how to insert a list.


Complete the task above and upload to MyKangan.

Thanks! 🙂