Basic Graphics Terms

.

Let us have clear idea about the basic terms in graphics. It is advisable to go through the basics

before starting with any package.

Color

Colors play a significant role in web page designing. Everyone likes to use colors for web page

but it requires little practice to use colors effectively with balance and economy. You need to

know color basics and the technical reasons behind the use of colors to explore the maximum

potential of colors. The site has devoted an entire section on color basics to clear the color

concepts. Graphics

Pictorial representation of data is called graphics. The term is broadly used in the world of digital

arts, image processing, illustrations, designing, animation and so on. Web graphics evolved with

the introduction of colorful, pleasant websites, which includes buttons, textures, backgrounds,

icons, images, gif animations, navigation bars etc. All the leading image-processing packages are

now enhanced with the optimizing techniques, useful to create graphics suitable for web.

Image

This is more specific. Any picture including traditional scanned photograph can be called an

image. Some processing requires before using images for web. Packages like photoshop made

this work fairly simple with its helpful commands. Images make web page more alive but

increases download time hence its use must be kept economical both in time and designing

aspect.

Image Processing

People use the word "image editing " and "image processing" for the same. Generally image

processing involves adjusting the technical properties of the image and modifying the actual

content of the image may be to give totally new look to the image.

Font

People love to work with fonts. It is a design of character. It comes with wide range. Choosing

proper font is a matter of skill. Selection of font is very important for web because it must be

available on visitors desktop or it may destroy the look of the site.

Cliparts

Generally deals with line arts. Mostly created with Gif format where line of the picture is more

important than color. Cartoons, icons and sometimes buttons also comes under this category.

Lots of CDs available in the market to provide wide range of cliparts suitable for any purpose.

Cliparts add more meaning to the subject.

Designing

If it is graphic designing it includes drawing ,creating and editing the pictures generally using

vector programs like corelDRAW, Adobe Illustrator etc. Web designing contains designing of

HTML pages using editors like Frontpage, Dreamweaver etc.

Resolution Resolution is something of prime importance in digital arts. In a general term it is referred to image resolution, monitor resolution and output device resolution. To be precise, it is a unit of measurement, used to determine the size of an image, the way an image displayed on the monitor and the device on which an image is output.

Animation

Changing the frames with respect to time is a definition of the traditional animation. It adds spice

to the web. The use of animation for web is a critical question. It has to go along the theme and

the nature of the web. Flash is a keyword for animation today.

Multimedia

Today, the web pages are blinking with different media. You can read the text, see the pictures,

hear the sounds and watch the videos also. Integrating all these media makes Multimedia

environment.

File Formats

You have to save the image in proper format to work further if you want to open it in different

package. If it is transported through net or uploaded on the web it has to be in the right format.

The common formats are Jpeg and Gif.

B) USING CORALDRAW MACROMEDIA FIREWORKS OR PLAIN SHOP PRO-

Articles — Why

Choose Fireworks?

Introduction

When it comes to choosing a graphic application for creating Web site layouts and graphics,

designers are confronted with many choices between very different types of applications. As

Web professionals, we need powerful and flexible tools that are well adapted to our unique

requirements because, even with the best of planning, we often need to make design changes

quickly to satisfy fickle client requests and evolving project scopes. Additionally, most Web sites

need to be updated regularly so the ease and speed at which our chosen graphic design applica-

tion lets us perform either incremental updates or deeper layout changes becomes critical.

Following that, I decided to write this article for three reasons. The first one is that Fireworks is

my own Web graphics and site layout design tool of choice and I truly believe it is a compelling

option for anyone involved in that kind of design work. Fireworks offers many unique and inno-

vative features that translate into real work flow advantages that really make it stand out. It meets

the challenges Web designers face everyday with ease and lets them be more productive creating

higher quality work… all that and it’s a lot of fun to use.

Secondly, I wanted to write this article because Fireworks’ advantages may not be immediately

obvious to people who have never used it or have only used a minimal subset of its features.

Later in this article, I’ll discuss some of Fireworks’ core strengths and features as well as high-

light some specific work flow scenarios for which I believe it offers clear benefits over such

heavyweight “competitors” as Photoshop. References to specific real world tasks are scattered

throughout the text.

The third and, for me, the most important reason I wrote this article is that, in the wake of

Adobe’s acquisition of Macromedia, many people are discussing the future of existing

Macromedia products like Fireworks in blogs and public forums. The point here is not to discuss

Fireworks’ future but, while reading many of those discussions, I have noticed a serious lack of

understanding of what Fireworks really is and what it can do. This seriously bothers me and

I wrote this in large part because I wanted to try and set the record straight.

I use Fireworks every day in my work and have been using it for several years. I have also used

or am still using many of its competitors so I really know how well they compare from experi-

ence in the real world of Web design. This article is not about feature to feature comparisons but

about the real life work flow benefits of Fireworks’ unique tool set.

I’ll start by defining what Fireworks is in general terms as well as where it stands in comparison

to the other heavyweights in this very competitive market then I’ll move on to describing spe-

cific features and their usage. So let’s dive in!

What Exactly is Fireworks ?

The answer to this question might seem obvious to many but, as I stated in the introduction, there

is a lot of confusion out there over what kind of graphic application Fireworks really is or what it

can and cannot do. For some people, Fireworks is a direct competitor to ImageReady and is

merely a tool for slicing, optimizing and exporting graphics from layouts created in other appli-

cations and imported into Fireworks. While those tasks are certainly an important part of what

Fireworks does, they are but a very small subset of Fireworks’ wide array of creative features.

Other people often make the mistake of comparing Fireworks directly with Photoshop and criti-

cize what they perceive as a lack of depth in its bitmap editing features. Let’s make it clear right

away that Fireworks does not compete with Photoshop directly anymore than it is limited to the

role of a glorified Web graphics slicing and optimizing tool such as ImageReady. Fireworks’

purpose is quite different from Photoshop’s and it is a far more feature-rich and powerful appli-

cation than ImageReady. So, what makes it so unique?

Fireworks was designed from the ground up specifically for the task of creating Web site layouts

and graphics in an efficient and flexible manner. It is a creative powerhouse that can really do it

all, from the creative visual design stages to the slicing, optimization and export of finished Web

graphics. With Fireworks there’s no need to switch between different applications to accomplish

different tasks and its tool set is tailored to the needs of Web designers.

Fireworks does it all within a single interface that allies the power and flexibility of both vector

and raster editing tools as well as the best slicing and optimization features in the industry. This

kind of hybrid tool set is comparable only to a select few applications and Photoshop, Illustrator

and ImageReady are definitely not amongst them. In that respect, Fireworks is much more than

any of them on their own because it contains the kinds of tools found in all three of those

applications.

Furthermore and contrary to what many believe, comparing Fireworks to Photoshop or

ImageReady makes even less sense when you consider that Fireworks is primarily a vector appli-

cation that is by nature a lot more similar to FreeHand or Illustrator. Fireworks’ core toolset and

work flow is vector based, yet it offers very sophisticated bitmap editing features that can accom-

plish all but the most complex image manipulation tasks Web designers need to perform on

a daily basis.

Fireworks’ hybrid vector-raster toolset is almost unique amongst graphic applications and, when

you add it to its unrivalled slicing, optimizing and exporting features, you end up with a very

powerful application that suits Web designer’s needs better than any other.

The next section was written for the benefit of designers who are not very familiar with vector

applications and who’s graphic design software experience is limited to raster based applications

like Photoshop or Paint Shop Pro. All the above discussion about Fireworks’ hybrid tool set

won’t make much sense to you if you are not be familiar with vector applications such as

Illustrator or Freehand (or Fireworks!) and how they work compared to raster based applications.

Old hat designers who already know all of this can just skip to the next section…

A quick introduction to vectors and bitmaps

As you may already know, there are two basic types of graphics file formats and applications

that create or edit them: vector editing applications and bitmap or raster editing applications.

This is not intended to be an in depth study of this subject so I’ll go through these concepts very

quickly without going in great detail.

Vector images are made up of “objects” whose properties like their shape, size, colour, location

and more are defined mathematically. Vector images are usually qualified as “resolution inde-

pendent”. This means that vector images can be resized to any dimension without any loss of

quality and will print correctly at any size. When zoomed in close, vector images do not reveal

any pixelization or loss of detail and objects’ edges remain crisp and clean.

Bitmap or raster images ont the other hand are comprised of pixels or square “dots” arranged in

a grid-like manner. Each pixel in a raster image has a specific location on the grid and a single

colour value assigned to it. The grid itself contains a finite amount of pixels. This means that, if

a bitmap image is enlarged, the pixels in the original only get bigger and image quality degrades

rapidly while the edges of elements in the image get pixelated. Making a bitmap image smaller is

usually not a problem. Also, when zooming close to a bitmap images, you will clearly see the

pixels that comprise it. Bitmap images usually display and print best at their natural size.

Most graphic editing applications create images that fall into either one of those two general cat-

egories but not both. Others applications are strongly focused on one type of work flow while

offering tools of the other type in varying degrees of sophistication. There are very few products

like Fireworks who are truly hybrid vector/raster applications that offer strong tool sets of

both types.

Examples of purely raster based application include Photoshop, ImageReady and Paint Shop Pro.

Both Photoshop and Paint Shop Pro do offer some level of vector features but those are “grafted”

into their traditional raster work flow and do not offer the flexibility of working with true vector

objects like Fireworks does. On the other side, typical examples of pure vector based applica-

tions include Illustrator, FreeHand and CorelDraw. While all of them can display and print

bitmap images alongside their native vector objects, they have no tools for editing raw image

pixels directly as you can in Fireworks or pure raster based applications like Photoshop.

Typical graphic design work flows often require working in one type of application then moving

files into another to finish the job. This is an awkward process that can get frustrating as you try

to keep different types of files updated as well as deal with potential rendering differences

between applications. As I stated above, very few application integrate both vector and bitmap

tools in one integrated environment that eliminates the need to go back and forth between more

specialized programs. Example of such applications include Corel XaraX, Deneba Canvas and of

course, Macromedia Fireworks.

Now that we got all that out of the way, let’s move on to discussing Fireworks’ core strengths.

Fireworks’ Core Strengths & Advantages

Integrated Work Flow

The primary advantage Fireworks has over its competition is one I have already talked about:

vector and bitmap tools integration. With Fireworks you can seamlessly create and edit both

bitmap images and vector objects with tools that are familiar to both kinds of work flows in one

integrated environment. Fireworks is smart enough to switch between the two editing modes

seamlessly depending on the tools you choose and the actions you make.

Furthermore, Fireworks “stores” both kinds of objects into only one kind of layers while, for

example, Paint Shop Pro needs a special type of layer for vectors and Photoshop cannot work

directly with vector objects at all. It simply uses vector paths to mask parts of regular bitmap

layers.

By comparison, Fireworks is primarily a vector application and bitmap images are handled as

objects until a bitmap selection is made or a bitmap tool is used. This is a concept foreign to peo-

ple that are only used to working with pure raster applications like Photoshop but should make

perfect sense to someone used to working in Illustrator or FreeHand.

But the integration concept doesn’t stop there. On top of its hybrid vector/bitmap tool set,

Fireworks offers the best slicing, optimization and exporting tools in the industry in addition to

powerful animation capabilities. This means that after you are done creating your graphics you

can slice them directly on the same canvas where they were created and edited and then switch to

the Preview pane to tweak export optimization settings and see how they will affect the exported

graphics. You never have to deal with awkward “Save For Web” modal windows or need to

open a separate application to create navigation button states and things of the sort.

In comparison, you would need all three of Illustrator, Photoshop and ImageReady in Adobe’s

product line to do all that Fireworks can in one integrated environment.

Flexibility & Editability

The other main advantage Fireworks has over pure raster based applications is the flexibility and

editability afforded by its vector tool set. Unfortunately, this one is probably the least obvious

advantage for people who are only used to working with bitmap editing applications. This

becomes very clear when you look at the number of posts on Fireworks related public forums

from people asking how to perform tasks in Fireworks the same way they would do them in

Photoshop for example. Very often, Fireworks offers tools or features that would make perform-

ing the same task easier or in a non-destructive manner. These people have often been using

Fireworks for a while but remain unaware of the power of its vector tool set because they are so

used to performing certain tasks with the far less efficient bitmap tools that are familiar to them.

A prime real life example of the above is the task of removing backgrounds around people or

objects in pictures. In bitmap based applications, this task is traditionally done by using bitmap

selection tools to select and delete the background around the parts of an image one wants to

keep. This can be a frustrating and time consuming process that often relies on trial and error to

get the right selection. Bitmap selections are also fickle and fleeting things unless one thinks of

saving them (something which is not possible with many bitmap based image editing applica-

tions). Lastly, deleting the unwanted parts of an image is a destructive and irreversible action that

cannot be undone once the file has been saved and closed and the undo history is gone.

In Fireworks, the same task was traditionally done by drawing a vector shape with the Pen tool

around the part of the image you want to keep and using it as a mask. This method is better than

the previous one primarily because it is a non-destructive approach that does not delete any pix-

els in the masked image and because the mask shape can be edited and tweaked at any time. The

drawback with complex vector masks is that they can be difficult and time consuming to draw

with the Pen, especially for people unfamiliar with the tool. On the other hand and unlike bitmap

selections, vector paths used to mask objects won’t disappear between editing sessions and they

can be tweaked more easily and with far more precision than bitmap marquee selections.

But now with the release of Fireworks 8, there is an even better way to “remove” backgrounds

from certain kinds of images using masks because creating the vector mask shapes has become

easier than ever with the addition of the new “Marquee to Path” conversion feature. You can

now use a mixture of “traditional” bitmap selection tools like the Magic Wand to select plain

backgrounds and quickly convert an inverted version of that selection to a vector path that

closely follows the masked object’s contour. You still end up with an editable vector mask shape

but in a lot less time than if you had to draw it manually and it will probably fit the object’s con-

tour more closely. You can check out my “Removing Image Backgrounds with Fireworks 8”

tutorial for detailed steps in how to perform this kind of task.

Live Effects

The next Fireworks core strengths I want to discuss is object level Live Effects. In Fireworks you

can apply live, non-destructive effects such as blurs, shadows and colour adjustments both at the

layer level (as in Photoshop) as well as to individual objects. Furthermore, you are not limited to

the effects than come with Fireworks. You can use a number of third-party plugins that work as

live effects on both vector and bitmap objects including well known ones like Extensis

EyeCandy and Intellihance Pro and many others. Some plugins like Flaming Pear’s

SuperBladePro will only work on bitmap objects but are also usable as live effects. On the other

hand, some plugins might yield unexpected results when they are used on whole image objects

instead of regular bitmap selections.

In any case, being able to use third party plugins as Live Effects is a clear advantage over

Photoshop Layer Styles which are limited to the same kind of basic effects found in Fireworks’

Live Effects list (shadows, glows, etc). In Photoshop, all the more sophisticated effects offered

by plugins can only be applied to images through the Filters menu and the changes they make are

permanent ones, meaning that their parameters cannot be edited at a later time. The effects need

to be reapplied to a fresh copy of the graphic if any changes need to be made. Fireworks also has

several filters whose effects are permanent but the many third-party plugins that can work as live

effects give it unparallelled flexibility.

Precision

For me this is one of Fireworks’ key advantages over pure raster based applications. Since

Fireworks is vector based, you can select any object and be able to immediately read and set its

size and location from either the Properties Inspector or the Info Panel. Also, whether you have

a bitmap or a vector object selected, Fireworks “highlights” either its bounding box or the path

itself so you are always aware of what exactly you have selected. This kind of precision and flex-

ibility is absolutely essential for me when doing layout work.

Furthermore, with the release of Fireworks 8, Macromedia introduced a new panel called the

AutoShapes Properties panel that gives user precise numerical controls over a range of properties

for the most used AutoShape objects. For example, it is now possible to control the roundness of

individual corners for rectangles created with the rectangle AutoShape.

Raster based applications like Photoshop do not offer this kind of immediate and precise numeri-

cal feedback. You have to look at the Layers Palette to find out what “image” or part of an image

you are currently working on and there’s no way to know the precise location or size of any indi-

vidual graphical element in your layout. If you draw a rectangle and its corners do not have the

correct roundness, you have to delete it and start from scratch instead of simply editing an object

property numerically. You have to have endured the tedium of “eyeballing” elements alignment

or sizing in a pure raster application like Photoshop to appreciate just how easy, precise and fast

this kind of basic tasks are done in Fireworks. Working in a vector based application removes all

this awkward guesswork from your work flow and leaves you free to create with abandon know-

ing that you can edit anything easily later on.

Pixel Accurate Rendering

When you work in Fireworks creating objects and editing images, the program renders your

graphic to a pixel grid set at the typical Web graphics resolution of 72 ppi (pixels per inch). This

means that even vector objects which are usually resolution independent will be rendered to that

pixel grid. People used to the resolution independent display of full fledged vector application

like Illustrator and FreeHand may see this as a limitation in Fireworks, but it’s actually an asset.

Having Fireworks render your graphics at the final resolution they’ll be exported to enables you

to fine tune things like the anti-aliasing of elements’ edges. This is possible because, internally,

Fireworks can position elements on a much finer grid than the whole pixel grid it uses for render-

ing. This empowers you to really fine tune how your text will look for example. You can tweak

anti-aliasing settings as well as text size and kerning values and accurately view how those

tweaks affect the edges of your text. To be able to see this you’ll need to zoom in close to your

text while tweaking the various settings that can affect how text in rendered in your final

graphics.

This should also be possible for any other kind of object natively but, unfortunately, Fireworks’

native tools do not permit users to move and position elements on the canvas by values smaller

than whole pixels. This is a very strange oversight in Fireworks’ tool set (especially since Flash

has had this functionality for years) but luckily, some smart people have provided a solution in

the form of a free Fireworks extension which enables you to move objects by fractions of whole

pixels. This is a prime example of where Fireworks’ extensibility comes to the rescue (extensi-

bility is discussed in the next section). The extension in question is call SuperNudge and was cre-

ated by the smart people at Phireworx. It can be downloaded for free here.

A discussion of how to use SuperNudge and how it can help you tame the anti-aliasing of all

your objects’ edges is beyond the scope of this article but look for a forthcoming pixel forge arti-

cle on how to master anti-aliasing using tools like SuperNudge in the future.

Extensibility

This is another one of Fireworks main strengths. Although extensibility is not exclusive to

Fireworks, it has the advantage of having one of the richest APIs of any scriptable graphic appli-

cation as well as the ability to use special panels created in Flash so that extensions developers

can create sophisticated graphical interfaces for their extensions (the SuperNudge command dis-

cussed above is an example of such an extension).

Fireworks has a small but dedicated and very innovative community of extension developers that

have created literally hundreds of extensions to augment Fireworks’ already extensive creative

toolset. I use several of them regularly and I will also be dedicating a future article to this sub-

ject alone.

High Quality Output & Efficient Optimization Work Flow

All the creative tools in the world would be rather useless if the application that uses them didn’t

output quality images. Fortunately, Fireworks has been created from the ground up as a Web

graphics creation application so it’s not surprising that it optimizes and exports the smallest, best

looking Web optimized files of any graphic application. In mine and many other people’s experi-

ence, Fireworks consistently exports better quality images at smaller file sizes than any of its

competitors. Try it for yourself and you’ll be amazed at the results.

In Fireworks, you can tweak and preview optimization settings right within the application’s

interface without the need to go to an annoying modal “Save For Web” window. Furthermore,

the Fireworks Preview pane lets you visualize any interactivity you added to slices (like

rollovers, navbars, etc) without the need to test in a browser.

Conclusion

Hopefully, this article has helped you understand what kind of application Fireworks really is

and how it is uniquely designed to help in the creation, optimization and maintenance of Web

graphics and images. There is a lot of misinformation about Fireworks’ true nature and abilities

out there and, with this article, I wanted to counteract some of it by providing clear explanations

and examples from someone who has been using it in the trenches for years (I started using

Fireworks with version 2).

I really hope that the information I provided here will help those who have not yet decided on

a graphic application see how Fireworks can help them. I also hope that long time users who may

have only used a subset of its features will now see it in a new light. In any case, writing it has

given me a new appreciation for the program I ditched Photoshop for years ago and with which

I’ve had so much fun playing… I mean, designing Web sites . It has provided me with the

kind of flexible precision tools I need to create site design the way I like them quickly and pain-

lessly. Fireworks lets me use my creativity without getting in my way and lets me make mistakes

I can fix easily because, as the early Fireworks slogan said: “everything remains editable all

the time”.

It is really fun working with Fireworks!

A) DEFINITION OF RASTERS AND VECTORS

Graphics come in two types, raster and vector. Photoshop, Paintshop Pro, and Photopaint are all

examples of raster programs. Raster images are described by an array of pixels that each have a

given color and intensity value.

Vector images are described by mathematical lines, curves, and fills. Adobe Illustrator, Corel

Draw, and Macromedia Freehand are examples of vector programs.

Both raster and vector images have their advantages and disadvantages. Raster images look more

realistic, but vector images print more easily and can be infinitely scaled up or down with no loss

of quality.

When you 'vectorize' a raster image, you translate it into a system of lines and curves. There are

programs specifically for this, such as Adobe Streamline. Also, many vector programs have the

function built in. The opposite, called 'rendering', takes the mathematical description of a vector

graphic and converts it into discrete pixels.

B) DIFFERENCES BETWEEN RASTERS AND VECTORS

The difference between vector and raster graphics is that raster graphics are composed of pixels,

while vector graphics are composed of paths. A raster graphic, such as a gif or jpeg, is an array

of pixels of various colors, which together form an image. A vector graphic, such as an .eps file

or Adobe Illustrator? file, is composed of paths, or lines, that are either straight or curved. The

data file for a vector image contains the points where the paths start and end, how much the paths

curve, and the colors that either border or fill the paths. Because vector graphics are not made of

pixels, the images can be scaled to be very large without losing quality. Raster graphics, on the

other hand, become "blocky," since each pixel increases in size as the image is made larger. This

is why logos and other designs are typically created in vector format -- the quality will look the

same on a business card as it will on a billboard.

Here are 2 examples of an image when magnified or scaled up. You will notice the difference

in clarity. The mascot design below was designed by Logo Design Works for a client.

Vector Graphics typically are generated using drawing or illustration programs (e.g., Adobe

Illustrator) and are composed of mathematically-defined geometric shapes—lines, objects and

fills. Since vectors entail both magnitude and direction, vector elements thus are comprised of

line segments whose length represents magnitude and whose orientation in space represents

direction.

Vector graphics usually are easily modified within the creating application and generally are not

affected detrimentally by scaling (enlarging or reducing their size). Because vector elements are

mathematically-defined, scaling simply requires modification of their mathematical locations.

However, vector files do not support photographic imagery well and often can be problematic for

cross-platform exchange. Vector graphics typically are saved as EPS format.

This makes vector graphics ideal for logo design. Creating a vector logo is more difficult but the

effort pays for itself when the vector logo file is sent to printers or sign makers etc. The vector

logo can be scaled up or down with out losing quality and would enable smooth transition

between various media.

Raster Graphic Images are produced by digital image capture devices: digital scanners or

digital cameras, or by pixel editing programs (e.g., Adobe Photoshop). Raster images are

composed of a matrix (grid) or bitmap of digital picture elements (pixels). Pixels are squares or

rectangles described as black, white, gray or color. Raster images typically are saved as TIFF

format, but can be saved as EPS as well.

Whereas conversion from vector to raster is easily accomplished, raster conversion to vector is

much more difficult (and often is not possible). Raster images typically are easily shared across

various platforms, but can be more difficult than vector graphics to modify. As well, raster

graphics are impacted by scaling.

Creating a raster logo design using Adobe Photoshop might be ideal for web only usage but if

you are serious about branding, then the resulting raster PSD logo file will be of limited use.

When sent to a printer or sign maker and when they try to scale the raster logo, the quality

deteriorates and pixellation occurs. Yes, agreed, creating the raster logo design in Photoshop

would enable a designer to pile on stunning effects (such as drop shadows, beveling, blurring

etc). But the final deliverable will have limited uses.

Read more about different image file formats. Here is an indepth explanation of vector graphics.

C) INTRODUCTIONS TO DIFFERENT COMPUTER GRAPHICS-

Jump to: navigation, search

For other uses, see Computer graphics (disambiguation).

A Blender 2.45 screenshot, displaying the 3D test model Suzanne.

A 2D rendering of a 3D projection of a 4D Pentachoron performing a double rotation about two

orthogonal planes.

Computer graphics are graphics created using computers and, more generally, the

representation and manipulation of image data by a computer with help from specialized

software and hardware.

The development of computer graphics has made computers easier to interact with, and better for

understanding and interpreting many types of data. Developments in computer graphics have had

a profound impact on many types of media and have revolutionized animation, movies and the

video game industry.

Overview

The term computer graphics has been used in a broad sense to describe "almost everything on

computers that is not text or sound". Typically, the term computer graphics refers to several

different things:

the representation and manipulation of image data by a computer

the various technologies used to create and manipulate images

the sub-field of computer science which studies methods for digitally synthesizing and

manipulating visual content, see study of computer graphics

Computer graphics is widespread today. Computer imagery is found on television, in

newspapers, for example in weather reports, or for example in all kinds of medical investigation

and surgical procedures. A well-constructed graph can present complex statistics in a form that is

easier to understand and interpret. In the media "such graphs are used to illustrate papers, reports,

thesis", and other presentation material.[2]

Many powerful tools have been developed to visualize data. Computer generated imagery can be

categorized into several different types: 2D, 3D, and animated graphics. As technology has

improved, 3D computer graphics have become more common, but 2D computer graphics are still

widely used. Computer graphics has emerged as a sub-field of computer science which studies

methods for digitally synthesizing and manipulating visual content. Over the past decade, other

specialized fields have been developed like information visualization, and scientific visualization

more concerned with "the visualization of three dimensional phenomena (architectural,

meteorological, medical, biological, etc.), where the emphasis is on realistic renderings of

volumes, surfaces, illumination sources, and so forth, perhaps with a dynamic (time)

component".[3]

History

SAGE Sector Control Room.

The phrase “Computer Graphics” was coined in 1960 by William Fetter, a graphic designer for

Boeing.[4] The field of computer graphics developed with the emergence of computer graphics

hardware. Early projects like the Whirlwind and SAGE Projects introduced the CRT as a viable

display and interaction interface and introduced the light pen as an input device.

Initial 1960s developments

Further advances in computing led to greater advancements in interactive computer graphics. In

1959, the TX-2 computer was developed at MIT's Lincoln Laboratory. The TX-2 integrated a

number of new man-machine interfaces. A light pen could be used to draw sketches on the

computer using Ivan Sutherland's revolutionary Sketchpad software.[4] Using a light pen,

Sketchpad allowed one to draw simple shapes on the computer screen, save them and even recall

them later. The light pen itself had a small photoelectric cell in its tip. This cell emitted an

electronic pulse whenever it was placed in front of a computer screen and the screen's electron

gun fired directly at it. By simply timing the electronic pulse with the current location of the

electron gun, it was easy to pinpoint exactly where the pen was on the screen at any given

moment. Once that was determined, the computer could then draw a cursor at that location.

Sutherland seemed to find the perfect solution for many of the graphics problems he faced. Even

today, many standards of computer graphics interfaces got their start with this early Sketchpad

program. One example of this is in drawing constraints. If one wants to draw a square for

example, s/he does not have to worry about drawing four lines perfectly to form the edges of the

box. One can simply specify that s/he wants to draw a box, and then specify the location and size

of the box. The software will then construct a perfect box, with the right dimensions and at the

right location. Another example is that Sutherland's software modeled objects - not just a picture

of objects. In other words, with a model of a car, one could change the size of the tires without

affecting the rest of the car. It could stretch the body of the car without deforming the tires.

Further 1960s developments

Spacewar! running on the Computer History Museum's PDP-1.

Also in 1961 another student at MIT, Steve Russell, created the first video game, Spacewar.

Written for the DEC PDP-1, Spacewar was an instant success and copies started flowing to other

PDP-1 owners and eventually even DEC got a copy. The engineers at DEC used it as a

diagnostic program on every new PDP-1 before shipping it. The sales force picked up on this

quickly enough and when installing new units, would run the world's first video game for their

new customers.

E. E. Zajac, a scientist at Bell Telephone Laboratory (BTL), created a film called "Simulation of

a two-giro gravity attitude control system" in 1963.[5] In this computer generated film, Zajac

showed how the attitude of a satellite could be altered as it orbits the Earth. He created the

animation on an IBM 7090 mainframe computer. Also at BTL, Ken Knowlton, Frank Sindon and

Michael Noll started working in the computer graphics field. Sindon created a film called Force,

Mass and Motion illustrating Newton's laws of motion in operation. Around the same time, other

scientists were creating computer graphics to illustrate their research. At Lawrence Radiation

Laboratory, Nelson Max created the films, "Flow of a Viscous Fluid" and "Propagation of Shock

Waves in a Solid Form." Boeing Aircraft created a film called "Vibration of an Aircraft."

It was not long before major corporations started taking an interest in computer graphics. TRW,

Lockheed-Georgia, General Electric and Sperry Rand are among the many companies that were

getting started in computer graphics by the mid-1960s. IBM was quick to respond to this interest

by releasing the IBM 2250 graphics terminal, the first commercially available graphics

computer.

Pong arcade version

Ralph Baer, a supervising engineer at Sanders Associates, came up with a home video game in

1966 that was later licensed to Magnavox and called the Odyssey. While very simplistic, and

requiring fairly inexpensive electronic parts, it allowed the player to move points of light around

on a screen. It was the first consumer computer graphics product.

Also in 1966, Sutherland at MIT invented the first computer controlled head-mounted display

(HMD). Called the Sword of Damocles because of the hardware required for support, it

displayed two separate wireframe images, one for each eye. This allowed the viewer to see the

computer scene in stereoscopic 3D. After receiving his Ph.D. from MIT, Sutherland became

Director of Information Processing at ARPA (Advanced Research Projects Agency), and later

became a professor at Harvard.

David C. Evans was director of engineering at Bendix Corporation's computer division from

1953 to 1962, after which he worked for the next five years as a visiting professor at Berkeley.

There he continued his interest in computers and how they interfaced with people. In 1968 the

University of Utah recruited Evans to form a computer science program, and computer graphics

quickly became his primary interest. This new department would become the world's primary

research center for computer graphics.

In 1967 Sutherland was recruited by Evans to join the computer science program at the

University of Utah. There he perfected his HMD. Twenty years later, NASA would re-discover

his techniques in their virtual reality research. At Utah, Sutherland and Evans were highly sought

after consultants by large companies but they were frustrated at the lack of graphics hardware

available at the time so they started formulating a plan to start their own company.

In 1969, the ACM initiated A Special Interest Group in Graphics (SIGGRAPH) which organizes

conferences, graphics standards, and publications within the field of computer graphics. In 1973,

the first annual SIGGRAPH conference was held, which has become one of the focuses of the

organization. SIGGRAPH has grown in size and importance as the field of computer graphics

has expanded over time.

1970s

Many of the most important early breakthroughs in computer graphics research occurred at the

University of Utah in the 1970s. A student by the name of Edwin Catmull started at the

University of Utah in 1970 and signed up for Sutherland's computer graphics class. Catmull had

just come from The Boeing Company and had been working on his degree in physics. Growing

up on Disney, Catmull loved animation yet quickly discovered that he did not have the talent for

drawing. Now Catmull (along with many others) saw computers as the natural progression of

animation and they wanted to be part of the revolution. The first animation that Catmull saw was

his own. He created an animation of his hand opening and closing. It became one of his goals to

produce a feature length motion picture using computer graphics. In the same class, Fred Parke

created an animation of his wife's face. Because of Evan's and Sutherland's presence, UU was

gaining quite a reputation as the place to be for computer graphics research so Catmull went

there to learn 3D animation.

As the UU computer graphics laboratory was attracting people from all over, John Warnock was

one of those early pioneers; he would later found Adobe Systems and create a revolution in the

publishing world with his PostScript page description language. Tom Stockham led the image

processing group at UU which worked closely with the computer graphics lab. Jim Clark was

also there; he would later found Silicon Graphics, Inc.

The first major advance in 3D computer graphics was created at UU by these early pioneers, the

hidden-surface algorithm. In order to draw a representation of a 3D object on the screen, the

computer must determine which surfaces are "behind" the object from the viewer's perspective,

and thus should be "hidden" when the computer creates (or renders) the image.

1980s

In the early 1980s, the availability of bit-slice and 16-bit microprocessors started to revolutionise

high resolution computer graphics terminals which now increasingly became intelligent, semi-

standalone and standalone workstations. Graphics and application processing were increasingly

migrated to the intelligence in the workstation, rather than continuing to rely on central

mainframe and mini-computers. Typical of the early move to high resolution computer graphics

intelligent workstations for the computer-aided engineering market were the Orca 1000, 2000

and 3000 workstations, developed by Orcatech of Ottawa, a spin-off from Bell-Northern

Research, and led by an early workstation pioneer David John Pearson. The Orca 3000 was

based on Motorola 68000 and AMD bit-slice processors and had Unix as its operating system. It

was targeted squarely at the sophisticated end of the design engineering sector. Artists and

graphic designers began to see the personal computer, particularly the Commodore Amiga and

Macintosh, as a serious design tool, one that could save time and draw more accurately than

other methods. In the late 1980s, SGI computers were used to create some of the first fully

computer-generated short films at Pixar. The Macintosh remains a highly popular tool for

computer graphics among graphic design studios and businesses. Modern computers, dating

from the 1980s often use graphical user interfaces (GUI) to present data and information with

symbols, icons and pictures, rather than text. Graphics are one of the five key elements of

multimedia technology.

1990s

3D graphics became more popular in the 1990s in gaming, multimedia and animation. At the end

of the 80s and beginning of the nineties were created, in France, the very first computer graphics

TV series: "La Vie des bêtes" by studio Mac Guff Ligne (1988), Les Fables Géométriques J.-Y.

Grall, Georges Lacroix and Renato (studio Fantome, 1990–1993) and Quarxs, the first HDTV

computer graphics series by Maurice Benayoun and François Schuiten (studio Z-A production,

1991–1993). In 1995, Toy Story, the first full-length computer-generated animation film, was

released in cinemas worldwide. In 1996, Quake, one of the first fully 3D games, was released.

Since then, computer graphics have only become more detailed and realistic, due to more

powerful graphics hardware and 3D modeling software.

Image types

Two-dimensional

Raster graphic sprites (left) and masks (right)

2D computer graphics are the computer-based generation of digital images—mostly from two-

dimensional models, such as 2D geometric models, text, and digital images, and by techniques

specific to them.

2D computer graphics are mainly used in applications that were originally developed upon

traditional printing and drawing technologies, such as typography, cartography, technical

drawing, advertising, etc.. In those applications, the two-dimensional image is not just a

representation of a real-world object, but an independent artifact with added semantic value; two-

dimensional models are therefore preferred, because they give more direct control of the image

than 3D computer graphics, whose approach is more akin to photography than to typography.

Pixel art

Pixel art is a form of digital art, created through the use of raster graphics software, where

images are edited on the pixel level. Graphics in most old (or relatively limited) computer and

video games, graphing calculator games, and many mobile phone games are mostly pixel art.

Vector graphics

Example showing effect of vector graphics versus raster (bitmap) graphics.

Vector graphics formats are complementary to raster graphics, which is the representation of

images as an array of pixels, as it is typically used for the representation of photographic images [6] Vector graphics consists in encoding information about shapes and colors that comprise the

image, which can allow for more flexibility in rendering. There are instances when working with

vector tools and formats is best practice, and instances when working with raster tools and

formats is best practice. There are times when both formats come together. An understanding of

the advantages and limitations of each technology and the relationship between them is most

likely to result in efficient and effective use of tools.

Three-dimensional

3D computer graphics in contrast to 2D computer graphics are graphics that use a three-

dimensional representation of geometric data that is stored in the computer for the purposes of

performing calculations and rendering 2D images. Such images may be for later display or for

real-time viewing.

Despite these differences, 3D computer graphics rely on many of the same algorithms as 2D

computer vector graphics in the wire frame model and 2D computer raster graphics in the final

rendered display. In computer graphics software, the distinction between 2D and 3D is

occasionally blurred; 2D applications may use 3D techniques to achieve effects such as lighting,

and primarily 3D may use 2D rendering techniques.

3D computer graphics are often referred to as 3D models. Apart from the rendered graphic, the

model is contained within the graphical data file. However, there are differences. A 3D model is

the mathematical representation of any three-dimensional object. A model is not technically a

graphic until it is visually displayed. Due to 3D printing, 3D models are not confined to virtual

space. A model can be displayed visually as a two-dimensional image through a process called

3D rendering, or used in non-graphical computer simulations and calculations. There are some

3D computer graphics software for users to create 3D images.

Computer animation

Example of Computer animation produced using Motion capture

Fractal landscape, an example of computer-generated imagery. .

Computer animation is the art of creating moving images via the use of computers. It is a

subfield of computer graphics and animation. Increasingly it is created by means of 3D computer

graphics, though 2D computer graphics are still widely used for stylistic, low bandwidth, and

faster real-time rendering needs. Sometimes the target of the animation is the computer itself, but

sometimes the target is another medium, such as film. It is also referred to as CGI (Computer-

generated imagery or computer-generated imaging), especially when used in films.

Virtual entities may contain and be controlled by assorted attributes, such as transform values

(location, orientation, and scale) stored in an object's transformation matrix. Animation is the

change of an attribute over time. Multiple methods of achieving animation exist; the rudimentary

form is based on the creation and editing of keyframes, each storing a value at a given time, per

attribute to be animated. The 2D/3D graphics software will interpolate between keyframes,

creating an editable curve of a value mapped over time, resulting in animation. Other methods of

animation include procedural and expression-based techniques: the former consolidates related

elements of animated entities into sets of attributes, useful for creating particle effects and crowd

simulations; the latter allows an evaluated result returned from a user-defined logical expression,

coupled with mathematics, to automate animation in a predictable way (convenient for

controlling bone behavior beyond what a hierarchy offers in skeletal system set up).

To create the illusion of movement, an image is displayed on the computer screen then quickly

replaced by a new image that is similar to the previous image, but shifted slightly. This technique

is identical to the illusion of movement in television and motion pictures.

Concepts and principles

Images are typically produced by optical devices;such as cameras, mirrors, lenses, telescopes,

microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.

A digital image is a representation of a two-dimensional image in binary format as a sequence of

ones and zeros. Digital images include both vector images and raster images, but raster images

are more commonly used.

Pixel

In the enlarged portion of the image individual pixels are rendered as squares and can be easily

seen.

In digital imaging, a pixel (or picture element[7]) is a single point in a raster image. Pixels are

normally arranged in a regular 2-dimensional grid, and are often represented using dots or

squares. Each pixel is a sample of an original image, where more samples typically provide a

more accurate representation of the original. The intensity of each pixel is variable; in color

systems, each pixel has typically three components such as red, green, and blue.

Graphics

Graphics are visual presentations on some surface, such as a wall, canvas, computer screen,

paper, or stone to brand, inform, illustrate, or entertain. Examples are photographs, drawings,

line art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering

drawings, or other images. Graphics often combine text, illustration, and color. Graphic design

may consist of the deliberate selection, creation, or arrangement of typography alone, as in a

brochure, flier, poster, web site, or book without any other element. Clarity or effective

communication may be the objective, association with other cultural elements may be sought, or

merely, the creation of a distinctive style.

Rendering

Rendering is the process of generating an image from a model (or models in what collectively

could be called a scene file), by means of computer programs. A scene file contains objects in a

strictly defined language or data structure; it would contain geometry, viewpoint, texture,

lighting, and shading information as a description of the virtual scene. The data contained in the

scene file is then passed to a rendering program to be processed and output to a digital image or

raster graphics image file. The rendering program is usually built into the computer graphics

software, though others are available as plug-ins or entirely separate programs. The term

"rendering" may be by analogy with an "artist's rendering" of a scene. Though the technical

details of rendering methods vary, the general challenges to overcome in producing a 2D image

from a 3D representation stored in a scene file are outlined as the graphics pipeline along a

rendering device, such as a GPU. A GPU is a purpose-built device able to assist a CPU in

performing complex rendering calculations. If a scene is to look relatively realistic and

predictable under virtual lighting, the rendering software should solve the rendering equation.

The rendering equation does not account for all lighting phenomena, but is a general lighting

model for computer-generated imagery. 'Rendering' is also used to describe the process of

calculating effects in a video editing file to produce final video output.

3D projection

3D projection is a method of mapping three dimensional points to a two dimensional

plane. As most current methods for displaying graphical data are based on planar two

dimensional media, the use of this type of projection is widespread, especially in

computer graphics, engineering and drafting.

Ray tracing

Ray tracing is a technique for generating an image by tracing the path of light through

pixels in an image plane. The technique is capable of producing a very high degree of

photorealism; usually higher than that of typical scanline rendering methods, but at a

greater computational cost.

Shading

Example of shading.

Shading refers to depicting depth in 3D models or illustrations by varying levels of

darkness. It is a process used in drawing for depicting levels of darkness on paper by

applying media more densely or with a darker shade for darker areas, and less densely or

with a lighter shade for lighter areas. There are various techniques of shading including

cross hatching where perpendicular lines of varying closeness are drawn in a grid pattern

to shade an area. The closer the lines are together, the darker the area appears. Likewise,

the farther apart the lines are, the lighter the area appears. The term has been recently

generalized to mean that shaders are applied.

Texture mapping

Texture mapping is a method for adding detail, surface texture, or colour to a computer-

generated graphic or 3D model. Its application to 3D graphics was pioneered by Dr

Edwin Catmull in 1974. A texture map is applied (mapped) to the surface of a shape, or

polygon. This process is akin to applying patterned paper to a plain white box.

Multitexturing is the use of more than one texture at a time on a polygon.[8] Procedural

textures (created from adjusting parameters of an underlying algorithm that produces an

output texture), and bitmap textures (created in an image editing application or imported

from a digital camera) are, generally speaking, common methods of implementing texture

definition on 3D models in computer graphics software, while intended placement of

textures onto a model's surface often requires a technique known as UV mapping

(arbitrary, manual layout of texture coordinates) for polygon surfaces, while NURBS

surfaces have their own intrinsic parameterization used as texture coordinates.

Anti-aliasing

Rendering resolution-independent entities (such as 3D models) for viewing on a raster

(pixel-based) device such as a LCD display or CRT television inevitably causes aliasing

artifacts mostly along geometric edges and the boundaries of texture details; these

artifacts are informally called "jaggies". Anti-aliasing methods rectify such problems,

resulting in imagery more pleasing to the viewer, but can be somewhat computationally

expensive. Various anti-aliasing algorithms (such as supersampling) are able to be

employed, then customized for the most efficient rendering performance versus quality of

the resultant imagery; a graphics artist should consider this trade-off if anti-aliasing

methods are to be used. A pre-anti-aliased bitmap texture being displayed on a screen (or

screen location) at a resolution different than the resolution of the texture itself (such as a

textured model in the distance from the virtual camera) will exhibit aliasing artifacts,

while any procedurally-defined texture will always show aliasing artifacts as they are

resolution-independent; techniques such as mipmapping and texture filtering help to

solve texture-related aliasing problems.

Volume rendering

Volume rendered CT scan of a forearm with different colour schemes for muscle, fat, bone, and

blood.

Volume rendering is a technique used to display a 2D projection of a 3D discretely sampled data

set. A typical 3D data set is a group of 2D slice images acquired by a CT or MRI scanner.

Usually these are acquired in a regular pattern (e.g., one slice every millimeter) and usually have

a regular number of image pixels in a regular pattern. This is an example of a regular volumetric

grid, with each volume element, or voxel represented by a single value that is obtained by

sampling the immediate area surrounding the voxel.

3D modeling

3D modeling is the process of developing a mathematical, wireframe representation of any three-

dimensional object, called a "3D model", via specialized software. Models may be created

automatically or manually; the manual modeling process of preparing geometric data for 3D

computer graphics is similar to plastic arts such as sculpting. 3D models may be created using

multiple approaches: use of NURBS curves to generate accurate and smooth surface patches,

polygonal mesh modeling (manipulation of faceted geometry), or polygonal mesh subdivision

(advanced tessellation of polygons, resulting in smooth surfaces similar to NURBS models). A

3D model can be displayed as a two-dimensional image through a process called 3D rendering,

used in a computer simulation of physical phenomena, or animated directly for other purposes.

The model can also be physically created using 3D Printing devices.

Pioneers in graphic design

Charles Csuri

Charles Csuri is a pioneer in computer animation and digital fine art and created the first

computer art in 1964. Csuri was recognized by Smithsonian as the father of digital art and

computer animation, and as a pioneer of computer animation by the Museum of Modern

Art (MoMA) and Association for Computing Machinery-SIGGRAPH.

Donald P. Greenberg

Donald P. Greenberg is a leading innovator in computer graphics. Greenberg has

authored hundreds of articles and served as a teacher and mentor to many prominent

computer graphic artists, animators, and researchers such as Robert L. Cook, Marc

Levoy, and Wayne Lytle. Many of his former students have won Academy Awards for

technical achievements and several have won the SIGGRAPH Achievement Award.

Greenberg was the founding director of the NSF Center for Computer Graphics and

Scientific Visualization.

Aaron Marcus

Aaron Marcus is one of the first graphic designer in the world to work with computer

graphics. He has written over 250 articles and written/co-written six books. He has

published, lectured, tutored, and consulted internationally for more than 40 years and has

been an invited keynote/plenary speaker at conferences of ACM/SIGCHI,

ACM/SIGGRAPH, Usability Professionals Association (UPA). He was was named an

AIGA Fellow in 2007 and was elected in 2008 to the CHI Academy. He is the founder of

Aaron Marcus and Associates, Inc., a pioneering, world-renowned design firm

specializing in user-interface/user-experience development applications.

A. Michael Noll

Noll was one of the first researchers to use a digital computer to create artistic patterns

and to formalize the use of random processes in the creation of visual arts. He began

creating digital computer art in 1962, making him one of the earliest digital computer

artists. In 1965, Noll along with Frieder Nake and Georg Nees were the first to publicly

exhibit their computer art. During April 1965, the Howard Wise Gallery exhibited Noll's

computer art along with random-dot patterns by Bela Julesz.

A modern render of the Utah teapot, an iconic model in 3D computer graphics created by Martin

Newell, 1975.

Other pioneers

Jim Blinn

Arambilet

Benoît B. Mandelbrot

Henri Gouraud

Bui Tuong Phong

Pierre Bézier

Paul de Casteljau

Daniel J. Sandin

Alvy Ray Smith

Ton Roosendaal

Ivan Sutherland

Steve Russell

Ed Catmull

Fred Parke

Study of computer graphics

The study of computer graphics is a sub-field of computer science which studies methods for

digitally synthesizing and manipulating visual content. Although the term often refers to three-

dimensional computer graphics, it also encompasses two-dimensional graphics and image

processing.

As an academic discipline, computer graphics studies the manipulation of visual and geometric

information using computational techniques. It focuses on the mathematical and computational

foundations of image generation and processing rather than purely aesthetic issues. Computer

graphics is often differentiated from the field of visualization, although the two fields have many

similarities.

Applications

Computer graphics portal

Computer Science portal

Computer graphics may be used in the following areas:

Computational biology

Computational physics

Computer-aided design

Computer simulation

Digital art

Education

Graphic design

Infographics

Information visualization

Rational drug design

Scientific visualization

Video Games

Virtual reality

Web design

D) BMP, PNG, TIFF, GIF, JPEG

BMP

The BMP file format, also known as bitmap image file or Device Independent Bitmap (DIB)

file format or simply a bitmap, is a raster graphics image file format used to store bitmap digital

images, independently of the display device (such as a graphics adapter), especially on Microsoft

Windows and OS/2 operating systems.

The BMP file format is capable of storing 2D digital images of arbitrary width, height, and

resolution, both monochrome and color, in various color depths, and optionally with data

compression, alpha channels, and color profiles.

Microsoft has defined a particular representation of color bitmaps of

different color depths, as an aid to exchanging bitmaps between devices and applications with a

variety of internal representations. They called these device-independent bitmaps or DIBs, and

the file format for them is called DIB file format or BMP image file format. According to

Microsoft support:[1]

A device-independent bitmap (DIB) is a format used to define device-independent bitmaps in

various color resolutions. The main purpose of DIBs is to allow bitmaps to be moved from one

device to another (hence, the device-independent part of the name). A DIB is an external format,

in contrast to a device-dependent bitmap, which appears in the system as a bitmap object

(created by an application...). A DIB is normally transported in metafiles (usually using the

StretchDIBits() function), BMP files, and the Clipboard (CF_DIB data format).

The following sections discuss the data stored in the BMP file or DIB in details. This is the

standard BMP file format.[1] Some applications create bitmap image files which are not

compliant with the current Microsoft documentation. Also, not all fields are used; a value of 0

will be found in these unused fields.

PNG-

Portable Network Graphics (PNG ) is a bitmapped image format that employs

lossless data compression. PNG was created to improve upon and replace GIF (Graphics

Interchange Format) as an image-file format not requiring a patent license. The initialism PNG

can also be interpreted as a recursive initialism for "PNG's Not GIF".

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors),

grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A]

images (with or without alpha channel). PNG was designed for transferring images on the

Internet, not for professional-quality print graphics, and therefore does not support non-RGB

color spaces such as CMYK.

PNG files nearly always use file extension PNG or png and are assigned MIME media type

image/png; it was approved for this use by the Internet Engineering Steering Group on October

14, 1996. PNG was published as an ISO/IEC standard in 2004.

TIFF

TIFF (originally standing for Tagged Image File Format) is a file format for storing images, popular among graphic artists, the publishing industry, and both amateur and professional photographers in general. As of 2009, it is under the control of Adobe Systems. Originally created by the company Aldus for use with what was then called "desktop publishing", the TIFF format is widely supported by image-manipulation applications, by publishing and page layout applications, by scanning, faxing, word processing, optical character recognition and other applications. Adobe Systems, which acquired Aldus, now holds the copyright to the TIFF specification. TIFF has not had a major update since 1992, though several Aldus/Adobe technical notes have been published with minor extensions to the format, and several specifications, including TIFF/EP (ISO 12234-2), TIFF/IT (ISO 12639), TIFF-F (RFC 2306) and TIFF-FX (RFC 3949) have been based on the TIFF 6.0 specification.

GIF

The Graphics Interchange Format (GIF; /ˈdʒɪf/ or /ˈɡɪf/) is a bitmap image format that was

introduced by CompuServe in 1987 and has since come into widespread usage on the World

Wide Web due to its wide support and portability.

The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of

up to 256 distinct colors. The colors are chosen from the 24-bit RGB color space. It also supports

animations and allows a separate palette of 256 colors for each frame. The color limitation makes

the GIF format unsuitable for reproducing color photographs and other images with continuous

color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.

GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression

technique to reduce the file size without degrading the visual quality. This compression

technique was patented in 1985. Controversy over the licensing agreement between the patent

holder, Unisys, and CompuServe in 1994 spurred the development of the Portable Network

Graphics (PNG) standard; since then all the relevant patents have expired.

JPEG

The name "JPEG" stands for Joint Photographic Experts Group

In computing, JPEG ( /ˈdʒeɪpɛɡ/ [pronounced as jay - peg] is a commonly used method of

lossy compression for digital photography (image). The degree of compression can be adjusted,

allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves

10:1 compression with little perceptible loss in image quality.

JPEG compression is used in a number of image file formats. JPEG/Exif is the most common

image format used by digital cameras and other photographic image capture devices; along with

JPEG/JFIF, it is the most common format for storing and transmitting photographic images on

the World Wide Web.[citation needed] These format variations are often not distinguished, and are

simply called JPEG.

The term "JPEG" is an acronym for the Joint Photographic Experts Group which created the

standard. The MIME media type for JPEG is image/jpeg (defined in RFC 1341), except in

Internet Explorer, which provides a MIME type of image/pjpeg when uploading JPEG images.

It supports a maximum image size of 65535×65535.

A) SETTING UP OF GRAPHIC PAGES, B) TERMS OF WIDTH, HEIGHT, RESOLUTION AND COLOUR-

Image resolution is an umbrella term that describes the detail an image holds. The term

applies to raster digital images, film images, and other types of images. Higher resolution means

more image detail.

Image resolution can be measured in various ways. Basically, resolution quantifies how close

lines can be to each other and still be visibly resolved. Resolution units can be tied to physical

sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height,

also known simply as lines, TV lines, or TVL), or to angular subtenant. Line pairs are often used

instead of lines; a line pair comprises a dark line and an adjacent light line. A line is either a dark

line or a light line. A resolution of 10 lines per millimeter means 5 dark lines alternating with 5

light lines, or 5 line pairs per millimeter (5 LP/mm). Photographic lens and film resolution are

most often quoted in line pairs per millimeter.

Resolution of digital images

The resolution of digital images can be described in many different ways.

Pixel resolution

The term resolution is often used for a pixel count in digital imaging, even though American,

Japanese, and international standards specify that it should not be so used, at least in the digital

camera field.[1][2] An image of N pixels high by M pixels wide can have any resolution less than

N lines per picture height, or N TV lines. But when the pixel counts are referred to as resolution,

the convention is to describe the pixel resolution with the set of two positive integer numbers,

where the first number is the number of pixel columns (width) and the second is the number of

pixel rows (height), for example as 640 by 480. Another popular convention is to cite resolution

as the total number of pixels in the image, typically given as number of megapixels, which can

be calculated by multiplying pixel columns by pixel rows and dividing by one million. Other

conventions include describing pixels per length unit or pixels per area unit, such as pixels per

inch or per square inch. None of these pixel resolutions are true resolutions, but they are widely

referred to as such; they serve as upper bounds on image resolution.

According to the same standards, the number of effective pixels that an image sensor or digital

camera has is the count of elementary pixel sensors that contribute to the final image, as opposed

to the number of total pixels, which includes unused or light-shielded pixels around the edges.

Below is an illustration of how the same image might appear at different pixel resolutions, if the

pixels were poorly rendered as sharp squares (normally, a smooth image reconstruction from

pixels would be preferred, but for illustration of pixels, the sharp squares make the point better).

An image that is 2048 pixels in width and 1536 pixels in height has a total of 2048×1536 =

3,145,728 pixels or 3.1 megapixels. One could refer to it as 2048 by 1536 or a 3.1-megapixel

image.

Unfortunately, the count of pixels isn't a real measure of the resolution of digital camera images,

because color image sensors are typically set up to alternate color filter types over the light

sensitive individual pixel sensors. Digital images ultimately require a red, green, and blue value

for each pixel to be displayed or printed, but one individual pixel in the image sensor will only

supply one of those three pieces of information. The image has to be interpolated or demosaiced

to produce all three colors for each output pixel.

Spatial resolution

The 1951 USAF resolution test target is a classic test target used to determine spatial resolution

of imaging sensors and imaging systems.

Image at left has a higher pixel count than the one to the right, but is still of worse spatial

resolution.

The measure of how closely lines can be resolved in an image is called spatial resolution, and it

depends on properties of the system creating the image, not just the pixel resolution in pixels per

inch (ppi). For practical purposes the clarity of the image is decided by its spatial resolution, not

the number of pixels in an image. In effect, spatial resolution refers to the number of independent

pixel values per unit length.

The spatial resolution of computer monitors is generally 72 to 100 lines per inch, corresponding

to pixel resolutions of 72 to 100 ppi. With scanners, optical resolution is sometimes used to

distinguish spatial resolution from the number of pixels per inch.

In geographic information systems (GISs), spatial resolution is measured by the ground sample

distance (GSD) of an image, the pixel spacing on the Earth's surface.

In astronomy one often measures spatial resolution in data points per arcsecond subtended at the

point of observation, since the physical distance between objects in the image depends on their

distance away and this varies widely with the object of interest. On the other hand, in electron

microscopy, line or fringe resolution refers to the minimum separation detectable between

adjacent parallel lines (e.g. between planes of atoms), while point resolution instead refers to the

minimum separation between adjacent points that can be both detected and interpreted e.g. as

adjacent columns of atoms, for instance. The former often helps one detect periodicity in

specimens, while the latter (although more difficult to achieve) is key to visualizing how

individual atoms interact.

In Stereoscopic 3D images, spatial resolution could be defined as the spatial information

recorded or captured by two viewpoints of a stereo camera (left and right camera). The effects of

spatial resolution on overall perceived resolution of an image on a person's mind are yet not fully

documented. It could be argued that such "spatial resolution" could add an image that then would

not depend solely on pixel count or Dots per inch alone, when classifying and interpreting

overall resolution of a given photographic image or video frame.

Spectral resolution

Color images distinguish light of different spectra. Multi-spectral images resolve even finer

differences of spectrum or wavelength than is needed to reproduce color. That is, they can have

higher spectral resolution. That is the strength of each band that is created. ( Lihongeni mulama:

2008)

Temporal resolution

Movie cameras and high-speed cameras can resolve events at different points in time. The time

resolution used for movies is usually 15 to 30 frames per second (frames/s), while high-speed

cameras may resolve 100 to 1000 frames/s, or even more.

Many cameras and displays offset the color components relative to each other or mix up

temporal with spatial resolution:

digital camera (Bayer color filter array)

LCD (Triangular pixel geometry)

CRT (shadow mask)

Radiometric resolution

Main article: Color depth

Radiometric resolution determines how finely a system can represent or distinguish differences

of intensity, and is usually expressed as a number of levels or a number of bits, for example 8

bits or 256 levels that is typical of computer image files. The higher the radiometric resolution,

the better subtle differences of intensity or reflectivity can be represented, at least in theory. In

practice, the effective radiometric resolution is typically limited by the noise level, rather than by

the number of bits of representation.

Resolution in various media

This article needs additional citations for verification. Please help improve this article

by adding citations to reliable sources. Unsourced material may be challenged and

removed. (April 2008)

This is a list of traditional, analog horizontal resolutions for various media. The list only includes

popular formats, not rare formats, and all values are approximate (rounded to the nearest 10),

since the actual quality can vary machine-to-machine or tape-to-tape. For ease-of-comparison, all

values are for the NTSC system. (For PAL systems, replace 480 with 576.)

Analog and early digital

o 352×240 : Video CD

o 300×480 : Umatic, Betamax, VHS, Video8

o 350×480 : Super Betamax, Betacam

o 420×480 : LaserDisc, Super VHS, Hi8

o 640×480 : Analog broadcast (NTSC)

o 670×480 : Enhanced Definition Betamax

o 768×576 : Analog broadcast (PAL, SECAM)

Digital

o 720×480 : D-VHS, DVD, miniDV, Digital8, Digital Betacam

o 720×480 : Widescreen DVD (anamorphic)

o 1280×720 : D-VHS, HD DVD, Blu-ray, HDV (miniDV)

o 1440×1080 : HDV (miniDV)

o 1920×1080 : HDV (miniDV), AVCHD, HD DVD, Blu-ray, HDCAM SR

o 2048×1080 : 2K Digital Cinema

o 4096×2160 : 4K Digital Cinema

o 7680×4320 : UHDTV

o Sequences from newer films are scanned at 2,000, 4,000, or even 8,000 columns,

called 2K, 4K, and 8K, for quality visual-effects editing on computers.

Film

o 35 mm film is scanned for release on DVD at 1080 or 2000 lines as of 2005.

o The actual resolution of 35 mm camera original negatives is the subject of much

debate. Measured resolutions of negative film have ranged from 25-200 lp/mm,

which equates to a range of 325 lines for 2-perf, to (theoretically) over 2300 lines

for 4-perf shot on T-Max 100.[3][4][5] Archivists generally agree that 4k scanning

of 35mm is more than adequate for archival purposes.[6] However some

photography sources gives 5380 x 3620 as the resolution of 35mm film.[7] It is

similar to 19.5 Mpix, of course with identical spatial resolution.[8]

o IMAX, including IMAX HD and OMNIMAX: approximately 10,000×7000 (7000

lines) resolution. It is about 70 Mpix,[9] which may be compared to the biggest

resolution, single sensor digital cameras(as of January 2012) - 80 Mpix[10]

See also

Display resolution

Dots per inch

Image scanner

Pixel density

C) CREATING BASIC SHAPES

Basic Shapes in Photoshop 1

Although the screenshots for this beginners' tutorial were done with Photoshop v.7, there are not many differences for users of PS 8 or earlier versions.

My keyboard shortcuts are for PC. If you are using a Mac, you need to convert these. Essentially, Alt = Option and Ctrl = Command.

I know that there are other ways to make shapes, including the Shape tool. I cover that tool in some depth in my Shape tutorial, "Get into Shape." This tutorial will teach you many valuable Photoshop skills involving selections.

In this tutorial, you will make the rectangle and the circle. In Basic Shapes 2, you will make the Pearly Button.

Beginners' TIPS:

You may find helpful clues if you hover over the pictures. Also, if there is an item in purple that you want to read more about, click it.

You will find that the last two projects depend upon knowledge you will have gained from working through the first one, so if you do start anywhere but the beginning, and run into difficulty, you will do well to start over at the beginning. :)

Here are some things you will learn as you work though this tutorial:

How to make a new layer and name it. How to make rectangles and ellipses. How to make squares and circles. Choosing foreground and background colors. Two ways to fill a selection with a color. How to fill a selection with two different kinds of gradients. What it means to stroke a selection and how to do it.

How to use multiple layers to create an effect. Using Layer Styles to create a bevel and a Drop Shadow.

Using Brush Options to make an Airbrush. How to use the Dodge tool. How to save a file in PSD format. How to save a file in JPG format. About quality levels in JPG's. Keyboard shortcuts:

o Alt-Backspace o Ctrl-Backspace o Ctrl-S o Ctrl-D

A. Rectangle

1. File -> New. Make your canvas 300x300. 72 dpi is fine, and you should be in RGB mode.

2. Find your Layers palette and click the New Layer icon at the bottom right next to the trash can. Double-click the name of the layer in the layers palette and type in a new name. I gave mine the clever moniker, "Rectangle."

3. With the Rectangle layer selected in the layers palette, choose the Rectangular Marquee tool in the toolbar. Check the Options bar and be sure that you have Feather of 0 and Style is Normal.

Then drag a rectangle across your canvas as I have done here. This is actually a "Rectangular Selection."

4. Click the foreground color square, (here mine is red) and then choose a color for your rectangle. Click OK.

Now I said that this is a "rectangular selection," and not a "rectangle." Why? Well, a selection on an empty layer is empty, because there are no pixels within it. Let's fill the selection with pixels and make a real rectangle.

5. As with most operations in Photoshop, there are several ways to fill a selection. Here is my favorite way: hold the Alt key and click the backspace key. This fills any selection with your foreground color.

Digression: If Alt-Backspace fills the selection with the foreground color, guess what Ctrl-Backspace does?

(Hint: Be sure that your background color in your toolbox is something other than white when you test this, or you won't see what it does.)

6. Next let's make a border on the rectangle, an operation known as stroking the selection. Click your foreground color square and choose a different color. I chose black. Click OK.

7. In the menu, click Edit -> Stroke. (Notice "Fill" there. That is the other way to fill a selection.) In the dialog box that appears, type in a number of pixels for the width of your border. I used 4. Decide whether you want the stroke to go inside, outside or centered on the selection. Click OK.

Ctrl-D to deselect. Done!

B. Circle

Next you are going to make a circular selection, then fill it and stroke it.

1. File > New and make your canvas 300x300. 72 dpi is fine, and you should be in RGB mode. Start on a new layer as you did for the rectangle. (Think about how to do it before you look back.)

2. Click and hold the rectangular marquee tool till the other tools under it fly out. (Each of the tools with the tiny arrow in the lower right corner has other choices underneath!)

Choose the Elliptical Marquee tool as i have done to the right.

3. Now if you just drag this out, you will get an ellipse. Try it. It is difficult if not impossible to get one that is a PERFECT circle though without a trick and here it is: Hold the SHIFT key as you drag the ellipse out. Perfect circle! (What will happen if you hold Alt and shift as you drag the ellipse out?)

4. Now fill and stroke your circle as I have on the circle to the to the right.

Try to remember how you did it with the rectangle before you look above, but then do look above if you need to. (Don't worry if you mess something up because you can always start over at this point or you can click back in the history to undo your mistakes.) Ctrl-D to deselect.

Congratulations on completing the first part of the Basic Shapes Tutorial! I hope you enjoyed it and learned a thing or two too!

Now you are ready to make this Pearly Button!

D) PRACTICE OF LINES, RECTANGLES, CIRCLES, POLYGON FREE FROM SHAPES,SQUARES, ELLIPSES-

This tutorial is designed to show you how all of the AutoCAD Draw commands work. If you just

need information quickly, use the QuickFind toolbar below to go straight to the command you

want or select a topic from the contents list above. Not all of the Draw commands that appear on

the Draw toolbar are covered in this tutorial. Blocks, Hatch and Text for example are all tutorial

topics in their own right!

The Draw commands can be used to create new objects such as lines and circles. Most AutoCAD

drawings are composed purely and simply from these basic components. A good understanding

of the Draw commands is fundamental to the efficient use of AutoCAD.

The sections below cover the most frequently used Draw commands such as Line, Polyline and

Circle as well as the more advanced commands like Multiline and Multiline Style. As a

newcomer to AutoCAD, you may wish to skip the more advanced commands in order to

properly master the basics. You can always return to this tutorial in the future when you are more

confident.

In common with most AutoCAD commands, the Draw commands can be started in a number of

ways. Command names or short-cuts can be entered at the keyboard, commands can be started

from the Draw pull-down menu, shown on the right or from the Draw toolbar. The method you

use is dependent upon the type of work you are doing and how experienced a user you are. Don't

worry too much about this, just use whatever method feels easiest or most convenient at the time.

Your drawing technique will improve over time and with experience so don't expect to be

working very quickly at first.

If you are working with the pull-down menus, it is worth considering the visual syntax that is

common to all pull-downs used in the Windows operating system. For example, a small arrow

like so " " next to a menu item means that the item leads to a sub-menu that may contain other

commands or command options. An ellipsis, "…" after a menu item means that the item displays

a dialogue box. These little visual clues will help you to work more effectively with menus

because they tell you what to expect and help to avoid surprises for the newcomer.

A) HOW TO MODIFY BASIC SHAPES-

You can add one shape to your 2007 Microsoft Office system document or combine multiple

shapes to make a drawing or a more complex shape. Available shapes include lines, basic

geometric shapes, arrows, equation shapes, flowchart shapes, stars, banners, and callouts.

After you add one or more shapes, you can add text, bullets, numbering, and Quick Styles to

them.

This article is about shapes. For more information about shapes in SmartArt graphics, see Add a

shape to a SmartArt graphic. For more information about inserting symbols, see Insert ASCII or

Unicode Latin-based symbols and characters. For more information about using charts or

SmartArt in your document, see When should I use a SmartArt graphic and when should I use a

chart?

B) HOW TO SELECT ABOVE SHAPES-

Steps

1. 1

Become familiar with the Drawing tool bar. The Drawing toolbar is normally located

at the bottom of the window. If you do not see it, activate it from the View > Toolbars

menu. As in all OpenOffice.org components, you can place the toolbar on the Draw

window wherever you wish.

2. Learn about the custom shapes in Draw 2.

o Basic shapes include:

Lines

Arrows

Rectangles and squares

Ellipses and circles

Curves and polygons

Gluepoints and Connectors

Geometric Shapes and Arrows

Note: If you draw a basic shape or select one for editing, the

Info field in the status bar changes to reflect the action taken: Line

created, Text frame xxyy selected, and so on.

Note: If you draw a basic shape or select one for editing, the Info

field in the status bar changes to reflect the action taken: Line

created, Text frame xxyy selected, and so on.

Flowcharts, Stars and Banners

1. 1

Flowchart toolbar

Get the tools for drawing flowcharts by clicking on the icon

.

2. 2

Callouts toolbar

Use callouts by clicking on this icon

. It open the Callouts toolbar.

o Note: These new callouts replace the old ones in Version 1. If you still need the

old ones, you can add them manually to this or another toolbar.

3. 3

Stars and banners

Access the Stars and banners by clicking on this icon

.

o You can add text to all these shapes.

Add Text to Objects

1. 1

Know that there are two ways to add text to a drawing; A dynamic text frame as an

independent Draw object or as text in a previously drawn object. In the latter case the

text is integrated with the object.

1. Use dynamic text frames

2. 2

The text tool is activated by clicking on the icon Text

for horizontal or for vertical script

(to be able use this latter option you must activate support for Asian languages

under Tools > Options > Language Settings > Languages).

1.

Text frames can be moved and rotated like all draw objects.

3. 3

Text toolbar

After activating the Text command mode, click at the location where you want to

position the text. A small text frame appears. It contains only the cursor. You can move

the frame if desired. The Text Formatting toolbar appears and you can choose the font

type, font size and other text properties and begin to type in your text.

o

The text frame grows with the text.

The text frame grows with the text. You can insert a line break with the

Shift+Enter key combination.

o

The Enter key begins a new paragraph.

The Enter key begins a new paragraph. Neither line breaks nor new paragraphs

terminate the text frame.

4. 4

Observe the information field in the status bar: it shows that you are editing text and

also provides details about the current cursor location - paragraph, line, and column

numbers.

o

Text properties can also be changed during text input.

Text properties can also be changed during text input. Any changes will be

reflected from the cursor position onwards.

5. 5

After choosing the Text icon, you can also draw a frame with the mouse to contain

future text.

After choosing the Text icon, you can also draw a frame with the mouse to contain

future text. Line breaks are inserted automatically at the right edge of the frame when

the text fills the frame width. You can however—just like when editing other text—insert

your own line breaks, begin new paragraphs or change any of the text properties.

Use text elements in Draw objects

1. 1

Be aware that a text element is associated with most Draw objects. By means of these

elements text can be added to an object.

o The exceptions to this are control elements like buttons or list boxes, as well as

3D scenes and their associated elements and groups.

2. 2

Be sure that the button

on the Options toolbar is active, so that you can start editing an object by double-

clicking on it (or by pressing the function key F2). In the middle of the Draw object

you will see a black bar as the text cursor; start typing to input text. The status bar shows

at lower left “Text Edit” and the position of the cursor within the text.

o Text can contain paragraphs and these can be in the form of bulleted or numbered

lists. For a new line without beginning a new paragraph, use (as in text

documents) the key combination Shift+Enter. To end the text input, click next to

the object or press the Esc key.

C) HOW TO CHANGE LINES, FILLS, COLOURS, TEXTURES-

Print

Show All

You can instantly change the look of chart elements (such as the chart area, the plot area, data

markers, titles in charts, gridlines, axes, tick marks, trendlines, error bars, or the walls and floor

in 3-D charts) by applying a predefined shape style. You can also apply different shape fills,

shape outlines, and shape effects to these chart elements.

What do you want to do?

Apply a predefined shape or line style

Apply a different shape fill

Apply a different shape outline

Apply a different shape effect

Apply a predefined shape or line style

1. On a chart, click the chart element that you want to change, or do the following to select

it from a list of chart elements:

1. Click a chart.

This displays the Chart Tools, adding the Design, Layout, and Format tabs.

2. On the Format tab, in the Current Selection group, click the arrow next to the

Chart Elements box, and then click the chart element that you want to use.

2. On the Format tab, in the Shape Styles group, click a predefined shape style or line

style.

To see all available shape styles, Click the More button .

Tip If you don't like the change that you made, you can undo it immediately. On the Quick

Access Toolbar, click Undo , or press CTRL+Z.

Top of Page

Apply a different shape fill

You can fill a selected shape (such as data markers, titles, data labels, or a legend) with a solid

color, gradient, picture, or texture. You cannot use shape fill to format lines in a chart (such as

gridlines, axes, trendlines, or error bars).

1. On a chart, click the chart element that you want to change, or do the following to select

it from a list of chart elements:

1. Click a chart.

This displays the Chart Tools, adding the Design, Layout, and Format tabs.

2. On the Format tab, in the Current Selection group, click the arrow next to the

Chart Elements box, and then click the chart element that you want to use.

2. On the Format tab, in the Shape Styles group, click Shape Fill.

3. Do one of the following:

To use a different fill color, under Theme Colors or Standard Colors, click the color

that you want to use.

Tip Before you apply a different color, you can quickly preview how that color affects the

chart. When you point to colors that you may want to use, the selected chart element will be

displayed in that color on the chart.

To remove the color from the selected chart element, click No Fill.

To use a fill color that is not available under Theme Colors or Standard Colors, click

More Fill Colors. In the Colors dialog box, specify the color that you want to use on the

Standard or Custom tab, and then click OK.

Custom fill colors that you create are added under Recent Colors so that you can use them

again.

To fill the shape with a picture, click Picture. In the Insert Picture dialog box, click the

picture that you want to use, and then click Insert.

To use a gradient effect for the selected fill color, click Gradient, and then under

Variations, click the gradient style that you want to use.

For additional gradient styles, click More Gradients, and then in the Fill category, click the

gradient options that you want to use.

To use a texture fill, click Texture, and then click the texture that you want to use.

Tip If you don't like the change that you made, you can undo it immediately. On the Quick

Access Toolbar, click Undo , or press CTRL+Z.

Top of Page

Apply a different shape outline

You can change the color, width, and line style of lines in a chart (such as gridlines, axes,

trendlines, or error bars), or you can create custom borders for selected shapes (such as data

markers, titles, data labels, or a legend).

1. On a chart, click the chart element that you want to change, or do the following to select

it from a list of chart elements:

1. Click a chart.

This displays the Chart Tools, adding the Design, Layout, and Format tabs.

2. On the Format tab, in the Current Selection group, click the arrow next to the

Chart Elements box, and then click the chart element that you want to use.

2. On the Format tab, in the Shape Styles group, click Shape Outline.

3. Do one of the following:

To use a different outline color, under Theme Colors or Standard Colors, click the

color that you want to use.

To remove the outline color from the selected chart element, click No Outline.

Note If the selected element is a line, the line will no longer be visible on the chart.

To use an outline color that is not available under Theme Colors or Standard Colors,

click More Outline Colors. In the Colors dialog box, specify the color that you want to

use on the Standard or Custom tab, and then click OK.

Custom outline colors that you create are added under Recent Colors so that you can use them

again.

To change the weight of a line or border, click Weight, and then click the line weight that

you want to use.

For additional line style or border style options, click More Lines, and then click the line style or

border style options that you want to use.

To use a dashed line or border, click Dashes, and then click the dash type that you want

to use.

For additional dash-type options, click More Lines, and then click the dash type that you want to

use.

To add arrows to lines, click Arrows, and then click the arrow style that you want to use.

You cannot use arrow styles for borders.

For additional arrow style or border style options, click More Arrows, and then click the arrow

setting that you want to use.

Tip If you don't like the change that you made, you can undo it immediately. On the Quick

Access Toolbar, click Undo , or press CTRL+Z.

Top of Page

Apply a different shape effect

You can apply visual effects (such as a shadow, glow, or bevel effects) to selected shapes (such

as data markers, titles, data labels, or a legend) and lines (such as gridlines, axes, trendlines, or

error bars).

1. On a chart, click the chart element that you want to change, or do the following to select

it from a list of chart elements:

1. Click a chart.

This displays the Chart Tools, adding the Design, Layout, and Format tabs.

2. On the Format tab, in the Current Selection group, click the arrow next to the

Chart Elements box, and then click the chart element that you want to use.

2. On the Format tab, in the Shape Styles group, click Shape Effects.

3. Click an available effect, and then select the type of effect that you want to use.

Note Available shape effects depend on the chart element that you selected. Preset, reflection,

and bevel effects are not available for all chart elements.

Tip If you don't like the change that you made, you can undo it immediately. On the Quick

Access Toolbar, click Undo , or press CTRL+Z.

D) USING TEXT TOOL, CREATING TEXT OBJECTS

Using Text Tools

There are two ways to edit a text object:

As with other object in Motion, you can edit text by using the parameters in the

Properties Inspector, or by using the onscreen controls.

You can edit the text characters using the Text parameters in the Text Inspector or in the

HUD.

The following interface tools are used to edit text in Motion:

Toolbar

Text HUDs

Text Inspector

This section discusses using the Text tool (in the toolbar) and the Text editor (in the Format pane

of the Text Inspector) to create and modify text.

Note: When text is selected with the default selection tool, you can use the standard onscreen

controls to move and animate the text in the Canvas.

Text Tools in the Toolbar

The Motion toolbar contains several tools that you can use to manipulate text.

Text tool: Use this tool to create text. Click the Text tool, then click or drag in the Canvas

to create a blank text object.

If you click in the Canvas, you activate the Type layout method (the default), which

requires that you insert manual line breaks (by pressing Return) to make text wrap to a

new line. If you drag in the Canvas, you activate the Paragraph layout method, which

wraps text into a column.

Select/Transform tool: Use this tool to select and transform text. After you finish typing

text, click the Select/Transform tool (or press Esc) to select the text as an object. To

select existing text, click the Select/Transform tool, then click the text in the Canvas.

Note: When the Select/Transform tool is active, you can double-click the text to enter

text-editing mode. When Motion is in text-editing mode, the Text tool is highlighted in

the toolbar.

Transform Glyph tool: Use this tool to select and transform glyphs (individual characters

of text objects). After you create text, click the Select/Transform tool and, holding the

mouse button down, choose the Transform Glyph tool from the pop-up menu.

E) HOW TO CHANGE FONT, FONT SIZE, COLOUR OF THE TEXT-

Most Web browsers include functionality to let you increase or decrease the text in a Web page.

For example, to increase text size:

Browse

r Example

Menu

Items

Macintos

h

Shortcut

Windo

ws

Shortc

ut

Interne

t

Explor

er

View

>

Text

Size >

Larges

t

. .

Firefox

,

Netsca

pe

View

>

Text

Size >

Increa

se

Comman

d+ Ctrl++

Opera

View

>

Zoom

>

%

Comman

d+

+

or

0

Safari

View

>

Make

Text

Bigger

Comman

d+ .

A) HOW TO USE ACROBAT FILE-

Most freelancer probably had to go through this at some point in their career, a client either gives

you a sheet of paper with the text on it and gets no digitalized version of it, or he gives you the

text as an image. You could install some open-source OCR programm or even pay for one, but

why would you do that when you can do it in Acrobat?

If you scan with Acrobat

If you are using Acrobat 8, I’d recommend that you scan your text directly from the software.

You should check the “Make searchable (Run OCR)” checkbox, this will run the OCR

programm and you’ll have your text ready right away (not available in previous versions of

Acrobat). Acrobat 8 will also rotate your file automatically if it can’t run the text recognition.

To scan from Acrobat, chose: File > Create PDF > From Scanner

B) HOW TO OPEN FILE IN ACROBAT-

In order to get started, you have to have a PDF file open in Adobe Acrobat 7.0 Professional.

Opening files using Adobe Acrobat or Adobe Reader is similar to opening files using the

majority of personal computer you are currently already familiar with.

Adobe Acrobat 7.0 Professional, Adobe Acrobat 7.0 Standard, and the Adobe Reader 7.0 are

applications from a Adobe Systems which allow you to open, view, and print PDF files. These

applications are referred to collectively as user agents for PDF files. In much the same way a

browser is a user agent for HTML files, these applications are user agents for the PDF format.

First, it is assumed that you have one of these applications installed on your computer. For the

purposes of this tutorial, we will be referring to Adobe Acrobat 7.0 Professional unless otherwise

noted.

Opening PDFs from the Desktop / File Folder

Using a mouse, simply double click on the PDF file you wish to open (PDF files have a

distinctive icon and possess the file extension .pdf (See Figure 2 - 2 PDF Files on the Desktop /

In a File Folder) ). Users who do not use a mouse would use the Windows convention to Tab to

the target folder and select the desired PDF by tabbing, typing the initial letters of the file name

or using the up or down arrow keys to navigate the file folder in order to select the desired PDF

file.

Figure 2 - 2 PDF Files on the Desktop / In a File Folder

Opening PDFs from Within Adobe Acrobat or Adobe Reader

Assuming Adobe Acrobat or the Adobe Reader is already running on your computer, from the

menu bar File>Open will allow you to browse to the desired PDF file. The keyboard shortcut is

Ctrl + O. The Accelerator Key Combination is Alt + F +O. Any one of these actions brings up

the Acrobat Open Dialog. You can either use the mouse to select the desired file or Tab over to

the desired file using the appropriate keystrokes. Opening files from within Adobe Acrobat /

Reader will limit the display of files to only those that have the PDF file extension (See Figure 2

- 3 The Adobe Acrobat Open Dialog) . If you would like to know what other types of files may

be in the selected folder, you would have to select "All Files" from the dropdown list of file

types that appears at the bottom of the Open Dialog.

Figure 2 - 3 The Adobe Acrobat Open Dialog

C) VIEWING OF FILE, ZOOMING, ADJUSTING, ROTATING OPENED ACROBAT DOCUMENT-

Lengthy documents stored on the Internet are sometimes saved as PDF (Portable

Document Format) files. Placing large amounts of text on an individual web page is

considered bad Internet practice since it causes users to scroll through a big web

page, which can become tedious. Instead, website creators can create downloadable

files of text saved in the PDF format. PDF files can be viewed or downloaded on the

Internet just as any other multimedia file, such as an HTML file, image, or movie.

However, in order to view PDF files, you'll need the necessary programs.

The advantage of PDF files comes in their universal look; no matter what platform

you open them on, they will look exactly the same. These create a much easier

distribution method for the author, knowing that no matter how many times the file

is duplicated, and in what manner, the look will remain the same. Another advantage

to PDF files is the small file size.

Opening Adobe Acrobat Reader: The program used to view PDF files is Adobe Acrobat Reader. Many computers

already come equipped with this software. To run Acrobat Reader on your computer:

Start >> Programs >> Adobe >> Adobe Acrobat. If you are using a current browser,

Acrobat Reader may be included. Click on a link to a PDF file and the reader will open

it within your browser.

Downloading Adobe Acrobat: If you're using a computer that doesn't have Acrobat Reader, you can download it for

free from Adobe's website, http://www.adobe.com. The free version of Adobe

Acrobat Reader can be downloaded from this web page:

http://www.adobe.com/products/acrobat/readstep2.html

Once you have downloaded the program, install Acrobat on your computer. It will

then be located in Start >> Programs >> Adobe >> Adobe Acrobat. At this point

you will be able to view PDF files on the Internet.

Viewing a PDF file in Adobe Acrobat Reader: Normal html web pages on the web display in a web browser when you click on a link

or enter a website URL in the browser address bar. When PDF files are opened,

however, they are automatically opened in Adobe Acrobat Reader.

As an example go to this web page in the Rutgers Writing Program website:

http://wp.rutgers.edu/courses/101/gradatorium/this_is_a.html

Then, click on the link near the top of the page that reads "PDF"

(http://wp.rutgers.edu/courses/101/gradatorium/media/a_paper.pdf). When you

click on the link to the PDF file, Adobe Acrobat Reader will automatically open within

your browser and the PDF file will display.

Downloading and viewing PDF files: In addition to clicking on a link to a PDF file on the web and viewing it through

Acrobat in your browser, you can also download the PDF file to your computer and Copyright © Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)

open it up using Acrobat Reader. To save a PDF file, right-click on the link to the file

and select "Save As" (in Netscape, select "Save Target As").

Save the file to a location on your computer. Then open up Adobe Acrobat on your

computer, navigate to the "File" menu, and select "Open." Browse to the saved PDF

file and open it. Your downloaded PDF file should now be opened in the Acrobat.

Navigating through a PDF file: Whether you have clicked on a link that opens a PDF file in Acrobat in your web

browser, or if you downloaded a PDF file to your computer, you should know how to

view and navigate the file in Acrobat Reader. Acrobat Reader features different tools

that allow you to view the file in various ways. You'll notice that in Acrobat Reader,

the PDF file looks very much like a standard Word document or a web page.

Therefore, you can view the file in ways similar to viewing a text document or web

page. The following is a list of important tools included in Adobe Acrobat Reader that

will help you in understanding the program and how to view PDF files:

1. Open: Like any other software that you may have encountered, the Open

folder icon browses your computer to open up a PDF file.

2. Print: Also self-explanatory, pressing the Print icon lets you print out the PDF

document to your printer. This may be useful if you wish to use a PDF

document as a handout.

3. Show / Hide Navigation Pane: By clicking on this icon, your view of the

document changes between the normal page view and a navigation view that

provides small "thumbnail" (preview) images of all of the pages in the

document. This way, if there is a page that you want to view in the file that is

many pages into the document, you can select a thumbnail image by double

clicking on it and be taken to that selected page. Clicking on the Show / Hide

Navigation Pane icon again reverts the page view back to normal.

4. Hand Tool: When Adobe Acrobat Reader launches, the default setting for

tools is the Hand Tool. This feature allows you to "grab" a part of the PDF file

and drag through one individual page of the document. The Hand Tool is

different from the normal scroll bar, which scrolls through the entire

document.

5. Zoom In Tool: The zoom in tool lets you focus in on one specific area of a

PDF file and zoom in on it to enlarge the area. You may find this tool useful if

you are having trouble reading the text in a PDF document. To zoom in on an

area, select the tool indicated by the magnifying glass icon with a "+" sign in

the middle, and click on an area as many times as needed to achieve the

desired size. If you want to zoom out of an area, go back to the tool bar, click

and hold down on the Zoom icon until you see the magnifying glass icon with Copyright © Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)

a "-" sign inside. Use this to zoom out of an area the same way you use the

default Zoom Tool to zoom in.

6. Text Select Tool: For selecting and copying text in a PDF file, you can use

the Text Select Tool. If you need to copy text from a PDF file and paste it into

another document, then this is the tool you'd use. You can't use any other

tool for the operation of copying or selecting text, such as the Hand Tool.

Only the Text Select Tool can be used. Keep in mind that text within a PDF file

cannot be changed.

7. First Page / Previous Page / Next Page / Last Page: These arrows allow

you to navigate through the PDF document without having to use the scroll

bar or Hand Tool. The arrows are more or less self explanatory: "First Page"

takes you to the very beginning of the PDF file, "Previous Page" navigates

through the document backwards, "Next Page" goes forward through the

document, and "Last Page" takes you to the end of the document.

8. Actual Size / Fit in Window / Fit Width: These are different modes of

viewing a PDF file that adjust to various selections. Actual Size displays the

file in its original state at 100% screen size. Fit in Window adjusts to show an

entire page in the screen without having to scroll. Fit Width adjusts the width

of the document to the entire length of the screen, without having to scroll

horizontally.

9. Rotate View 90 CCW / Rotate View 90 CW: If for whatever reason you

need to rotate a PDF file clockwise or counterclockwise, this feature allows

you to rotate the document as many times as needed to achieve the desired

view. This tool may be useful if there is an image on a page that you might

want to view differently.

10. Find: This helpful tool searches for words in a PDF document. Rather than

scrolling and searching through an entire document to find what you are

looking for, the Find tool allows you to input a word (or words) and finds the

term based on your specifications. The instance of text found will be

highlighted on the page. You can continue searching for more instances of

your search term.

D)TRANSFERRING TEXT AND IMAGES FROM ACROBAT TO NOTEPAD-

Instructions

1.

o 1

Launch Adobe Acrobat and open the PDF file that contains the information that

you want to copy. Please note that the following steps will work with all Acrobat

programs.

o 2

Click the "Select" tool on the main toolbar. Select the information you want to

copy. Click once at the beginning of the information and drag to the end while

holding down the mouse button. To select all of the text on the page, click the

"Edit" menu and select the "Select All" option.

o 3

Click the "Edit" menu and select the "Copy" option to copy the selected

information. The information may then be used in other programs that allow you

to use the "Paste" functions.

E) GRAPHICS APPLICATION USING TEXT AND IMAGE SELECTION TOOLS-

Creating, Resizing and Reshaping Text Frames

Open up your document. I am going to be using the document from the last post of this Getting

To Grips Series, so feel free to do the same! I’ve actually deleted everything from the original

document, but have kept the page layout, bleeds etc the same. This just saves setting it up all

over again!

When working with publications such as newspapers and magazines, you’ll find that you will

most probably have to work with text frames, therefore they are very widely used and powerful

feature offered in InDesign. Text frames are created using the Type Tool, and can be edited in

various different ways. The size, location and shape of a frame determines how the text is

displayed on the given page.

We’re going to create our own text frame right now. Create a new layer in the layers palette.

We’re going to use layers so that we can easily hide all of the text at once without having to

manually select it and then hide it. To create a new layer, just click on the new layer icon in the

layers palette – if you can’t see it, go to Window > Layers to open it up, or press the F7 key.

Rename the layer to Type. The layers are very similar to those we use in Photoshop and

Illustrator, so there’s no need for a detailed explanation!

With the new layer selected, select the Type Tool. Click and drag a new text frame from our

page margin on the left hand side, to the page margin on the right hand side.

Type something of your choice into the new text frame. I’m going to type “Spyre Studios

Rocks!”. If you have finished with this particular text frame, you can automatically adjust it to fit

it’s contents. Hover your mouse cursor over the bottom center handle (the little square we use to

resize the frame) and double-click. This will automatically make the height of the frame the

exact same size as the type that fills it.

We can also reshape a pre-existing frame. Select your frame again (with the Selection Tool).

With the frame now selected, change tools and use the Direct Selection Tool rather than the

Selection Tool (the white arrow rather than the black arrow). This tool is similar to the Selection

Tool, apart from it lets us edit/resize more accurately, for example, the Selection Tool can select

a path, whereas the Direct Selection Tool can select the anchors that make up that path.

With the Direct Selection Tool selected, the four handles in the corners of your frame should

have turned into even smaller handles. You can drag these little handles around, reshaping the

size of your text frame. The content inside it will automatically fit to this shape, as seen in the

screenshot below. Copy and paste your text a few times, and try reshaping your own frame.

Creating & Editing Graphics Frames

In this section we’re going to be learning how to draw graphics frames, place graphics into your

frames, edit existing frames, and replace a frames contents.

First of all, make another new layer and call it “Graphics”. Select the Rectangle Frame Tool from

your tools palette. This tool is basically like a standard rectangle shape tool, but allows us to

place graphics directly into it. With the tool selected, and us still viewing our graphics layer, drag

out a rectangle shape where you would like your image to be displayed.

Select the Selection Tool, and with the graphics frame still selected, go to File > Place and select

an image you would like to insert into your page layout. I’ll be using one of my own

photographs.

You’ll see from the screenshot above that the image has been placed into our graphics frame at

its full 100% size, which is clearly far to big for our tiny little frame. By enlarging the graphics

frame itself using the Selection Tool and its handles, you’ll notice that it just displays more of the

photograph it contains, rather than changing the actual size of the graphic.

You can also change the shape of the graphics frame by selecting the Direct Selection Tool and

then dragging the frames handles – just like we did earlier with the text frames.

Revert back to what we originally had a couple of screenshots ago, as we’re now going to learn

how to resize the image that the placeholder contains, rather than just resizing and reshaping the

frame itself.

Doing this is incredibly easy. Instead of using the Selection Tool to resize the photograph, we

will be using the Direct Selection Tool. Select the Direct Selection Tool and hover your cursor

over the graphics frame. A white hand should appear; by clicking and dragging, you can move

the frames contents around.

When clicking on the frames contents using the Direct Selection Tool, you probably noticed

another bounding box come up (the purple line seen in the screenshot below).

By clicking on this bounding boxes handles and then dragging, we can resize the frames

contents. Remember to hold the Shift-Key to keep the image in proportion.

The title “Graphics Frame” is pretty much just another way of describing a crop box, as you may

now have realised. The frame can give you the ability to resize graphics at any time, without

losing any detail, as well as having the power to easily change the shape of the image. Using the

Direct Selection Tool, change the shape of the frame.

Now we’re going to duplicate our frame and replace its contents, a good tip to know if you’re

going to be using a lot of images on your pages and want to keep the same style throughout.

Select the frame with your Selection Tool and, whilst holding the Alt-Key, drag your frame onto

another area of your page.

After resizing and moving your graphics frame using the Selection Tool, we can replace the

frames contents with a new image. To do this, all you need to is repeat the step we took to put

the original image in. Click on your frame using the Selection Tool, and then go to File > Place

and select your new image. I’m going to use a colored version of the same image. Use the

techniques we used earlier to resize the frames contents. You can also fill the frame with the

graphic by going to Object > Fitting and selecting one of the many options, although this is

sometimes only suitable for frames with 90 degree corners.

You can also change the frames shape using the Pen Tool. To do so, all you need to do is select

the graphics frame using the Selection Tool, and then select the Pen Tool and click on the frames

path to add a new anchor point. Still using the Pen Tool, you can then drag these anchor points

out, making them curve in the process. For more on the Pen Tool, check out this guide on

About.com.

Wrapping Text Around a Graphic

Wrapping text around a graphic is probably something you will have to do on a regular basis if

you are planning on going into the desktop publishing industry. Unlike simple word processing

applications, InDesign offers much more control over what you wrap around your graphics. You

have the ability to wrap your text around the frame, or the frames contents, as well as giving your

wrap an offset.

We’re going to be wrapping some text around one of the graphics frames we made earlier.

Before we start, we need some more text. Using the skills we learnt in the first “Getting to Grips

with InDesign” tutorial, insert some text into one of your pages. I’m going to use some Lorem

Ipsum dummy text.

Resize one of your graphics frames and its contents so that it is of a suitable size for what we’re

about to do, and place it into the middle of your new text.

Select your graphics frame with the Selection Tool and then go to Window > Text Wrap to open

up the Text Wrap window.

With the graphics frame still selected, select the Wrap Around Bounding Box option. This will

wrap the text around your photos bounding box (the actual size of the image) rather than the

graphics frame.

Select the Wrap Around Object Shape option, and the text will wrap around the Graphics Frame

rather than the frames content.

This option is clearly too squashed due to the odd shape of the frame, but is easily fixed. In your

Text Wrap window, you’ll notice several fields where you can put a digit in. The field we’re

going to be using is the “Top Offset” field, which will basically add a cushion between the

graphics frame and the text. Filling this field in will automatically change the others. I used an

offset of 6mm to give me the following results, but you may want to play around with the setting

to get a result that suits your frame shape.

You can also play with various settings which allow you to only wrap the text in certain areas of

your image, for example, you could make the text wrap on only the side that is away from the

spine by selecting the Side Away From Spine wrap to option.

Working with Frames & the Pathfinder Tool

The Pathfinder Tool is a powerful editing tool that allows you to subtract shapes from other

shapes, add shapes together and so on.

Select the Rectangle Tool and draw a shape over your text as seen below. Fill it with a color of

your choice.

With the Selection Tool selected, select your type and copy and paste it in place to make a

duplicate copy of it. With the Selection Tool still selected, click on your new text frame, and

whilst holding the Shift-Key, select your new (blue) rectangle. This will select both of your

objects at the same time. Go to Object > Pathfinder > Exclude Overlap. This will fill the text area

with blue, but subtract the blue rectangle that we already had. Try it out yourself to see what I

mean! Also, try giving the other Pathfinder options a go – this is usually a tool you need to

experiment with unless you know exactly what you want!

I have lowered the opacity of my new shape, and readjusted my type a little to fit its new

background. Remember, this isn’t meant to look good – it’s purely to teach you how to use the

different InDesign tools.

We’re now going to add a new image into our page, using another frame. This time we’re going

to be converting a shape (created using the shape tool) into a graphics frame. Click on the

Rectangle Tool and hold your click until a new group of tools appear. Select the Ellipse Tool and

whilst holding the Shift-Key, drag out a circle onto your page.

With the Selection Tool selected, select your new circle shape. Go to File > Place, and find a

graphic to place in to the circle. InDesign will recognize that you are treating the shape like a

graphics frame, and will automatically change it into one for you. Change the size of your

graphic inside the frame using the Direct Selection Tool like we did earlier on.

Our text is currently wrapped around our graphic, instead of our graphics frame. Change it so

that it wraps around our frame, and give it an offset of 3mm.

Rotating Graphics Frames & the Images Within Them

There are a couple of ways in which you can rotate a frame in InDesign; either from the control

panel, where you have a more control over the precise angles you rotate a frame by, or by using

the Rotate Tool, where you can literally click and drag, much like the Transform Tool in

Photoshop. Select one of your graphics frames, I’m going to be rotating the frame that contains

my black and white Beetle model photograph. With it selected, the control panel at the top

contains a bunch of fields, drop-down menus and icons. Locate the Rotation Angle field, and

enter a digit, I’ve entered 45 degrees, as seen in the screenshot below.

Frames can also be edited using the Rotate Tool which can be found in the Tools panel. To use

this tool, you simply need to select it, and then click and drag around an image. If you’re not sure

of the exact degree you want your frame to sit at, this is the tool to use.

Rotating the graphic within your frame is just as easy. Instead of selecting your whole frame, use

the Direct Selection Tool to select just your frames content. Once you have selected the graphic,

use the Rotate Tool to rotate it within the frame. You can also use the more precise Rotation

Angle field in the control panel.

Aligning & Scaling Multiple Objects

It’s always handy to be able to align objects to certain areas, whether it be a spread, a singe page

or a frame. I’ve purposely moved one of my images so I can teach you how to precisely center it

into the middle of the page. To get your alignment window open, go to Window > Object &

Layout > Align.

Select your image with the Selection Tool, and open up your alignment window. We have

several options. The first one we need to go to is actually half way down the window, and should

default to Align to Selection. Change this to Align to Page.

Click on both the Align Horizontal Centers and Align Vertical Centers to align our frame

directly into the middle of the page. By using different drop-down modes (i.e. page, spread,

margins etc) we can get different results.

To align multiple objects at the same time, it’s just a matter of selecting them all, and repeating

the process. To select them all, select the first object with the Selection Tool, and then select the

others whilst holding down the Shift-Key.

We can also group items together to not only align them, but to scale them down (or up), helping

to keep everything in proportion with the other elements of the design. Select your two images

using the Selection Tool and Shift-Click method, and go to Object > Group. Your objects are

now grouped together. With the Selection Tool still selected, you should now be able to rotate,

scale and align these items together, using the techniques demonstrated throughout this tutorial.

This is especially handy with objects such as icons that are equally spaced, and similar objects.