Class 12: Final Website

Tuesday, July 12th is your final

This and the following lab will be dedicated to putting finishing touches on your web sites.

Your sites will be graded on:

Navigation: is is intuitive? well structured? continuous? are your links functional?
Styles: Did you use CSS to structure or style your site? Do your colors show off your work well? Is your type legible? Does your design seem intentional, consistent, and well thought out?
Assignments: are they all there?

Having all of your assignments present, with a functional navigation system and no CSS will amount to a grade of 75%, as this should require no effort past what we have been doing all semester.
100% will be reserved for those with everything on the site present and functional, as well as a comprehensive, consistent use of CSS for typography (10%), color (10%), and structure (5%).

 

CSS tips and tricks:

Typography:
web safe:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
linking a font:
http://www.w3schools.com/css/css3_fonts.asp

Color:
about:
http://www.w3schools.com/css/css_colors.asp
background color:
http://www.w3schools.com/css/css_background.asp
text color:
http://www.w3schools.com/css/css_text.asp

Background images:
http://www.w3schools.com/css/css_background.asp

Text Alignment:
This will align the text in relation to whatever container it is in
http://www.w3schools.com/cssref/pr_text_text-align.asp
Div – Box Structure:
http://www.w3schools.com/css/css_boxmodel.aspPositioning:
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/css_float.asp

Class 10: User Experience and Non-linear Narrative

Non-linear (interactive) Narrative

Create a web-based non-linear story. For this assignment, you can use photography, illustration, montage, GIFs, or even Movies, with or without text to create a narrative with multiple story paths which can be navigated using hyperlinks. 90% of the imagery and all of the text used must be your own original content.

Keep in Mind the Gestalt Design Principles:

Similarity
Continuation
Closure
Proximity
Figure/Ground
Symmetry and order

David Norman’s UX Design Principles:

• Visibility- can is see it?
• Feedback – what is it doing now?
• Affordance – how do I use it?
• Mapping – where am 1 and where can I go?
• Constraint – why can’t I do that?
• Consistency – I think I have seen this before?

As well as the elements of art and the principles of design

And the use of perspective and suture.

Due Tuesday, July 5th:

Create a site map for your narrative in Illustrator.
Your story must have at least three endings, and multiple ways to get to each ending.

Save this as an image to your images folder, and post it to your site.

Screen Shot 2016-04-14 at 9.59.10 PM

Due Thursday, July 7th

Develop imagery for your narrative, and implement the interactive aspect of the narrative using HTML.

Create a new folder in medp150 titled ‘narrative.’

Create a new index.html in this folder. This page should hold the beginning of your narrative. Link to this page from your main index.html
<a href=”narrative/index.html”>Narrative Title</a>
and back to you main site from the narrative’s index
<a href=”../index.html”>Home</a>

You can create link hotspots on images this way (this works with GIFS too):

http://www.onextrapixel.com/2009/04/30/how-to-create-multiple-links-on-a-single-image-with-image-map/

If desired, you can embed video (taken yourselves) this way:

http://www.w3schools.com/html/html5_video.asp

And audio (clip will end when user navigates away from page):

http://www.w3schools.com/html/html5_audio.asp

 

Student Examples:
http://fmundergrad.hunter.cuny.edu/~sakutukwar/medp150/narrative/index.html
http://fmundergrad.hunter.cuny.edu/~ellahih/medp150/forwards.html
http://fmundergrad.hunter.cuny.edu/~silvag/medp150/park.html
http://fmundergrad.hunter.cuny.edu/~zhangl/medp150/narrative.html

Porpentine:
http://slimedaughter.com/games/twine/girlwaste/play.html
http://slimedaughter.com/games/twine/frog/
http://slimedaughter.com/games/twine/howlingdogs/

Save

Save

Save

Save

Class 8: Animation

Animation Three Ways: Due Thursday June 30th

Create three animated gifs using methods of your choice, as described in class.

Class Handout
Video Animation in Photoshop

Each gif should be posted to your website and the files you used to create the animations will be collected in class (Photoshop or Illustrator, with layers/frames intact).

For each animation, write 50 words describing your process: What form of animation is it? Straight ahead? Pose to Pose? Describe your choices in color, the elements of art involved, your choice of typography (if included), etc. Take consideration of how your animation loops: does it loop? Does it do so smoothly? If not, was this intentional? Why? If it doesn’t loop, why did you choose to do this?

 

Extras:

Image file formats explained:
http://1stwebdesigner.com/image-file-types/

Animation Principles:

(Full youtube playlist)

Class 7: Icons, Logos, Infographics, and Data Visualization

Logo Assignment: Due June 28th

In class, we have discussed the cultural, expressive and compositional uses of color, iconography, and typography. In the lecture that introduced the elements of art, the principals of design, and the gestalt design principals, we also discussed how these concepts are important for developing visual design.

Based on this, in Illustrator, create three separate logos representing different aspects of yourself (you as a film-maker, you as a soccer player, you as as a cat-lover, etc.). Each logo should not only be visually distinctive but also express the unique features of the aspect of yourself that you have chosen. The logos should be visually legible at a range of sizes i.e. look readable at both a small business card scale and at a large billboard scale.
logo04
Put these three logos on your website, each with a 100 word description using the ideas and terminology discussed in class.
LogoDesignProcess
Your images should be entirely vector: No imported images or text.*
vector-raster
*You may use text, but it must be converted to paths and creatively enhanced/embellished/altered to portray the character and political platforms of the given candidate. Original imagery created with abstract vector shapes in Illustrator must be a prominent aspect of the design. You may not import or copy pre-existing imagery or text.
 
In the next lab, I will be collecting the original Illustrator (.ai) files, and all of the above should be posted to your web sites.
Helpful links:
Recommended Watching: 

Getting Started:

Drawing Basic Shapes:

Transforming Objects:

Working with type:

Combining Shapes:
Saving for web:

Save

Class 6: DOF

Homework #4: Due June 23rd

Shallow Depth of Field – In Camera & In Photoshop
Take 2 images using the cameras in class of the same composition:
one with a shallow depth of field, and one with a deep depth of field.

Camera Guide

Using the in-camera image as a reference, create a shallow depth of field effect on the remaining image in Photoshop using the blur tool. Follow the steps in the tutorial below. Post a jpg of your original image as well as the “in-camera” and “digital” shallow depth of field shots to your website (3 images total).

Required Viewing:
In the Lynda Tutorial Adobe Green-Screen Workflow with Richard Harrington watch:
Chapter 6: Applying depth-of-field blur in Photoshop

In class, I will collect the Photoshop (.psd) file of your in-camera shallow DOF image.

*post all three images to your web site

Class 5: Photography/Collage

In-class assignment: Photoshop photo-montage

Choose a Person: i.e. Hillary Clinton, Donald Trump, Leonardo Da Vinci…
Choose a Place: i.e. Hunter College, NYC, Paris, your room…
Choose a Thing: i.e. Escalator, Flower, Clock…
Choose an Idea: i.e. Buddhism, Peace, War, anger, love, Plato’s Allegory of the Cave…

Choose a method of representing each item… It can be literal (image of Hillary Clinton) or representative (the color blue to represent her political party, pink to represent her gender, The letter H to reference her logo…)

Create a Photo-montage composition in Photoshop using these elements. Use layers and masks to assist in removing backgrounds, creating overlays, and spot color correction of images.

Upload this image to your site, on its own page. Write a 100 word description describing the topics you chose, and how you chose to represent them. Why did you choose the imagery that you chose? Is there any significance in the juxtaposition of these? How did you choose to highlight or obscure these? Keep in mind the Elements of Art, Principles of Design, Typography (if used), and Composition.

 

Cropping:
http://www.lynda.com/Photoshop-tutorials/Using-crop-options/122999/137777-4.html

Transform tool:
http://www.lynda.com/Photoshop-tutorials/Scaling-skewing-rotating-Free-Transform-Video/122999/137785-4.html

Working with layers:
http://www.lynda.com/Photoshop-tutorials/Exploring-layer-basics/122999/137790-4.html

Converting a selection to a mask:
http://www.lynda.com/Photoshop-tutorials/Converting-selection-layer-mask/122999/137797-4.html

Changing the size of your brush
http://www.lynda.com/Photoshop-tutorials/Changing-opacity-size-hardness-painting-tools/122999/137801-4.html

Working with Adjustment layers
http://www.lynda.com/Photoshop-tutorials/Controlling-which-layers-affected-adjustment-layer/122999/137815-4.html

Type:
http://www.lynda.com/Photoshop-tutorials/Exploring-character-point-type/122999/137857-4.html

Class 4: Color

Homework #3: Due February 16th
Take two RAW file images shot in class and use Adobe Camera Raw to improve common problems with the images.

1) non-destructively crop the image (in Camera Raw Screen Shot 2016-06-12 at 7.58.49 PM, via Adobe Bridge)

2) correct for a tilted horizon (Straighten Tool Screen Shot 2016-06-12 at 7.59.54 PM)

3) check and correct shadow or highlight clipping
↓↓(using the warnings located on the histogram)↓↓
Screen Shot 2016-06-12 at 7.57.07 PM

4) remove color casts (if any)

5) Save these files as jpg’s and upload them to a new page on your site. Link to them from your index, and provide a link back to the index from the images. Include 100 words about each image, describing your choice of camera settings, subject, composition, and decisions regarding cropping and color correction.

I will collect the camera raw files at the beginning of the class

Required viewing: 
In the Photoshop CC Essential Training Lynda tutorials with Julianne Kost watch the following chapters:

Chapter 3: 

Chapter 4: 

Useful Extras:
*The program from which they are opening the files is Adobe Bridge.

Also see: Save for web

Digital Photography Principles Class Handout
SONY Alpha 3000 Manual
SONY Alpha 3000 Handbook
Extra Camera Info

Class 3: Photoshop Selections

Homework #2: Due June 14th
Create three new pages for your website, place an image on each one and connect them with links. The images on each page should be from selections and compound selections made in Photoshop.

Each image should be at least 800 pixels wide, and under 1500.

Write 100 words describing each image. Use the Principles of Design and Elements of Art to describe your work.

Principles of Design:
— Balance
proportion
Rhythm
Emphasis
Unity

Elements of Art:
Form
Line
Shape
Texture
Value
Space
Color

Viewing: In the Photoshop CC Essential Training Lynda tutorials with Julianne Kost watch the following chapters:
Chapter 7: Switching Tools using the keyboard
Chapter 8: Panning, zooming and using the rotate view tool
Chapter 10: Using the Undo and the History Panel
Chapter 12: Using the Marquee and Lasso tools and Combining selections 

 

Class 2: Grids

CSS Materials:

Intro to CSS

http://www.lynda.com/CSS-tutorials/What-CSS/417645/484769-4.html

Working with Fonts

http://www.lynda.com/CSS-tutorials/Working-fonts/417645/484784-4.html

Formatting Text

http://www.lynda.com/CSS-tutorials/Formatting-text/417645/484785-4.html

The Box Model

http://www.lynda.com/CSS-tutorials/What-box-model/417645/484786-4.html

http://www.lynda.com/CSS-tutorials/Margins-padding/417645/484787-4.html

Selector Types

http://www.lynda.com/CSS-tutorials/Basic-selector-types/417645/484772-4.html

Mondrian assignment:

mondrian

Mondrian – Starter files