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
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
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
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"
• 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:
5 (this student was very advanced in photoshop - so he had different
ART GALLERY | rubric
for OAG (pdf)
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.
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.
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.
web gallery must have a minimum of the following pages:
"splash page" as an entryway to the site
(you know, those pages that say "enter"), must have an animated
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).
- background information about the artist's life and career, written
in your own words!
to art history/significance of work. What movement were they part of?
How did their style or artistic ideas impact the art world?q
(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
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.
of style sheets (CSS) - externally linked
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.
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.
1 - Read through and finish worksheet based upon the
following website: http://www.papress.com/thinkingwithtype/letter/anatomy.htm
2 - Word design project:
• more student samples
Create a photoshop file that is 5" x 5" square at 120 ppi
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!
flatten and save as jpg to turn in
- Typography Grid Layout* | samples
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
"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
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.
website must have a minimum of the following:
process - as usual, you must keep visial aesthetic in mind and participate
in preliminary design and brainstorming activities.
page - entryway to the site that grabs the viewers attention
bar or system with rollovers created in ImageReady - each page should
have some sort of navigation...
animation, created in ImageReady, demonstrating your concept
(or a part of your concept)
many pages as needed to fully explain your concept
in Use" page - which shows and explains your concept in use by
a fine artist. Remember, text must be written by you!
page. This may be a links page which redirects the viewer to the sites
you used as your resources.
of wonderful professional Art Concept Lesson Website Projects:
Color in Motion (professional)
Ideas for Projects
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.
good place to look for poetry is on the web... here are some examples
of sites that will help you get started:
• Poetry Classics
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!
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.
• 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
• 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
Professional examples of poetry animation:
of course, check out the examples from last year in the gallery!
AD SERIES (3)
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!
you begin, read the following articles which discuss the guidelines for
banner ad design and some steps to take before you start.
notes about banner ad design:
Advertising Bureau - Banner Ad Guidelines/Sizes:
sample Banner Ads:
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.
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)
160 x 600 IMU - (Wide Skyscraper)
120 x 600 IMU - (Skyscraper)
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.
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
WEBSITE USING (any skills/programs you have used in this class!)
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.
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
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 fun with this! There is a lot of flexibility in this project.
Some good free (and copyright free) font website -
out some examples of sites >>
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 -
- portfolio website
- tin shed -
• Scuba Diving
- all about Australia
- information about this Florida island
• Ramen - noodles
• Robots - intro
animation for a site about robots
OBJECTS MINI PROJECT
Have fun with this project!
is a sample file > .swf
(download the .fla file to see actionscipt etc.)
Here are some more great examples > click
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.
• 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