New Media - Assignments

Art for New Media - Assignments and Project Guidelines | Choice Projects

Ongoing Assignments:

Museum Review (download pdf): Due December 7. Ticket, receipt or entrance sticker MUST accompany reflection handout for full credit. Please see me for details on free museum admission days in San Diego.
Sketchbook: Daily prompts with due dates throughout the year (see calendar for dates).

Projects:

Dreamweaver "Practice Gallery" Website:

Your website must contain the following:
(make sure to check the Gallery Page for some great student work samples!)

• an index page with “header” artwork (something that introduces us to your site such as "Joe's Gallery Website")
you will create this header artwork with a design/color scheme in mind, use Photoshop to create this image. Suggested width - 960px

• nav bar using CSS (including state changes/hover color change).
Links in nav should be: Home, Dreamweaver, Photoshop

• links to Photoshop and Dreamweaver practice work on home page which are rollover images
• Dreamweaver Practice Work:color study, and a page using CSS or Tables for layout

Details for "CSS / Tables Page" - about a topic which interests you
include the following: at least 3 facts about your topic; an external link to a related website; at least 2 images;
use CSS alignment options to modify the layout of your page and photographs (float left, float right) or choose alignment options within tables (properties inspector > html > cell align > horiz or vert (lower section of prop. inspector)

* see Dreamweaver Tutorials page to find info about "floatleft" and "floatright" style sheets

• all Photoshop Practice Work:(please label them on webpage!)
veggieman; montage; shaded ball, 5 elements and 5 principles examples
• make sure you have a home link!
• all image files sized correctly for the web (72 ppi) -- hint... check your photoshop work to make sure it's the right size!
• use a cohesive design scheme (color, layout and typography, style)

** Remember to have ALL files for this website in your practice gallery folder!

here some examples:
Gallery Sample 1
Gallery Sample 2
Gallery Sample 3
Gallery Sample 4
Gallery Sample 5 (this student was very advanced in photoshop - so he had different practice files)

ONLINE ART GALLERY | rubric for OAG (pdf)

For this project, you will create a web gallery for a master artist. The online gallery will include background information about the artist, samples of their work as well as a critic's review (by you!) which evaluates specific pieces of the artist's work.

The first step for this project is to do RESEARCH! Find an artist who's work interests you. **You must have your artist choice approved by the teacher before you move on.

When you have decided upon an artist, begin doing research on that artist which needs to include information about not only their art, but their artistic career, style or artistic movement, background information and any other pertinent information such as factors in their environment which may have affected their art.

Your web gallery must have a minimum of the following pages:

a "splash page" as an entryway to the site (you know, those pages that say "enter"), must have an animated element
home page - introduces the artist (visually) and the navigation of your site - could include a quote, artwork, or little background info that will interest possible viewer
navigation bar on each page - make sure that you include ALL LINKS to pages. Size the navigation bar properly so that the viewer does not have to scroll to see all of your links (for a horizontal nav bar, a good size would be anywhere from 700 - 1024 pixels (800 is a good size to avoid having to scroll horizontally), vertical would be 400-600 pixels. Should be created using Photoshop and Fireworks (image-based).
biography - background information about the artist's life and career, written in your own words!
contribution to art history/significance of work. What movement were they part of? How did their style or artistic ideas impact the art world?q
critique (review) of artist's work (by you!) - evaluate one work of art by your artist. You need to have 2 parts to your review:
1 - Formal Review - discuss elements/principles (ex: color, value, balance etc), relation to artistic movement, style etc.of piece
2 - Informal Review - tell us why you like the piece, what is interesting about it to you?
gallery showing samples of their work. You should have a minimum of 5 images. Images in gallery should use a rollover of some kind or be thumbnails which can be clicked on for larger image. Can create this using a remote rollover in Fireworks.
use of style sheets (CSS) - externally linked

Your website should be created in an aesthetically pleasing manner -- color choices, use of typography and overall layout should compliment or reflect the style of your artist. In addition, you must create consistency and usability in your website which can be achieved by designing a well-thought out navigation system. Before you begin designing, it is imperative that you plan out your site or you may have to backstep and redo portions of your project (ie. this will SAVE you time in the long run!). You must use Dreamweaver and Photoshop/Fireworks to create your pages. As with any project in this class, all of the content of the website - aside from samples of the artist's work* - must be created by you.

You will be graded on how well you represent your artist, the creation of a navigation system and consistent design, and the creation of a fully functional and organized website with working links and images. In addition, you will be asked to post this project to the web and present it to the class. As always, plagiarism is not acceptable. Use of another's words will be an automatic failure of the project.
You may use artwork images but do not copy another persons design.

TYPOGRAPHY

1 - Read through and finish worksheet based upon the following website: http://www.papress.com/thinkingwithtype/letter/anatomy.htm

2 - Word design project: samples • more student samples

• Create a photoshop file that is 5" x 5" square at 120 ppi
• Choose four words from the list below (if you do not know the meaning of the word, look it up!).
• In four different compositions, arrange each word to express its meaning (one word per composition). Use Futura (regular, bold, extra bold etc.) ONLY for this project (that means no lines, shapes or other elements). You may vary the size, spacing, placement, and orientation of the letters. You may repeat, omit, slice, block, or overlap words or letters. Do NOT use drop shadows or horizontal/vertical scaling (distortion).
Consider the entire space of the square. Do not place the word/letters in the middle of the page without a design reason!
List of words:
compression
transition
contraction
addition
division
subtraction
disruption
repetition
elimination
migration
expansion
celebration
separation

* flatten and save as jpg to turn in

3 - Typography Grid Layout* | samples | grid information
A typographic grid organizes text and images across the pages of a document. A grid can consist of a single column framed by margins, or it may have multiple columns. When you design a grid, you typically begin with vertical divisions (columns), and then add horizontal divisions.

• Create a new document in Photoshop. Your page size is 8 x 8 inches at 130ppi. Create a grid with 1/4-inch margins all around and four vertical columns, 1/4-inch gutters. When your document appears on screen, use guidelines to divide the grid again horizontally. Arrange the text below on the grid. Create two different designs on two different pages, all using the same underlying grid. You may use any typeface, but are limited to 2 per grid layout. Your body copy may not be bigger than 10 point type at least one of them. Think about type heirarchy as you design (what is the most important information?). Get the text for your layouts here

ART CONCEPT WEBSITE

"The mediocre teacher tells. The good teacher explains. The superior teacher demonstrates. The great teacher inspires."
~William Arthur Ward

For this project, you will become the teacher. You will create a website that teaches about an art concept and/or digital art concept that you have chosen (such as form, line, shape, value, texture, color, space, rhythm, movement, balance, proportion, variety, emphasis, harmony, typography, resolution, file formats, color systems, specific digital art techniques, etc.). You must create all your own aesthetically-pleasing graphical layout, navigation, rollovers, animations, etc. in ImageReady and Dreamweaver. You will publish this website lesson on the world wide web and present it to the class, learning from and critiquing each other's sites.

The best thing to do would be to create your own works of art to illustrate your lesson, but it might also be appropriate to use famous works of art to illustrate your lesson, if you are sure you follow Copyright Law.

Note: Make sure to use what you learned from the last project! For example, make sure you research your topic and plan your website before you start the layout in ImageReady. As you know, it's very hard to go back and edit your layout or add "buttons" after you've started working on your actual pages.

Your website must have a minimum of the following:

Design process - as usual, you must keep visial aesthetic in mind and participate in preliminary design and brainstorming activities.
Splash page - entryway to the site that grabs the viewers attention
Navigation bar or system with rollovers created in ImageReady - each page should have some sort of navigation...
An animation, created in ImageReady, demonstrating your concept (or a part of your concept)
As many pages as needed to fully explain your concept
"Concept in Use" page - which shows and explains your concept in use by a fine artist. Remember, text must be written by you!
Bibliography page. This may be a links page which redirects the viewer to the sites you used as your resources.

Examples of wonderful professional Art Concept Lesson Website Projects:

• Color in Motion (professional)

Possible Ideas for Projects

POETRY ANIMATION PROJECT

For this assignment, you will create an animation in Flash based upon a poem or song lyric of your choice (as always, must be school-appropriate). This animation should show the meaning or emotion from the poem through the use of visual imagery and the elements and principles of art.

A good place to look for poetry is on the web... here are some examples of sites that will help you get started:
• Poetry Classics
• Famous Poets

This is your first Flash animation, so concentrate on trying to use the new techniques you've learned -- in an artistic way. Concentrate your efforts on showing the poem in an aesthetically-pleasing animation, with appropriate colors, fonts, photographs, graphics, etc. Be wary of the following pitfall: many students who first work in Flash tend to make silly, "cartoony" animations. Those are okay for practice work, but not okay for this project. This poetry animation needs to be visually elegant and aesthetically-pleasing!

Make sure your text is a design element... not an afterthought that you have just stuck there.
Planning will help you in your design, so think about what you are doing before diving in!

Be sure you follow Copyright Law with any graphics, photographs, and music you choose to use in your animation. Be sure to also display both the author of the poem/song's name and your name as the creator of the animation.

Other requirements:
• may use scenes in your movie (a good way to organize and keep your file managable), be careful using this with music
• use symbols and motion tweens -- in addition to any of the other techniques we have learned in class
• include the author's and artist's name (you!) -- can be at beginning (as an intro) or end of movie
• make sure it illustrates the poem/lyric in a visually and aesthetically pleasing way
• has dynamic but readable text (* for example, at 24 frames per second, the text will be gone fast if it's only up for 12 frames - half a second!)
• at least 1000 frames long (at 24 frames per second, this is about 45 seconds)

Professional examples of poetry animation:
• http://shelsilverstein.com/html/books.html

and of course, check out the examples from last year in the gallery!

BANNER AD SERIES (3)

A popular form of advertising on the web today is the use of banner ads - they are everywhere on the web. For this assignment, you will create a series of 3 banner ads for a company created by you. These 3 ads must go together in a SERIES or set - which means that they need to relate to each other both visually and thematically. Think about using consistent typography, style and color scheme. They should be uniquely different, but also relate to one another. * please note - make each ad its own separate flash file!

Before you begin, read the following articles which discuss the guidelines for banner ad design and some steps to take before you start.

General notes about banner ad design:
http://www.webmonkey.com/webmonkey/99/05/index3a_page3.html?tw=design

Internet Advertising Bureau - Banner Ad Guidelines/Sizes:
size guidelines

Some sample Banner Ads:
the Banner Report

After you have read these articles, pick a size for your ads. There are many sizes, but these are some of the most common: (IMU = Interactive Marketing Unit - same as pixels). Change the size of your stage BEFORE you design each one.

300 x 250 IMU - (Medium Rectangle)
250 x 250 IMU - (Square)
240 x 400 IMU - (Vertical Rectangle)
336 x 280 IMU - (Large Rectangle)
468 x 60 IMU - (Full Banner -Standard)
728 x 90 IMU - (Leaderboard)

Skyscrapers
160 x 600 IMU - (Wide Skyscraper)
120 x 600 IMU - (Skyscraper)

Note: Make sure to use what you learned from the last project! For example, make sure you think about the overall timing and readability of the ads. As you know, it's very hard to go back and change this once you have begun your project. Also, think about whether you want your ad to stop at the end or loop.

Requirements:

• Effectively and artistically advertise your "company" (or product). Your message must be clear. Answer the big questions: Who are you? What are you selling? Why should the consumer buy your product? Where can they get access to it?
• Create an animated logo for your company > here are some samples
• Use a headline on each. Can be the same headline on all ads, or related headlines.
• Relate 3 ads in a series - in aesthetic and content. Be consistent in type, color, design and style.
• Use flash to create your animated logo. Make it a movie clip symbol so that you can place and size it in each ad.
• Use flash to animate your advertisement. Go beyond a simple animated element in your ad... think about each of these being a "mini movie". You should be using some more advanced flash techniques, animation and drawing.
• they should not be longer than about 10 to 15 seconds each (about 120 frames or so at 12fps) - think about capturing the attention of your viewer quickly and with impact!
• Use typography within your ad's composition in an artistic way.
• As usual, use the elements and principles of art in your design. It should be professional looking and aesthetically pleasing.

TOPICAL WEBSITE USING (any skills/programs you have used in this class!)

For this assignment, you will be creating an entire website using the skills and programs that you have used in this class. The subject for this website is... anything that interests you! (*must be school-appropriate, of course). It can be anything such as basketball, surfing, travel, a country that you've been to, fashion, an artist, your favorite candy (m n m's), a music group, the history ice cream cones, global warming and how you can help slow it down (or any other cause you believe in)... whatever! You will need to do some research on this topic so that you are accurate and informed in your website.

The website should have the following:

• preliminary work including a proposal, research, font map and color scheme that will be approved by teacher before you begin!
• learn something NEW! try out tutorials using flash or other programs from the course of the year.
• use of a color scheme - go to color scheme designer if you are having trouble with this
• use this TEMPLATE (or create your own) - to show your basic design scheme (color and type)
• a splash page with some sort of animation (created in flash or another method if you know it) that will lead us in to your site or introduce us (maybe in a fun or creative way) to your topic
• a navigation bar - can have animated buttons, or something totally unique
• at least 4 pages (including home page), with background information and images that will show the viewer all they need to know about your topic
• a design aesthetic that is consistent throughout. This DOES NOT mean that every page will be the exact same aside from content. It DOES mean that there should be a common overall look or design - utilizing a color scheme, fonts and elements that tie it all together.
• some additional flash (flashlets!) somewhere in your site to add some interest.
Have some fun with this! There is a lot of flexibility in this project.

Some good free (and copyright free) font website -

Dafont

Font Squirrel

check out some examples of sites >>

Professional examples:

• color in motion - all about color. excellent concept and flash animation
• mavericks - all about the big wave surf contest
• we choose the moon - about Apollo voyage
• tin man -
• mauriciostudio - portfolio website
• patagonia - tin shed -

AFNM student examples:

• Waterpolo
• History of Gaming
• Scuba Diving
• Australia - all about Australia
• Captiva - information about this Florida island
• Ramen - noodles
• Robots - intro animation for a site about robots
• Rainforests

DRAGGABLE OBJECTS MINI PROJECT
Have fun with this project!

Here is a sample file > .swf | .fla
(download the .fla file to see actionscipt etc.)

Here are some more great examples > click here

You will be creating a sort of interactive/digital Mr. Potato Head... a character with interchangable hats, shoes, clothes, glasses, eyes... or whatever you want. Your character and "features" can be anything.

Requirements:
• Create a character (put him/her/it on it's own layer... and lock the layer. Then you can use as a template for the outfits/features you will build so they are the correct size)
• Create an environment... where is your character? You can draw a scene for the character to live in (again, on it's own layer).
• Create the "features", gear or outfits that you would like to have your character wear. They should each be their own symbol and be able to get dragged over the to the character. Use the pen tool to create your features or outfits. Make sure to create a closed shape if you want to add color! Should have a minimum of 6 draggable features/gear/outfits. You should have at least 2 of the "features" with some sort of moving parts/animation.
• Create a color change option (or background change) within your file. Should have interactivity created with buttons and actionscript.
• Use layers and/or modify>arrange to determine the stacking order of your features
• Think of creative ways to use your flash knowledge, such as nested movie clips, tweens and frame-by-frame animation. You will be graded on creativity with flash and with drawing in flash.
• Gain more understanding of actionscript. Use the following instructions and code to create the "draggable" quality for each of your features and color change option

• Also, use the actionscript and instructions to create a color change in your character OR one of the objects. Get the script and instructions here > action script