11-10-15 - Art for New Media TO DO today: 1 - Fireworks Introduction continued - Finish remote rollovers - Rollovers with multiple states (over and hit.

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.

© 2010 Delmar, Cengage Learning Chapter 4 Working with Links.

Microsoft Excel 2010 Chapter 7

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.

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.

CIS 205—Web Design & Development Integration Chapter 1.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit F Creating Links and Navigation Bars.

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.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.

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.

Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,

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.

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.

Bike and Hike Skills: Graphics, Image Maps, Photo Galleries, Layers.

Art for New Media TO DO today: 1 - Sketchbook assignment (see next page) 2 - Animation using Photoshop - - Animation Panel > view, frames - Frame.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

We Are Learning To (WALT): To create a working homepage for our websites What I am Looking For (WILF): A completed homepage containing a working navigation.

Creating interactive web pages using Fireworks Creating a 5 page mock up.

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 1 - Sketchbook assignment We viewed the movie “Rivers and Tides: Working with Time” about Andy Goldsworthy. He creates a type.

Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.

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.

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.

Art for New Media TO DO today: 1 - Sketchbook assignment (see next page) 2 - Animation using Photoshop - - Animation Panel > view, frames -

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

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.

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

DIRECTIONS: 1. Click Enable Editing in the yellow bar above.

Rollover Buttons.

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 insert this slide into your presentation

To insert this slide into your presentation

To insert this slide into your presentation

To add a Navigation Bar Insert Navigation. To add a Navigation Bar Insert Navigation.

To insert this slide into your presentation

To insert this slide into your presentation

Creating buttons in Fireworks

To insert this slide into your presentation

4.00 Apply procedures to add content by using Dreamweaver. (22%)

To insert this slide into your presentation

To insert this slide into your presentation

Presentation transcript:

Art for New Media TO DO today: 1 - Fireworks Introduction continued - Finish remote rollovers - Rollovers with multiple states (over and hit states) - Saving your work 2 - Work on Photoshop Animation and Fireworks Practice Files (listed on page 2 of ppt) 3 - Select Artist for Online Art Gallery Website Worksheet

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