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 www.morguefile.com
Photo by clarita on http://www.morguefile.com

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>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>

<body>
<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>
</body>

</html>

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:
From W3Schools.com

From W3Schools.com

More information on CSS stylesheets: W3Schools-CSS

TASK:

  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=”http://www.w3schools.com/images/boat.gif”&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=”http://www.w3schools.com/image/boat.gif”> 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.

Task:

Complete the task above and upload to MyKangan.

Thanks! 🙂

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    Class 3     Class 1

Welcome to your second class. I don’t know about yourself, but I actually get pretty excited about HTML. Today we will focus on:

  • the use of Cascading Style Sheets – short CSS (W3Schools-CSS)
  • head elements in a HTML file (W3Schools-Head)
  • how to view HTML code of a website
  • use of html code in a blog (example: WordPress)
  • creating a good folder structure in HTML

The last 3 points will be covered in class.

We will again use the W3Schools.com site and their TryIt Editor. We will use the Mac specific TextEdit editor to write the HTML and CSS code.

Please follow the instructions in your Class 2 task sheet below:

HTML Class 02 Task

  • All questions related to the Head section of an HTML file can be researched at W3Schools-Head
  • All questions related to CSS can be researched at W3Schools-CSS

Good folder/file structure is paramount in web design. It is a beginner’s mistake to upload a website with all its content and to find that files do not link, eg images do not load. The link below has a good explanation on folder structure:

Simplify File Structure for Dummies
___

Other useful links:

HTML Dog – this site is a well written and well structured resource with many HTML and CSS tutorials! A must visit!!!