Optimizing Images for the Web

Slides:



Advertisements
Similar presentations
Scanning Directly to the Flash Drive To Scan Photos To Scan Photos Open scanner lid Open scanner lid Put pictures on scanner bed face down Put pictures.
Advertisements

Processing and Exporting Images Doncho Minkov Telerik Corporation Change this with you info.
Let’s Get Started! Click on the Icon for the Buhl Digital Signage on your desk top. PREVIEW, CREATE AND SCHEDULE A SLIDE USING THE TEMPLATE WIZARD.
Windows Movie Maker. Lights! Camera! Action! Produce a movie using Movie Maker.
Step 4. Click on Import Pictures. Step 5. Go to picture location and select. Step 6. Click next Step 2. Click on Begin a new story Step 1. Start Photo.
Graphic Fun with Photoshop and Dreamweaver Presented by Roger L. Runquist, WIU.
Adobe Photoshop Elements 2.0 Creating A Button For Your Website.
Netscape Composer Add A Custom Button. Launch Composer File>New Composer Page Select The Table Icon.
Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University Photoshop Basics.
Slide Transitions Slide Show, Slide Transition opens Slide Transition task pane Practice each option setting to select the transition style, its speed,
Computer Science 5 Spring 2007 Module 3 7/12/2015 1:55:57 PM7/12/2015 1:55:57 PM7/12/2015 1:55:57 PM.
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
Let’s Make a Movie Editing, Special Effects, and Movie Finishing.
1 Creating Icons for Commands When there is not an icon related to a command in your toolbars, you will see a question mark (?). No preview available …
First create a folder with your pictures/ images needed to create the story Then open Photostory 3. Click on begin a new story and click next.
CIS 205—Web Design & Development Integration Chapter 1.
IT Website Development Welcome!. Welcome to Unit 7! Optimizing Images and creating photo albums in Dreamweaver There are no textbook readings for.
Making animated GIFs Make It Move Like Jagger. Hit ESC on your keyboard to leave Slide Show mode Pick your fave below and right-click on it Click “Save.
Turning Glowing Text into Animated Glowing Text Using Animation Shop.
Chapter 14. Copyright 2003, Paradigm Publishing Inc. CHAPTER 14 BACKNEXTEND 14-2 LINKS TO OBJECTIVES Add Borders with Borders Button Add Borders with.
IAuthor Digital Story Creation Creation iBooks on iOS Devices.
Lecture #26 Digital Video Editing II. Movie Editing Software iMovie Windows Live Movie Maker 2011 ( Adobe.
Windows Movie Maker. What is Movie Maker? Windows Movie Maker allows one to…. create, edit, and share your movies right on your PC.
Importing/Exporting between Fireworks and Dreamweaver For Buttons, Navigation Bar and Animated Banners.
Basic Shapes and Colors Web Design Section 5-8 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I”
Welcome to Photoshop 5 Tutorials Welcome to Photoshop 5 Tutorials.
Processing and Exporting Images Ivan Zhekov Telerik Web Design Course html5course.telerik.com Front-end Developer
Resizing Images CS 268. Where to start? Pictures (of course)  Need to down size them for the web.  Pictures taken with a 10 mega pixel camera are usually.
Start Dreamweaver program From file menu click new Blank page appears.
SnapFish Scrapbooks Sign Up.
Import pictures I usually save them to my desktop Click here to browse files on your computer or images from the web.
{ Aim: How can we process camera raw files?.  When you make adjustments to a camera raw image, Photoshop preserves the original camera raw file data.
Objective: Students will be able to apply their knowledge of filters, and will learn about touch-up tools. Bellwork: Name a time, or application, where.
Art for New Media 1 - Photoshop and Animation … Intro sample files in shared folder background images, transparent background Save for web and.
1 After completing this lesson, you will be able to: Identify each item in the Movie Maker interface. Understand terms associated with Movie Maker, including.
Open up your still frame image in photoshop. Create a copy of the Background copy.
ANIMATIONS. max remembers… state of model at different points in time.
EXPORT CONTACTS FORM OUTLOOK. First open outlook and then click File.
Adobe Photoshop CS5 Chapter 1 Editing a Photo. Start Photoshop and customize the Photoshop workspace Open a photo Identify parts of the Photoshop workspace.
Introduction to Frontpage Wed. Oct. 17, 1-2p Title V Cooperative Holly Hofmann.
Digital Design Discussion Week 5. This week you will learn about photographic manipulation Healing brush tool Picassa and Photoshop Seamless Backdrop.
Lesson 4 Photoshop Basics. What you’ll learn Combining images Understanding document settings Removing backgrounds Saving files.
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.
1 After completing this lesson, you will be able to: Use a Word template. Create a template. Use a wizard to create a document.
ADOBE BRIDGE CS5 INTRODUCTION & BASIC USES. INTRODUCTION VIDEO Ofo&feature=share&list=FLxl066ZSvT7DS5- xlJh9zxQ.
11 Adobe Lightroom 3 Presented by: Diana Blackard & Geary Smith Presented by: Diana Blackard & Geary Smith.
Adobe ® Photoshop ® CS6 Chapter 1 Editing a Photo.
PLEASANTVILLE. Right now you have one layer. Your first layer is called “Background.”
Basic Web Design Week 3 - Graphics UVICELL. Web Graphics Concepts for Week 3 Selecting the right format for your image Creating a name banner for your.
Chapter 1 Editing a Photo
After completing this lesson, you will be able to:
Chapter 1 Editing a Photo
Saving your Animations
1 2 3.
Adobe Photoshop Elements 2.0 Creating Buttons For Websites
Oki Data Americas.
Making and Viewing Tolerances
Save for Web and Devices in PS
Adobe Photoshop Elements 2.0
Optimizing Images for the Web
Adobe Photoshop Elements 2.0 Creating Buttons For Websites
Chapter 18 Finalizing a Database.
Step-by-Step Banner Creation Guide
Netscape Composer Add A Custom Button.
HEADLINE GOES HERE. Directions to save header as JPEG:
Graphics Basics.
Trivia 1 Photoshop.
Let's create your English Folder!.
Insert Transitions Between Slides
Digital Story Telling with Frames
Presentation transcript:

Optimizing Images for the Web Using Photoshop

Open File to Work With

Modify..Canvas..Image Size…

Select Desired Dimensions

File…Save for Web and Devices…

Switch to 4-Up view to compare 4 variations

Zoom out so can see image

Configure Previews Clicking on a preview pane lets you change settings for that preview You can optimize by removing colors, increasing compression, etc. See which still looks acceptable When finished, click the pane you want to export Click the Save button

Select where you want to save the file

Compare Original to Optimized Wow!