[Week 1] September 3, 2008
I waited two years to do this course and it’s finally here! Multimedia is a big part of me and I know I’m destined to do it as a part of my career. In the first class we basically got an overview of the entire course and got to know each other better as classmates and lecturer. I must say that I’m very excited and more than elated with the people that I’m “stuck” with for 8 hours a week for the next two years [lol].
Mac OS Finder
We started to look at the basics of Mac OS X interface. I’m a PC person for life and so I wasn’t exactly thrilled with the lesson. My IQ feels like that of a tomato whenever I get on a Mac. I can navigate through a PC with my eyes closed. We looked at the finder and how it is used to navigate through files on a Mac. Then we also learned a number of keyboard shortcuts, mostly with the command key. We also looked at how to do screen shots [print screen, for all the PC users].
Our first in-class assignment was to create a sign with our name and no more than three words that describes me. I wasn’t in a creative mood and well, here’s the crap I came up with. Pink is my favourite colour and the lines are stairs showing that those characteristics make up me….Sheroma. Simple. No rocket science there.
Sheroma
Our second assignment [well it wasn’t really an assignment, but more like an exercise] was to list the software that we used most often and categorize them. Here’s what I came up with:
|
Software Name |
Software Type |
|
uTorrent |
Peer to Peer file sharing software |
|
Adobe Photoshop CS3 |
Photo Editing/graphics software |
|
Adobe Premier Pro CS3 |
Video Editing/graphics software |
|
Microsoft Word 2007 |
Word Processor |
|
MSN Messenger |
Instant messaging software |
|
Jet Audio |
Media player |
|
Mozilla Firefox |
Internet Browser |
[Week 2] September 8 – 10, 2008
This week we began looking at elements and principles of design. It is important to identify contrast in design, i.e. angular vs. curvy; tall vs. short; thick vs. thin, etc. At this point it is interesting to identify Adolph Gottlieb, an American abstract expressionist painter. Gottlieb experimented with basic elements and symbols which resulted in Pictographs.
Echo, 1972
Jagged, 1960
Masquerade, 1945
He is thought of as being one of the first colour field painters and one of the forerunners in lyrical abstraction. Colour field painting is an abstract style that emerged in the 1950’s that is characterised by abstract canvases that are painted primarily with large areas of solid colour. It is also known as chromatic abstraction. Lyrical abstraction is characterized by intuitive and loose paint handling, spontaneous expression, illusionist space, acrylic staining, process, occasional imagery and other painterly as well as newer technological techniques.
In design knowledge of proportions are important, for example of the human body. This knowledge would enable someone to draw a caricature for instance. A caricature usually refers to a portrait or drawing of a person in which certain distinguishing features or characteristics are exaggerated while others are oversimplified.
Caricature of Charlie Chaplin by Greg Williams
We were presented with a design exercise in which the onus was on us to utilize varying composition techniques and elements. I drafted four designs which utilized the following:
1. Rule of thirds/repetition
2. Space/proportion/contrast
3. Texture/rule of thirds/direction
4. Hue/contrast/space
Today we also looked at vector vs. raster images, considering we will be working with software like Adobe Photoshop and Illustrator. Photoshop mainly works with raster (bitmap) images, which are images which utilize a cellular structure of columns and rows of pixels to store information. Illustrator mainly works with vector images, which are defined by a series of points and lines. Vector images are much simpler than raster images. In broadening our scope of Photoshop, our homework was to create a tutorial on one of the tools. I chose the crop tool.
In working with images, it is important to know various file types and their extensions, for example:
.png – portable network graphic
.gif – graphical interchangeable format
.jpg/.jpeg – joint expert group
For an in-class exercise, we chose a tool or tools and demonstrated their use. I demonstrated the use of the patch tool, which is hidden under the spot healing brush. The tool allows you to literally patch selected areas of an image with other areas of the same image. It almost has a sort of cloning effect. It was beneficial that I had chosen that tool because the Lecturer had never really used it before. There’s a first time for everything!
[Week 3] September 15 – 17, 2008
I was sick this week, so I missed out on a bit of what was happening. This week the class looked at Gestalt and golden mean with use of colour.
[Week 4] September 22 – 24, 2008
We began looking at digital photography this week. I looked forward to this module because I am a photographer [amongst a million other titles] and I’ve always been fascinated by photography. Our first photography assignment was to take 100 pictures in which we demonstrated bird’s eye, worm’s eye, rule of thirds, silhouette, near and far set, macro setting and pattern.
My macro photo
We reviewed the Photoshop tool tutorials made by the class. They were very helpful and interesting to see each of the students ‘teaching methods’.
In design using the right font is very important. There are generally two types of fonts: serif and sans serif. Serif fonts have structural details at the edges of letters and symbols. Sans serif [sans, French for ‘without’] fonts are those which do not have the details at the edges.
Serif and sans serif font
We were given an assignment – to design a Multimedia specialization poster utilizing typography, visual hierarchy and grid techniques. Here’s what I came up with:
My poster design
[Week 5] September 29 – October 1, 2008
This week we covered the fundamentals of photography, composition and lighting; aperture, depth of field, focal length, rule of thirds, wide angle shot, medium shot, close up, extreme close up, key light, fill light, back light, etc. Similarly to the first photography assignment we had to take 100 pictures, but this time we were to advertise a cell phone. In addition to the composition styles in the previous assignment [bird’s eye, etc.] we were to utilize low light photography as well as show human interaction.
My human interaction photo
This week we began drawing and digital illustration. We were first tested on our level of observation by having to draw various logos from companies, etc. I do not think I realized how important it was to recognize such things until I did that exercise. We learned about the fundamentals of Adobe Illustrator, exploring the interface and tools. We were shown a number of keyboard shortcuts [which ultimately speed up the design process]:
[For Mac OS]
Command + shift + z = redo
Command + [ = send backward
Command + ] = send forward
Command + shift + [ = send to back
Command + shift + ] = send to front
Command + shift + b = rotate
By the end of the class I was able to draw Elmo from Sesame Street. Here he is:
My illustration of Elmo
[Week 6] October 6 – 8, 2008
The week started off with preparations for the shooting of the CARIMAC lecturers later in the week. We experimented with lighting, positioning and other composition techniques.
The next class began with an observation exercise. We had to recall simple things such as what the illustration tutor was wearing last week, etc. I answered everything correctly [after learning how much observation was important]. We discussed business names and ideas for an upcoming project. Within the project we had to come up with a business strategy, a logo and a character for the business, which will culminate into a final presentation in two weeks. After deliberation and a number of failed ideas, I came up with Aperture Photo Studio. I made sketches of the proposed character and began working on the vector image in Illustrator.
[Week 7] October 13 – 15, 2008
This week we continued working on our logos and characters for the business project. We learned some new Photoshop keyboard shortcuts for masking:
Q – quick mask
X – toggle between background and foreground
D – default background/foreground colours Black and White
We looked at paths and channels. The focus once again went back to grid layouts, typography and visual hierarchy. One designing technique is the Fibonacci sequence. The first number of the sequence is 0, the second number is 1, and each subsequent number is equal to the sum of the previous two numbers of the sequence itself, yielding the sequence 0, 1, 1, 2, 3, 5, 8, etc. The Fibonacci sequence can be used to associate proportions when dealing with visual hierarchy.
We were presented with two assignments to test our knowledge and skill with regards to grids, typography and visual hierarchy – design two posters using the same grid, but the layouts should be different. Here’s what I came up with:
Layout 1
Layout 2
[Week 8] October 20 – 22, 2008
October 20 [Holiday]
This week was the final presentation for the business project. I presented on my business Aperture Photo Studio. The rest of the class presented also. Here are the final products – logo, poster and character:
Aperture character
Aperture logo
Aperture poster
[Week 9] October 27 – 29, 2008
This week was just basically spent reviewing assignments.
[Week 10] November 3 – 5, 2008
This week we continued looking at designing. I learned about kerning [which allows you to alter the spacing between individual letters in a word] buy using Option + arrow key [Mac OS]. It is also referred to as tracking or leading. Today I really realized the importance in having margins and clean lines in a design layout.
We began to look at HTML, CSS and the internet protocol suite [TCP/IP]. The foundation to every website is essentially HTML [Hypertext Mark up Language] and CSS [Cascading Style Sheets]. HTML and XTML [Extensible Hypertext Mark up Language] was developed by the World Wide Web Consortium [aka W3C]. In my opinion learning HTML can improve your web designing skill because it gives you more formatting options with layouts so that your web pages may be more versatile and functional. HTML is written in the form of tags which are surrounded by angled brackets [<>]. File extensions and URLs [Universal Resource Locators] containing HTML [.htm, .html, .xtm, etc.] can include embedded scripting language [for example JavaScript].
ARPA [Advance Research Projects Agency] and DARPA [Defence Advance Research Projects Agency] were mentioned. The DARPA network is the grandfather of the internet. It was a primitive network. Quite a few of our technologies are of military origin.
TCP/IP is a set of communication protocols for the internet. It was born in the UNIX operating system. We focused on the application protocols [for example HTTP {Hypertext Transfer Protocol}; POP {Post Office Protocol}]. The client/server relationship was highlighted. The server is essentially the supplier of data and services [for example APACHE, Microsoft, Google] while the client is the end user like you or me via a web browser [Firefox, Opera, Lynx, Safari, Internet Explorer].
[Week 12] November 10 – 12, 2008
This week we continued on the web trail. We dived more into creating tags and writing up basic HTML codes. HTML is space agnostic, and thus 40 spaces still equals one space in an HTML tag. Only lowercase letters should be used. Here’s an example of my write up:
<html>
<head>
<title> xxxxxxx </title>
</head>
<body>
xxxxxxxxx
</body>
</html>
It’s always best to enter the terminating tag once you enter the initial tag. Three rules for HTML are:
1. Opening tags should close
2. Nest tags properly
3. Declare doctype
The <div> tag allocates space and not position. ‘id’ and ‘class’ are key concepts in HTML tags. In HTML code, importance [!] beats specificity. If no specificity is present, then order affects the execution of the code.
In CSS, Fahrner Image Replacement [FIR] is a common technique used to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles.
In design, whether web or other, the lorem ipsum text [www.lipsum.com] can be used to fill up space for viewing purposes.
We were exposed to website creation sites, which offer templates and easier design options than creating a site from scratch [for example Weebly, Jimdo, Square Space].
[Week 13] November 17 – 19, 2008
This week we looked more in depth into CSS. The Box Model was mentioned. Each box has a content area [for example text, an image, etc.] and optional surrounding padding, border, and margin areas. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:
The CSS Box Model
We touched on CSS positioning [relative and absolute positioning]. Relative positioning usually involves the position in relation to its starting position. Absolute positioning is usually the position in relation to the container [borders, margins, etc.] A float pulls an element out of the document flow.
Later down we focused on attention mapping. As an exercise, we looked at the UWI Mona site and chose 7 important areas and create a remake of the site utilizing attention mapping. Here is my draft drawing of my attention mapping for the site which I designed on squarespace.com:
My attention mapping drawing
[Week 14] November 24 – 26, 2008
Ahh…the final week. We covered Content Management Systems [CMS]. A major example is Plone. Through the Plone website we were able to create events, news and upload images. We reviewed guidelines for the final web project as well as looked at grades for past assignments. Then it was goodbye – until next semester that is.
MC25A Class 2008
