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-

ArticlesWhy 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 application 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 innovative 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 its 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, Ill discuss some of Fireworks core strengths and features as well as highlight 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 Adobes 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 experience 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. Ill 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 Ill move on to describing specific features and their usage. So lets 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 applications 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 criticize what they perceive as a lack of depth in its bitmap editing features. Lets 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 Photoshops and it is a far more feature-rich and powerful application 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 theres 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 application 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 accomplish 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 designers needs better than any other. The next section was written for the benefit of designers who are not very familiar with vector applications and whos 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 wont 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 Ill 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 independent. 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 categories 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 applications 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, lets 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 people 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 doesnt 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 Adobes 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 performing 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 applications). 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 pixels 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 wont 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 objects 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 objects contour 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 Pears 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 flexibility 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 numerical 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 theres no way to know the precise location or size of any individual 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 knowing 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 its actually an asset. Having Fireworks render your graphics at the final resolution theyll 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 rendering. 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 youll 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 (extensibility is discussed in the next section). The extension in question is call SuperNudge and was created 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 article 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 application 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 discussed 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 subject 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 didnt output quality images. Fortunately, Fireworks has been created from the ground up as a Web graphics creation application so its not surprising that it optimizes and exports the smallest, best looking Web optimized files of any graphic application. In mine and many other peoples experience, Fireworks consistently exports better quality images at smaller file sizes than any of its competitors. Try it for yourself and youll be amazed at the results. In Fireworks, you can tweak and preview optimization settings right within the applications 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 Ive 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 shapeslines, 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, semistandalone 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 btes" by studio Mac Guff Ligne (1988), Les Fables Gomtriques J.-Y. Grall, Georges Lacroix and Renato (studio Fantome, 19901993) and Quarxs, the first HDTV computer graphics series by Maurice Benayoun and Franois Schuiten (studio Z-A production, 19911993). 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 imagesmostly from twodimensional 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; twodimensional 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 threedimensional 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 (Computergenerated 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 computergenerated 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 threedimensional 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 Benot B. Mandelbrot Henri Gouraud Bui Tuong Phong Pierre Bzier 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 threedimensional 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; /df/ 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 ( /dep/ [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 6553565535.

A) SETTING UP OF GRAPHIC PAGES, B) TERMS OF WIDTH, HEIGHT, RESOLUTION AND COLOURImage 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 20481536 = 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 352240 : Video CD o 300480 : Umatic, Betamax, VHS, Video8 o 350480 : Super Betamax, Betacam

o o o o

420480 : LaserDisc, Super VHS, Hi8 640480 : Analog broadcast (NTSC) 670480 : Enhanced Definition Betamax 768576 : Analog broadcast (PAL, SECAM)

Digital
o o o o o o o o o

720480 : D-VHS, DVD, miniDV, Digital8, Digital Betacam 720480 : Widescreen DVD (anamorphic) 1280720 : D-VHS, HD DVD, Blu-ray, HDV (miniDV) 14401080 : HDV (miniDV) 19201080 : HDV (miniDV), AVCHD, HD DVD, Blu-ray, HDCAM SR 20481080 : 2K Digital Cinema 40962160 : 4K Digital Cinema 76804320 : UHDTV 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 o

35 mm film is scanned for release on DVD at 1080 or 2000 lines as of 2005. 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] IMAX, including IMAX HD and OMNIMAX: approximately 10,0007000 (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, ELLIPSESThis 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 SHAPESYou 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.

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.

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.

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 howeverjust like when editing other textinsert 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 doubleclicking 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, TEXTURESPrint 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: Windo ws Shortc ut

Browse r

Example

Menu Items

Macintos h Shortcut

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 FILEMost 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, Id 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 youll have your text ready right away (not available in previous versions of Acrobat). Acrobat 8 will also rotate your file automatically if it cant run the text recognition.

To scan from Acrobat, chose: File > Create PDF > From Scanner

B) HOW TO OPEN FILE IN ACROBATIn 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 DOCUMENTLengthy 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:

Copyright Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)

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 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.

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.

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! Ive 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, youll 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. Were going to create our own text frame right now. Create a new layer in the layers palette. Were 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 cant 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 theres 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. Im going to type Spyre Studios Rocks!. If you have finished with this particular text frame, you can automatically adjust it to fit

its 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 were 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. Ill be using one of my own photographs.

Youll 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, youll 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 were 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 were going to duplicate our frame and replace its contents, a good tip to know if youre 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. Im 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. Were 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. Im 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 were 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, youll notice several fields where you can put a digit in. The field were 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 isnt meant to look good its purely to teach you how to use the different InDesign tools.

Were now going to add a new image into our page, using another frame. This time were 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, Im 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, Ive 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 youre 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

Its always handy to be able to align objects to certain areas, whether it be a spread, a singe page or a frame. Ive 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, its 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.