Image Editing for the Web - Montgomery County Public Schools · 2010. 4. 16. · Image Editing...

Montgomery County Public Schools

The Department of Technology Consulting and Communication Systems

MCPS Webmaster Document (MWD) Introduction to Image Editing (Irfanview, Image

Blender, and Fireworks)

Training and Resources

Version 1.0 WINTER 2009

Copyright and Trademarks Copyright © Montgomery County Public Schools, MD. All rights reserved. Information in this document is subject to change without notice and does not represent a commitment on the part of MCPS. Montgomery County Public Schools Office of Organizational Development 850 Hungerford Drive Rockville, Maryland 20850 301-279-3581

iii

TABLE OF CONTENTS Overview ............................................................................................................. 5

Course Objectives: Intro to Image Editing with Irfanview, Image Blender, & Fireworks ....... 5

Web Regulation: Montgomery County Public Schools ................................... 6 Educational Purposes and Administration of the MCPS Web .................................................. 6 Web Regulation - Frequently Asked Questions (FAQ)........................................................... 10

A. Background .................................................................................................................. 10 B. Requirements for All Sites ........................................................................................... 10 C. Requirements for Schools Only ................................................................................... 12 D. Requirements for Offices Only .................................................................................... 12 E. About Webmasters ....................................................................................................... 13 F. About Content ............................................................................................................... 13 G. About Technology and Site Development ................................................................... 16

Image Editing Basics ....................................................................................... 18 Introduction to Image Editing ................................................................................................. 18 The Fireworks Interface: Quick Overview .............................................................................. 18 Using the Basic Tools and Panels in Fireworks ...................................................................... 20 Working with Pictures: Bitmap objects ................................................................................... 23

Learn more about pictures: ............................................................................................... 24 Banners and Buttons: ............................................................................................................... 24 Working with Drawing Tools: Vector Objects – Creating a Compass ................................... 27 Create and save a new document ............................................................................................. 27 Create and edit vector objects: Drawing Basic Shapes ........................................................... 28 Working with Tools, Layers, Live Effects, Mask and Text .................................................... 30

Creating a school/office banner ........................................................................................ 30 Making Rounded Corners Pictures in Fireworks .................................................................... 33

Irfanview: Image Editing With Irfanview ......................................................... 36 Using Thumbnails ................................................................................................................... 36 Resizing Images ...................................................................................................................... 36 Cropping Images ..................................................................................................................... 38 Brightening Images ................................................................................................................. 40 Flipping Images ....................................................................................................................... 43 Rotating Images ....................................................................................................................... 46 Fine rotation: ........................................................................................................................... 48 Converting Images .................................................................................................................. 50

Image Editing in Dreamweaver: Photo Album ............................................... 52 To Create a Photo Album in Dreamweaver ............................................................................ 52

iv

Image Editing in Image Blender ...................................................................... 53 The ImageBlender Interface .................................................................................................... 53 Opening an Image ................................................................................................................... 54 Opening An Image From Pics4Learning ................................................................................. 54 Switching Between Images ..................................................................................................... 55 Applying an Effect to an Image............................................................................................... 55 Painting with Shapes ............................................................................................................... 56 Painting with Pictures .............................................................................................................. 56 Adding Text to an Image ......................................................................................................... 57 Layering with Images .............................................................................................................. 57 Exporting an Image ................................................................................................................. 58 Present a Slide Show of Your Images ..................................................................................... 58

5

OVERVIEW

This comprehensive guide for webmaster was designed by Yakoubou Ousmanou, MCPS technology consultant, for the purpose of creating a handbook that will include the most relevant information that MCPS webmasters need to know to do their job well. This guide is a working progress and should be revised frequently to include the most updated information.

Course Objectives: Intro to Image Editing with Irfanview, Image Blender, & Fireworks

In this guide, you will learn the following about the Webmaster Introduction Image Editing training:

• The MCPS Web Regulation

• Introduction To Image Editing (Irfanview, Image Blender, and Fireworks)

By the end of the Introduction to Image Editing training, participants will have:

• Reviewed MCPS policy: (policy on student pictures) • Discussed image formats, dimensions and file size for the web • Learned basic image editing using Irfanview • Explored and learned about basic image effects using Image Blender • Explored the Macromedia Adobe Fireworks interface • Edited pictures using basic tools in Fireworks • Enhanced and edited images in Fireworks • Discussed export and save options in Fireworks • Inserted pictures into pages with Dreamweaver

Agenda

1. MCPS Web Regulation (Student Picture and Art Work) 2. Image Formats, Dimensions, File Size for the web 3. Basics of optimizing graphics for web -- resizing, sharpening, brightening, adjusting

colors in Irfanview 4. Layering and Effects with Image Blender 5. Fireworks brief overview - (example: sharpening and brightening a blurry image) 6. Inserting pictures in pages in Dreamweaver

Wrap-up / Evaluation

6

WEB REGULATION: MONTGOMERY COUNTY PUBLIC

SCHOOLS

Related Entries: CNA, CNB-RA, CND, EGB-RA, EGC-RA, IPD-RA, IGT-RA, JFA-RA, KBA-RA

Responsible Office: Department of Communications Web Services

Educational Purposes and Administration of the MCPS Web

I. PURPOSE

The purpose of this regulation is to provide a framework for the structure and content of the Montgomery County Public Schools (MCPS) Web. This framework shall provide accountability for information published on the MCPS Web so that the use of the Web serves the educational purposes of MCPS; establish reasonable controls to protect the privacy of MCPS staff and students in a global communications environment; and ensure that the MCPS Web incorporates best practices and meets the highest educational and quality standards.

II. BACKGROUND

Montgomery County Public Schools maintains official district, school, and office Web sites to provide parents, staff, students, and the larger community with valuable information about and technical support for the academic, administrative, and operational aspects of the school system. The MCPS Web is a non-public forum. MCPS has the right, and has chosen to exercise that right, to place reasonable restrictions on the material posted on or accessed through the MCPS Web.

III. DEFINITION(S)

A. The Directory Information Withhold List is a list of students for whom schools must restrict disclosure of personally identifying information. To restrict the release of directory information, a parent or eligible student must notify the school principal of the specific information to be withheld, all as defined in Regulation JOA-RA: Student Records.

B. Educational purposes are those actions directly promoting the educational, instructional, administrative, business, and support services mission of MCPS, and related to any instruction, project, job, work assignment, task, or function for which the user is responsible.

C. Inappropriate content is that which violates law or MCPS policies and/or regulations; poses a potential threat to the health and/or safety of students; might reasonably be perceived to advocate student drug and alcohol and tobacco use, violence, sex, illegal discrimination, or other illegal activities; contains language or images that are obscene, libelous, slanderous, profane, or derogatory to

7

individuals; or causes, or might reasonably be predicted to cause, substantial disruption of or material interference with school activities; all as defined in Regulation JFA-RA: Student Rights and Responsibilities

D. The MCPS Web is all publicly accessible Web content for district, school, and office pages.

E. Site manager is the principal or administrator of the school or office ultimately responsible for supervising the school or office Web site. The director of communications and/or his/her designee is the site manager of the MCPS Web.

F. Template is a modular, structured Web page with components that are consistent on every page.

G. Webmaster is the MCPS staff member responsible for creating and maintaining the Web site for his/her school or office. Web Services is the webmaster of the MCPS Web.

H. Web Services is the department responsible for managing the MCPS Web, under the direction of the director of communications. The director of communications is the site manager for the MCPS Web.

IV. PROCEDURES

A. Requirements

1. Each school and office must have a Web site or at minimum one Web page with its contact information. Offices and other non school Web sites must be in the MCPS Web template. All sites developed by MCPS staff in the course of their job responsibilities and by students in the course of their class assignments shall reside on MCPS-managed systems.

2. All material placed on the MCPS Web must serve the educational purposes of the school system and comply with MCPS policies, regulations, administrative procedures, and school rules.

3. Site managers, or their designee, are responsible for the following functions:

a) Creating and maintaining the school or office site on MCPS Web servers;

b) Requesting publishing privileges from Web Services for persons designated to create or maintain school or office Web sites and notifying Web Services when such are no longer designated to perform those functions;

c) Consulting the Directory Information Withhold List to confirm permission to disclose personally identifying student information;

d) Reviewing the site to ensure the content is appropriate, accurate, timely, and serving educational purposes;

e) Removing any content or links that fail to comply with requirements for educational purposes or appropriateness; and

f) Consulting Web Services before creating, redesigning, or adding new technologies to their sites.

8

B. Guidelines for appropriate content

1. Web site content must have a clear educational purpose and meet the standards for appropriateness, as defined in Section III. All material placed on the Web site must comply with all MCPS policies and regulations, including IGT-RA: User Responsibilities for Computer Systems and Network Security, and JFA-RA: Student Rights and Responsibilities.

2. All material placed on the Web site must be current and meet academic standards for proper spelling, grammar, content, and accuracy.

a. Operational and time-sensitive information, such as address, school hours, calendar items, staff directory, and opening of school information, must be maintained as current.

b. Unfinished sites and Web pages should not be published until the material is complete.

c. Files not intended for public view, particularly those marked private and confidential, should not be stored on Web servers.

3. Web Services will publish on its Web site information and guidelines regarding the requirements for Web sites. Such requirements will include required links and appropriate notification or disclosure language.

4. Public chat rooms, forums, bulletin boards, discussion groups, and other similar forms of interactive communication are not permitted on the MCPS Web.

5. Sites created and maintained by students should be labeled as student work.

6. Copyright

a. MCPS webmasters should not copy material from other Web sites or resources and publish that content on the MCPS Web without obtaining permission from the webmaster, creator, owner, or publisher of the material; unless the material is clearly stated to be in the public domain or the owner gives permission or license for reuse.

b. School and office Web sites should not use a trademark, service mark, or logo of the owner without the owner’s written consent.

c. Web pages on the MCPS Web are the property of MCPS, unless they display student work or material of others displayed with permission. Requests to reuse content from an MCPS Web site should be directed to the site manager.

C. Links to external sites

1. Links to non-MCPS Web sites must support the educational purposes of MCPS, as defined in Section III above.

2. Web pages with links to non-MCPS sites will include the disclaimer, “This Web page may contain links to one or more pages that are outside MCPS. MCPS does not control the content or relevancy of these pages.” A link on the MCPS Web to a non-MCPS site does not represent MCPS sponsorship of the linked entity.

D. Advertising and Public Service Announcements

9

1. The MCPS Web does not accept paid advertising or sponsorship from commercial entities and does not promote commercial entities. An individual school or office Web page may contain the name, logo, or icon of a business that has been identified as a partner in education and has given permission for its use; however, the Web site may only link to the business partner’s Web site if it serves an educational purpose.

2. Content or Web tools provided at no cost by a third party are permitted on school or office Web sites on a case-by-case basis. The content should serve the educational purposes of MCPS; be used with permission; and be credited to the publisher, author, or owner. The site manager must approve third-party content or tools, and Web Services should be notified before they are added to the Web site. The following disclaimer should appear near the third-party content—“This material is provided free of charge and does not indicate MCPS endorsement or sponsorship.”

E. Confidentiality of student information

1. The Web site shall be in compliance with all applicable confidentiality laws and regulations.

2. The Directory Information Withhold List shall be the primary resource for consent to use personally identifying information on the Web site. At no time shall any student’s home address, telephone number, e-mail address, birth date, social security number, or information made confidential by state or federal law appear on the Web site. The Web site will not include any information that provides the physical location of students at a particular time.

F. Responsibilities of Web Services

1. Web Services, reporting to the director of communications, shall be responsible for implementing this regulation, maintaining and developing the MCPS Web, managing access to school and office sites, and monitoring all Web site activities for compliance with Board of Education policies, applicable laws and regulations, and this regulation.

2. MCPS will provide technical requirements, support, and training for developing and publishing material on Web sites.

3. If the director of Web Services and/or the director of communications identify problematic content on a district, school, or office Web site, the site manager shall be contacted and requested to modify the problematic content or remove it in order to comply with this regulation.

4. MCPS reserves the right to edit, delete, or modify any Web page content as it sees fit in order to comply with the intended purposes of the Web site and these regulations.

5. Violations of this regulation, Regulation IGT-RA: User Responsibilities for Computer Systems and Network Security, or Regulation JFA-RA: Student Rights and Responsibilities, may result in loss of publishing privileges or disciplinary action, as defined in IGT-RA, Section IV.F.

Regulation History: New Regulation, September 11, 2006.

10

Web Regulation - Frequently Asked Questions (FAQ)

Your Guide to MCPS Regulation KBA-RB: Educational Purposes and Administration of the MCPS Web

On September 11, 2006 the superintendent approved new Regulation KBA-RB, Educational Purposes and Administration of the MCPS Web. This new web regulation provides a framework for the structure and content of the Montgomery County Public Schools (MCPS) Web. This FAQ provides a basic background to the new web regulation. If your question is not addressed here, please contact Web Services via email at [email protected]

A. Background 1. Why does MCPS need a web regulation?

School and office webmasters and administrators have over the years asked many questions about web content and staff roles and responsibilities. They have asked for a web regulation to provide guidance and clarity on these and other issues. Most school systems have official regulations guiding their public web sites.

2. How was the regulation developed and by whom?

The regulation was drafted by a workgroup composed of students, parents, teachers, office staff, principals, administrators, community members, and webmasters. Later drafts were written based on feedback from legal counsel, principals, and administrators.

3. What is covered by the regulation?

It applies to all public MCPS web sites created by staff and students in schools and offices in the course of instruction or school system operations.

4. Who is responsible for implementing the regulation?

The Web Services Team implements the regulation under the supervision of the Director of Communications.

5. When does the regulation go into effect?

The regulation was signed by the superintendent of schools and became effective in September 2006.

B. Requirements for All Sites 1. Who may have a web site?

Every school and office should have at least one web page with its contact information. Staff may create a web site upon the approval of their administrator. Students may create web sites under the direction of an MCPS staffer.

2. Who is responsible for the web site?

The school principal or office/department/division/unit administrator is the “site manager” who is ultimately responsible for all content on the school or office web site. The school or office “webmaster” is usually responsible for the actual creation and maintenance of the web site. It is also helpful to enlist a school or office colleague with

11

strong understanding of the content, message, and audience to act as the “content manager,” reviewing content for accuracy and appropriateness for the webmaster.

3. Where should web content and sites be published?

All content on the MCPS Web should be hosted on MCPS-managed systems. Web content of these types can reside on these systems:

• Text files (HTML), image files (.gif or .jpg): web server

• Audio or video files (.rm or .ram): multimedia server

• Databases and/or applications: Filemaker or Primetime

• Surveys and assessments: TestPilot

4. What do I do if my site or content is not on an MCPS server?

Contact Web Services so we can help transition your site to the appropriate server.

5. What do I do if I want to redesign my web site?

If you plan to do the work yourself, please contact Web Services about the project so we can answer your questions and guide you to follow best practices and this regulation before you begin. If a volunteer or contractor will do the work for you, please have them contact us so they understand our server and other requirements. We would be glad to meet with you and the designer to frame the project before you begin. Finally, Web Services would be happy to redesign your site for you, given enough notice. Your new site could also be placed into our new web publishing system, which makes site updating easier and faster.

6. How often should my web site be updated?

All MCPS web sites should be reviewed and updated at least annually to ensure that content is accurate and up to date.

7. What domain name should I use for my web site?

All MCPS web addresses referenced in print and elsewhere should use: this root domain: www.montgomeryschoolsmd.org. Example: http://www.montgomeryschoolsmd.org/departments/web/

8. Can I buy a domain name for my school or office web site?

Yes, under these guidelines:

• Contact Web Services for assistance

• Use only an .org or .net domain. Only commercial entities use the .com domain.

• Use a forwarding service to point the domain name to your school or office montgomeryschoolsmd.org domain. Your new domain is for marketing purpose and does not replace the MCPS domain.

9. What if I already have a .com domain?

Contact Web Services for assistance migrating to an .org or .net.

12

C. Requirements for Schools Only 1. What design should I use for my school web site?

Schools are free to use their own site design, as long as it conforms to this regulation, follows web standards and best practices, and includes required elements for school web sites.

2. What are the required elements for my school web site?

All school web sites should include the following:

• Header (or banner): school name and reference to Montgomery County Public

• Schools, address, phone, link back to MCPS home page.

• Global footer: includes text links to the major MCPS pages, contact, privacy policy, plug-in and the copyright notice. (See a sample of the global footer at http://www.montgomeryschoolsmd.org/copyright.txt )

• School hours

• Webmaster contact info: name and email address

• Modification date: date site was last updated

• Staff Directory: updated list for your school

• Links: MCPS Emergency Information, QuickNotes, and Translation Mini-sites

3. How often should I update my school web site?

All school web sites should be updated at least twice a year, more often if possible. Sites should be updated with back-to-school information (supply list, back-to-school night date, PTA meeting dates and information, updated staff list) before school opens for students. They should also be updated at the beginning of the second semester in January.

D. Requirements for Offices Only 1. What design should I use for my office web site?

All non-school MCPS web sites should be in the MCPS Web Template. The template includes most of the required elements for office web sites.

2. What do I do if my site is not in the template?

Contact Web Services so we can help you transition your site to the template.

3. What are the required elements for my office web site?

All office web sites should include the following:

• Office/department/division name, address, phone number.

• Webmaster contact info: name and email address

• Modification date: date site was last updated

• Staff Directory: updated list for your office or location

13

4. How often should I update my office web site?

Offices should review and update the content and staff directories on their sites at least once year. If an office reorganization occurs in June/July, the office should update its site and staff list before the beginning of the new school year.

E. About Webmasters 1. Who may become a Webmaster?

Any MCPS staffer may become a webmaster if approved by her/his principal or Administrator.

2. How does a Webmaster receive access to servers?

Your principal or administrator can authorize your access by completing and signing MCPS Form 271-7, Webmaster Account Request Form. This grants you access to the web and multimedia servers. To access the Primetime server for databases and applications, complete and sign the Primetime Account Request form. Both forms are on the Web Services web site. You’ll find a link to Web Services at the bottom of the MCPS home page.

3. May a parent or student volunteer become a Webmaster?

Yes, but only under these conditions:

• The principal or administrator approves.

• They work under the direction of an MCPS staffer who acts as the location’s primary webmaster.

• They notify the webmaster of their departure when they complete their service so Web Services can disable their account.

4. What happens if a webmaster does not follow this regulation or related regulations?

The webmaster could lose publishing privileges and other disciplinary actions could be taken.

5. What do I do if I’m leaving my position as webmaster?

• Tell your site manager (principal or supervisor), of course.

• Assist your site manager with recruiting a new webmaster.

• Ask your site manager to submit a Webmaster Account Request form notifying us that your account should be closed, and a new one created for the new webmaster.

• Teach the new webmaster the ropes.

F. About Content

1. Is there a release form for using student pictures and student work on the school web site?

14

Yes. As part of the new Regulation, the Request to Withhold Directory Information form acts as the official consent and release for publishing appropriate student information on the MCPS public web site. This form is sent home to parents in the summer packet. If parents do NOT wish their student’s photo to be published on the web site, they must complete the form. If they do not return the form, they have opted in and given permission for use. Such permission means that your webmaster may publish a photo of a student, but should NOT publish the student’s name, contact information, or any personal details on the web site. See the Student Privacy Policy for more information related to the use of this form and access to the form in other languages.

2. What content is appropriate for my school or office web site?

All web content should have a clear educational purpose. It should directly promote the educational, instructional, administrative, business, and support services mission of MCPS.

3. What content is not appropriate for my school or office web site?

Content is inappropriate if it:

• Violates law or MCPS policies or regulations.

• Poses a potential threat to student health or safety.

• Might be reasonably perceived to advocate student drug, alcohol and tobacco use, violence, sex, illegal discrimination, or other illegal activities.

• Contains language or images that are obscene, libelous, slanderous, profane, or derogatory to individuals.

• Causes or might reasonably be predicted to cause substantial disruption of or material interference with school activities.

4. What else is considered inappropriate?

Content that is:

• Inaccurate or out of date.

• Misspelled or grammatically incorrect.

• Unfinished or incomplete.

• Not intended for public view, especially material marked private and confidential.

5. Can I publish my personal web site or personal web pages on the MCPS server?

No. You should obtain your own personal, non-MCPS web hosting account for personal web pages. Content for MCPS instruction and operations should not be published on your personal web site.

6. How do I know whether I may publish a photo of a student on my school web site?

Consult your school’s Directory Information Withhold List, which is kept in the school’s main office, to see if the student’s name is on the list. The list is the primary resource for consent to use personally identifying student information on the web site. The list names students for whom schools must restrict disclosure of personally identifying information. Parents who do not wish their children’s information released notify the school system at

15

the beginning of the school year via a Request to Withhold Directory Information, and the student’s name is added to the Withhold List. For families that have given permission to publish information about the student, do not publish the student's name with the photo. Exceptions may be made -- especially at the secondary level -- with principal permission for students who have won major awards or achieved some type of recognition.

7. Can I link to non-MCPS web sites? Of course. That’s why it’s called “the web.” But you must fulfill these requirements before adding the link:

• Review the site to ensure it is educationally appropriate.

• Add this disclaimer language to any of your web pages with links off the MCPS web:

“This web page may contain links to one or more pages outside the MCPS

Web. MCPS does not control the content or relevancy of these pages.”

8. Is student work permitted on my web site?

Yes. But sites or content created and maintained by students should be labeled as student work.

9. May I use a bulletin board, forum, or chat room on my site?

No. The MCPS web should not create a public forum. Therefore, chat rooms, forums, bulletin boards, discussion groups and other forms of interactive discussion are not permitted on any public MCPS web site. You should not use other sites for this purpose if the content relates to MCPS instruction or operations.

10. What about blogs?

Blogs are not permitted at this time. However, a workgroup is developing a rationale, acceptable use guidelines, and technical requirements in preparation for a proposed logging pilot.

11. May I copy an image or text from another source and publish it on my web site?

No, unless the material is:

• Clearly stated to be in the public domain or the owner gives permission or license for re-use.

• Obtained after you have received written permission from the webmaster, creator, owner or publisher.

12. May I publish a company logo on my web site?

You may publish a trademark, servicemark or logo only after obtaining the owner’s written permission and only if the business is an educational partner. You may not link to the business web site unless the site has content with an educational purpose, e.g. discovery.com.

13. What if we are using free content, such as Weather Bug, on our site?

Your principal or administrator must approve such third-party content for educational appropriateness before it is published to your site. If the content has a technical component (such as scripting or coding), Web Services should be consulted before the

16

content is added to the site. If the content is approved, publish it with the following disclaimer: “This material is provided free of charge and does not indicate MCPS endorsement or sponsorship.”

14. Is paid advertising or sponsorship permitted?

No. The MCPS web does not accept paid advertising or sponsorship from commercial entities and does not promote commercial entities.

15. What do I do if someone asks to link to my site or to use content from my site?

Anyone may link to your site and need not ask for permission. Requests to re-use content from an MCPS site should be forwarded to the principal or administrator who is the site manager.

16. What do I do if I find problem content on my web site?

Contact your site manager (principal or administrator) immediately for guidance. She/he may advise you to remove the material as soon as possible.

17. What happens if someone complains to Web Services about a link or other content on my web site?

Web Services will take several steps if it receives a complaint about content on your site.

• We will review the material for compliance with relevant regulations

• If the material is not in compliance, we will attempt to contact the site manager and webmaster to advise them of the problem and ask them to remove the content as soon as possible.

• If neither is available, we will remove the content and advise the site manager and webmaster of the actions taken.

18. What other MCPS regulations guide appropriate content and use of the MCPS web?

Two other regulations are relevant: Regulation IGT-RA: User Responsibilities for Computer Systems and Network Security and Regulation JFA-RA: Students Rights and Responsibilities.

19. Who owns the content on the MCPS web?

MCPS, except for student work and material by others published with permission.

20. May our school’s PTA publish its content on our school web site?

If your school principal approves, yes. Some schools publish just a page about the PTA. Others provide more information on their sites. Still others provide basic PTA information and a link to the PTA’s site on a non-MCPS server. Your principal has the ultimate authority.

G. About Technology and Site Development 1. Can I use frames on my site?

No. Frames are outdated and create obstacles to accessibility for sight impaired and other users.

2. Can I use Flash on my site?

17

Sure. But sparingly. Don’t build your entire site in Flash because it will create accessibility problems. Don’t put critical content such as your contact information in Flash. But certainly go ahead and create Flash movies of non-critical content, such as photo slideshows.

3. I found a very cool new technology I’d like to add to my site. Is that a problem?

Depends. You should not add any new technology to your site without first contacting Web Services. We want to check to ensure that the script or code doesn’t create issues for users of different browsers, delay the download time of your pages, or create other problems that hamper performance or accessibility.

Prepared by Web Services, Department of Communications 6/1/07

18

IMAGE EDITING BASICS

Introduction to Image Editing

Image Editing Overview

• Where to get images:

o Internet

o Scanner

o Digital camera

• Image Formats:

o Save as JPG (best for photographs), PNG, or GIF

• Image Dimensions and File Size:

o Both effect how others view the pictures

o Do not upload pictures directly from a digital camera to the website; image is too big

o MCPS pages are still at about 800 pixels wide with about 450 to 500 pixels of content area space to put graphics in

o The dimensions of an image are related to its file size; if you reduce the dimensions, the file size will be reduced

o Image quality is also related to file size; adjusting the quality of an image changes the file size

The Fireworks Interface: Quick Overview Getting Started

When you first create a new document in Fireworks you must specify the dimensions of the working canvas. This can always be adjusted once you’ve begun to work, but it is always best to work with the end in mind and not make the canvas any larger than it needs to be.

In most instances, you will want to stick with pixels when choosing the width and height. You will also want to monitor the canvas color. If your end product is a picture that you want to have blend in with the web page background, choose transparent.

The Fireworks Workspace

19

Once you have selected the specifications for your new document, the Fireworks workspace appears. Several items of the workspace are highlighted below.

Working canvas specified after launching Fireworks.

Layers Window: Shows each layer of your project

Properties Panel: Shows the property of active work piece items.

Tool Palette: Contains all the tools to make pictures, etc.

Pointer Tool: use the pointer to select items.

20

Using the Basic Tools and Panels in Fireworks Basic Tools

The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View.

Provide an explanation of the some of the most commonly used tools (pointer tool, etc..)

Computers display graphics are in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats. Bitmap graphics

Bitmap graphics are composed of dots, called pixels, arranged in a grid. When you edit a bitmap graphic, you modify pixels rather than lines and curves. Bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged. Vector graphics

Vector graphics are render images using lines and curves that include color and position information. When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector graphics are resolution-independent, which means you can move, resize, reshape, or change the color of a vector graphic, as well as display it on output devices of varying resolutions, without changing the quality of its appearance.

You can experiment with the bitmap and vector tools on a blank canvas in Fireworks to see the difference between the two formats. Changing tool options

When you select a tool, the Property inspector displays tool options. Some options remain displayed as you work with the tool. For other tools, such as the basic shape, Pen, and Line tools, the Property inspector displays the properties of selected objects. For more information about the Property inspector, see "Using the Property inspector" in Fireworks Help.

21

To display tool options in the Property inspector for a tool that you’re already using:

Choose Select > Deselect to deselect all objects. Selecting a tool from a tool group

A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group. For example, the Rectangle tool is part of the basic shape tool group, which also includes the Rounded Rectangle, Ellipse, and Polygon basic tools, as well as all of the Smart Shape tools, which appear below the divider line.

Using the Property inspector

The Property inspector lets you edit the properties of the current selection, tool, or document. By default, the Property inspector is docked at the bottom of the workspace.

The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four rows. You can also fully collapse the Property inspector while leaving it in the workspace.

NOTE: Most procedures in Using Fireworks assume that the Property inspector is displayed at full height.

To undock the Property inspector:

• Drag the gripper at the upper left corner to another part of the workspace. To dock the Property inspector at the bottom of the workspace (Windows only):

• Drag the side bar on the Property inspector to the bottom of the screen. To expand a half-height Property inspector to full height, revealing additional options:

• Click the expander arrow in the lower right corner of the Property inspector.

• Click the icon in the upper right of the Property inspector and select Full Height from the Property inspector Options menu.

22

NOTE: In Windows, the Options menu is available only when the Property inspector is docked.

To reduce the Property inspector to half height:

• Click the expander arrow in the lower right corner of the Property inspector.

• Select Half Height from the Property inspector Options menu.

NOTE: In Windows, the Options menu is available only when the Property inspector is docked.

To collapse the Property inspector when it is docked:

• Click the expander arrow or the title of the Property inspector.

• Select Collapse Panel Group from the docked Property inspector’s Options menu. Using panels

Panels help you edit aspects of a selected object or elements of the document. Panels let you work on frames, layers, symbols, and more. Each panel is draggable, so you can group panels together in custom arrangements.

Some panels are not displayed by default, but you can display them if you want. Some panels are not grouped with other panels by default, but you can group them if you want. When you group panels together, all panel group names appear in the panel group title bar. You can, however, assign any name you like to panel groups. The Optimize panel

Allows you manage the settings that control a file’s size and file type and work with the color palette of the file or slice to be exported. The Layers panel

Organizes a document’s structure and contain options for creating, deleting, and manipulating layers. The Frames panel

Includes options for creating animations. The History panel

Lists commands you recently used so that you can quickly undo and redo them. In addition, you can select multiple actions, and then save and reuse them as commands. For more information, see "Using the History panel to undo and repeat multiple actions" in Using Fireworks. The Shapes panel

Contains Auto Shapes that are not displayed in the Tools panel. The Styles panel

Allows you store and reuse combinations of object characteristics or choose a stock style. The Library panel

23

Contains graphic symbols, button symbols, and animation symbols. You can easily drag instances of these symbols from the Library panel to your document. You can make global changes to all instances by modifying only the symbol. The URL panel

Allows you create libraries containing frequently used URLs. The Color Mixer panel

(Window > Color Mixer) lets you create new colors to add to the current document’s color palette or to apply to selected objects. The Swatches panel

(Window > Swatches) manages the current document’s color palette. The Info panel

(Window > Info) provides information about the dimensions of selected objects and the exact coordinates of the pointer as you move it across the canvas. The Behaviors panel

(Window > Behaviors) manages behaviors, which determine what hotspots and slices do in response to mouse movement. The Find panel

(Window > Find) lets you search for and replace elements such as text, URLs, fonts, and colors in a document or multiple documents. The Align panel

(Window > Align) contains controls for aligning and distributing objects on the canvas. The Auto Shape Properties panel

(Window > Auto Shape Properties) lets you set the properties of Auto Shapes. The Image Editing panel

(Window > Image Editing) assembles the most commonly used tools for photo editing in one place. The Special Characters panel

(Window > Special Character) lets you insert special characters into your text directly from within Fireworks, rather than having to copy and paste the characters from another source.

Working with Pictures: Bitmap objects To modify an existing picture, first open the picture in Fireworks.

To Resize a Picture:

Modify>Canvas>Image Size

To Rotate a Picture:

Modify>Transform (the rotate options are all available including free rotate which is called Free Transform.

24

To Adjust Color:

Filters>Adjust Colors

To Crop a Picture:

Select the crop tool from the symbol palette. Draw a box around what you want to keep, and then double click in the middle of what you would like to keep.

To change the opacity of a picture:

Use the slider bar or type in the percentage of opacity at the bottom right of the picture.

Learn more about pictures: Go to this website. There are some great, short tutorials to create interesting picture effects:

http://www.entheosweb.com/fireworks/default.asp

Banners and Buttons: Creating Text: Banners and Buttons To create a banner:

1. Select the text tool from the tool palette (the letter A).

2. Draw a text box on your working canvas.

3. Click inside the text box and select your formatting options from the Properties panel

4. Type your text.

5. To modify the text, highlight it and make changes like you would make changes in a word processing program.

6. Crop your banner: Select the crop tool from the tool palette, draw a box around what you want to keep, then double click on the middle of what you would like to keep.

To create a button:

1. Select the rectangle tool from the tool palette. You may also click on the arrow at the bottom right corner for more shape choices.

1. Draw a shape on your working canvas.

2. In the properties panel, choose your formatting such as:

• color

25

• edge color

• and texture

3. Next follow the steps to add text and cropping your button from the create a banner section above.

Saving Banners and Buttons

When you create anything in Fireworks, you are working in an active, editable file format with the file extension .png. When you save anything in Fireworks, you are saving it as a png file and not as a graphic item such as gif or jpeg. In order to save something as a graphic item, you must export the graphic.

Rollover Buttons/Images

It is actually easier to create rollover images/buttons in Dreamweaver. Here are the directions in Dreamweaver. Rollover Images:

Rollover images provide a level of user interactivity by showing users a different image when the mouse moves over an image.

1. To begin, you need two images, likely very similar. They should be named something like: image1 and image2. Image1 will be the standard image. Image2 will be the image displayed when the mouse moves over your rollover image.

2. Click where you want to insert the rollover, then click the Rollover Image button.

3. The Insert Rollover Image dialogue box opens.

4. Fill in the dialogue as prompted, browsing for image1 as the original image and image2 as the rollover image.

26

Animated Gifs

To create an animated gif, follow these steps:

1. Create a new workspace in Fireworks.

2. Import the first picture to be animated.

3. Next, make sure the Frames window is open by going to Windows>Frames and making sure there is a checkmark next to the word Frames. The Frames window will be on the left side.

4. For each additional picture, create a new frame by going to Edit>Insert>Frame. A new blank frame will appear in the Frames Window. Or, you can click the new frames button.

5. Repeat step 2 and 4 until all pictures

to be animated are inserted.

6. Next set the time for each frame. The default is 7/100ths of a second. Simply double click the 7s to adjust the time.

7. You may now preview your animation by selecting the play controls at the bottom right side of the workspace.

To export the animation

Click File>Export Preview. Make sure animated gif is selected in the file type window. Then click export. Save to an appropriate folder.

• Put the animated gif on a webpage and preview the page to see how it works.

27

Working with Drawing Tools: Vector Objects – Creating a Compass Working with Vector Graphics

In this tutorial, you are going to draw a compass to be used in a logo for your school or for a corporation.

You will learn how to:

• Combine simple shapes to create complex objects

• Select points and paths in vector graphics

• Use the ruler and guides for drawing

• Draw with the basic drawing tools and rotate objects

• Use the Knife tool to cut paths

• Apply stroke and fill settings

• Use the Eyedropper tool to sample color

• Trim the canvas and fit the canvas to your objects

• Export a vector object as GIF or JPEG

Create and save a new document

8. Open Fireworks, In Fireworks, choose File > New.

9. Make canvas size 400 by 400 pixels. The canvas color is white, and click OK.

10. Maximize it by clicking the maximize button.

11. Choose File > Save As.

12. Name the file compass followed by your initials. Remain in this screen and to use grid lines first and then the rulers to make it easier for you to draw.

• Go to: View > Grid > Edit Grid: Grid size 24 by 24, Color # CCFFFF. Check Show Grid and Snap to Grid.

• Go to View and Click Ruler to view the ruler and then drag them onto the canvas. Place the horizontal and vertical guides at position 216 and lock Guides( View > Guides > Lock Guides )

28

Create and edit vector objects: Drawing Basic Shapes

Choose the Ellipse tool from the tools panel.

1. Set the Stroke Color to Black(#000000)

2. Click on the Stroke category box, point to pencil, and then click 1-Pixel Hard

3. Click the arrow on the Fill Category box and click none

4. Hold down Alt and press Shift to draw a circle, the center is where the guides cross and the circle is three grid lines wide from the center point. Release the mouse before releasing the modifier keys.

5. Click the select menu and Click Deselect to deselect the ellipse. Click Save.

Using the Line Tool

1. Select the Line tool. Set the line color to black, the tip size to 1 pixel, and the stroke category to 1-Pixel Hard

2. Position the cross-hair on the vertical guide, about one half of a grid line above the top of the circle. Hold down Shift as you drag down to draw a straight line that extends one half a grid line below the bottom of the circle

3. Click the Edit menu, and then Click Clone to make an exact copy of the line.

4. With the cloned line still selected, click the Modify menu, point to Transform, and then click Numeric Transform. The Numeric transform dialog box appears.

5. Click the arrow and choose Rotate. Enter 45 for angle and click OK.

6. The line rotates from the center point of the circle. You need a total of four lines, each at a 45-degree angle from the last line. The lines cut the circle in a pie

7. You will now use the History Panel to repeat the process of cloning.

8. Click the Window menu and then click History.

9. Hold down the Shift Key and click Clone and then Transform

10. Click Replay at the bottom of the History panel to see the new line.

11. Click Replay again to draw the last line.

Drawing the smaller Ellipse

1. Choose the Ellipse tool.

2. Set the Fill Category to None (otherwise the circle will cover your lines, making it difficult to complete this task)

Using the Knife Tool

1. Hold down Alt and Shift to draw a smaller circle from the center outward within the first circle. The circle should be two grid lines wide from the center. The inner circle acts as a guide as you work with the knife tool.

29

2. Select one of the line with the Pointer tool

3. Select the Knife tool from the tools panel. Drag the knife pointer across the line where it intersects the smaller circle. When you release, a point appears on the line. That is the cut you just made. Repeat the process at the other end of the line.

4. Switch to the Pointer tool and click anywhere outside the circle to deselect the line.

5. Click the center portion of the line between the two cuts, then press Delete to remove the inner line.

6. Repeat the process on the other lines. Click Save

Changing the stroke of a line

1. Select all eight lines on the Canvas by holding down the Shift and clicking each line with the pointer tool. Set the Stroke Category to point to Basic, and then click Soft Line. Enter 2 pixels in the Tip Size box. Deselect the image.

2. Select both circle, on the Stroke Category Box, click None. Deselect the image

Filing the Circles with Color

1. Open the site_colors.png file (File > Open) from the Student Shared folder or My Document Folder. This file contains the colors you will use for the circles. Click the Windows menu, and then click Tile Vertical. The two file now appears side by side.

2. Select the outer circle of the compass. The circle has no stroke of fill, so follow your instructor to see how to select the circle(move the pointer over the image until the circle’s selection handles appear in red; then click it)

3. Click the Fill Color box and position the eyedropper over color 2 in the site_colors.png file. Click this color to change the color of the selected circle.

4. Select the smaller inner circle and repeat the above steps, this time over color 3 in the site_colors.png file.

5. Close the site_colors.png file. Click the Maximize button in the compass window and click Save.

Using the Polygon Tool and Drawing a Star

1. Choose the Polygon tool on the Tools Panel under Vector.

2. On the Property inspector, click the arrow on the shape box and choose Star.

3. Enter 4 in the Sides text box and 26 in the Angle text box

4. Click the Fill Color box and select the color white ( #FFFFFF)

5. Make sure the guide are visible(View>Guides> Show Guides)

6. Drag from the center point of the guide to draw the star. As you drag, rotate the star to position between the tick marks on the circle. Trimming the Canvas is next and your logo should be ready to be exported as a GIF or JPEG

30

Working with Tools, Layers, Live Effects, Mask and Text

Creating a school/office banner

Fireworks Exercise Creating a School Banner

Set Up

• Open Fireworks

• Go to File Open Navigate to My Documents Fireworks_Introduction folder file: “school”

• Select the file “school” and click on the Open button.

Note the layers panel

7. If you don’t see the layers panel, go to Windows Layers and check to view

8. In the right column, open the Layers panel by “twisting” the triangle in front of the word “Layers”

9. Now you will see your image in a tiny view within the layer panel.

10. The default name is bitmap.

11. Change the name for easier identification of layers later.

12. Double click in the tiny view on the name “bitmap” and change to “orig school”

Draw around the building using the lasso tool.

1. Select the lasso tool from the bitmap tool bar menu

2. Click and drag from point to point to complete the border around the school building itself. Note: You must close the selection by returning to the starting point. You should see “running ants” marquis border around the selection.

3. Go to Edit Copy

31

4. Then Edit Paste

5. Now you should see a second layer in the layer panel. This layer will look like a cut-out of the school and has the default name “bitmap”

Add and Edit Special Effects

1. Click on the pointer tool in the select section of the tool bar.

2. Double click in the canvas outside of the school image.

3. With the pointer tool, select the original image layer from the layer panel.

4. In the Properties panel (below the canvas) click the “+” beside Effects to select the Adjust Color Hue/Saturation.

5. A new dialog box will open titled Hue/Saturation. i. Set the Hue to 180 ii. Saturation 25 iii. Lightness 0 iv. Check Colorize and Preview boxes. v. Click OK to apply the selections and close the dialog box.

6. Notice the Effect on the background.

7. Add another Effect by clicking again on the “+” vi. Choose Blur Blur More

Now we want to merge the two images together.

8. Make sure you have the pointer tool.

9. Select the original bitmap (cut-out) image in the Layers panel.

10. At the top right corner opposite the word “Layers” in the title bar of the Layers panel there is an icon that looks like a list.

11. Left click with the mouse to reveal a menu Merge Down and release mouse.

12. Now there is only one merged image in the Layers panel.

Apply a mask to the image

1. Make sure you have the pointer tool.

2. Click on the image in the Layers panel.

3. At the bottom of the Layers panel next to the word “Frame” there are several icons.

4. Click on the second icon “Add Mask” It looks like a gray paper with a hole in it.

5. You should now see a yellow rectangle next to your image in the Layers panel above.

6. In the Bitmap section of the toolbar select the Gradient Tool. It’s under the Paint Bucket tool. (lower right)

7. In the Properties window, near the center, make sure the tolerance is around 40 and the fill selection box is unchecked.

32

8. Again, in the Properties window, to the right side, make sure that the opacity is about 40 and the blend mode is normal. Do not check Preserve transparency.

9. You don’t need to use the Texture option.

10. In the Properties window, click on the color box Preset: White, Black then drag the left white color swatch about ¼ of the way over towards the right.

11. Click outside to close the window.

12. On the canvas, drag the gradient pointer across the school image.

13. Release the mouse button.

Add the Compass Rose

1. File Import (select the file of your compass rose .gif image)

2. Click and drag from corner to corner to define the size you want the compass rose to be.

Add Text (Name of the School) to the Banner

1. In the Properties window, select font: Times New Roman, font size 40

2. Text color Red

3. Align Left

4. Type the name of the school: “Viers Mill Elementary School”

Add motto text

1. Font: Papyrus

2. Size: 35

3. Style: Italic

4. Color: blue

5. Type the motto under the heading: “Find your way”

Editing the Text with Effects

1. Select “Viers Mill Elementary School” text vii. Choose Shadow and Glow Shadow Glow Drop Shadow viii. Enter 5 for distance and 60% for opacity.

2. Select “Find Your Way” ix. Text Color: blue x. Size: 35 xi. Align Right xii. Crisp Anti-Alias xiii. Horizontal scale to 88% xiv. Leading option to 150%

3. You can use the pointer tool to move the compass to the desired location.

33

Add the Address at the bottom of the banner

1. Font: Arial

2. Size: 14

3. Color: any dark compatible color

4. Type in address as desired at the bottom of the graphic image Export banner as .jpg to use in your web page.

1. Go to File Export Wizard

2. Choose format for the web

3. For many colors, choose .jpeg format

4. For a drawing with few colors, use the .gif format.

5. Choose export and give the file an appropriate name. Pat yourself on the back!

Making Rounded Corners Pictures in Fireworks Making Rounded-Corner Pictures in Fireworks.

1. Open Fireworks MX 2004

2. First we need to make a mask with rounded corners of the right size

• Prepare a transparent rectangle of the size you want for your finished pictures.

• File � New

• In the dialog box, enter the desired width and height in pixels

• Make sure the resolution is set at 72 pixels/inch

• Choose Transparent for canvas color.

• Click on OK.

• You should now see a checkerboard rectangle of the desired size on the canvas.

3. Next prepare the picture you want to use in the mask

• Import the picture you want using File � Import.

• Select your picture from your local files on your computer.

• Place the picture onto the checkerboard by clicking the insertion pointer (looks like an inverted “L”) in the upper left corner and dragging it with the mouse to the lower right corner. If done correctly the picture should fill the space.

• You can re-center the picture in the space by using the pointer tool to move it around on the canvas using the mouse.

• Under the Vector tools, select the Rounded Rectangle tool by clicking on it. This will be the middle tool in the left column under Vector tools.

• You may have to click the arrow at the lower right of this icon to see the submenu.

34

• Choose the Round Rectangle tool from the shape tools sub-menu.

• In the properties, you should now see Rounded Rectangle.

• Make sure the fill color is transparent (Instead of a color, you see the red slash line.)

• If you want a border, select a color (like black) and set a width for it. (3-10 pixels)

• Now draw the Rounded Rectangle over the picture by clicking on the upper left corner of the canvas and dragging to the lower right corner covering as much as possible of the picture.

• It will cover your image with a white rounded rectangle. You will still see your part of your image behind it at the corners. Notice this has created a new layer called Rounded Rectangle.

• Using the pointer tool, select the image (bitmap) layer. You can do this in the layers panel or by clicking in the corner where you see part of the image.

• Go to Edit � Cut. Note: Your image will disappear from the layers and the canvas.

4. Paste the prepared picture INSIDE the mask.

• Using the pointer tool, click inside the rounded rectangle to select it.

• Go to Edit � Paste Inside. (Not just Paste!) Now your picture should reappear with rounded corners.

• You can adjust the picture slightly using the pointer tool to move it.

• Go to Modify � Canvas � Trim Canvas to cut away excess canvas.

5. Export the masked picture for use on the web

• Go to File � Export Preview. Make sure the format selected is jpeg. Click on Export.

• Name the file and Save in the images folder for your site.Export/Batch Processing Graphics and Pictures

Exporting Graphics To Export a Graphic:

1. Go To File: Export or File:Export Preview (recommended). We will use the Export Preview method for this example.

2. An Export Preview window will appear, from this window, you can experiment with graphic types

1. Select graphic format

2. Select image quality controls.

3. Review image stats

4. Export

35

and image quality settings. Ideally, you want to reduce the image quality and number of colors to the smallest acceptable numbers.

3. Once the Export button is pressed, a Save window will appear. Save the image in an appropriate place.

Batch Processing Pictures You’ve just received 100 pictures from a teacher who went on a field trip. They want these pictures up on the web. Each of the pictures is 2 megabytes each. It would take along time to optimize and export each picture. You can batch process a set of pictures. Here’s how:

1. Go to File> Batch Process. Select and open the folder that contains all the pictures.

2. Add the pictures individually or click the Add All button.

3. Click Next. 4. Next the Batch Process window

appears. Select the options you wish to include in the batch processing job and click the Add button.

5. Next configure your setting for the option selected.

6. Repeat steps 4 and 5 for each additional option.

7. Click the Next Button. 8. Finally, select the batch destination

folder and weather or not you want Back-up copies of the originals.

9. Click Batch. The Batch Processing will begin.

36

IRFANVIEW: IMAGE EDITING WITH IRFANVIEW

Using Thumbnails 1. Open IrfanView. 2. File Thumbnails 3. Navigate and click once on the folder with the images you want to view.

Resizing Images The following section explains how to resize an image from its original size. Resizing Images

6. Open the IrfanView application from your computer. Irfanview opens.

Irfanview

2. Click the File menu and select Open from the list. The Open window appears.

Open Window

37

3. Navigate to the appropriate folder and find the picture you want to resize. Select the picture.

4. Click the Open button. The picture opens in Irfanview.

Selected picture

5. Click the Image menu to see the Resize/Resample option.

Resize/Resample option

6. Click the Resize/Resample option from the list. The Resize/Resample window opens.

38

Resize/Resample menu

7. From this window you have the following options:

• You can use the Width/Height fields to manually enter the desired width and height.

Make sure the "Preserve Aspect Ratio" box is checked.

• You can also use the Standard Dimensions options by clicking Half or Double.

8. Click the OK button to apply the selection. The image will resize to the specified size.

Cropping Images The following section explains how to resize an image from its original size.

To crop images:


Irfanview


39

Open Window

10. Navigate to the appropriate folder and find the image you want to resize. Select the image.

11. Click the Open button. The image opens in Irfanview.

Selected picture

12. Hold click and drag the cropping rectangle around the area of the image that you wish to crop. The cropping rectangle will appear around the area of the image that you wish to crop.

Cropping Rectangle

40

13. Click the Edit menu to see the Crop Selection option.

Crop selection option

14. Click the Crop Selection option from the list. The selected area of the image will be cropped.

Cropped Image

Brightening Images The following section explains how to resize an image from its original size.

41

To brighten images:


Irfanview


Open Window


42


Selected picture

19. Click the Image menu to see the Enhance Colors option.

Enhance colors option

20. Click the Enhance colors option from the list. The Enhance colors window opens.

Enhance colors window

21. From this window, you have the following options:

• You can adjust the brightness by sliding the Brightness bar to the right.

43

• Adjust the Contrast or Color balance as necessary.

22. Click the OK button to apply the selection. The brightness of the image will change to the specified adjustment.

Flipping Images The following sections will show you how to flip an image.

Flipping Images:


Irfanview


Open Window


44


Selected picture

5. Click the Image menu to see the Vertical Flip option.

Vertical flip option

6. Click the Vertical Flip option from the list. The image will be flipped vertically.

Vertically flipped image

7. Click the Image menu to see the Horizontal Flip option.

45

Horizontal flip option

8. Click the Horizontal Flip option from the list. The image will be flipped horizontally.

Horizontally flipped image

46

Rotating Images


Irfanview


Open Window

10. Navigate to the appropriate folder and find the image you want to rotate. Select the image.

47


Selected picture

12. Click the Image menu to see to see the Rotate Left or Rotate Right options.

Rotate Left & Rotate Right options

48

Fine rotation: 13. Open the IrfanView application from your computer. Irfanview opens.

Irfanview


Open Window

15. Navigate to the appropriate folder and find the image you want to rotate. Select the image.

49


Selected picture

17. Click the Image menu and select Custom/Fine Rotation from the list. The Rotate by angle

window appears.

Rotate by angle window

18. Enter the number of degrees in the Angle box. Click the OK button to apply the selection.

The image will be rotated to the specified degrees.

50

Converting Images 19. Open the IrfanView application from your computer. Irfanview opens.

Irfanview


Open Window

21. Navigate to the appropriate folder and find the image you want to convert. Select the image.

51

22. Click the File menu and select Save as from the list. The Save Picture As window appears.

Save Picture As window

23. Click the tab button in the Save as type menu to choose a new file type. Click the Save

button to apply your selection.

Save as type menu

52

IMAGE EDITING IN DREAMWEAVER: PHOTO ALBUM

To Create a Photo Album in Dreamweaver

1. Create a folder for your photo album (e.g. album)

2. Open any page within the site or web pages

3. Choose Commands/Create Web Photo Album from the toolbar

4. Give the album a title (this will show in the thumbnail page only)

5. You can enter subheading info if you like (this will show in the pages with the enlarged pictures)

6. Choose the Source images folder by using the folder icon to browse to the relevant folder (this will be the folder where you have stored all the images)

7. Choose the destination folder (from our example 'album')

8. Choose the thumbnail size from the drop-down menu

9. You can enter the number of columns you would like to display the thumbnails

10. The rest can be left as is or changed according to your requirements for optimization

11. Click on OK

12. You will see Fireworks creating the thumbnails for all the pictures

13. Once this is done, you will receive a message saying that the photo album has been created and you can view the album.

The album will now be in its simple unformatted state. You will have a folder called album under which there will be a webpage called index.htm page which will have all the thumbnails with links to the larger images as well as 3 folders:

• thumbnails - contains the thumbnails

• images - contains the images in its original form

• pages - contains the pages in which the larger images are inserted along with the navigation to navigate between pictures and go back to home

53

IMAGE EDITING IN IMAGE BLENDER

The ImageBlender Interface ImageBlender 3 provides an intuitive push-button interface that allows you to edit images using unique paint brushes, visual effects and text. The Toolbar: The toolbar contains buttons for the most common functions in ImageBlender. The Tool Palette: The tool palette contains paint and selection tools. The Options Panel: The Options panel displays options for selected objects and paint tools. These options include brushes, font styles and more. The Effects Panel: The Effects panel displays visual effects you can apply to ImageBlender pictures. Effects can be applied to the entire image, or a selection. Double-click an effect to apply it tot your picture. The Effects panel is active when the Effects tab above the editing panel is selected. The Workspace: The Workspace shows the image you are working on. The Layers Panel: The Layers paenl displays the layers in the image you are editing. When you open images from your computer, Pics4Learning, or a digital camera, the image will have only

Toolbar Tool Palette Options/Effect Panel Workspace Layers Panel

54

one layer. Additional layers can be added to the image to create dfferent visual effects. Tex is always added as a new layer.

Opening an Image When ImageBlender is first opens up, the workspace is empty. Click the Open button on the toolbar to locate and bring in the first image you want to work with. Afterwards, you will see the Open File dialogue box. Use the arrow next to the Look in field to locate where the picture you want to work with is. When you find it, select it and click the Open button in the bottom right corner of the dialogue box.

Opening An Image From Pics4Learning To open an image from the Pics4Learning library, instead, click on the File menu and select the option Open Pics4Learning image. The Pics4Learning dialogue box will appear. On the left is shown the categories of images that are available in the entire library. Click on the + signs next to each category to see more subset choices. On the right is shown a preview of the images in any category selected upon from the left. When you find an image you’d like to work with in ImageBlender, click on the image once and then click on the Open Image button. Last, click on the Close Browser button to return to the workspace of ImageBlender.

55

Switching Between Images You can have multiple images opened up in ImageBlender and be working on all of them simultaneously. Notice below the workspace, tabs for each image opened up shown. To switch between working on one image to another, simply click on the image tab desired.

Applying an Effect to an Image A variety of effects can be applied to images. Click the Effects tab above the Editing Panel. The effects library will appear. Each folder contains effects that you can apply to an image. Double-click on a folder of choice to view all the related types of effects that can be applied to an image. When ready, select the effect desired and click the Apply button. The effect will be applied to the image.

56

Painting with Shapes You can paint shapes on the images. Click the Shapes tool on the tool palette. Each paint tool has options that can be viewed and selected from the Options panel. Notice below the choices for shapes in the Options panel, you can decide to have the shape spin, fill with a color and you can set a desired width of the shape when it’s used to draw on an image.

Painting with Pictures You can paint pictures on the images. Click the Paint with Pictures tool on the tool palette. The Options panel will display choices of pictures that can be added to the image. To select a different folder of pictures, click on the arrow shown directly across from the current folder name (i.e. nature) to choose a different folder category of pictures. When ready, select on the picture you want to add to the image, drag your mouse onto the location of the image you want to add the pictures to and click your mouse. Notice just below the pictures shown in the Options panel the 3 choices available for painting the pictures on the image and notice that the size of the pictures being painted onto the image can be adjusted using the size scroll bar.

57

Adding Text to an Image You can add text to an image. Click the Text tool on the tool palette. You will see a text box appear on the image. You will also see a new text layer added in the Layers panel. Double-click the center of the text box. A blinking insertion cursor will appear and you can begin to type whatever text is desired. The font style, coloring and size of the text can all be changed using the choices available in the Options panel. To move the text to the exact desired location on the image, simply click the mouse in the center of the text box and drag it.

Layering with Images You can add layers to the images you’re working on in ImageBlender. Layers let you add to an image without altering other parts of the image. Click the New Layer button on the Layers panel. You will see a new layer in the Layers panel appear. Double-click on the white text to rename the layer something meaningful to yourself.

58

Exporting an Image ImageBlender saves files in an ImageBlender format. However, you can export an image to use in another program, such as Word or PowerPoint. Click the Export button on the toolbar. You will see the Export Image dialogue box appear. Use the Format pull-down menu to choose a new format for the exported image. Read the text for each format to choose the best format for your needs and notice the options for the format that you have chosen as well. When ready, click the Export button. The File Save As dialogue box will now appear. Type a new name for the image in the File name field and use the Save in pull-down menu to choose a location to save the file. When ready, click the Save button.

Present a Slide Show of Your Images You can present a slide show of the images that are

currently open in ImageBlender. Click the Show button on the toolbar. You will see two options; Start and Settings. Click the Settings options. The

Slide Show Options dialogue box will appear. Click the Using Open Documents radio button to make a slide show of images you currently have opened in ImageBlender or click the Using a Folder of Pictures radio button if you want to make a slide show of saved images located somewhere else. Use the different tabs available in the Settings dialogue box to customize your slide show. Click the Show button to start the slide show. Click the ESC key on the keyboard to end your slide show.

Image Editing for the Web - Montgomery County Public Schools · 2010. 4. 16. · Image Editing...

Documents

Transcript of Image Editing for the Web - Montgomery County Public Schools · 2010. 4. 16. · Image Editing...