11-6-15 - Art for New Media 1 - Sketchbook assignment We viewed the movie “Rivers and Tides: Working with Time” about Andy Goldsworthy. He creates a type.

Slides:



Advertisements
Similar presentations
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Advertisements

Learning the Basics – Lesson 1
Computer Information Technology Section 7-2
Creating Animations – Lesson 71 Creating Animations Lesson 7.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Final Exam Our final will be held: –Monday, December 19 th –From 2:00 to 3:50 PM –In 809 Silver There will be no make up and the final is mandatory. It.
Animation Your Task. You must work in pairs. One of you will read these instruction and explain them, while the other person carries them out. Discuss.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
PowerPoint for teachers and students C MacFadyen, Dec 2008.
 street/ street/  Type text & download sign. (or use snipit)
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
Importing/Exporting between Fireworks and Dreamweaver For Buttons, Navigation Bar and Animated Banners.
Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
CIS 205—Web Design & Development Fireworks Chapter 1.
University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images.
Creating Buttons – Lesson 51 Creating Buttons Lesson 5.
Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
1. Press the New Layer Button 3. Double click names to re-name Ball & Shadow layers 2. Click to change to 12 fps Step 1.
Sports Website Creation. In this project you will design and produce your own website.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Start Dreamweaver program From file menu click new Blank page appears.
Creating a rotating image banner Activity 7 Procedure Creating AP Elements 1.Start Dreamweaver and select the ‘Hong Kong Scenery’ web site. 2. Create a.
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
Agenda 1 - Sketchbook - DUE TODAY! 1 - Flash Environment and workspace continued - Nested or embedded Movie Clips (car animation) - - Bone tool.
Bike and Hike Skills: Graphics, Image Maps, Photo Galleries, Layers.
Agenda Sketchbook DUE today - assignment dates listed on next page 1 - Flash Environment and workspace continued - Movie clip symbols - timeline.
Art for New Media TO DO today: 1 - Sketchbook assignment (see next page) 2 - Animation using Photoshop - - Animation Panel > view, frames - Frame.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
BASIC MOTION TWEEN Studio 8 1. Draw a square (blue fill, no stroke) on the upper-left area of the stage.
Creating interactive web pages using Fireworks Creating a 5 page mock up.
Objective: Students will know the screen parts, tools, and menus of the Fireworks program. Students will be able to create a new document, create basic.
Art for New Media 1 - Sketchbook Assignment > on next page Links on today’s date on calendar 2 - Photoshop and Animation … continued sample files.
Art for New Media 1 - Photoshop and Animation … Intro sample files in shared folder background images, transparent background Save for web and.
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
Art for New Media TO DO today: 1 - Fireworks Introduction continued - Finish remote rollovers - Rollovers with multiple states (over and hit.
Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.
GIMP Introduction. Creating a new document After opening GIMP, create a new document by clicking File  New After opening GIMP, create a new document.
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Motion Graphics & Animation.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Art for New Media TO DO today: 1 - Sketchbook - Due Next class - Thursday 12/10 Assignments listed on next slide - make sure you have all of.
Building a Website: Images Editing Fall Editing Image Four Built-In Editing Tools – Cropping – Resizing – Sharpening – Adjusting brightness and.
Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Art for New Media TO DO today: 1 - Sketchbook assignment (see next page) 2 - Animation using Photoshop - - Animation Panel > view, frames -
Page 1 of 8 Stanford Continuing Studies CS 38 ·Hands-on Graphics Production for the Web Week Five EXERCISE 2: ANIMATION 1) Launch Fireworks. 2) Open blackbackground-stanford.gif.
Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.
Unit 15 – Web Authoring Web Authoring Project.
Art for New Media TO DO today: 1 - Saving your work, using with Dreamweaver CSS style sheets, externally linked Work on Photoshop Animation.
How to Create Static and Animated PowerPoint Slides
Unit Objectives Insert an image Align an image Enhance an image
Learning the Basics – Lesson 1
setting the resolution - 72 vs 300 dpi (300 better quality)
Chapter A - Getting Started with Dreamweaver MX 2004
Artist Inspiration Digital “Roll” #1.
Flash animation For beginners.
DIRECTIONS: 1. Click Enable Editing in the yellow bar above.
Creating Images for the Web
How to Make a Power Point
Exercise 55 - Skills Slices and rollovers are useful interactive elements you can add to your Fireworks documents. Slices not only enable you to add features.
Step-by-Step Banner Creation Guide
To add a Navigation Bar Insert Navigation. To add a Navigation Bar Insert Navigation.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
The Web Collection Standard CS3 Revealed
Presentation transcript:

Art for New Media 1 - Sketchbook assignment We viewed the movie “Rivers and Tides: Working with Time” about Andy Goldsworthy. He creates a type of art called “earth art” or “environmental art. Do you consider this type of art to be “real” art? Why or why not? Do you like his work? Why or why not? Which artwork was the most interesting one you saw today? Why did that work draw your attention? Draw a quick picture of it. 2 - Photoshop and Animation … background images, Save for web and devices… 3 - Fireworks Introduction - Rollovers with multiple states (over and hit states) - Remote or disjoint rollovers 4 - Work on Photoshop Animation Practice Files (listed on page 2 of ppt)

Sketchbook Assignment - If you didn’t finish, make sure you do… 1. Art History “Discovery” work in your sketchbook: Use the websites linked to the calendar page to research the following… Find 2 artists on the web and answer the questions below >> use 2 pages/sections in your sketchbook and write the artist’s name at the top of each page/section #1 - an Artist you are familiar with or Artist you have heard of and would like to know more about #2 - an Artist you have never heard of before Questions: 1 Why do you like or appreciate this artist’s work? If you dislike them, also explain why. 2 What artistic movement are they a part of or what is their style? What are the characteristics of that movement? When did this movement take place/when did the artist work? 3 Pick an artwork by the artist (painting, sculpture, photograph…), write the name of the artwork down, and discuss why you like it… EX: color, subject matter, style ??

Photoshop - Animation practice files: 1. A frame-by-frame animation (using photoshop) (minimum 30 frames long - don ’ t do a bouncing ball!) Make sure you have used layers/background or a scene of some kind in your animation 2. 3 separate animations using the 3 different tweens - position, opacity, layer styles (effects) (each of these only needs to be about 10 frames) 3. A rollover with an over and down (hit) state (using FW/DW) 4. A remote or disjoint rollover (use PS/FW/DW) be careful in naming of files!

Art for New Media Steps to make a REMOTE or DISJOINT rollover - - create image in photoshop (use layers for states) - open in FW - slice active areas (any area that will have rollover behavior, including “remote” area) - create states for each rollover area for normal state, turn on visibility of all buttons, turn off visibility (eyeball in layers) of all remote area layers copy normal state to make new states (so that all layers will be there) turn on visibility of remote area you wish to show make change to button (ex. Filter in properties inspector - make sure your “button” layer is selected to add a filter) - use behavior handle to create disjoint rollover (click and drag crosshair/handle to slice add swap image to slice (click on behavior handle) select state that you will be swapping with current image - save as png - file > export - make sure to select the following: export: HTML and images html: html file slices: export slices pages: current page check only these boxes: include area w/o slices and images in subfolder - open html file in dreamweaver

Steps to make a rollover with multiple states - - create image in photoshop (use layers for states) - open in FW - create states for each rollover behavior (off or normal, over and down) copy normal state to maintain layers in all states name each state (ex: coffee-off, coffee-over, and coffee-down) - make changes to the states to show rollover image (turn on visibility of layer you want to show in each state) - save as png - file > export - make sure to select the following: export: states to files uncheck trim images box - open a new dreamweaver file, save it - place image for off state (insert > image) - add rollover behavior > go to behaviors panel add (click on plus sign) swap image browse for image > choose over state add another behavior > this time choose down image then change it to onMouseDown in list to left of behavior (click on blue arrows to see list) - save and preview in browser