Principles and practices in the use of computer software and hardware related to New Media. This is an introductory course in the editing of digital images, web authoring and video editing. Students will learn concepts, terminology, software skills and design principles.
The ubiquitous sans serif font celebrates it's 50th birthday this year. To honor the great typeface director and producer Gary Hustwit created Helvetica, A Documentary Film. It opened to a packed house this week (March 17) at the South by Southwest Film Festival in Austin and will tour around the world. Hustwit brings together renowned designers to talk about their work, the creative process, and the choices behind their use of type. In doing this he delves into the history of graphic design.
Click here to visit the web site of Helvetica: A Documentary Film, by Gary Hustwit. Make sure you look at the clips.
Helvetica is a feature-length independent film about typography, graphic design and global visual culture. It looks at the proliferation of one typeface (which is celebrating its 50th birthday this year) as part of a larger conversation about the way type affects our lives. Helvetica will screen at film festivals, museums, design conferences, and cinemas worldwide, followed by the DVD release this fall.
__________________________________
Helvetica (shown in red) was developed by Max Miedinger for the Haas Type Foundry in 1957 and by the early 1960s became part of the worldwide craze for Swiss design and the International Style. Arial (shown in blue) came into being as desktop computers were developed by designers at Microsoft in 1982. Is one of these fonts more attractive and more legible than the other? Although designers certainly get passionate about the topic (almost always siding with Helvetica) Arial is now a common system font and is often the default for web pages. Perhaps the better choice for on screen viewing is Tahoma (shown in violet) which was designed by Matthew Carter for Microsoft in 1996. It has a larger x-height, more narrow shape and tighter letter spacing making it an attractive on screen font.
Create a title page for your video name or for credits.
From the top line menu, File > New > Title Select the rolling title tool (it looks like a capital T surrounded by arrows pointing up, down, left and right) and create a text area on your page. Drag an area from the edge of the page to the end of the page.
Create a title page as you would create a page with any paint program or word processor.
Click on Title > Rolling Title Options and select whether you want the title to scroll up, down, left or right on your screen.
Click “OK.”
Place the title on the timeline by clicking and dragging it to the location where you want it to appear.
Change the duration of the title’s appearance by dragging the start or end of the clip to the right or left.
Render your work. Click Timeline > Render Work Area or press ENTER on your keyboard.
Sample storyboards from 'Troops' - a short film set in the Star Wars universe by Kevin Rubio & Co. Art Director - Eric Hilleary.
Storyboarding is the process of producing sketches of the shots of your script. The end result looks like comic book of your film (without the speech bubbles).
Why do it?
It helps you think about how your film is going to look. You can work faster on set and as pictures communicate better than words it will allow your camera crew to move their camera and lights, for producers to foresee problems, for the art department to know which parts of the location are going to be in shot and so on. Even the actors will get a feel of what they are going to be shooting!
So I need to be an artist?
Well you can be, but looking at storyboards by Hitchcock or Spielberg you have to admit that they can't draw. There are professional storyboard artists that can give you results that look better than the final film. However its a good idea to bash them out yourself, it allows you to experiment quickly and cheaply, testing out different versions of how a scene may look and play on camera.
Storyboarding is especially useful for complex visual sequences e.g. elaborate shots or special effects sequences. Sometimes a film only uses storyboards for difficult sequences other times the entire film is storyboarded. The Coen Brothers (Fargo, The Big Lebowski) storyboard extensively, allowing them to shoot just the sequences they require for editing, saving both time and money.
Hang on though, pictures are still, movies move.
Ah! You got me there. There are a few tricks storyboard artists have up their sleeves to illustrate movement - whether its movement within the frame (actors walking) or the frame moving itself (camera panning etc.).
Arrows - Suppose the camera is tracking in, following a bad guy's footsteps. Draw in an arrow pointing into shot to show the camera's movement. Now the hero's head is pulled back by one of the bad guy's goons. Use an arrow to show the movement of the head being turned. What about a zoom in? From each corner draw in arrows pointing to the centre, draw in a new smaller frame to show the end of the zoom. Generally I try and use thick white arrows to show camera moves and thin black arrows to show objects moving.
The floating frame - What if you want to show the camera panning to show a cityscape, or following a character as they walk through an airport? There's two options here: 1) Illustrate one shot using more than one storyboard frame showing the key stages of the shot's movement across a number of frames or 2) Draw out the entire scene (e.g.. the horizon of a city) and place a frame on it with an arrow indicating the direction of movement.
Transitions - The storyboard can also include transitions in your film. Write these in the gaps between the frames e.g.. DISSOLVE TO :
Editing is one of the most creative aspects of filmmaking. The film editor, in conjunction with the director, establishes the pace and structure of a film by connecting various shots to create scenes and sequences that form the final movie. The shots the editor chooses and the ways they are combined set the mood, develop the action, create the rhythm, establish the film's time and space, and guide the viewers' attention. For a typical feature-length film, the editor begins with hundreds of thousands of feet of film and must reduce it to less than 10,000 feet.
In the 1920s, Russian filmmaker Lev Kuleshov conducted a series of experiments designed to demonstrate that when two separate shots are projected in succession, the viewer assumes a connection between them. In one experiment, Kuleshov spliced together a series of shots that had been taken in different places and at different times. The shots were of a waiting man, a walking woman, a gate, a staircase and a mansion. Kuleshov's viewers—who interpreted the sequence as a man and a woman meeting at the gate in front of the mansion—had, in essence, inferred a whole narrative on the basis of seeing only portions of it. This effect allows filmmakers to use exteriors and interiors miles apart and imply that they are in the same place, to have people filmed on different days appear to be talking to each other, to have actors seemingly facing dangerous situations, or to imply that what actors are thinking about is represented by a subsequent cutaway image.
The Kuleshov effect is an editing technique that illustrates how the human brain tries to find connections between objects when viewed together. Other editing techniques rely on how the human eye works. For example, there usually must be an appropriate change in distance for a shot not to seem like a mistake or "jump" cut. The direction in which things move across the screen is also an editorial concern. A car that exits the screen on the right is expected in a subsequent shot to reappear on the left—otherwise the car could be perceived as a different car coming from the opposite direction. Scenes featuring characters in opposition to each other (a hero and villain, for example) usually feature one character continually facing one direction with the other character continually facing the other direction. This keeps the two "sides" clear.
Storyboarding
Here is an example of a shot list for the comic strip illustrated below.
1. LS - Exterior of house. Day. 2. LS - Mom to boy. Boy facing right, Mom facing left. "You should call your Grandma." 3. MS - Overhead. Boy staring at phone facing right. Phone on right side of screen. 4. CU - Mom's face. Mom facing left. "You should call your Grandma." 5. ECU - Boy picking up phone. Hand enters from left side of screen. 6. CU - Boy on phone. Phone on left side of screen. Boy's right ear. "Hello, Grandma." 7. CU - Grandma on phone. Grandma facing left. "Why don't you call more often?" 8. CU - Boy staring at phone. Phone on left side of screen. 9. ECU - Phone. Boy's hand on left side. 10. CU - Boy hanging up phone. Phone on left side of screen. Boy looking at phone.
What happens if, instead of the current sequence, the panels are placed in a different order?
Example #1—1, 7, 6, 9, 10, 2 ,3, 4, 5, 8 (Grandma has called the boy from her house and, after hanging up, the boy is told to call his Grandma by his Mom.) Example #2—5, 8,1, 7, 6, 9, 10, 2, 3, 4 (The boy calls Grandma, she admonishes him, the Mom says to call Grandma, and after he doesn't respond, reminds him again.)
Example #3—1, 3, 7, 5, 6, 9,10, 2, 4, 8 (The boy thinks about calling his Grandma, imagines what she would say, calls her, hangs up, and is told to call her by the Mom.)
Montage
Film editing can have its own unique logic as well, functioning in much the same manner as the brain with seemingly jumbled thoughts and images creating their own individual meaning. The groundwork for many of these techniques, later used by Alfred Hitchcock and others, was laid by a group of Soviet filmmakers—most notably Lev Kuleshov, Sergei Eisenstein and Vsevolod Pudovkin—who, in the early 1920s, began to experiment with film style and technique and especially with montage.
Montage, or collision editing, is done by splicing together a rapid sequence of carefully selected shots to evoke a specific emotional or intellectual response. The Russians' premise was that each shot derived meaning from the context in which it was placed. If the context changed, the meaning of the shot and the sequence also changed.
Montage, in the modern sense of the word, often refers to sequences where several shots have been edited together to compress a series of events that happen over time (e.g., sequences of young couples falling in love, scenes with flying calendar pages, etc.). Psycho
In Psycho, Alfred Hitchcock's famous shower scene uses a rapid series of extreme close-ups to build suspense and heighten the sense of panic. Many viewers believe they have seen a very brutal stabbing, even though the knife is never shown piercing the body of the victim.
Potemkin
This sequence in Sergei Eisenstein's 'Potemkin', one of the most famous in film history, recounts the brutal suppression of Russian workers and sympathizers following the death of proto-revolutionary figure Vakulinchuk onboard the Potemkin. Crewmen on the ship had mutinied due to oppressive working conditions and when they arrive at Odessa townspeople came to pay respects for Vakulinchuk and support the workers ... the film itself is based upon the failed 1905 Russian Revolution ... the Odessa sequence is a frightening precursor of government suppression of dissent throughout the 2Oth century, including, but certainly not limited, to Hungary (1956), Czechoslovakia (1968), Soweto (1976), Tiananmen Square (1989) - even Kent State (1970).
The Odessa Steps sequence in Eisenstein's The Battleship Potemkin, is the classic example of montage. In this sequence, the Czar's army is quashing an uprising. Eisenstein uses editing to show the fear of the people, their escalating panic, the tragedy of innocent bystanders as a baby in a carriage careens helplessly down the steps, and the intensifying threat of the soldiers, their guns and artillery.
For more information on narrative structures and post-production, click here and click here for class notes (courtesy and copyright of Prof. Christopher Moore).
JANET MURRAY: "HARBINGERS OF THE HOLODECK"
Murray, Janet. (1997). "Harbingers of the Holodeck", Hamlet on the Holodeck. New York: Free Press, 1997.
The final quarter of the twentieth century marks the beginning of the digital age. Starting in the 1970s, computers have become cheaper, faster, more capacious, and more connected to one another at exponential rates of improvement, merging previously disparate technologies of communication and representation into a single medium. The networked computer acts like a telephone in offering one-to-one real-time communication, like a television in broadcasting moving pictures, like an auditorium in bringing groups together for lectures and discussion, like a library in offering vast amounts of textual information for reference, like a museum in its ordered presentation of visual information, like a billboard, a radio, a gameboard, and even like a manuscript in its revival of scrolling text. All the major representational formats of the previous five thousand years of human history have now been translated into digital form. There is nothing that human beings have created that cannot be represented in this protean environment, from the cave paintings of Lascaux to real-time photographs of Jupiter, from the Dead Sea Scrolls to Shakespeare's First Folio, from walk-through models of Greek temples to Edison's first movies. And the digital domain is assimilating greater powers of representation all the time, as researchers try to build within it a virtual reality that is as deep and rich as reality itself.
The technical and economic cultivation of this fertile new medium of communication has led to several new varieties of narrative entertainment. These new storytelling formats vary from the shoot-'em-up videogame and the virtual dungeons of Internet role-playing games to the postmodern literary hypertext. This wide range of narrative art holds the promise of a new medium of expression that is as varied as the printed book or the moving picture. Yet it would be a mistake to compare the first fruits of a new medium too directly with the accustomed yield of older media. We cannot use the English theater of the Renaissance or the novel of the nineteenth century or even the average Hollywood film or television drama of the 1990s as the standard by which to judge work in a medium that is going through such rapid technical change.
In 1455, Gutenberg invented the printing press-but not the book as we know it. Books printed before 1501 are called incunabula; the word is derived from the Latin for swaddling clothes and is used to indicate that these books are the work of a technology still in its infancy. It took fifty years of experimentation and more to establish such conventions as legible typefaces and proof sheet corrections; page numbering and paragraphing; and title pages, prefaces, and chapter divisions, which together made the published book a coherent means of communication. The garish videogames and tangled Web sites of the current digital environment are part of a similar period of technical evolution, part of a similar struggle for the conventions of coherent communication.'
Similarly, new narrative traditions do not arise out of the blue. A particular technology of communication-the printing press, the movie camera, the radio-may startle us when it first arrives on the scene, but the traditions of storytelling are continuous and feed into one another both in content and in form. The first published books were taken from the manuscript tradition. Malory's Morte darthur, written in manuscript in 1470, drew on prose and poetry versions of the Carnelot legend in both French and English, which in turn drew on centuries of oral storytelling. The elements of the story were all there already: the rise and fall of the hero Arthur, the gallantry of the knights, the love between Guinevere and Lancelot, and the destruction of the Round Table through civil war. But Malory's prose brought these elements together and introduced colloquial dialogue, more consistent plotting, and a pervasive tone of nostalgia. Fifteen years later, William Caxton took Malory's separate tales and bound them together into a single volume, with descriptive chapter headings that lured readers into the story. Only then, after such long episodic narratives were commonplace in publishing, could Cervantes write a contemporary tale like Don Quixote (1605), which marks the begin, ning of the European novel.
We can see the same continuities in the tradition that runs from nineteenth-century novels to contemporary movies. Decades before the invention of the motion picture camera, the prose fiction of the nineteenth century began to experiment with filmic techniques. We can catch glimpses of the coming cinema in Emily Brontë's complex use of flashback, in Dickens' crosscuts between intersecting stories, and in Tolstoy's battlefield panoramas that dissolve into close-up vignettes of a single soldier. Though still bound to the printed page, storytellers were already striving toward juxtapositions that were easier to manage with images than with words.
Now, in the incunabular days of the narrative computer, we can see how twentieth-century novels, films, and plays have been steadily pushing against the boundaries of linear storytelling. We therefore have to start our survey of the harbingers of the holodeck with a look at multiform stories, that is, linear narratives straining against the boundary of predigital media like a two-dimensional picture trying to burst out of its frame.
Click here to read the rest of the article and learn about "mutliform" narrative.
Some of the terminology that a film editor uses includes:
Close-up (CU): A shot showing a detail only (ex., face only or hands only).
Cross-cutting: Cutting back and forth between two or more events or actions that are taking place at the same time but in different places. Cross-cutting is used to build suspense or to show how different pieces of the action are related.
Cut:An abrupt transition from one shot to another.
Cutaways: A cut away from the primary subject to something the filmmaker has decided is equally or more relevant at that time. Often cutaways consist of shots showing the reaction of one character to another. This is often used to compress time in what appears to be a seamless manner.
Dissolve: An overlapping transition between scenes where one image fades out as another fades in. Editors often use this to indicate a change in time and/or location.
Establishing Shot: A shot, usually taken from a distance, which establishes for the viewer where the action is to occur and the spatial relationship of the characters and their setting.
Extreme Close-Up(ECU): A detail of a close-up (eyes or mouth only, etc.).
Fade In: A shot that starts in darkness and gradually lightens to full exposure.
Fade Out: A shot that starts at full exposure and gradually fades to black.
Freeze-Frame: At a chosen point in a scene, a particular frame is printed repeatedly, given the effect of halting or "freezing" the action.
Jump Cut: A cut where two spliced shots do not match in terms of time or place. A jump cut gives the effect that the camera is literally jumping around.
Long Shot (LS): A shot taken at a considerable distance from the subject. A long shot of a person is one in which the entire body is in frame.
Medium Shot (MS): A shot framing a subject at a medium range, usually a shot from the waist up.
Reverse cutting: A technique alternating over-the-shoulder shots showing different characters speaking. This is generally used in conversation scenes.
Sequence Shot: An entire scene or sequence that is one continuous camera shot. There is no editing.
For some of the basic aspects of Adobe Premier 6, there are some excellent tutorial quicktime movies that you can view, for free, on the web. Take a look at these to help remind you of some of the functions that we'll be learning.
Introduction What's New in Premiere 6(03:13) Overview of Premiere(06:14)
Premiere's Interface The Project Window(06:58) The Monitor Window(06:42) The Timeline Window(05:10) Menus(16:35) Palettes(06:09) Setting Preferences(11:06)
Media Acquisition Digital and Analog Compared(05:28) Capturing Digital Video(10:36) Capturing Analog Video(08:08) Batch Capture/Device Control(03:54) Capturing Time-Lapse Video(06:34) Capturing Audio(06:48) Working with Timecode(10:55) Importing Clips and Media(08:27) Saving Projects/Offline Files(05:46)
In this project, you and a team member are asked to take a real, observable phenomenon and document its history and importance. The final product will be a short documentary video on a subject of your choice—human, animal, oddity, or inanimate object. The subject may be very familiar to you, or something rather foreign, which you wish to investigate further. In either case, your piece should attempt to provide new information, or a fresh perspective on a known subject. Some possible choices:
- Family member or important/meaningful individual (historical or inspirational figure, personal mentor, etc.) - Monument, building, or location (natural phenomenon, coulees, Waterton Peace Park, etc.) - Object, product, or brand (everyday tool, scissors, Windex, etc.) - Band, collective, or social group (sports team, club, etc.) - Lifestyle, philosophy, or belief system (hippies, pagans, etc.) - Concept, theory, word (i.s. stupidity)
The first stage involves researching your subject to obtain information and background knowledge, as well as collecting imagery and media elements to integrate into the final production. For this exercise, a large percentage of your visual materials must be derived from still images and existing sources. The remaining can be new filmed material, but the entire piece could be composed entirely from found/archival sources.
You will prepare a script, showing scenes, types of shots, dialogue, voice-overs, captions, stills and graphics. By carefully preparing a storyboard you will more efficiently use your time and reduce the size of each digital video file making your process manageable.
You are also required to have at least one interview with an individual who can provide either information, history, or an opinion on your documentary subject. Other ideas to consider:
- Animated stills and graphics - Titling sequences and credits - Use of audio sound-effects - Soundtrack/background music - Use of silence or empty screen for punctuation - Subtitles or captions
After selecting a topic and having conducted some initial research, you will be asked to draw up a rough storyboard and outline for the project. This information will be presented to the instructor for approval and guidance. Once you have been given the “go-ahead” the remainder of the project will be self-directed. During the process of filming and editing your video, it is likely that some variation from your initial storyboard may occur.
The final film will be approximately 1-3 minutes in length, depending upon the subject and the complexity of the editing process. The format and narrative approach can follow a traditional documentary style (think of nature documentaries and PBS), or it can be much more inventive. The style can mock or lampoon documentaries in a tongue-in-cheek fashion, use humour, satire, or bias. Virtually any subject can be explored (within reason).
The final submission will be a DVD quality *.avi video, rendered at 720x480 resolution. Further formatting details will be addressed in the class sessions.
Deliverables: - 1 Windows *.avi video file, approximately 1-3 minutes in length - Videos must be 720x480 and rendered with Microsoft avi compression - Provide a brief text file outlining each individuals’ contributions to the filming and editing - Include the printed script with your submission - Submit all digital materials on a non-returnable CD or DVD (one per team) - Upload your video to YouTube and imbed link on your blog journal (sign up for a free account at www.youtube.com)
Evaluation will be based upon the following criteria: - Has the team exercised creativity and risk-taking in completing this exercise? - Do the videos follow the technical requirements outlined in the assignment specifications? - Does the project successfully employ cinematographic techniques – edits, pans, etc.? - Has the team used innovative or creative techniques without relying on live footage? - Are audio tracks, effects, and transitions used effectively? - Is there a consistency of style (when appropriate) throughout the video? - Has the team invested an adequate level of energy and engagement to create a compelling composition?
Deadlines: Storyboard for approval: before Tuesday, April 3 Digitizing video: Thursday April 5
ART: PAT STEIR'S 'BRUEGHEL SERIES' By MICHAEL BRENSON Published: December 14, 1984 Click here to view article from New York Times
''THE BRUEGHEL SERIES (A Vanitas of Style)'' is the culmination of Pat Steir's career to this point. Steir has been painting flowers since 1981, she has used panels almost from the beginning and she has consistently painted paintings about painting. This two-part, 80-panel, floor-to ceiling work, at the Brooklyn Museum through Feb. 18, also seems to be a realization of a lifelong ambition, expressed last year to the art critic Frederick Ted Castle, to produce a notebook from which others could learn.
Steir's inspiration was a 17th-century still life by Jan Brueghel the Elder, in Vienna, in which a vase and flowers against a dark background are framed on top by two perched butterflies and on the bottom by a variety of busy insects, including a testy ladybug and a scavenging grasshopper. In a brochure accompanying the exhibition, Steir wrote that for her the Brueghel ''is almost like a visual crossword puzzle with hundreds of connections between artists, styles and times.'' ''Vanitas'' is a term identified with 17th-century Dutch genre painting, in particular with flowers and the transience not only of their beauty but of life.
Using Tables to Design a Page Layout Tutorial (Chapter 2) HTML tables are an excellent solution for designing web page layout, because they are easy to modify and compatible with most browsers. You can use tables to structure the layout of content or to set the display of visual elements (such as images, rollover buttons or paragraphs of text). This tutorial focuses on using tables as a page layout element.
In the first section of the tutorial, you work in Standard view and insert a table in a page. In the latter section, you work in Layout view, where you use layout options to draw a table and table cells to design the layout. Click here to download an Adobe Acrobat PDF file of the tutorial.
HTML Tables When working with html tables in Dreamweaver, here are some points to keep in mind: 1. The table above has 5 rows (horizontal) and 5 columns (vertical) 2. The table itself can be left justified, centered and right justified 3. The table has a width and a height (measured in pixels)
4. Each individual square is called a "table cell" 5. Each table cell: - has a width and a height - the content of each cell can be left justified, centered, right justified and justified horizontally - the content of each cell can be vertically positioned to begin at the top, middle and bottom - each cell can be coloured - cells can be merged together, added or deleted using the Properties Palette
Image Alignment and Image Maps Tutorial (Chapter 3) Working with images in Macromedia Dreamweaver MX is quite easy. You can use various Dreamweaver visual tools to insert an image. This tutorial presents you with image options you can apply once an image is inserted in a page. You will learn about aligning images and text, and setting space around an image. You’ll also learn how to use a single image to link to multiple web pages.
This tutorial is designed for beginning Dreamweaver users. It covers some basic features in Dreamweaver and will help you understand how to align images, as well as how to create an image map. Click here to download an Adobe Acrobat PDF file of the tutorial.
Once you've designed your home page, then you need to chop it into pieces so that it fits into a Dreamweaver html table.
Here are the steps:
1. Display rulers. Use CTRL "r", or go to the VIEW pulldown menu, and select "Rulers."
2. Right click on the rulers, and have it display "pixels" as the measurement.
3. To create rollovers, type in the names of your navigational bar using the Text tool. In this instance, the navigational bar names are "about," "portfolio," "services," and "contact."
4. Place a guide underneath "about", by dragging from the middle of the horizontal ruler and down. This will ensure that each button name lines up with the baseline of the text.
5. Place Guides around each section, so that you break up the image into pieces. Use both the horizontal and vertical guides. To delete a guide, place your cursor on the guide, and drag it back into the ruler.
6. Save the image with guides and layers as Web-Site-Design-2-rollover.psd. Then change the colour of your rollover navigation buttons. In this instance, I have changed them to blue to fit with the colour scheme. Use the Photoshop html colour - for example, the blue colour I've used is "#5092bc."
7. Open your original document. Flatten your layers, so that the text layers merge with the background layer. Using your layers palette, click on the small arrowhead, and choose "Flatten Layers." Now you can use the rectangle marquee selection tool, highlight the area you want to chop into a piece, do CTRL "c" to COPY, then CTRL "n" to create a new Photoshop file, click OK, then CTRL "v" to PASTE the image into the new document. Then go to FILE, SAVE FOR WEB, and save the image as either a jpg or a gif, into a new folder called "images."
Once you've done this process for each piece of your web page, open your file titled "Web-Site-Design-2-rollover.psd," flatten the layers, then save the rollover navigational buttons as jpgs or gifs, as above. Make sure to call them something different, such as "about-but-roll.gif."
8. You should have sectioned your web site into individual pieces. The rollover navigational bar should have two files per button - one with the black text, the second with the coloured blue text. Now you're ready to place these images into Dreamweaver, using an html table.
Adobe shows you how to create beautiful color schemes for every situation. Click here to visit the Kuler web site.
Color Match
Color Match shows you how to match your web site colors and will save you time when choosing a web site color scheme or color code. Click here to visit the site.
Using the sliders, choose a primary color. If you'd like to change a generated color into the primary color, click on it. You will then be given the matching hex (HTML) color code for you to use in your web site or export to photoshop or Illustrator.
Remember, it's important to do this each time you start Dreamweaver! Otherwise you'll mess up your links on your whole web site.
• Go to the SITE pulldown menu, and select NEW SITE. In the dialogue box that appears, make sure the tab on top says "Advanced." • In the field "Site Name," type your name. • In the field "Local Root Folder" click on the icon, and find your Web site folder. Click "Choose." • Click OK, and then DONE. • Make sure your folder and files show up in your FILES floating palette.
There are really only two directions to go in terms of basic design: one using a masthead, the other using individual page images (or non-masthead type).
MASTHEAD TYPE OF WEB SITE
With the masthead-type of web site, you are using a masthead to create a theme, and add visual interest. This masthead remains consistent on each page. All you need to do for each page is to add content, and possibly some tiny images along with your text.
A masthead is simply a collage, a combination of images that set a theme for what your site is about, what you're interested in, and is appealing to your potential employer. For this exercise, I will use my already created collage - "The Dragonfly." Since I wish to make my theme around "art/creativity" I'll use my collage which communicates both, because I'm likely going to apply for an art director's job.
I'm going to create an "index.htm" page, and then a content page, or a "home.htm" page. These two pages will be quite different in layout. Let's do the index.htm page first. I'm simply going to use my collage as the main layout, except that I'll make the dimensions 800x500 pixels.
In order to make it fit, I've centered my dragonfly collage in the middle of my 800x500 canvass area. I filled the background with black. Then I deleted the top and bottom of the dragonfly collage image, and using the rectangular selection tool, selected a horizontal area around the top, and then the bottom, and used the Guassian blur tool at 10 pixels to blur the edges of the top and bottom. This makes it look like the image belongs in the centre of the image, and blurs into the black background.
I realized I wanted to create a rollover for this centre image. Once a visitor comes to the site, and places their cursor over this image, then I wanted the dragonfly collage image to change to black and white (to show that it is active) and add the words "click to enter." This I added in red, with a white glow around the lettering.
Creating the "home.htm" page
Now I need to design a page, using a masthead, employing the dragonfly collage, while also adding a navigation bar, and an area in which to place my content/text.
I'll begin with creating a masthead, using the dragonfly collage. The webpage will be 800x500, and the masthead/collage needs to be 800 pixels x 110wide. Using half the width, I selected half the area with the rectangle selection tool, then used "Paste Into". The dragonfly collage image was pasted into this area, which I then used CTRL T (Transform) and enlarged it until it fit the area. Then I repeated this process for the second half of the 800 pixel wide banner, but this time I focussed on the "slipstream" word. I again enlarged the image until it fit the second half.
In order to make the two halves blend together, I merged the two layers, then selected the area between them, and used the Gaussian blur filter to make them blend together. Here is the effect:
Now I need to add the "logo" or my name. Again, I'm keeping it very simple. I know from experience that keeping your "logo" very simple is the best direction, especially when it comes to corporate communications (such as your resume/portfolio web site), because anything more fancy appears like you're trying to sell yourself too hard. So I made "michael" in regular arial, and "jorgensen" in "arial black". Feel free to use this method yourself. You can change fonts, but keep your first name in a thinner font, and your last name in a thicker font. You could add interesting characters between your first and last name, such as a "|" or a "/" or an underline "_" or a square, a circle, a star, etc. In this case I decided to use my dragonfly icon to separate my first and last name. And I placed it on the top left handside, above the masthead. You could also change the colour of either your first or last name to add visual interest.
With a "Masthead" design, it's likely that you'll add your navigational bar down the left hand side (sometimes the right hand side) of your web page. Keeping the text of the links simple, possibly having a background or shape around them are possibilities. Here, I've opted to keep the minimalism, and just used Times New Roman Italic, to mimic the "slipstream" word. I've given the white text a slight blow "glow". If these were rollovers, I might change the colour to the greyish blue I used in the main text area.
I decided not to put additional html links at the bottom, since the entire page appears within one screen, and no scrolling will be required.
I decided to make the text/content area black, like the rest of the back. This keeps the dramatic effect, as well as an overall visual consistency. The text used was Verdana, 11pt, with extra spacing. I added a small picture of the dragonfly to break up the block of copy, and add visual interest.
Notice how I tied the theme in from my masthead and index page, into the introductory copy. This is important to put your theme into context. I'm probably exaggerating the themes in the copywriting, but I did so, to show you how it could be done.
Finally, I added a copyright notice at the bottom.
Now I can use this "home.htm" page for each page, just changing the content and small images for each.
It's easy to use, simple to comprehend, easy to change - yet has a consistent and hopefully interesting visual interface. Much more could be experimented with...but at least this gives you an idea of how to approach a MASTHEAD TYPE web site. Keep it simple, dramatic, fun, and you'll get people's interest.
Feel free to follow similar steps in the design of your own web site!
POSTSCRIPT
After thinking about the design overnight, I was unsatisfied with it, and came up with some new ideas. I redid the collage completely so that it fit better in the masthead, I made the dragonfly overlap the masthead to add visual interest, and changed the background from black to a gradient using greys. I also made the paragraph begin with a "headline" to lead the reader into the copy.
Instead of user "outer glow" filter on the navigational bar text, I decided to use a "drop shadow," and also applied this to my logo name and picture. Finally, I used 80% black for the bodycopy - this is a trick used by professional graphic designers to make bodycopy more "designy," rather than just using 100% black.
________________________________________
NON-MASTHEAD SITES
The other style of web site you may wish to consider is the non-masthead site. In this instance, the navigational bar is kept very simple, and visual interest is mostly created by adding different images on each page. Take a look at this page from Deric Olsen's web site, promoting his new movie "The Phoenix Agenda." Deric is one of the instructors in New Media, and just completed his Masters in Film Studies at the University of Regina.
Note that his navigational bar is placed underneath the main window. He's used graphic devices to suggest "hi-tech/military/surveillance." Especially take note of what he's done with his rollover buttons - square brackets appear and the rollover text turns blue - a very cool effect, consistent with his theme.
Instead of using html text, he decided to design the entire page using Photoshop - the text is part of the image. While this takes up more downloading time because it is an image, most people use high speed internet, so it isn't a real problem. Also, the window area is not too large, and is kept consistently the same size throughout the site. This is an option you may wish to consider.
Notice the elegant simplicity of the Karacters Design Group web site. No masthead is employed - instead, an animated image changes every few seconds on the right hand side. The text (which is a pixel font) is kept to a minimum, and appears underneath the simple navigational bar.
In terms of using images on your web sites, here are some suggestions: Keep a consistent theme, such as: - black and white images of Lethbridge and/or the University - computer programming related images if you're a programmer - images of volleyball or skiing, if this is one of your passions - if you're into art, then use some of your favourite images by other artists. The options are nearly endless.
In my old Jorgensen Advertising web site, I used images and words combined. By taking a key phrase and laying it over top of a related image, I was able to emphasize my intended message. On the right hand side I used html text for the copywriting.
While you're studying web sites, take a look at these two main approaches and find one that will work for your target audience(s) and with your thematic approach.
Click here to view a page with some basic Dreamweaver Instructions for designing your web site.
The topics include: • Creating your Web Site Folder • How do I define my LOCAL ROOT FOLDER? • What palettes should I have selected once I open Dreamweaver? • Properties Palette • How to make a table • What size should my copy be? • How do I create a rollover image for my navigational bar? • How do I insert an image? • How do I add a colour to my table cell? • How do I add colour to the background of my Web page? • How do I create Portfolio pages? • How do I FTP my files to the World Wide Web?
Description: This project involves the design and execution of a web site that includes interactive elements. You will develop a creative strategy; design layout templates; choose graphics; write copy; produce the site using Macromedia Dreamweaver MX and Photoshop; and upload your site to the World Wide Web.
The ‘portfolio’ web site should include (5 pages total):
Home Page (page 1) • Introduce yourself • Explain the purpose and objectives of your site • Create a ‘brand’ identity through your choice of visual elements • Highlight your key selling features • Give a sense of your personality and style • Give a statement about your professional goals
Education (page 2) • List and describe your education for potential employers. Include the areas studied at the University of Lethbridge, or at other post-secondary education facilities. Mention any awards, special affiliations or student rep positions. • Offer a downloadable/printable file of your Resume or Curriculum Vitae as an Adobe Acrobat PDF file to potential employers.
Experience (page 3) • Describe in one or two paragraphs your work experience and education for potential employers. Include volunteer work, paid employment, contract work and school-related work. Include the areas studied at BCIT, or at other post-secondary education facilities. Mention any awards, special affiliations or student rep positions. Give a statement about your professional goals and your interest in marketing communications. This is your opportunity to feature your best qualifications and make yourself shine! • Offer a downloadable/printable file of your Resume or Curriculum Vitae as an Adobe Acrobat PDF file to employers.
Portfolio (page 4) • Show /demonstrate your knowledge and experience. • Provide examples of work that you have done during NMED2020. This includes: • Photoshop Project 1 & 2, • Leave space for Adobe Premiere video editing project • Any additional work you may have created • Provide images of your work from Projects 1 & 2 and describe what it involved (creative strategy, research, design and production of artwork). • You may offer a downloadable Adobe Acrobat file of one or more of your projects/resume for potential employers to look at your work.
Contact Info (page 5) • Provide contact information such as address, phone number and e-mail link. • OPTIONAL: You may wish to offer personal information about yourself, such as outside interests, travel photos, family, friends, partners - anything that would help you to create a relationship with the potential employer. Pictures from your photo album may be scanned and provided (make sure they’re in focus and good quality photos)
Site Counter • Insert a site counter at the bottom of your home page. This is available free from http://www.sitemeter.com/. Follow the instructions on how to add it to your site. This should be done once you've completed your site and uploaded it to the World Wide Wide (W drive).
Review the Marking Sheet for details on how you will be evaluated. Also see the Creative Strategy handout for instructions.
Click here to view previous semester's web site projects.
• The internet isn’t located in any single place, isn’t based on any central computer, and isn’t overseen by any network manager. • Developed in the 1960s as an experiment by the U.S. Department of Defense as a way to communicate - using TCP/IP. To ensure the internet could not be interrupted by enemy attack, TCP/IP was designed to create a decentralized system.
• Ways to communicate on the net: • E-mail • FTP (file transport protocol) • Newsgroup • Telnet (programs) • WAIS (searches) • World Wide Web (multimedia pages, hyperlinks and based on html)
• World Wide Web invented in 1990 by CERN, group of European scientists • 1993 - Mosaic - first graphical browser • 1994 Netscape Navigator 1.0 (Internet Explorer is now at version 7.0) • Development is explosive!
Constant Change: Imagine a publishing medium where nothing is ever final, where designs can be changed at will and new information can be published within minutes of hearing it, where ideas can be tested and discarded-or built upon-as soon as you test your audience’s reaction to them, and to which readers can return time and time again and find new information at each visit. That’s the world of the web. Understanding its fast pace is an important key to success in the medium.
Definitions: • Http: hypertext transfer protocol allows hyperlinks to another page anywhere in the world. • HTML: hypertext mark up language - standardized language or format used by browsers
Nonlinear Design: • The web is nonlinear: It’s about letting the visitor choose his or her own path through the information • In this context, you’ve got to make each and every page well designed, attractive, easy to read and have relevant content
Each page important: • Every page should entice the visitor to explore your site further and make it easy to do so • It must introduce an idiosyncratic identity among the dozens of sites the visitors may view in the space of a few minutes.
Page layout is uncontrollable: • Page layout and design isn’t entirely controllable by designer • Defaults are different for each user – text size, font, screen resolution, screen brightness/contrast • Different browsers make page appear differently – Internet Explorer, Firefox, Opera, Safari • Different versions of browsers handle code differently • Platforms affect appearance - PC or Apple Macintosh • Fonts used on web page may not be installed on viewer’s computer so may not show as intended • Good web design includes the art of creating pages that can be viewed successfully under a number of different conditions. • Avoid using frames • Keep it simple
Capabilities always growing: • World Wide Web Consortium (W3C): A group, composed of volunteers from Internet software companies, academics and other interested parties, that oversees the development of Web technologies. Formed in the fall of 1995. • HTML’s capabilities are changing all the time - HTML 2.0 - HTML 4.01. • Designers must constantly educate themselves and designs must be updated regularly.
Download Time Sets the Standard: • The Web is capable of all the multimedia associated with CD-ROM: immersive 3D graphics, animation, digital video. • As band-width improves and sites become media-rich, producing a web site could demand all the skills of producing a film, requiring professional video and sound production - even actors
• One of the web designer’s greatest challenges is to execute ideas using the smallest possible file sizes. • If users have to wait more than 5-10 seconds, they’re gone. • Good web design means good content, well organized, and speed over everything else.
Process of Web Design • Quick changes in technology may quickly put some tasks handled by production engineers into the hands of web designers
Managing the Project: • Producer: the job of pulling together the ideas and expertise of individual team members into a coherent plan • Account Manager: represents the client’s wishes to the team and communicates the team’s ideas and progress back to the client
Information Architecture: • Planning of content • Functions: online product sales or community meeting areas • Product information, etc • Information Architect: builds a structure for the site that holds the information and offers functionality described in creative brief. • Site architecture requires very right-brain/left-brain integration. Organize information and realize how it will work onscreen. • Content involves the services of a copywriter and editor. • Information Architecture should be driven by human behaviour. You’ve got to make the system fit the user, not the other way around. Focus groups, user testing, and past experience with how users have reacted to earlier designs should be your guide. • How is content organized and what is the hyperlink structure? • Even more complex when animation and interactivity is involved: depends on the collaboration of a whole team of talents, including production engineers • The process of information architecture should result in a document that defines the structure: a storyboard or a branching diagram
Page Architecture and Interface Design: • Designers decide how the elements of each page will relate to one another and how they interact as a whole • Create a navigation system • Graphic Design: defines the “look and feel” for the information, directing the work of illustrators and HTML coders to create a logical, attractive and appropriate interface design.
Programming and Scripting: • Beyond simple tools for interactivity (hyperlinks, e-mail) a programmer is required to develop things such as collecting data from forms or returning automated responses to a user’s input or actions • Some designers know basic HTML, but specialized programmers are required for interactive interfaces, hooking in back-end databases, and creating custom behaviour using programming languages such as Java • The link between programming and design has become even tighter (Flash animated sites)
Production: • WYSIWYG HTML Editors (Dreamweaver) • Production engineer’s responsibilities include: Setting up and saving the files in an appropriate directory structure in the server HTML coding, or verifying and fine-tuning HTML files supplied by designers • Preparing graphics and other media for low-bandwidth transmission • Writing any necessary scripts • Creating and testing the hyperlinks • Making sure the code works in target browsers
Publishing: • The engineer copies the final files into the appropriate directories on an HTTP server (using an FTP program). • Most web teams use a staging server on which final files are posted and links, scripts and other functions are tested before the site goes “live.”
Three Main Categories of Web Sites: • Information publishing: onlnine newsmagazines or information sites such as www.nationalgeographic.com or www.uleth.ca. There is much up and down scrolling on these sites, and content is put into 'bite-sized' chunks with images to break the monotony of text • Brochureware (brochure + software): Web site appears all on one screen - no scrolling is required. Often used for design companies. • E-commerce (a combination of information publishing and brochureware + method of purchasing online): www.amazon.com for example • Digital Storytelling (an experimental and artistic approach to web site design): see Memory's Voices
A bitmap font is one that stores each glyph as an array of pixels (that is, a bitmap). It is less commonly known as a raster font. Bitmapped fonts are particularly useful for small type in digital media when used as a gif or jpg image on web sites or in flash animation, because they do not require rastering for the curves as with standard typefaces. Since the characters are made up of square pixels, the typefaces do not look blurry at small sizes and remain sharp appearing.
The Point System Points • 72 points (pts.) to the inch in height, 36pts = 1/2", 18 pts = 1/4” • used for measuring type size • refers to the height of the capital letters
General Rules • do not use more than 2 typefaces in an ad or document • do not use more than 1 headline face or body copy face • the types you use should be either very similar (harmony) or very dissimilar (contrast) • for readability, headlines are often sans-serif and body text is serif, avoid all caps, and use even spacing • the bigger the type face, the wider the column • 39 characters of lowercase letters, break long portions of text into columns • flush left is usually easier to read because letter spacing is more even • fully justified is often used in books and newspapers • flush right is usually used for small portions of text • never ad extra kerning to copy - only use kerning on short headlines or subheadlines of one or two words • avoid punctuation in headlines • avoid capitalizing each word in headlines - only capitalize the first word or proper names • using all lower case on headlines and subheads associates the company or product with creativity • be careful with word emphasis and end of lines • the negative letter space is important to appearance and readability
Orphans and Widows: Finetuning Do you leave readers dangling? Words left hanging leave readers in the dark. In desktop publishing, widows and orphans are those words or short phrases at the end or beginning of paragraphs that are left to sit alone at the top or bottom of a column — separated from the rest of the paragraph. Click here to read the rest of the article by Jacci Howard Bear from About.com.
Finetuning • reduce kerning up to -2 pts using the tracking option in a paragraph • reduce width of text by up to 90% - preferably as little as possible
.jpg)
