11-4-15 - Art for New Media 1 - Sketchbook Assignment > on next page Links on today’s date on calendar 2 - Photoshop and Animation … continued sample files.

Slides:



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

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1
Animating Web Graphics Using Adobe Edge. 1. Setting up your project Create a new folder on your desktop Call it [YOURNAME]infographic INSIDE THAT FOLDER,
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.
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.
 Open Photoshop  File>open>choose a picture  Go to filter>choose an effect.  Either save your image or use the snipping tool to copy and paste it into.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
IPAD Set Up. Gmail Account First, you need to set up a free gmail account with your name. If you have an existing one you may use that as long as: – A)
PowerPoint for teachers and students C MacFadyen, Dec 2008.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
 street/ street/  Type text & download sign. (or use snipit)
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
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.
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.
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.
Website Editing From Gingerweb The Image Gallery.
Sports Website Creation. In this project you will design and produce your own website.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Why are links important to a website? Web Design Course.
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.
FrontPage Tutorial Part 2 Creating a Course Web Site.
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.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
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.
Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas.
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.
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
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 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.
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: 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 -
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Dreamweaver MX. 2 Timeline Overview (p. 480) n Animations can be achieved with DHTML (__________ HTML) using JavaScript code and _____ or later browsers.
© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.
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.
Dreamweaver – Setting up a Site and Page Layouts
How to Create Static and Animated PowerPoint Slides
Unit Objectives Insert an image Align an image Enhance an image
Learning the Basics – Lesson 1
Computer presentation
Chapter A - Getting Started with Dreamweaver MX 2004
Creating & Working with Clipping Masks
Creating Images for the Web
How to Make a Power Point
How to Make a Power Point
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%)
Presentation transcript:

Art for New Media 1 - Sketchbook Assignment > on next page Links on today’s date on calendar 2 - Photoshop and Animation … continued sample files in shared folder background images, transparent background Save for web and devices… 3 - Finish DW Gallery Website - fill out review sheet - make sure all files are in ONE folder and that everything works before submitting/turning in to server 4 - Work on Photoshop Animation Practice Files (listed on page 2 of ppt)

Sketchbook Assignment 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