Study Guides:
Guide:
sarawentworth.com/150/150FinalExamStudy_Guide_FA15.pdf
Slides:
sarawentworth.com/150/Final_slides.pdf
All lecture slides are available on Blackboard.
Web sites and extra credit assignments are due by Sat. December 19th.
We will not have lab that day, this is an online assignment.
Extra credit assignments should be posted to your web site on it's own page and linked to from the home page.
As a reminder, the web sites can be as simple or as complex as you wish to make them.
Design and navigation will be 30% of the overall grade.
• Can I find everything easily?
• Are there any dead ends?
• Are there any broken links?
• Is there continuity in style between pages?
The rest is content (are all of the assignments there, with required text?).
Note:
To link back from your index.html in your narratives folder to your index.html in your medp150 folder:
<a href="../index.html">Home</a>
Saturday, December 12, 2015
Friday, December 4, 2015
Dec 4th
Final Websites:
The final website will be 10% of your final grade.
Requirements:
All of the assignments, with required text
User experience: Can I find everything easily? Is everything labeled well? Do all of the links work? Do I get stranded on any pages with no way out?
Design: Is there continuity of design between pages? Are your images of similar widths and heights?
How have you used color and alignment to help the user navigate your site?
I have created two templates using tables and CSS for you to work with.
You can use these for reference, or use them directly by replacing the wireframe images with your own assignments, changing the variables in CSS to suit your needs, etc. Working with other people's code is a good way to learn to program.
Centered
Left-Aligned
Remember, there are several ways to add CSS to your website:
http://www.w3schools.com/css/css_howto.asp
• Directly in the HTML tags (Inline Styles):
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
• In the header (Internal Style Sheet):
<head>
<style>
body {
background-color: #00FFFF;
}
h1 {
color: #333333;
margin-left: 40px;
}
</style>
</head>
• In a linked External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
where mystyle.css is a separate document
Colors can be defined by word:
http://www.w3schools.com/tags/ref_colornames.asp
Or by number
http://www.w3schools.com/tags/ref_colorpicker.asp
The final website will be 10% of your final grade.
Requirements:
All of the assignments, with required text
User experience: Can I find everything easily? Is everything labeled well? Do all of the links work? Do I get stranded on any pages with no way out?
Design: Is there continuity of design between pages? Are your images of similar widths and heights?
How have you used color and alignment to help the user navigate your site?
I have created two templates using tables and CSS for you to work with.
You can use these for reference, or use them directly by replacing the wireframe images with your own assignments, changing the variables in CSS to suit your needs, etc. Working with other people's code is a good way to learn to program.
Centered
Left-Aligned
Remember, there are several ways to add CSS to your website:
http://www.w3schools.com/css/css_howto.asp
• Directly in the HTML tags (Inline Styles):
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
• In the header (Internal Style Sheet):
<head>
<style>
body {
background-color: #00FFFF;
}
h1 {
color: #333333;
margin-left: 40px;
}
</style>
</head>
• In a linked External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
where mystyle.css is a separate document
Colors can be defined by word:
http://www.w3schools.com/tags/ref_colornames.asp
Or by number
http://www.w3schools.com/tags/ref_colorpicker.asp
Saturday, November 21, 2015
Nov 21
Create a web-based non-linear story. For this assignment, you can use photography, iIllustration, montage, or simple text to create a narrative with multiple story paths which can be navigated using hyperlinks. 80% of the imagery and all of the text used must be your own original content.
1) Map out your narrative, using illustrator or simply a pen and paper.
2) Develop the imagery/text for each page.
3) In your MEDP150 folder, create a new folder named narrative. In this new folder, create a new images folder. Save your html file for this project, including a new index.html, directly in the narrative folder. If you are using external style sheets, make a css folder.
4) Post your project to the web, ensuring that all of your links work.
There must be at least three possible endings
There must be multiple ways to get to each one.
Examples:
http://fmundergrad.hunter.cuny.edu/~krioutchkovac/narr/continue.html
http://fmundergrad.hunter.cuny.edu/~deveciogluc/medp150/page13.html
http://slimedaughter.com/games/twine/girlwaste/play.html
In-Class Example:
http://fmundergrad.hunter.cuny.edu/~wentworths/medp150/narrative_example/
Tables:
http://www.lynda.com/HTML-tutorials/Displaying-data/365960/378906-4.html
Intro to CSS
http://www.htmldog.com/guides/css/
Styling tables:
http://www.lynda.com/HTML-tutorials/Styling-borders/365960/378915-4.html
Text style generator:
http://www.cssfontstack.com/arial
Style sheets:
http://www.w3schools.com/css/css_howto.asp
Common CSS topics
http://www.lynda.com/CSS-tutorials/Working-fonts/80436/90611-4.html
Adding Audio:
http://www.w3schools.com/tags/att_audio_autoplay.asp
1) Map out your narrative, using illustrator or simply a pen and paper.
2) Develop the imagery/text for each page.
3) In your MEDP150 folder, create a new folder named narrative. In this new folder, create a new images folder. Save your html file for this project, including a new index.html, directly in the narrative folder. If you are using external style sheets, make a css folder.
4) Post your project to the web, ensuring that all of your links work.
There must be at least three possible endings
There must be multiple ways to get to each one.
Examples:
http://fmundergrad.hunter.cuny.edu/~krioutchkovac/narr/continue.html
http://fmundergrad.hunter.cuny.edu/~deveciogluc/medp150/page13.html
http://slimedaughter.com/games/twine/girlwaste/play.html
In-Class Example:
http://fmundergrad.hunter.cuny.edu/~wentworths/medp150/narrative_example/
Tables:
http://www.lynda.com/HTML-tutorials/Displaying-data/365960/378906-4.html
Intro to CSS
http://www.htmldog.com/guides/css/
Styling tables:
http://www.lynda.com/HTML-tutorials/Styling-borders/365960/378915-4.html
Text style generator:
http://www.cssfontstack.com/arial
Style sheets:
http://www.w3schools.com/css/css_howto.asp
Common CSS topics
http://www.lynda.com/CSS-tutorials/Working-fonts/80436/90611-4.html
Adding Audio:
http://www.w3schools.com/tags/att_audio_autoplay.asp
Saturday, November 14, 2015
UXD, continued
From your wireframes, create a mockup of your app.
It must include separate layers containing:
• guides
• App elements
• interaction labels
Upload to your web site:
• Your (second) 200 word write-up
• exported mock-ups without labels/interactions
• exported mock-ups with labels/interactions
Creating a color palette
Adding master elements
Importing images
Clipping masks
Saturday, November 7, 2015
Start work on UXD homework Assignment
In the UXD lecture we discussed what interactivity is and various approaches to make these experiences more user friendly. On a basic level UXD considers what the purpose of the interactive experience is, asks who is the audience and how can design thinking make the meeting of these two as productive as possible. For this two part project you will work in groups of three. Each group will create a proof of concept for a smart phone app which they will present in class.
Part 1 will be due on Nov14th and will contain
1) a minimum of 200 words describing the app. This description will include what it does: who its primary users are, what might be particular to the way these user might use technology that might be different from other groups erg. grade school age technology users interact with technology in very specific ways that would be very different from senior citizens and software geared to these demographics are made with this in mind.
2) a wire frame of the main screen of the app. Upload this to your website.
Part 2 will be due on Nov 21st and will contain a visual mock up of the main screen and at least one of the secondary screens of the proposed app. Each group will also include a 200 word description explaining how the way visual and interactive elements would help the user to understand how to use app. Upload this to your website
You are free to develop this project with the imaging software of your choice that was covered in class (photoshop or illustrator)
Use any mobile phone preset in the Photoshop or Illustrator New Document dialog box.
Keep in mind Don Norman’s Design Principles from ‘Design of Everyday Things:’
• Visibility- can I 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?
and the Gestalt Design Principles:
• Similarity
• Continuation
• Closure
• Proximity
• Figure/Ground
• Symmetry and order
Creating Grids with guidelines:
Layer Structure:
Creating App Elements
UI Placeholders
Friday, October 30, 2015
Oct 30th Lab
Animation:
Create three different animations:
1 straight ahead, exported as a continuous loop
1 pose to pose, exported as a seamless continuous loop (first and last pose identical)
1 typewriter effect, exported so that it only plays once, and then stops
Export each image as an Animated GIF, and upload to your web site, using the <img> tag.
Include 50 words on each image:
What elements and principals of art did you use? What feeling were you attempting to portray, and how did you achieve this?
Saturday, October 24, 2015
Saturday Oct 24th Lab - Midterm Review/Animation
Midterm Review:
All of the Lecture Slides and midterm review questions have been posted to Blackboard
As requested, here are the slides from class.
Don't use this as an excuse to not study the lecture slides and Lynda videos.
This is only a sampling of the types of questions that may be asked. Get to know the lecture slides and lynda videos as well as you can.
Slides
Animation:
Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254
All of the Lecture Slides and midterm review questions have been posted to Blackboard
As requested, here are the slides from class.
Don't use this as an excuse to not study the lecture slides and Lynda videos.
This is only a sampling of the types of questions that may be asked. Get to know the lecture slides and lynda videos as well as you can.
Slides
Animation:
Straight Ahead:
https://www.youtube.com/watch?v=wjLANKAjJQc&feature=youtu.be
Pose to Pose
http://design.tutsplus.com/tutorials/create-flash-animations-entirely-in-illustrator--vector-3254
Saturday, October 17, 2015
Oct 17th Lab - Color
Color Assignment:
In the color lecture we discussed the cultural, expressive and compositional uses of color. In the lecture that introduced the elements of art and the principals of design we also discussed how these concepts are important for developing visual design.
Based on this create a separate logo for three of the 2016 presidential candidates. Each logo should not only be visually distinctive but also express the salient and unique features of the character of each of the three 2016 presidential candidates 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.
- Choose three of the 2016 presidential candidates and create a logo for each one.
- Each logo image should be exactly 400x400 pixels.
- The logos should be presented on your website.
- On your website you will also include a minimum of 100 words for each logo explaining the qualities of the candidate and how your use of color communicates those characteristics. In the same text you will also name which elements of art and principals of design you also used and how you are doing it.
- Your logo must be made from abstract shapes. You absolutely can not use any text, characters, or identifiable objects in the creation of the three logos.*
For this assignment, we will be using Illustrator.
*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 files, and all of the above should be posted to your web sites.
A few current logos and criticism
https://www.washingtonpost.com/posteverything/wp/2015/07/31/which-2016-presidential-candidate-has-the-worst-logo/
Examples of current candidates (with snarky commentary)
http://observer.com/2015/06/the-2016-u-s-presidential-candidates-logos-ranked/
Recommended Watching:
Getting Started:
Drawing Basic Shapes:
Transforming Objects:
Working with type:
Saving for web:
Wednesday, October 7, 2015
Oct 10th Lab
Type Face Assignment: Due Oct 17th
As discussed in class the way type is used has a fundamental impact on the meaning of written words. Type can be used to highlight the expressive aspects of the written words and/or to make it more legible. For people seriously thinking about typography both aspects are very important to consider.
• Photograph three bad examples of typography in public space. E.g. Outdoor signage. Keeping in mind the examples given in class these images should be photographed in such a way that we can clearly see both the type face and the space it exists in. Each image should be 1000 pixels wide in their largest dimension.
• Write 50 words for each example explaining why you think the type is used poorly and how it relates to its context i.e. the space that it is in.
• Upload the three images and the text for each to your website.
• Using Photoshop you will either improve the pre-exsiting type or you will add entirely new type to the image in a way that looks as photographically realistic as possible. Each completed image should be the same size as when they were originally photographed.
• Write 50 words for each image explaining how your adjustments are both an improvement and appropriate to their specific use in the space.
• Upload the three revised images and your text to your website.
Required Watching
In the set of Lynda Tutorials called:
Photoshop CS6 Text Workshop with Tim Grey
watch the videos in chapters:
2. Basic Text Appearance
3. Advanced Text Appearance
Photoshop CC 2015 One-on-One: Fundamentals
watch the videos in chapters:
5. Introducing layers.
Recommended:
Using the perspective crop tool
Scaling, Skewing, and Rotating with Free Transform
Non-destructive transformations with smart Objects
Removing unwanted details with Content-Aware Fill and Patch
As discussed in class the way type is used has a fundamental impact on the meaning of written words. Type can be used to highlight the expressive aspects of the written words and/or to make it more legible. For people seriously thinking about typography both aspects are very important to consider.
• Photograph three bad examples of typography in public space. E.g. Outdoor signage. Keeping in mind the examples given in class these images should be photographed in such a way that we can clearly see both the type face and the space it exists in. Each image should be 1000 pixels wide in their largest dimension.
• Write 50 words for each example explaining why you think the type is used poorly and how it relates to its context i.e. the space that it is in.
• Upload the three images and the text for each to your website.
• Using Photoshop you will either improve the pre-exsiting type or you will add entirely new type to the image in a way that looks as photographically realistic as possible. Each completed image should be the same size as when they were originally photographed.
• Write 50 words for each image explaining how your adjustments are both an improvement and appropriate to their specific use in the space.
• Upload the three revised images and your text to your website.
Required Watching
In the set of Lynda Tutorials called:
Photoshop CS6 Text Workshop with Tim Grey
watch the videos in chapters:
2. Basic Text Appearance
3. Advanced Text Appearance
Photoshop CC 2015 One-on-One: Fundamentals
watch the videos in chapters:
5. Introducing layers.
Recommended:
Using the perspective crop tool
Scaling, Skewing, and Rotating with Free Transform
Non-destructive transformations with smart Objects
Removing unwanted details with Content-Aware Fill and Patch
Keep in Mind:
The Elements and Principles of Design
Line, Shape, Form, Color, Texture, Space, Value
Pattern, Contrast, Emphasis, Balance, Proportion/Scale, Harmony, Rhythm/Movement
The overall sentiment of the typeface:
Happy, Sad, Exciting, Formal? Does the typeface match the message?
Alignment
Does the overall composition fit into a grid pattern? Does it use the rule of thirds?
Is the overall composition symmetrical? Balanced? Off-center? Clean? Messy?
Saturday, September 26, 2015
Sept 26th Lab
Homework #4: Due October 3rd
Shallow Depth of Field – In Photoshop
Take an image that you have shot with the DSLR cameras during lab time and create a shallow depth of field effect in Photoshop using the blur tool. This image should also feature foreground/background elements, use of the rule of thirds and have elements that create depth (use single point perspective to create depth). Follow the steps in the tutorial below. Post a jpg of your “in-camera” and “digital” shallow depth of field shot each to your website.
Required Viewing:
In the Lynda Tutorial Adobe Green-Screen Workflow with Richard Harrington watch:
In class, I will collect:
2 camera raw images: one with shallow depth of field, one without, cropped and color corrected.
1 photoshop file (.psd) with "digital" shallow depth of field.
*post both images to your web site
Saturday, September 19, 2015
Sept 19 Lab
Homework #3: Due September 26th
Take two RAW file images shot in class and use Adobe Camera Raw to improve common problems with the images. You should make sure you’ve corrected for a tilted horizon, there are no shadow or highlight clipping, the image is nondestructively cropped, and there are no color casts. Save these files as jpg’s and upload them to a new page on your site and link them to the others.
I will collect both the Camera Raw file and the jpeg web version at the beginning of 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
Take two RAW file images shot in class and use Adobe Camera Raw to improve common problems with the images. You should make sure you’ve corrected for a tilted horizon, there are no shadow or highlight clipping, the image is nondestructively cropped, and there are no color casts. Save these files as jpg’s and upload them to a new page on your site and link them to the others.
I will collect both the Camera Raw file and the jpeg web version at the beginning of 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
Saturday, September 12, 2015
Sept. 12 Lab
Homework #2: Due September 19th
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.
Required 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
Images for class
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.
Required 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
Images for class
Saturday, August 29, 2015
Welcome! Aug 29 Lab Materials
Syllabus
Lynda.com
Hunter server connection instructions:
Hunter Film and Media Website -> Support
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="creator" lang="en" content="YOUR NAME HERE" />
<meta name="subject" lang="en" content="ELECT A SUBJECT HEADING" />
<meta name="description" lang="en" content="WRITE A DESCRIPTION" />
<meta name="keywords" content="DEFINE KEYWORDS OR PHRASES, USE COMMAS TO SEPERATE" />
<title>MEDP 150 Blog</title>
</head>
<body>
<!-- TO USE REMOVE COMMENTS AND TEXT NOT NESTED IN OPENING AND CLOSING TAGS
USE <h1>For Entry Title</h1>
USE <h2>For Subtitle If Necessary</h2>
USE <p>For Paragraphs</p>
USE <strong>TO MAKE TEXT BOLD</strong>
USE <em>TO MAKE TEXT ITALIC</em>
TO EMBED AN IMAGE <img src="PATH TO IMAGE" alt="WRITE ALTERNATIVE TEXT FOR IMAGE" />
ALL FILES NAMES SHOULD BEGIN WITH A LOWER CASE ALPHABETICAL LETTER
FILE NAMES SHOULD NOT HAVE SPACES
FILE NAMES SHOULD END WITH THE APPROPRIATE EXTENSION, i.e.: "selfPortrait.jpg"
FEEL FREE TO EMBED APPROPRIATE VIDEOS FROM SITES SUCH AS YOUTUBE OR VIMEO
-->
</body>
</html>
Upload remotely using Cyberduck
Lynda.com
Hunter server connection instructions:
Hunter Film and Media Website -> Support
In-Lab Technical Support:
Peter Jackson’s Office: (212) 772 4578 RM: HN 435
*When RM 436 is not available, you can use MAC computers on the 10th floor of HN
Homework #1: Due September 5th
Create your index page for your site making sure your link works and add a second page with heading and paragraph text.
Use the following website as a reference for your work.
“Getting Started” through “Images” (8 sections)
HTML code to start your blog:
(copy and paste this code into Textwrangler) <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="creator" lang="en" content="YOUR NAME HERE" />
<meta name="subject" lang="en" content="ELECT A SUBJECT HEADING" />
<meta name="description" lang="en" content="WRITE A DESCRIPTION" />
<meta name="keywords" content="DEFINE KEYWORDS OR PHRASES, USE COMMAS TO SEPERATE" />
<title>MEDP 150 Blog</title>
</head>
<body>
<!-- TO USE REMOVE COMMENTS AND TEXT NOT NESTED IN OPENING AND CLOSING TAGS
USE <h1>For Entry Title</h1>
USE <h2>For Subtitle If Necessary</h2>
USE <p>For Paragraphs</p>
USE <strong>TO MAKE TEXT BOLD</strong>
USE <em>TO MAKE TEXT ITALIC</em>
TO EMBED AN IMAGE <img src="PATH TO IMAGE" alt="WRITE ALTERNATIVE TEXT FOR IMAGE" />
ALL FILES NAMES SHOULD BEGIN WITH A LOWER CASE ALPHABETICAL LETTER
FILE NAMES SHOULD NOT HAVE SPACES
FILE NAMES SHOULD END WITH THE APPROPRIATE EXTENSION, i.e.: "selfPortrait.jpg"
FEEL FREE TO EMBED APPROPRIATE VIDEOS FROM SITES SUCH AS YOUTUBE OR VIMEO
-->
</body>
</html>
Upload remotely using Cyberduck
Subscribe to:
Posts (Atom)