Graphics. Image format's GIF Format: Use a maximum of 256 colors, and are recommendable for big areas of one color or non- continuous images. They are.

Slides:



Advertisements
Similar presentations
Interaction Design: Visio
Advertisements

Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
Integrating FreeHand with Other Macromedia Web Applications– Lesson 61 Integrating FreeHand with Other Macromedia Web Applications Lesson 6.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
1 USING FIREWORKS Cropping an Image Obtaining Information Changing Image Size Rotating an Image Adjusting the Color of an Image Drawing Tools Using the.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
Web Site Development Test 2 Working in DreamWeaver.
Creating Animations – Lesson 71 Creating Animations Lesson 7.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
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.
The Mondrian Assignments Use Adobe Photo CS3 to create Mondrian style artworks. 1. Read the short Artist Description on the next page. Taking notes on.
Graphic Fun with Photoshop and Dreamweaver Presented by Roger L. Runquist, WIU.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Importing, Grouping, and Layers – Lesson 31 Importing, Grouping, and Layers Lesson 3.
1 ADVANCED MICROSOFT POWERPOINT Lesson 7 – Working with Visual and Sound Objects Microsoft Office 2003: Advanced.
CIS 205—Web Design & Development Integration Chapter 1.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Technologies Website Development Trade & Industrial Education
The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.
Chapter 6 Images in Dreamweaver & Fireworks Mrs. Johnson Web Design.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
Website Development with Dreamweaver
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
Day 4.  Assignment 1 Due  Assignment 2 Posted Assignment 2 Posted  Due Feb 9:35 AM  3 8:30 AM  Today we will look at creating and using.
1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
To be able to create a new web site in hours, and then be able to change it whenever you want, place your order with take2theweb. Then you will be able.
Presented by the Virginia 4-H Science and Technology Committee.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
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.
Photoshop Basics Computer Information Technology Section 5-3.
Photoshop Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares, or.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Adobe/Macromedia Fireworks JAOIT 8. Fireworks – what is it? Adobe Fireworks (formerly Macromedia Fireworks) is a bitmap and vector graphics editor. It.
Introduction to Photoshop Altering photos 1 pixel at a time.
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
Click your mouse to continue. More on Themes The Theme dialog box includes three options for changing the characteristics of the selected theme. Theme.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
Getting Started with Fireworks A few tips: –Before you begin an assignment, be sure to create a folder on your drive for it. –If your canvas is checkered,
 HTML Tags  Multimedia Definitions  Information from the Computer Internet Project  Information from the Digital Camera Assignment  Information from.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
Creating interactive web pages using Fireworks Creating a 5 page mock up.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
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,
1.5 LooGix.com Experience and Creation Meg Moring.
How to Create Transparent Background Images for the Internet Using Adobe Photoshop.
Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Photoshop. Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares,
Exploring Computer Science - Lesson 3-4
OVERVIEW Objectives Follow a design document to prepare images for inclusion in a Web page Run a batch process to prepare multiple images in one step Use.
Exploring Computer Science - Lesson 3-4
Photoshop.
Tutorial: How to Creat a Website.
DW Tutorial 5 Sessions 5.1 & 5.2 REVIEW
Chapter 4 Adding Images.
Creating Web Pages and Graphics
Creating a button in Photoshop 7.0
Exploring Computer Science - Lesson 3-4
Saving Images from Fireworks
Chapter 2 Adding Web Pages, Links, and Images
Create and edit web pages 2
Creating Images for the Web
Working with Symbols and Interactivity
Vectors and Paths, also File Export
Editing images using Microsoft Photo Editor and Paint
The Web Collection Standard CS3 Revealed
DREAMWEAVER FIREWORKS PHOTOSHOP FLASH.
Presentation transcript:

Graphics

Image format's GIF Format: Use a maximum of 256 colors, and are recommendable for big areas of one color or non- continuous images. They are often used because they can contain transparencies and animations. JPG Format: These images are of a higher quality than GIFs and can contain many more colors, but the image size is larger and so they require more time to download Web graphics Format's

Other formats that can be used are BMP and PNG If you introduce a BMP image in Dreamweaver a gray square will be shown in its place.The image will only appear correctly in the browser. You can change the format of the images with any image editor program, such as Fireworks, Photoshop, Corel Draw, etc.. Web graphics Format's

It's possible to optimize an inserted image in an open document in Dreamweaver using Fireworks. You can modify the image format, the transparency, the palette of colors, etc. By modifying these aspects, it is possible to take up less memory. Optimization of an image

To optimize an image in Dreamweaver you have to select the image, go to the Commands menu, and then select the Optimize Image in Fireworks option. From the new window it will be possible to modify some attributes of the image.

Transparencies It could be useful sometimes to make some colors of the image invisible. For example, the background of the image below could possibly not match with the Page's background or damage it.

Transparencies The first thing to do is to establish a background color for the image, and make sure that it doesn't coincide with any other color of the picture so that when we apply the transparency it will not change. After this, you can apply the transparency to the chosen color with any image editing program such as Fireworks

Transparencies A way to apply the transparency in Fireworks is through the buttons, these can be seen in the previous screen (in optimize image). When you are optimizing the image, you can click one of those two buttons, and the mouse will take the shape of a drop-count when placed over the image or over the image color list. By clicking on a color it will turn transparent.

Transparencies The difference between the first and the second of those buttons, is that the first button only allows you to assign a transparency to a color, while the others let us to add more than one. The last button is used to clear the transparency of any color. In the case we have applied the transparency to the blue color that was in the background of the image, this would then look like the image shown on the right.

Transparencies allow us to notably improve the look of our pages. Transparencies