View
221
Download
0
Category
Preview:
Citation preview
Basic Graphics Terms
.
Let us have clear idea about the basic terms in graphics. It is advisable to go through the basics
before starting with any package.
Color
Colors play a significant role in web page designing. Everyone likes to use colors for web page
but it requires little practice to use colors effectively with balance and economy. You need to
know color basics and the technical reasons behind the use of colors to explore the maximum
potential of colors. The site has devoted an entire section on color basics to clear the color
concepts. Graphics
Pictorial representation of data is called graphics. The term is broadly used in the world of digital
arts, image processing, illustrations, designing, animation and so on. Web graphics evolved with
the introduction of colorful, pleasant websites, which includes buttons, textures, backgrounds,
icons, images, gif animations, navigation bars etc. All the leading image-processing packages are
now enhanced with the optimizing techniques, useful to create graphics suitable for web.
Image
This is more specific. Any picture including traditional scanned photograph can be called an
image. Some processing requires before using images for web. Packages like photoshop made
this work fairly simple with its helpful commands. Images make web page more alive but
increases download time hence its use must be kept economical both in time and designing
aspect.
Image Processing
People use the word "image editing " and "image processing" for the same. Generally image
processing involves adjusting the technical properties of the image and modifying the actual
content of the image may be to give totally new look to the image.
Font
People love to work with fonts. It is a design of character. It comes with wide range. Choosing
proper font is a matter of skill. Selection of font is very important for web because it must be
available on visitors desktop or it may destroy the look of the site.
Cliparts
Generally deals with line arts. Mostly created with Gif format where line of the picture is more
important than color. Cartoons, icons and sometimes buttons also comes under this category.
Lots of CDs available in the market to provide wide range of cliparts suitable for any purpose.
Cliparts add more meaning to the subject.
Designing
If it is graphic designing it includes drawing ,creating and editing the pictures generally using
vector programs like corelDRAW, Adobe Illustrator etc. Web designing contains designing of
HTML pages using editors like Frontpage, Dreamweaver etc.
Resolution Resolution is something of prime importance in digital arts. In a general term it is referred to image resolution, monitor resolution and output device resolution. To be precise, it is a unit of measurement, used to determine the size of an image, the way an image displayed on the monitor and the device on which an image is output.
Animation
Changing the frames with respect to time is a definition of the traditional animation. It adds spice
to the web. The use of animation for web is a critical question. It has to go along the theme and
the nature of the web. Flash is a keyword for animation today.
Multimedia
Today, the web pages are blinking with different media. You can read the text, see the pictures,
hear the sounds and watch the videos also. Integrating all these media makes Multimedia
environment.
File Formats
You have to save the image in proper format to work further if you want to open it in different
package. If it is transported through net or uploaded on the web it has to be in the right format.
The common formats are Jpeg and Gif.
B) USING CORALDRAW MACROMEDIA FIREWORKS OR PLAIN SHOP PRO-
Articles — Why
Choose Fireworks?
Introduction
When it comes to choosing a graphic application for creating Web site layouts and graphics,
designers are confronted with many choices between very different types of applications. As
Web professionals, we need powerful and flexible tools that are well adapted to our unique
requirements because, even with the best of planning, we often need to make design changes
quickly to satisfy fickle client requests and evolving project scopes. Additionally, most Web sites
need to be updated regularly so the ease and speed at which our chosen graphic design applica-
tion lets us perform either incremental updates or deeper layout changes becomes critical.
Following that, I decided to write this article for three reasons. The first one is that Fireworks is
my own Web graphics and site layout design tool of choice and I truly believe it is a compelling
option for anyone involved in that kind of design work. Fireworks offers many unique and inno-
vative features that translate into real work flow advantages that really make it stand out. It meets
the challenges Web designers face everyday with ease and lets them be more productive creating
higher quality work… all that and it’s a lot of fun to use.
Secondly, I wanted to write this article because Fireworks’ advantages may not be immediately
obvious to people who have never used it or have only used a minimal subset of its features.
Later in this article, I’ll discuss some of Fireworks’ core strengths and features as well as high-
light some specific work flow scenarios for which I believe it offers clear benefits over such
heavyweight “competitors” as Photoshop. References to specific real world tasks are scattered
throughout the text.
The third and, for me, the most important reason I wrote this article is that, in the wake of
Adobe’s acquisition of Macromedia, many people are discussing the future of existing
Macromedia products like Fireworks in blogs and public forums. The point here is not to discuss
Fireworks’ future but, while reading many of those discussions, I have noticed a serious lack of
understanding of what Fireworks really is and what it can do. This seriously bothers me and
I wrote this in large part because I wanted to try and set the record straight.
I use Fireworks every day in my work and have been using it for several years. I have also used
or am still using many of its competitors so I really know how well they compare from experi-
ence in the real world of Web design. This article is not about feature to feature comparisons but
about the real life work flow benefits of Fireworks’ unique tool set.
I’ll start by defining what Fireworks is in general terms as well as where it stands in comparison
to the other heavyweights in this very competitive market then I’ll move on to describing spe-
cific features and their usage. So let’s dive in!
What Exactly is Fireworks ?
The answer to this question might seem obvious to many but, as I stated in the introduction, there
is a lot of confusion out there over what kind of graphic application Fireworks really is or what it
can and cannot do. For some people, Fireworks is a direct competitor to ImageReady and is
merely a tool for slicing, optimizing and exporting graphics from layouts created in other appli-
cations and imported into Fireworks. While those tasks are certainly an important part of what
Fireworks does, they are but a very small subset of Fireworks’ wide array of creative features.
Other people often make the mistake of comparing Fireworks directly with Photoshop and criti-
cize what they perceive as a lack of depth in its bitmap editing features. Let’s make it clear right
away that Fireworks does not compete with Photoshop directly anymore than it is limited to the
role of a glorified Web graphics slicing and optimizing tool such as ImageReady. Fireworks’
purpose is quite different from Photoshop’s and it is a far more feature-rich and powerful appli-
cation than ImageReady. So, what makes it so unique?
Fireworks was designed from the ground up specifically for the task of creating Web site layouts
and graphics in an efficient and flexible manner. It is a creative powerhouse that can really do it
all, from the creative visual design stages to the slicing, optimization and export of finished Web
graphics. With Fireworks there’s no need to switch between different applications to accomplish
different tasks and its tool set is tailored to the needs of Web designers.
Fireworks does it all within a single interface that allies the power and flexibility of both vector
and raster editing tools as well as the best slicing and optimization features in the industry. This
kind of hybrid tool set is comparable only to a select few applications and Photoshop, Illustrator
and ImageReady are definitely not amongst them. In that respect, Fireworks is much more than
any of them on their own because it contains the kinds of tools found in all three of those
applications.
Furthermore and contrary to what many believe, comparing Fireworks to Photoshop or
ImageReady makes even less sense when you consider that Fireworks is primarily a vector appli-
cation that is by nature a lot more similar to FreeHand or Illustrator. Fireworks’ core toolset and
work flow is vector based, yet it offers very sophisticated bitmap editing features that can accom-
plish all but the most complex image manipulation tasks Web designers need to perform on
a daily basis.
Fireworks’ hybrid vector-raster toolset is almost unique amongst graphic applications and, when
you add it to its unrivalled slicing, optimizing and exporting features, you end up with a very
powerful application that suits Web designer’s needs better than any other.
The next section was written for the benefit of designers who are not very familiar with vector
applications and who’s graphic design software experience is limited to raster based applications
like Photoshop or Paint Shop Pro. All the above discussion about Fireworks’ hybrid tool set
won’t make much sense to you if you are not be familiar with vector applications such as
Illustrator or Freehand (or Fireworks!) and how they work compared to raster based applications.
Old hat designers who already know all of this can just skip to the next section…
A quick introduction to vectors and bitmaps
As you may already know, there are two basic types of graphics file formats and applications
that create or edit them: vector editing applications and bitmap or raster editing applications.
This is not intended to be an in depth study of this subject so I’ll go through these concepts very
quickly without going in great detail.
Vector images are made up of “objects” whose properties like their shape, size, colour, location
and more are defined mathematically. Vector images are usually qualified as “resolution inde-
pendent”. This means that vector images can be resized to any dimension without any loss of
quality and will print correctly at any size. When zoomed in close, vector images do not reveal
any pixelization or loss of detail and objects’ edges remain crisp and clean.
Bitmap or raster images ont the other hand are comprised of pixels or square “dots” arranged in
a grid-like manner. Each pixel in a raster image has a specific location on the grid and a single
colour value assigned to it. The grid itself contains a finite amount of pixels. This means that, if
a bitmap image is enlarged, the pixels in the original only get bigger and image quality degrades
rapidly while the edges of elements in the image get pixelated. Making a bitmap image smaller is
usually not a problem. Also, when zooming close to a bitmap images, you will clearly see the
pixels that comprise it. Bitmap images usually display and print best at their natural size.
Most graphic editing applications create images that fall into either one of those two general cat-
egories but not both. Others applications are strongly focused on one type of work flow while
offering tools of the other type in varying degrees of sophistication. There are very few products
like Fireworks who are truly hybrid vector/raster applications that offer strong tool sets of
both types.
Examples of purely raster based application include Photoshop, ImageReady and Paint Shop Pro.
Both Photoshop and Paint Shop Pro do offer some level of vector features but those are “grafted”
into their traditional raster work flow and do not offer the flexibility of working with true vector
objects like Fireworks does. On the other side, typical examples of pure vector based applica-
tions include Illustrator, FreeHand and CorelDraw. While all of them can display and print
bitmap images alongside their native vector objects, they have no tools for editing raw image
pixels directly as you can in Fireworks or pure raster based applications like Photoshop.
Typical graphic design work flows often require working in one type of application then moving
files into another to finish the job. This is an awkward process that can get frustrating as you try
to keep different types of files updated as well as deal with potential rendering differences
between applications. As I stated above, very few application integrate both vector and bitmap
tools in one integrated environment that eliminates the need to go back and forth between more
specialized programs. Example of such applications include Corel XaraX, Deneba Canvas and of
course, Macromedia Fireworks.
Now that we got all that out of the way, let’s move on to discussing Fireworks’ core strengths.
Fireworks’ Core Strengths & Advantages
Integrated Work Flow
The primary advantage Fireworks has over its competition is one I have already talked about:
vector and bitmap tools integration. With Fireworks you can seamlessly create and edit both
bitmap images and vector objects with tools that are familiar to both kinds of work flows in one
integrated environment. Fireworks is smart enough to switch between the two editing modes
seamlessly depending on the tools you choose and the actions you make.
Furthermore, Fireworks “stores” both kinds of objects into only one kind of layers while, for
example, Paint Shop Pro needs a special type of layer for vectors and Photoshop cannot work
directly with vector objects at all. It simply uses vector paths to mask parts of regular bitmap
layers.
By comparison, Fireworks is primarily a vector application and bitmap images are handled as
objects until a bitmap selection is made or a bitmap tool is used. This is a concept foreign to peo-
ple that are only used to working with pure raster applications like Photoshop but should make
perfect sense to someone used to working in Illustrator or FreeHand.
But the integration concept doesn’t stop there. On top of its hybrid vector/bitmap tool set,
Fireworks offers the best slicing, optimization and exporting tools in the industry in addition to
powerful animation capabilities. This means that after you are done creating your graphics you
can slice them directly on the same canvas where they were created and edited and then switch to
the Preview pane to tweak export optimization settings and see how they will affect the exported
graphics. You never have to deal with awkward “Save For Web” modal windows or need to
open a separate application to create navigation button states and things of the sort.
In comparison, you would need all three of Illustrator, Photoshop and ImageReady in Adobe’s
product line to do all that Fireworks can in one integrated environment.
Flexibility & Editability
The other main advantage Fireworks has over pure raster based applications is the flexibility and
editability afforded by its vector tool set. Unfortunately, this one is probably the least obvious
advantage for people who are only used to working with bitmap editing applications. This
becomes very clear when you look at the number of posts on Fireworks related public forums
from people asking how to perform tasks in Fireworks the same way they would do them in
Photoshop for example. Very often, Fireworks offers tools or features that would make perform-
ing the same task easier or in a non-destructive manner. These people have often been using
Fireworks for a while but remain unaware of the power of its vector tool set because they are so
used to performing certain tasks with the far less efficient bitmap tools that are familiar to them.
A prime real life example of the above is the task of removing backgrounds around people or
objects in pictures. In bitmap based applications, this task is traditionally done by using bitmap
selection tools to select and delete the background around the parts of an image one wants to
keep. This can be a frustrating and time consuming process that often relies on trial and error to
get the right selection. Bitmap selections are also fickle and fleeting things unless one thinks of
saving them (something which is not possible with many bitmap based image editing applica-
tions). Lastly, deleting the unwanted parts of an image is a destructive and irreversible action that
cannot be undone once the file has been saved and closed and the undo history is gone.
In Fireworks, the same task was traditionally done by drawing a vector shape with the Pen tool
around the part of the image you want to keep and using it as a mask. This method is better than
the previous one primarily because it is a non-destructive approach that does not delete any pix-
els in the masked image and because the mask shape can be edited and tweaked at any time. The
drawback with complex vector masks is that they can be difficult and time consuming to draw
with the Pen, especially for people unfamiliar with the tool. On the other hand and unlike bitmap
selections, vector paths used to mask objects won’t disappear between editing sessions and they
can be tweaked more easily and with far more precision than bitmap marquee selections.
But now with the release of Fireworks 8, there is an even better way to “remove” backgrounds
from certain kinds of images using masks because creating the vector mask shapes has become
easier than ever with the addition of the new “Marquee to Path” conversion feature. You can
now use a mixture of “traditional” bitmap selection tools like the Magic Wand to select plain
backgrounds and quickly convert an inverted version of that selection to a vector path that
closely follows the masked object’s contour. You still end up with an editable vector mask shape
but in a lot less time than if you had to draw it manually and it will probably fit the object’s con-
tour more closely. You can check out my “Removing Image Backgrounds with Fireworks 8”
tutorial for detailed steps in how to perform this kind of task.
Live Effects
The next Fireworks core strengths I want to discuss is object level Live Effects. In Fireworks you
can apply live, non-destructive effects such as blurs, shadows and colour adjustments both at the
layer level (as in Photoshop) as well as to individual objects. Furthermore, you are not limited to
the effects than come with Fireworks. You can use a number of third-party plugins that work as
live effects on both vector and bitmap objects including well known ones like Extensis
EyeCandy and Intellihance Pro and many others. Some plugins like Flaming Pear’s
SuperBladePro will only work on bitmap objects but are also usable as live effects. On the other
hand, some plugins might yield unexpected results when they are used on whole image objects
instead of regular bitmap selections.
In any case, being able to use third party plugins as Live Effects is a clear advantage over
Photoshop Layer Styles which are limited to the same kind of basic effects found in Fireworks’
Live Effects list (shadows, glows, etc). In Photoshop, all the more sophisticated effects offered
by plugins can only be applied to images through the Filters menu and the changes they make are
permanent ones, meaning that their parameters cannot be edited at a later time. The effects need
to be reapplied to a fresh copy of the graphic if any changes need to be made. Fireworks also has
several filters whose effects are permanent but the many third-party plugins that can work as live
effects give it unparallelled flexibility.
Precision
For me this is one of Fireworks’ key advantages over pure raster based applications. Since
Fireworks is vector based, you can select any object and be able to immediately read and set its
size and location from either the Properties Inspector or the Info Panel. Also, whether you have
a bitmap or a vector object selected, Fireworks “highlights” either its bounding box or the path
itself so you are always aware of what exactly you have selected. This kind of precision and flex-
ibility is absolutely essential for me when doing layout work.
Furthermore, with the release of Fireworks 8, Macromedia introduced a new panel called the
AutoShapes Properties panel that gives user precise numerical controls over a range of properties
for the most used AutoShape objects. For example, it is now possible to control the roundness of
individual corners for rectangles created with the rectangle AutoShape.
Raster based applications like Photoshop do not offer this kind of immediate and precise numeri-
cal feedback. You have to look at the Layers Palette to find out what “image” or part of an image
you are currently working on and there’s no way to know the precise location or size of any indi-
vidual graphical element in your layout. If you draw a rectangle and its corners do not have the
correct roundness, you have to delete it and start from scratch instead of simply editing an object
property numerically. You have to have endured the tedium of “eyeballing” elements alignment
or sizing in a pure raster application like Photoshop to appreciate just how easy, precise and fast
this kind of basic tasks are done in Fireworks. Working in a vector based application removes all
this awkward guesswork from your work flow and leaves you free to create with abandon know-
ing that you can edit anything easily later on.
Pixel Accurate Rendering
When you work in Fireworks creating objects and editing images, the program renders your
graphic to a pixel grid set at the typical Web graphics resolution of 72 ppi (pixels per inch). This
means that even vector objects which are usually resolution independent will be rendered to that
pixel grid. People used to the resolution independent display of full fledged vector application
like Illustrator and FreeHand may see this as a limitation in Fireworks, but it’s actually an asset.
Having Fireworks render your graphics at the final resolution they’ll be exported to enables you
to fine tune things like the anti-aliasing of elements’ edges. This is possible because, internally,
Fireworks can position elements on a much finer grid than the whole pixel grid it uses for render-
ing. This empowers you to really fine tune how your text will look for example. You can tweak
anti-aliasing settings as well as text size and kerning values and accurately view how those
tweaks affect the edges of your text. To be able to see this you’ll need to zoom in close to your
text while tweaking the various settings that can affect how text in rendered in your final
graphics.
This should also be possible for any other kind of object natively but, unfortunately, Fireworks’
native tools do not permit users to move and position elements on the canvas by values smaller
than whole pixels. This is a very strange oversight in Fireworks’ tool set (especially since Flash
has had this functionality for years) but luckily, some smart people have provided a solution in
the form of a free Fireworks extension which enables you to move objects by fractions of whole
pixels. This is a prime example of where Fireworks’ extensibility comes to the rescue (extensi-
bility is discussed in the next section). The extension in question is call SuperNudge and was cre-
ated by the smart people at Phireworx. It can be downloaded for free here.
A discussion of how to use SuperNudge and how it can help you tame the anti-aliasing of all
your objects’ edges is beyond the scope of this article but look for a forthcoming pixel forge arti-
cle on how to master anti-aliasing using tools like SuperNudge in the future.
Extensibility
This is another one of Fireworks main strengths. Although extensibility is not exclusive to
Fireworks, it has the advantage of having one of the richest APIs of any scriptable graphic appli-
cation as well as the ability to use special panels created in Flash so that extensions developers
can create sophisticated graphical interfaces for their extensions (the SuperNudge command dis-
cussed above is an example of such an extension).
Fireworks has a small but dedicated and very innovative community of extension developers that
have created literally hundreds of extensions to augment Fireworks’ already extensive creative
toolset. I use several of them regularly and I will also be dedicating a future article to this sub-
ject alone.
High Quality Output & Efficient Optimization Work Flow
All the creative tools in the world would be rather useless if the application that uses them didn’t
output quality images. Fortunately, Fireworks has been created from the ground up as a Web
graphics creation application so it’s not surprising that it optimizes and exports the smallest, best
looking Web optimized files of any graphic application. In mine and many other people’s experi-
ence, Fireworks consistently exports better quality images at smaller file sizes than any of its
competitors. Try it for yourself and you’ll be amazed at the results.
In Fireworks, you can tweak and preview optimization settings right within the application’s
interface without the need to go to an annoying modal “Save For Web” window. Furthermore,
the Fireworks Preview pane lets you visualize any interactivity you added to slices (like
rollovers, navbars, etc) without the need to test in a browser.
Conclusion
Hopefully, this article has helped you understand what kind of application Fireworks really is
and how it is uniquely designed to help in the creation, optimization and maintenance of Web
graphics and images. There is a lot of misinformation about Fireworks’ true nature and abilities
out there and, with this article, I wanted to counteract some of it by providing clear explanations
and examples from someone who has been using it in the trenches for years (I started using
Fireworks with version 2).
I really hope that the information I provided here will help those who have not yet decided on
a graphic application see how Fireworks can help them. I also hope that long time users who may
have only used a subset of its features will now see it in a new light. In any case, writing it has
given me a new appreciation for the program I ditched Photoshop for years ago and with which
I’ve had so much fun playing… I mean, designing Web sites . It has provided me with the
kind of flexible precision tools I need to create site design the way I like them quickly and pain-
lessly. Fireworks lets me use my creativity without getting in my way and lets me make mistakes
I can fix easily because, as the early Fireworks slogan said: “everything remains editable all
the time”.
It is really fun working with Fireworks!
A) DEFINITION OF RASTERS AND VECTORS
Graphics come in two types, raster and vector. Photoshop, Paintshop Pro, and Photopaint are all
examples of raster programs. Raster images are described by an array of pixels that each have a
given color and intensity value.
Vector images are described by mathematical lines, curves, and fills. Adobe Illustrator, Corel
Draw, and Macromedia Freehand are examples of vector programs.
Both raster and vector images have their advantages and disadvantages. Raster images look more
realistic, but vector images print more easily and can be infinitely scaled up or down with no loss
of quality.
When you 'vectorize' a raster image, you translate it into a system of lines and curves. There are
programs specifically for this, such as Adobe Streamline. Also, many vector programs have the
function built in. The opposite, called 'rendering', takes the mathematical description of a vector
graphic and converts it into discrete pixels.
B) DIFFERENCES BETWEEN RASTERS AND VECTORS
The difference between vector and raster graphics is that raster graphics are composed of pixels,
while vector graphics are composed of paths. A raster graphic, such as a gif or jpeg, is an array
of pixels of various colors, which together form an image. A vector graphic, such as an .eps file
or Adobe Illustrator? file, is composed of paths, or lines, that are either straight or curved. The
data file for a vector image contains the points where the paths start and end, how much the paths
curve, and the colors that either border or fill the paths. Because vector graphics are not made of
pixels, the images can be scaled to be very large without losing quality. Raster graphics, on the
other hand, become "blocky," since each pixel increases in size as the image is made larger. This
is why logos and other designs are typically created in vector format -- the quality will look the
same on a business card as it will on a billboard.
Here are 2 examples of an image when magnified or scaled up. You will notice the difference
in clarity. The mascot design below was designed by Logo Design Works for a client.
Vector Graphics typically are generated using drawing or illustration programs (e.g., Adobe
Illustrator) and are composed of mathematically-defined geometric shapes—lines, objects and
fills. Since vectors entail both magnitude and direction, vector elements thus are comprised of
line segments whose length represents magnitude and whose orientation in space represents
direction.
Vector graphics usually are easily modified within the creating application and generally are not
affected detrimentally by scaling (enlarging or reducing their size). Because vector elements are
mathematically-defined, scaling simply requires modification of their mathematical locations.
However, vector files do not support photographic imagery well and often can be problematic for
cross-platform exchange. Vector graphics typically are saved as EPS format.
This makes vector graphics ideal for logo design. Creating a vector logo is more difficult but the
effort pays for itself when the vector logo file is sent to printers or sign makers etc. The vector
logo can be scaled up or down with out losing quality and would enable smooth transition
between various media.
Raster Graphic Images are produced by digital image capture devices: digital scanners or
digital cameras, or by pixel editing programs (e.g., Adobe Photoshop). Raster images are
composed of a matrix (grid) or bitmap of digital picture elements (pixels). Pixels are squares or
rectangles described as black, white, gray or color. Raster images typically are saved as TIFF
format, but can be saved as EPS as well.
Whereas conversion from vector to raster is easily accomplished, raster conversion to vector is
much more difficult (and often is not possible). Raster images typically are easily shared across
various platforms, but can be more difficult than vector graphics to modify. As well, raster
graphics are impacted by scaling.
Creating a raster logo design using Adobe Photoshop might be ideal for web only usage but if
you are serious about branding, then the resulting raster PSD logo file will be of limited use.
When sent to a printer or sign maker and when they try to scale the raster logo, the quality
deteriorates and pixellation occurs. Yes, agreed, creating the raster logo design in Photoshop
would enable a designer to pile on stunning effects (such as drop shadows, beveling, blurring
etc). But the final deliverable will have limited uses.
Read more about different image file formats. Here is an indepth explanation of vector graphics.
C) INTRODUCTIONS TO DIFFERENT COMPUTER GRAPHICS-
Jump to: navigation, search
For other uses, see Computer graphics (disambiguation).
A Blender 2.45 screenshot, displaying the 3D test model Suzanne.
A 2D rendering of a 3D projection of a 4D Pentachoron performing a double rotation about two
orthogonal planes.
Computer graphics are graphics created using computers and, more generally, the
representation and manipulation of image data by a computer with help from specialized
software and hardware.
The development of computer graphics has made computers easier to interact with, and better for
understanding and interpreting many types of data. Developments in computer graphics have had
a profound impact on many types of media and have revolutionized animation, movies and the
video game industry.
Overview
The term computer graphics has been used in a broad sense to describe "almost everything on
computers that is not text or sound". Typically, the term computer graphics refers to several
different things:
the representation and manipulation of image data by a computer
the various technologies used to create and manipulate images
the sub-field of computer science which studies methods for digitally synthesizing and
manipulating visual content, see study of computer graphics
Computer graphics is widespread today. Computer imagery is found on television, in
newspapers, for example in weather reports, or for example in all kinds of medical investigation
and surgical procedures. A well-constructed graph can present complex statistics in a form that is
easier to understand and interpret. In the media "such graphs are used to illustrate papers, reports,
thesis", and other presentation material.[2]
Many powerful tools have been developed to visualize data. Computer generated imagery can be
categorized into several different types: 2D, 3D, and animated graphics. As technology has
improved, 3D computer graphics have become more common, but 2D computer graphics are still
widely used. Computer graphics has emerged as a sub-field of computer science which studies
methods for digitally synthesizing and manipulating visual content. Over the past decade, other
specialized fields have been developed like information visualization, and scientific visualization
more concerned with "the visualization of three dimensional phenomena (architectural,
meteorological, medical, biological, etc.), where the emphasis is on realistic renderings of
volumes, surfaces, illumination sources, and so forth, perhaps with a dynamic (time)
component".[3]
History
SAGE Sector Control Room.
The phrase “Computer Graphics” was coined in 1960 by William Fetter, a graphic designer for
Boeing.[4] The field of computer graphics developed with the emergence of computer graphics
hardware. Early projects like the Whirlwind and SAGE Projects introduced the CRT as a viable
display and interaction interface and introduced the light pen as an input device.
Initial 1960s developments
Further advances in computing led to greater advancements in interactive computer graphics. In
1959, the TX-2 computer was developed at MIT's Lincoln Laboratory. The TX-2 integrated a
number of new man-machine interfaces. A light pen could be used to draw sketches on the
computer using Ivan Sutherland's revolutionary Sketchpad software.[4] Using a light pen,
Sketchpad allowed one to draw simple shapes on the computer screen, save them and even recall
them later. The light pen itself had a small photoelectric cell in its tip. This cell emitted an
electronic pulse whenever it was placed in front of a computer screen and the screen's electron
gun fired directly at it. By simply timing the electronic pulse with the current location of the
electron gun, it was easy to pinpoint exactly where the pen was on the screen at any given
moment. Once that was determined, the computer could then draw a cursor at that location.
Sutherland seemed to find the perfect solution for many of the graphics problems he faced. Even
today, many standards of computer graphics interfaces got their start with this early Sketchpad
program. One example of this is in drawing constraints. If one wants to draw a square for
example, s/he does not have to worry about drawing four lines perfectly to form the edges of the
box. One can simply specify that s/he wants to draw a box, and then specify the location and size
of the box. The software will then construct a perfect box, with the right dimensions and at the
right location. Another example is that Sutherland's software modeled objects - not just a picture
of objects. In other words, with a model of a car, one could change the size of the tires without
affecting the rest of the car. It could stretch the body of the car without deforming the tires.
Further 1960s developments
Spacewar! running on the Computer History Museum's PDP-1.
Also in 1961 another student at MIT, Steve Russell, created the first video game, Spacewar.
Written for the DEC PDP-1, Spacewar was an instant success and copies started flowing to other
PDP-1 owners and eventually even DEC got a copy. The engineers at DEC used it as a
diagnostic program on every new PDP-1 before shipping it. The sales force picked up on this
quickly enough and when installing new units, would run the world's first video game for their
new customers.
E. E. Zajac, a scientist at Bell Telephone Laboratory (BTL), created a film called "Simulation of
a two-giro gravity attitude control system" in 1963.[5] In this computer generated film, Zajac
showed how the attitude of a satellite could be altered as it orbits the Earth. He created the
animation on an IBM 7090 mainframe computer. Also at BTL, Ken Knowlton, Frank Sindon and
Michael Noll started working in the computer graphics field. Sindon created a film called Force,
Mass and Motion illustrating Newton's laws of motion in operation. Around the same time, other
scientists were creating computer graphics to illustrate their research. At Lawrence Radiation
Laboratory, Nelson Max created the films, "Flow of a Viscous Fluid" and "Propagation of Shock
Waves in a Solid Form." Boeing Aircraft created a film called "Vibration of an Aircraft."
It was not long before major corporations started taking an interest in computer graphics. TRW,
Lockheed-Georgia, General Electric and Sperry Rand are among the many companies that were
getting started in computer graphics by the mid-1960s. IBM was quick to respond to this interest
by releasing the IBM 2250 graphics terminal, the first commercially available graphics
computer.
Pong arcade version
Ralph Baer, a supervising engineer at Sanders Associates, came up with a home video game in
1966 that was later licensed to Magnavox and called the Odyssey. While very simplistic, and
requiring fairly inexpensive electronic parts, it allowed the player to move points of light around
on a screen. It was the first consumer computer graphics product.
Also in 1966, Sutherland at MIT invented the first computer controlled head-mounted display
(HMD). Called the Sword of Damocles because of the hardware required for support, it
displayed two separate wireframe images, one for each eye. This allowed the viewer to see the
computer scene in stereoscopic 3D. After receiving his Ph.D. from MIT, Sutherland became
Director of Information Processing at ARPA (Advanced Research Projects Agency), and later
became a professor at Harvard.
David C. Evans was director of engineering at Bendix Corporation's computer division from
1953 to 1962, after which he worked for the next five years as a visiting professor at Berkeley.
There he continued his interest in computers and how they interfaced with people. In 1968 the
University of Utah recruited Evans to form a computer science program, and computer graphics
quickly became his primary interest. This new department would become the world's primary
research center for computer graphics.
In 1967 Sutherland was recruited by Evans to join the computer science program at the
University of Utah. There he perfected his HMD. Twenty years later, NASA would re-discover
his techniques in their virtual reality research. At Utah, Sutherland and Evans were highly sought
after consultants by large companies but they were frustrated at the lack of graphics hardware
available at the time so they started formulating a plan to start their own company.
In 1969, the ACM initiated A Special Interest Group in Graphics (SIGGRAPH) which organizes
conferences, graphics standards, and publications within the field of computer graphics. In 1973,
the first annual SIGGRAPH conference was held, which has become one of the focuses of the
organization. SIGGRAPH has grown in size and importance as the field of computer graphics
has expanded over time.
1970s
Many of the most important early breakthroughs in computer graphics research occurred at the
University of Utah in the 1970s. A student by the name of Edwin Catmull started at the
University of Utah in 1970 and signed up for Sutherland's computer graphics class. Catmull had
just come from The Boeing Company and had been working on his degree in physics. Growing
up on Disney, Catmull loved animation yet quickly discovered that he did not have the talent for
drawing. Now Catmull (along with many others) saw computers as the natural progression of
animation and they wanted to be part of the revolution. The first animation that Catmull saw was
his own. He created an animation of his hand opening and closing. It became one of his goals to
produce a feature length motion picture using computer graphics. In the same class, Fred Parke
created an animation of his wife's face. Because of Evan's and Sutherland's presence, UU was
gaining quite a reputation as the place to be for computer graphics research so Catmull went
there to learn 3D animation.
As the UU computer graphics laboratory was attracting people from all over, John Warnock was
one of those early pioneers; he would later found Adobe Systems and create a revolution in the
publishing world with his PostScript page description language. Tom Stockham led the image
processing group at UU which worked closely with the computer graphics lab. Jim Clark was
also there; he would later found Silicon Graphics, Inc.
The first major advance in 3D computer graphics was created at UU by these early pioneers, the
hidden-surface algorithm. In order to draw a representation of a 3D object on the screen, the
computer must determine which surfaces are "behind" the object from the viewer's perspective,
and thus should be "hidden" when the computer creates (or renders) the image.
1980s
In the early 1980s, the availability of bit-slice and 16-bit microprocessors started to revolutionise
high resolution computer graphics terminals which now increasingly became intelligent, semi-
standalone and standalone workstations. Graphics and application processing were increasingly
migrated to the intelligence in the workstation, rather than continuing to rely on central
mainframe and mini-computers. Typical of the early move to high resolution computer graphics
intelligent workstations for the computer-aided engineering market were the Orca 1000, 2000
and 3000 workstations, developed by Orcatech of Ottawa, a spin-off from Bell-Northern
Research, and led by an early workstation pioneer David John Pearson. The Orca 3000 was
based on Motorola 68000 and AMD bit-slice processors and had Unix as its operating system. It
was targeted squarely at the sophisticated end of the design engineering sector. Artists and
graphic designers began to see the personal computer, particularly the Commodore Amiga and
Macintosh, as a serious design tool, one that could save time and draw more accurately than
other methods. In the late 1980s, SGI computers were used to create some of the first fully
computer-generated short films at Pixar. The Macintosh remains a highly popular tool for
computer graphics among graphic design studios and businesses. Modern computers, dating
from the 1980s often use graphical user interfaces (GUI) to present data and information with
symbols, icons and pictures, rather than text. Graphics are one of the five key elements of
multimedia technology.
1990s
3D graphics became more popular in the 1990s in gaming, multimedia and animation. At the end
of the 80s and beginning of the nineties were created, in France, the very first computer graphics
TV series: "La Vie des bêtes" by studio Mac Guff Ligne (1988), Les Fables Géométriques J.-Y.
Grall, Georges Lacroix and Renato (studio Fantome, 1990–1993) and Quarxs, the first HDTV
computer graphics series by Maurice Benayoun and François Schuiten (studio Z-A production,
1991–1993). In 1995, Toy Story, the first full-length computer-generated animation film, was
released in cinemas worldwide. In 1996, Quake, one of the first fully 3D games, was released.
Since then, computer graphics have only become more detailed and realistic, due to more
powerful graphics hardware and 3D modeling software.
Image types
Two-dimensional
Raster graphic sprites (left) and masks (right)
2D computer graphics are the computer-based generation of digital images—mostly from two-
dimensional models, such as 2D geometric models, text, and digital images, and by techniques
specific to them.
2D computer graphics are mainly used in applications that were originally developed upon
traditional printing and drawing technologies, such as typography, cartography, technical
drawing, advertising, etc.. In those applications, the two-dimensional image is not just a
representation of a real-world object, but an independent artifact with added semantic value; two-
dimensional models are therefore preferred, because they give more direct control of the image
than 3D computer graphics, whose approach is more akin to photography than to typography.
Pixel art
Pixel art is a form of digital art, created through the use of raster graphics software, where
images are edited on the pixel level. Graphics in most old (or relatively limited) computer and
video games, graphing calculator games, and many mobile phone games are mostly pixel art.
Vector graphics
Example showing effect of vector graphics versus raster (bitmap) graphics.
Vector graphics formats are complementary to raster graphics, which is the representation of
images as an array of pixels, as it is typically used for the representation of photographic images [6] Vector graphics consists in encoding information about shapes and colors that comprise the
image, which can allow for more flexibility in rendering. There are instances when working with
vector tools and formats is best practice, and instances when working with raster tools and
formats is best practice. There are times when both formats come together. An understanding of
the advantages and limitations of each technology and the relationship between them is most
likely to result in efficient and effective use of tools.
Three-dimensional
3D computer graphics in contrast to 2D computer graphics are graphics that use a three-
dimensional representation of geometric data that is stored in the computer for the purposes of
performing calculations and rendering 2D images. Such images may be for later display or for
real-time viewing.
Despite these differences, 3D computer graphics rely on many of the same algorithms as 2D
computer vector graphics in the wire frame model and 2D computer raster graphics in the final
rendered display. In computer graphics software, the distinction between 2D and 3D is
occasionally blurred; 2D applications may use 3D techniques to achieve effects such as lighting,
and primarily 3D may use 2D rendering techniques.
3D computer graphics are often referred to as 3D models. Apart from the rendered graphic, the
model is contained within the graphical data file. However, there are differences. A 3D model is
the mathematical representation of any three-dimensional object. A model is not technically a
graphic until it is visually displayed. Due to 3D printing, 3D models are not confined to virtual
space. A model can be displayed visually as a two-dimensional image through a process called
3D rendering, or used in non-graphical computer simulations and calculations. There are some
3D computer graphics software for users to create 3D images.
Computer animation
Example of Computer animation produced using Motion capture
Fractal landscape, an example of computer-generated imagery. .
Computer animation is the art of creating moving images via the use of computers. It is a
subfield of computer graphics and animation. Increasingly it is created by means of 3D computer
graphics, though 2D computer graphics are still widely used for stylistic, low bandwidth, and
faster real-time rendering needs. Sometimes the target of the animation is the computer itself, but
sometimes the target is another medium, such as film. It is also referred to as CGI (Computer-
generated imagery or computer-generated imaging), especially when used in films.
Virtual entities may contain and be controlled by assorted attributes, such as transform values
(location, orientation, and scale) stored in an object's transformation matrix. Animation is the
change of an attribute over time. Multiple methods of achieving animation exist; the rudimentary
form is based on the creation and editing of keyframes, each storing a value at a given time, per
attribute to be animated. The 2D/3D graphics software will interpolate between keyframes,
creating an editable curve of a value mapped over time, resulting in animation. Other methods of
animation include procedural and expression-based techniques: the former consolidates related
elements of animated entities into sets of attributes, useful for creating particle effects and crowd
simulations; the latter allows an evaluated result returned from a user-defined logical expression,
coupled with mathematics, to automate animation in a predictable way (convenient for
controlling bone behavior beyond what a hierarchy offers in skeletal system set up).
To create the illusion of movement, an image is displayed on the computer screen then quickly
replaced by a new image that is similar to the previous image, but shifted slightly. This technique
is identical to the illusion of movement in television and motion pictures.
Concepts and principles
Images are typically produced by optical devices;such as cameras, mirrors, lenses, telescopes,
microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.
A digital image is a representation of a two-dimensional image in binary format as a sequence of
ones and zeros. Digital images include both vector images and raster images, but raster images
are more commonly used.
Pixel
In the enlarged portion of the image individual pixels are rendered as squares and can be easily
seen.
In digital imaging, a pixel (or picture element[7]) is a single point in a raster image. Pixels are
normally arranged in a regular 2-dimensional grid, and are often represented using dots or
squares. Each pixel is a sample of an original image, where more samples typically provide a
more accurate representation of the original. The intensity of each pixel is variable; in color
systems, each pixel has typically three components such as red, green, and blue.
Graphics
Graphics are visual presentations on some surface, such as a wall, canvas, computer screen,
paper, or stone to brand, inform, illustrate, or entertain. Examples are photographs, drawings,
line art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering
drawings, or other images. Graphics often combine text, illustration, and color. Graphic design
may consist of the deliberate selection, creation, or arrangement of typography alone, as in a
brochure, flier, poster, web site, or book without any other element. Clarity or effective
communication may be the objective, association with other cultural elements may be sought, or
merely, the creation of a distinctive style.
Rendering
Rendering is the process of generating an image from a model (or models in what collectively
could be called a scene file), by means of computer programs. A scene file contains objects in a
strictly defined language or data structure; it would contain geometry, viewpoint, texture,
lighting, and shading information as a description of the virtual scene. The data contained in the
scene file is then passed to a rendering program to be processed and output to a digital image or
raster graphics image file. The rendering program is usually built into the computer graphics
software, though others are available as plug-ins or entirely separate programs. The term
"rendering" may be by analogy with an "artist's rendering" of a scene. Though the technical
details of rendering methods vary, the general challenges to overcome in producing a 2D image
from a 3D representation stored in a scene file are outlined as the graphics pipeline along a
rendering device, such as a GPU. A GPU is a purpose-built device able to assist a CPU in
performing complex rendering calculations. If a scene is to look relatively realistic and
predictable under virtual lighting, the rendering software should solve the rendering equation.
The rendering equation does not account for all lighting phenomena, but is a general lighting
model for computer-generated imagery. 'Rendering' is also used to describe the process of
calculating effects in a video editing file to produce final video output.
3D projection
3D projection is a method of mapping three dimensional points to a two dimensional
plane. As most current methods for displaying graphical data are based on planar two
dimensional media, the use of this type of projection is widespread, especially in
computer graphics, engineering and drafting.
Ray tracing
Ray tracing is a technique for generating an image by tracing the path of light through
pixels in an image plane. The technique is capable of producing a very high degree of
photorealism; usually higher than that of typical scanline rendering methods, but at a
greater computational cost.
Shading
Example of shading.
Shading refers to depicting depth in 3D models or illustrations by varying levels of
darkness. It is a process used in drawing for depicting levels of darkness on paper by
applying media more densely or with a darker shade for darker areas, and less densely or
with a lighter shade for lighter areas. There are various techniques of shading including
cross hatching where perpendicular lines of varying closeness are drawn in a grid pattern
to shade an area. The closer the lines are together, the darker the area appears. Likewise,
the farther apart the lines are, the lighter the area appears. The term has been recently
generalized to mean that shaders are applied.
Texture mapping
Texture mapping is a method for adding detail, surface texture, or colour to a computer-
generated graphic or 3D model. Its application to 3D graphics was pioneered by Dr
Edwin Catmull in 1974. A texture map is applied (mapped) to the surface of a shape, or
polygon. This process is akin to applying patterned paper to a plain white box.
Multitexturing is the use of more than one texture at a time on a polygon.[8] Procedural
textures (created from adjusting parameters of an underlying algorithm that produces an
output texture), and bitmap textures (created in an image editing application or imported
from a digital camera) are, generally speaking, common methods of implementing texture
definition on 3D models in computer graphics software, while intended placement of
textures onto a model's surface often requires a technique known as UV mapping
(arbitrary, manual layout of texture coordinates) for polygon surfaces, while NURBS
surfaces have their own intrinsic parameterization used as texture coordinates.
Anti-aliasing
Rendering resolution-independent entities (such as 3D models) for viewing on a raster
(pixel-based) device such as a LCD display or CRT television inevitably causes aliasing
artifacts mostly along geometric edges and the boundaries of texture details; these
artifacts are informally called "jaggies". Anti-aliasing methods rectify such problems,
resulting in imagery more pleasing to the viewer, but can be somewhat computationally
expensive. Various anti-aliasing algorithms (such as supersampling) are able to be
employed, then customized for the most efficient rendering performance versus quality of
the resultant imagery; a graphics artist should consider this trade-off if anti-aliasing
methods are to be used. A pre-anti-aliased bitmap texture being displayed on a screen (or
screen location) at a resolution different than the resolution of the texture itself (such as a
textured model in the distance from the virtual camera) will exhibit aliasing artifacts,
while any procedurally-defined texture will always show aliasing artifacts as they are
resolution-independent; techniques such as mipmapping and texture filtering help to
solve texture-related aliasing problems.
Volume rendering
Volume rendered CT scan of a forearm with different colour schemes for muscle, fat, bone, and
blood.
Volume rendering is a technique used to display a 2D projection of a 3D discretely sampled data
set. A typical 3D data set is a group of 2D slice images acquired by a CT or MRI scanner.
Usually these are acquired in a regular pattern (e.g., one slice every millimeter) and usually have
a regular number of image pixels in a regular pattern. This is an example of a regular volumetric
grid, with each volume element, or voxel represented by a single value that is obtained by
sampling the immediate area surrounding the voxel.
3D modeling
3D modeling is the process of developing a mathematical, wireframe representation of any three-
dimensional object, called a "3D model", via specialized software. Models may be created
automatically or manually; the manual modeling process of preparing geometric data for 3D
computer graphics is similar to plastic arts such as sculpting. 3D models may be created using
multiple approaches: use of NURBS curves to generate accurate and smooth surface patches,
polygonal mesh modeling (manipulation of faceted geometry), or polygonal mesh subdivision
(advanced tessellation of polygons, resulting in smooth surfaces similar to NURBS models). A
3D model can be displayed as a two-dimensional image through a process called 3D rendering,
used in a computer simulation of physical phenomena, or animated directly for other purposes.
The model can also be physically created using 3D Printing devices.
Pioneers in graphic design
Charles Csuri
Charles Csuri is a pioneer in computer animation and digital fine art and created the first
computer art in 1964. Csuri was recognized by Smithsonian as the father of digital art and
computer animation, and as a pioneer of computer animation by the Museum of Modern
Art (MoMA) and Association for Computing Machinery-SIGGRAPH.
Donald P. Greenberg
Donald P. Greenberg is a leading innovator in computer graphics. Greenberg has
authored hundreds of articles and served as a teacher and mentor to many prominent
computer graphic artists, animators, and researchers such as Robert L. Cook, Marc
Levoy, and Wayne Lytle. Many of his former students have won Academy Awards for
technical achievements and several have won the SIGGRAPH Achievement Award.
Greenberg was the founding director of the NSF Center for Computer Graphics and
Scientific Visualization.
Aaron Marcus
Aaron Marcus is one of the first graphic designer in the world to work with computer
graphics. He has written over 250 articles and written/co-written six books. He has
published, lectured, tutored, and consulted internationally for more than 40 years and has
been an invited keynote/plenary speaker at conferences of ACM/SIGCHI,
ACM/SIGGRAPH, Usability Professionals Association (UPA). He was was named an
AIGA Fellow in 2007 and was elected in 2008 to the CHI Academy. He is the founder of
Aaron Marcus and Associates, Inc., a pioneering, world-renowned design firm
specializing in user-interface/user-experience development applications.
A. Michael Noll
Noll was one of the first researchers to use a digital computer to create artistic patterns
and to formalize the use of random processes in the creation of visual arts. He began
creating digital computer art in 1962, making him one of the earliest digital computer
artists. In 1965, Noll along with Frieder Nake and Georg Nees were the first to publicly
exhibit their computer art. During April 1965, the Howard Wise Gallery exhibited Noll's
computer art along with random-dot patterns by Bela Julesz.
A modern render of the Utah teapot, an iconic model in 3D computer graphics created by Martin
Newell, 1975.
Other pioneers
Jim Blinn
Arambilet
Benoît B. Mandelbrot
Henri Gouraud
Bui Tuong Phong
Pierre Bézier
Paul de Casteljau
Daniel J. Sandin
Alvy Ray Smith
Ton Roosendaal
Ivan Sutherland
Steve Russell
Ed Catmull
Fred Parke
Study of computer graphics
The study of computer graphics is a sub-field of computer science which studies methods for
digitally synthesizing and manipulating visual content. Although the term often refers to three-
dimensional computer graphics, it also encompasses two-dimensional graphics and image
processing.
As an academic discipline, computer graphics studies the manipulation of visual and geometric
information using computational techniques. It focuses on the mathematical and computational
foundations of image generation and processing rather than purely aesthetic issues. Computer
graphics is often differentiated from the field of visualization, although the two fields have many
similarities.
Applications
Computer graphics portal
Computer Science portal
Computer graphics may be used in the following areas:
Computational biology
Computational physics
Computer-aided design
Computer simulation
Digital art
Education
Graphic design
Infographics
Information visualization
Rational drug design
Scientific visualization
Video Games
Virtual reality
Web design
D) BMP, PNG, TIFF, GIF, JPEG
BMP
The BMP file format, also known as bitmap image file or Device Independent Bitmap (DIB)
file format or simply a bitmap, is a raster graphics image file format used to store bitmap digital
images, independently of the display device (such as a graphics adapter), especially on Microsoft
Windows and OS/2 operating systems.
The BMP file format is capable of storing 2D digital images of arbitrary width, height, and
resolution, both monochrome and color, in various color depths, and optionally with data
compression, alpha channels, and color profiles.
Microsoft has defined a particular representation of color bitmaps of
different color depths, as an aid to exchanging bitmaps between devices and applications with a
variety of internal representations. They called these device-independent bitmaps or DIBs, and
the file format for them is called DIB file format or BMP image file format. According to
Microsoft support:[1]
A device-independent bitmap (DIB) is a format used to define device-independent bitmaps in
various color resolutions. The main purpose of DIBs is to allow bitmaps to be moved from one
device to another (hence, the device-independent part of the name). A DIB is an external format,
in contrast to a device-dependent bitmap, which appears in the system as a bitmap object
(created by an application...). A DIB is normally transported in metafiles (usually using the
StretchDIBits() function), BMP files, and the Clipboard (CF_DIB data format).
The following sections discuss the data stored in the BMP file or DIB in details. This is the
standard BMP file format.[1] Some applications create bitmap image files which are not
compliant with the current Microsoft documentation. Also, not all fields are used; a value of 0
will be found in these unused fields.
PNG-
Portable Network Graphics (PNG ) is a bitmapped image format that employs
lossless data compression. PNG was created to improve upon and replace GIF (Graphics
Interchange Format) as an image-file format not requiring a patent license. The initialism PNG
can also be interpreted as a recursive initialism for "PNG's Not GIF".
PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors),
grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A]
images (with or without alpha channel). PNG was designed for transferring images on the
Internet, not for professional-quality print graphics, and therefore does not support non-RGB
color spaces such as CMYK.
PNG files nearly always use file extension PNG or png and are assigned MIME media type
image/png; it was approved for this use by the Internet Engineering Steering Group on October
14, 1996. PNG was published as an ISO/IEC standard in 2004.
TIFF
TIFF (originally standing for Tagged Image File Format) is a file format for storing images, popular among graphic artists, the publishing industry, and both amateur and professional photographers in general. As of 2009, it is under the control of Adobe Systems. Originally created by the company Aldus for use with what was then called "desktop publishing", the TIFF format is widely supported by image-manipulation applications, by publishing and page layout applications, by scanning, faxing, word processing, optical character recognition and other applications. Adobe Systems, which acquired Aldus, now holds the copyright to the TIFF specification. TIFF has not had a major update since 1992, though several Aldus/Adobe technical notes have been published with minor extensions to the format, and several specifications, including TIFF/EP (ISO 12234-2), TIFF/IT (ISO 12639), TIFF-F (RFC 2306) and TIFF-FX (RFC 3949) have been based on the TIFF 6.0 specification.
GIF
The Graphics Interchange Format (GIF; /ˈdʒɪf/ or /ˈɡɪf/) is a bitmap image format that was
introduced by CompuServe in 1987 and has since come into widespread usage on the World
Wide Web due to its wide support and portability.
The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of
up to 256 distinct colors. The colors are chosen from the 24-bit RGB color space. It also supports
animations and allows a separate palette of 256 colors for each frame. The color limitation makes
the GIF format unsuitable for reproducing color photographs and other images with continuous
color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.
GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression
technique to reduce the file size without degrading the visual quality. This compression
technique was patented in 1985. Controversy over the licensing agreement between the patent
holder, Unisys, and CompuServe in 1994 spurred the development of the Portable Network
Graphics (PNG) standard; since then all the relevant patents have expired.
JPEG
The name "JPEG" stands for Joint Photographic Experts Group
In computing, JPEG ( /ˈdʒeɪpɛɡ/ [pronounced as jay - peg] is a commonly used method of
lossy compression for digital photography (image). The degree of compression can be adjusted,
allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves
10:1 compression with little perceptible loss in image quality.
JPEG compression is used in a number of image file formats. JPEG/Exif is the most common
image format used by digital cameras and other photographic image capture devices; along with
JPEG/JFIF, it is the most common format for storing and transmitting photographic images on
the World Wide Web.[citation needed] These format variations are often not distinguished, and are
simply called JPEG.
The term "JPEG" is an acronym for the Joint Photographic Experts Group which created the
standard. The MIME media type for JPEG is image/jpeg (defined in RFC 1341), except in
Internet Explorer, which provides a MIME type of image/pjpeg when uploading JPEG images.
It supports a maximum image size of 65535×65535.
A) SETTING UP OF GRAPHIC PAGES, B) TERMS OF WIDTH, HEIGHT, RESOLUTION AND COLOUR-
Image resolution is an umbrella term that describes the detail an image holds. The term
applies to raster digital images, film images, and other types of images. Higher resolution means
more image detail.
Image resolution can be measured in various ways. Basically, resolution quantifies how close
lines can be to each other and still be visibly resolved. Resolution units can be tied to physical
sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height,
also known simply as lines, TV lines, or TVL), or to angular subtenant. Line pairs are often used
instead of lines; a line pair comprises a dark line and an adjacent light line. A line is either a dark
line or a light line. A resolution of 10 lines per millimeter means 5 dark lines alternating with 5
light lines, or 5 line pairs per millimeter (5 LP/mm). Photographic lens and film resolution are
most often quoted in line pairs per millimeter.
Resolution of digital images
The resolution of digital images can be described in many different ways.
Pixel resolution
The term resolution is often used for a pixel count in digital imaging, even though American,
Japanese, and international standards specify that it should not be so used, at least in the digital
camera field.[1][2] An image of N pixels high by M pixels wide can have any resolution less than
N lines per picture height, or N TV lines. But when the pixel counts are referred to as resolution,
the convention is to describe the pixel resolution with the set of two positive integer numbers,
where the first number is the number of pixel columns (width) and the second is the number of
pixel rows (height), for example as 640 by 480. Another popular convention is to cite resolution
as the total number of pixels in the image, typically given as number of megapixels, which can
be calculated by multiplying pixel columns by pixel rows and dividing by one million. Other
conventions include describing pixels per length unit or pixels per area unit, such as pixels per
inch or per square inch. None of these pixel resolutions are true resolutions, but they are widely
referred to as such; they serve as upper bounds on image resolution.
According to the same standards, the number of effective pixels that an image sensor or digital
camera has is the count of elementary pixel sensors that contribute to the final image, as opposed
to the number of total pixels, which includes unused or light-shielded pixels around the edges.
Below is an illustration of how the same image might appear at different pixel resolutions, if the
pixels were poorly rendered as sharp squares (normally, a smooth image reconstruction from
pixels would be preferred, but for illustration of pixels, the sharp squares make the point better).
An image that is 2048 pixels in width and 1536 pixels in height has a total of 2048×1536 =
3,145,728 pixels or 3.1 megapixels. One could refer to it as 2048 by 1536 or a 3.1-megapixel
image.
Unfortunately, the count of pixels isn't a real measure of the resolution of digital camera images,
because color image sensors are typically set up to alternate color filter types over the light
sensitive individual pixel sensors. Digital images ultimately require a red, green, and blue value
for each pixel to be displayed or printed, but one individual pixel in the image sensor will only
supply one of those three pieces of information. The image has to be interpolated or demosaiced
to produce all three colors for each output pixel.
Spatial resolution
The 1951 USAF resolution test target is a classic test target used to determine spatial resolution
of imaging sensors and imaging systems.
Image at left has a higher pixel count than the one to the right, but is still of worse spatial
resolution.
The measure of how closely lines can be resolved in an image is called spatial resolution, and it
depends on properties of the system creating the image, not just the pixel resolution in pixels per
inch (ppi). For practical purposes the clarity of the image is decided by its spatial resolution, not
the number of pixels in an image. In effect, spatial resolution refers to the number of independent
pixel values per unit length.
The spatial resolution of computer monitors is generally 72 to 100 lines per inch, corresponding
to pixel resolutions of 72 to 100 ppi. With scanners, optical resolution is sometimes used to
distinguish spatial resolution from the number of pixels per inch.
In geographic information systems (GISs), spatial resolution is measured by the ground sample
distance (GSD) of an image, the pixel spacing on the Earth's surface.
In astronomy one often measures spatial resolution in data points per arcsecond subtended at the
point of observation, since the physical distance between objects in the image depends on their
distance away and this varies widely with the object of interest. On the other hand, in electron
microscopy, line or fringe resolution refers to the minimum separation detectable between
adjacent parallel lines (e.g. between planes of atoms), while point resolution instead refers to the
minimum separation between adjacent points that can be both detected and interpreted e.g. as
adjacent columns of atoms, for instance. The former often helps one detect periodicity in
specimens, while the latter (although more difficult to achieve) is key to visualizing how
individual atoms interact.
In Stereoscopic 3D images, spatial resolution could be defined as the spatial information
recorded or captured by two viewpoints of a stereo camera (left and right camera). The effects of
spatial resolution on overall perceived resolution of an image on a person's mind are yet not fully
documented. It could be argued that such "spatial resolution" could add an image that then would
not depend solely on pixel count or Dots per inch alone, when classifying and interpreting
overall resolution of a given photographic image or video frame.
Spectral resolution
Color images distinguish light of different spectra. Multi-spectral images resolve even finer
differences of spectrum or wavelength than is needed to reproduce color. That is, they can have
higher spectral resolution. That is the strength of each band that is created. ( Lihongeni mulama:
2008)
Temporal resolution
Movie cameras and high-speed cameras can resolve events at different points in time. The time
resolution used for movies is usually 15 to 30 frames per second (frames/s), while high-speed
cameras may resolve 100 to 1000 frames/s, or even more.
Many cameras and displays offset the color components relative to each other or mix up
temporal with spatial resolution:
digital camera (Bayer color filter array)
LCD (Triangular pixel geometry)
CRT (shadow mask)
Radiometric resolution
Main article: Color depth
Radiometric resolution determines how finely a system can represent or distinguish differences
of intensity, and is usually expressed as a number of levels or a number of bits, for example 8
bits or 256 levels that is typical of computer image files. The higher the radiometric resolution,
the better subtle differences of intensity or reflectivity can be represented, at least in theory. In
practice, the effective radiometric resolution is typically limited by the noise level, rather than by
the number of bits of representation.
Resolution in various media
This article needs additional citations for verification. Please help improve this article
by adding citations to reliable sources. Unsourced material may be challenged and
removed. (April 2008)
This is a list of traditional, analog horizontal resolutions for various media. The list only includes
popular formats, not rare formats, and all values are approximate (rounded to the nearest 10),
since the actual quality can vary machine-to-machine or tape-to-tape. For ease-of-comparison, all
values are for the NTSC system. (For PAL systems, replace 480 with 576.)
Analog and early digital
o 352×240 : Video CD
o 300×480 : Umatic, Betamax, VHS, Video8
o 350×480 : Super Betamax, Betacam
o 420×480 : LaserDisc, Super VHS, Hi8
o 640×480 : Analog broadcast (NTSC)
o 670×480 : Enhanced Definition Betamax
o 768×576 : Analog broadcast (PAL, SECAM)
Digital
o 720×480 : D-VHS, DVD, miniDV, Digital8, Digital Betacam
o 720×480 : Widescreen DVD (anamorphic)
o 1280×720 : D-VHS, HD DVD, Blu-ray, HDV (miniDV)
o 1440×1080 : HDV (miniDV)
o 1920×1080 : HDV (miniDV), AVCHD, HD DVD, Blu-ray, HDCAM SR
o 2048×1080 : 2K Digital Cinema
o 4096×2160 : 4K Digital Cinema
o 7680×4320 : UHDTV
o Sequences from newer films are scanned at 2,000, 4,000, or even 8,000 columns,
called 2K, 4K, and 8K, for quality visual-effects editing on computers.
Film
o 35 mm film is scanned for release on DVD at 1080 or 2000 lines as of 2005.
o The actual resolution of 35 mm camera original negatives is the subject of much
debate. Measured resolutions of negative film have ranged from 25-200 lp/mm,
which equates to a range of 325 lines for 2-perf, to (theoretically) over 2300 lines
for 4-perf shot on T-Max 100.[3][4][5] Archivists generally agree that 4k scanning
of 35mm is more than adequate for archival purposes.[6] However some
photography sources gives 5380 x 3620 as the resolution of 35mm film.[7] It is
similar to 19.5 Mpix, of course with identical spatial resolution.[8]
o IMAX, including IMAX HD and OMNIMAX: approximately 10,000×7000 (7000
lines) resolution. It is about 70 Mpix,[9] which may be compared to the biggest
resolution, single sensor digital cameras(as of January 2012) - 80 Mpix[10]
See also
Display resolution
Dots per inch
Image scanner
Pixel density
C) CREATING BASIC SHAPES
Basic Shapes in Photoshop 1
Although the screenshots for this beginners' tutorial were done with Photoshop v.7, there are not many differences for users of PS 8 or earlier versions.
My keyboard shortcuts are for PC. If you are using a Mac, you need to convert these. Essentially, Alt = Option and Ctrl = Command.
I know that there are other ways to make shapes, including the Shape tool. I cover that tool in some depth in my Shape tutorial, "Get into Shape." This tutorial will teach you many valuable Photoshop skills involving selections.
In this tutorial, you will make the rectangle and the circle. In Basic Shapes 2, you will make the Pearly Button.
Beginners' TIPS:
You may find helpful clues if you hover over the pictures. Also, if there is an item in purple that you want to read more about, click it.
You will find that the last two projects depend upon knowledge you will have gained from working through the first one, so if you do start anywhere but the beginning, and run into difficulty, you will do well to start over at the beginning. :)
Here are some things you will learn as you work though this tutorial:
How to make a new layer and name it. How to make rectangles and ellipses. How to make squares and circles. Choosing foreground and background colors. Two ways to fill a selection with a color. How to fill a selection with two different kinds of gradients. What it means to stroke a selection and how to do it.
How to use multiple layers to create an effect. Using Layer Styles to create a bevel and a Drop Shadow.
Using Brush Options to make an Airbrush. How to use the Dodge tool. How to save a file in PSD format. How to save a file in JPG format. About quality levels in JPG's. Keyboard shortcuts:
o Alt-Backspace o Ctrl-Backspace o Ctrl-S o Ctrl-D
A. Rectangle
1. File -> New. Make your canvas 300x300. 72 dpi is fine, and you should be in RGB mode.
2. Find your Layers palette and click the New Layer icon at the bottom right next to the trash can. Double-click the name of the layer in the layers palette and type in a new name. I gave mine the clever moniker, "Rectangle."
3. With the Rectangle layer selected in the layers palette, choose the Rectangular Marquee tool in the toolbar. Check the Options bar and be sure that you have Feather of 0 and Style is Normal.
Then drag a rectangle across your canvas as I have done here. This is actually a "Rectangular Selection."
4. Click the foreground color square, (here mine is red) and then choose a color for your rectangle. Click OK.
Now I said that this is a "rectangular selection," and not a "rectangle." Why? Well, a selection on an empty layer is empty, because there are no pixels within it. Let's fill the selection with pixels and make a real rectangle.
5. As with most operations in Photoshop, there are several ways to fill a selection. Here is my favorite way: hold the Alt key and click the backspace key. This fills any selection with your foreground color.
Digression: If Alt-Backspace fills the selection with the foreground color, guess what Ctrl-Backspace does?
(Hint: Be sure that your background color in your toolbox is something other than white when you test this, or you won't see what it does.)
6. Next let's make a border on the rectangle, an operation known as stroking the selection. Click your foreground color square and choose a different color. I chose black. Click OK.
7. In the menu, click Edit -> Stroke. (Notice "Fill" there. That is the other way to fill a selection.) In the dialog box that appears, type in a number of pixels for the width of your border. I used 4. Decide whether you want the stroke to go inside, outside or centered on the selection. Click OK.
Ctrl-D to deselect. Done!
B. Circle
Next you are going to make a circular selection, then fill it and stroke it.
1. File > New and make your canvas 300x300. 72 dpi is fine, and you should be in RGB mode. Start on a new layer as you did for the rectangle. (Think about how to do it before you look back.)
2. Click and hold the rectangular marquee tool till the other tools under it fly out. (Each of the tools with the tiny arrow in the lower right corner has other choices underneath!)
Choose the Elliptical Marquee tool as i have done to the right.
3. Now if you just drag this out, you will get an ellipse. Try it. It is difficult if not impossible to get one that is a PERFECT circle though without a trick and here it is: Hold the SHIFT key as you drag the ellipse out. Perfect circle! (What will happen if you hold Alt and shift as you drag the ellipse out?)
4. Now fill and stroke your circle as I have on the circle to the to the right.
Try to remember how you did it with the rectangle before you look above, but then do look above if you need to. (Don't worry if you mess something up because you can always start over at this point or you can click back in the history to undo your mistakes.) Ctrl-D to deselect.
Congratulations on completing the first part of the Basic Shapes Tutorial! I hope you enjoyed it and learned a thing or two too!
Now you are ready to make this Pearly Button!
D) PRACTICE OF LINES, RECTANGLES, CIRCLES, POLYGON FREE FROM SHAPES,SQUARES, ELLIPSES-
This tutorial is designed to show you how all of the AutoCAD Draw commands work. If you just
need information quickly, use the QuickFind toolbar below to go straight to the command you
want or select a topic from the contents list above. Not all of the Draw commands that appear on
the Draw toolbar are covered in this tutorial. Blocks, Hatch and Text for example are all tutorial
topics in their own right!
The Draw commands can be used to create new objects such as lines and circles. Most AutoCAD
drawings are composed purely and simply from these basic components. A good understanding
of the Draw commands is fundamental to the efficient use of AutoCAD.
The sections below cover the most frequently used Draw commands such as Line, Polyline and
Circle as well as the more advanced commands like Multiline and Multiline Style. As a
newcomer to AutoCAD, you may wish to skip the more advanced commands in order to
properly master the basics. You can always return to this tutorial in the future when you are more
confident.
In common with most AutoCAD commands, the Draw commands can be started in a number of
ways. Command names or short-cuts can be entered at the keyboard, commands can be started
from the Draw pull-down menu, shown on the right or from the Draw toolbar. The method you
use is dependent upon the type of work you are doing and how experienced a user you are. Don't
worry too much about this, just use whatever method feels easiest or most convenient at the time.
Your drawing technique will improve over time and with experience so don't expect to be
working very quickly at first.
If you are working with the pull-down menus, it is worth considering the visual syntax that is
common to all pull-downs used in the Windows operating system. For example, a small arrow
like so " " next to a menu item means that the item leads to a sub-menu that may contain other
commands or command options. An ellipsis, "…" after a menu item means that the item displays
a dialogue box. These little visual clues will help you to work more effectively with menus
because they tell you what to expect and help to avoid surprises for the newcomer.
A) HOW TO MODIFY BASIC SHAPES-
You can add one shape to your 2007 Microsoft Office system document or combine multiple
shapes to make a drawing or a more complex shape. Available shapes include lines, basic
geometric shapes, arrows, equation shapes, flowchart shapes, stars, banners, and callouts.
After you add one or more shapes, you can add text, bullets, numbering, and Quick Styles to
them.
This article is about shapes. For more information about shapes in SmartArt graphics, see Add a
shape to a SmartArt graphic. For more information about inserting symbols, see Insert ASCII or
Unicode Latin-based symbols and characters. For more information about using charts or
SmartArt in your document, see When should I use a SmartArt graphic and when should I use a
chart?
B) HOW TO SELECT ABOVE SHAPES-
Steps
1. 1
Become familiar with the Drawing tool bar. The Drawing toolbar is normally located
at the bottom of the window. If you do not see it, activate it from the View > Toolbars
menu. As in all OpenOffice.org components, you can place the toolbar on the Draw
window wherever you wish.
2. Learn about the custom shapes in Draw 2.
o Basic shapes include:
Lines
Arrows
Rectangles and squares
Ellipses and circles
Curves and polygons
Gluepoints and Connectors
Geometric Shapes and Arrows
Note: If you draw a basic shape or select one for editing, the
Info field in the status bar changes to reflect the action taken: Line
created, Text frame xxyy selected, and so on.
Note: If you draw a basic shape or select one for editing, the Info
field in the status bar changes to reflect the action taken: Line
created, Text frame xxyy selected, and so on.
Flowcharts, Stars and Banners
1. 1
Flowchart toolbar
Get the tools for drawing flowcharts by clicking on the icon
.
2. 2
Callouts toolbar
Use callouts by clicking on this icon
. It open the Callouts toolbar.
o Note: These new callouts replace the old ones in Version 1. If you still need the
old ones, you can add them manually to this or another toolbar.
3. 3
Stars and banners
Access the Stars and banners by clicking on this icon
.
o You can add text to all these shapes.
Add Text to Objects
1. 1
Know that there are two ways to add text to a drawing; A dynamic text frame as an
independent Draw object or as text in a previously drawn object. In the latter case the
text is integrated with the object.
1. Use dynamic text frames
2. 2
The text tool is activated by clicking on the icon Text
for horizontal or for vertical script
(to be able use this latter option you must activate support for Asian languages
under Tools > Options > Language Settings > Languages).
1.
Text frames can be moved and rotated like all draw objects.
3. 3
Text toolbar
After activating the Text command mode, click at the location where you want to
position the text. A small text frame appears. It contains only the cursor. You can move
the frame if desired. The Text Formatting toolbar appears and you can choose the font
type, font size and other text properties and begin to type in your text.
o
The text frame grows with the text.
The text frame grows with the text. You can insert a line break with the
Shift+Enter key combination.
o
The Enter key begins a new paragraph.
The Enter key begins a new paragraph. Neither line breaks nor new paragraphs
terminate the text frame.
4. 4
Observe the information field in the status bar: it shows that you are editing text and
also provides details about the current cursor location - paragraph, line, and column
numbers.
o
Text properties can also be changed during text input.
Text properties can also be changed during text input. Any changes will be
reflected from the cursor position onwards.
5. 5
After choosing the Text icon, you can also draw a frame with the mouse to contain
future text.
After choosing the Text icon, you can also draw a frame with the mouse to contain
future text. Line breaks are inserted automatically at the right edge of the frame when
the text fills the frame width. You can however—just like when editing other text—insert
your own line breaks, begin new paragraphs or change any of the text properties.
Use text elements in Draw objects
1. 1
Be aware that a text element is associated with most Draw objects. By means of these
elements text can be added to an object.
o The exceptions to this are control elements like buttons or list boxes, as well as
3D scenes and their associated elements and groups.
2. 2
Be sure that the button
on the Options toolbar is active, so that you can start editing an object by double-
clicking on it (or by pressing the function key F2). In the middle of the Draw object
you will see a black bar as the text cursor; start typing to input text. The status bar shows
at lower left “Text Edit” and the position of the cursor within the text.
o Text can contain paragraphs and these can be in the form of bulleted or numbered
lists. For a new line without beginning a new paragraph, use (as in text
documents) the key combination Shift+Enter. To end the text input, click next to
the object or press the Esc key.
C) HOW TO CHANGE LINES, FILLS, COLOURS, TEXTURES-
Show All
You can instantly change the look of chart elements (such as the chart area, the plot area, data
markers, titles in charts, gridlines, axes, tick marks, trendlines, error bars, or the walls and floor
in 3-D charts) by applying a predefined shape style. You can also apply different shape fills,
shape outlines, and shape effects to these chart elements.
What do you want to do?
Apply a predefined shape or line style
Apply a different shape fill
Apply a different shape outline
Apply a different shape effect
Apply a predefined shape or line style
1. On a chart, click the chart element that you want to change, or do the following to select
it from a list of chart elements:
1. Click a chart.
This displays the Chart Tools, adding the Design, Layout, and Format tabs.
2. On the Format tab, in the Current Selection group, click the arrow next to the
Chart Elements box, and then click the chart element that you want to use.
2. On the Format tab, in the Shape Styles group, click a predefined shape style or line
style.
To see all available shape styles, Click the More button .
Tip If you don't like the change that you made, you can undo it immediately. On the Quick
Access Toolbar, click Undo , or press CTRL+Z.
Top of Page
Apply a different shape fill
You can fill a selected shape (such as data markers, titles, data labels, or a legend) with a solid
color, gradient, picture, or texture. You cannot use shape fill to format lines in a chart (such as
gridlines, axes, trendlines, or error bars).
1. On a chart, click the chart element that you want to change, or do the following to select
it from a list of chart elements:
1. Click a chart.
This displays the Chart Tools, adding the Design, Layout, and Format tabs.
2. On the Format tab, in the Current Selection group, click the arrow next to the
Chart Elements box, and then click the chart element that you want to use.
2. On the Format tab, in the Shape Styles group, click Shape Fill.
3. Do one of the following:
To use a different fill color, under Theme Colors or Standard Colors, click the color
that you want to use.
Tip Before you apply a different color, you can quickly preview how that color affects the
chart. When you point to colors that you may want to use, the selected chart element will be
displayed in that color on the chart.
To remove the color from the selected chart element, click No Fill.
To use a fill color that is not available under Theme Colors or Standard Colors, click
More Fill Colors. In the Colors dialog box, specify the color that you want to use on the
Standard or Custom tab, and then click OK.
Custom fill colors that you create are added under Recent Colors so that you can use them
again.
To fill the shape with a picture, click Picture. In the Insert Picture dialog box, click the
picture that you want to use, and then click Insert.
To use a gradient effect for the selected fill color, click Gradient, and then under
Variations, click the gradient style that you want to use.
For additional gradient styles, click More Gradients, and then in the Fill category, click the
gradient options that you want to use.
To use a texture fill, click Texture, and then click the texture that you want to use.
Tip If you don't like the change that you made, you can undo it immediately. On the Quick
Access Toolbar, click Undo , or press CTRL+Z.
Top of Page
Apply a different shape outline
You can change the color, width, and line style of lines in a chart (such as gridlines, axes,
trendlines, or error bars), or you can create custom borders for selected shapes (such as data
markers, titles, data labels, or a legend).
1. On a chart, click the chart element that you want to change, or do the following to select
it from a list of chart elements:
1. Click a chart.
This displays the Chart Tools, adding the Design, Layout, and Format tabs.
2. On the Format tab, in the Current Selection group, click the arrow next to the
Chart Elements box, and then click the chart element that you want to use.
2. On the Format tab, in the Shape Styles group, click Shape Outline.
3. Do one of the following:
To use a different outline color, under Theme Colors or Standard Colors, click the
color that you want to use.
To remove the outline color from the selected chart element, click No Outline.
Note If the selected element is a line, the line will no longer be visible on the chart.
To use an outline color that is not available under Theme Colors or Standard Colors,
click More Outline Colors. In the Colors dialog box, specify the color that you want to
use on the Standard or Custom tab, and then click OK.
Custom outline colors that you create are added under Recent Colors so that you can use them
again.
To change the weight of a line or border, click Weight, and then click the line weight that
you want to use.
For additional line style or border style options, click More Lines, and then click the line style or
border style options that you want to use.
To use a dashed line or border, click Dashes, and then click the dash type that you want
to use.
For additional dash-type options, click More Lines, and then click the dash type that you want to
use.
To add arrows to lines, click Arrows, and then click the arrow style that you want to use.
You cannot use arrow styles for borders.
For additional arrow style or border style options, click More Arrows, and then click the arrow
setting that you want to use.
Tip If you don't like the change that you made, you can undo it immediately. On the Quick
Access Toolbar, click Undo , or press CTRL+Z.
Top of Page
Apply a different shape effect
You can apply visual effects (such as a shadow, glow, or bevel effects) to selected shapes (such
as data markers, titles, data labels, or a legend) and lines (such as gridlines, axes, trendlines, or
error bars).
1. On a chart, click the chart element that you want to change, or do the following to select
it from a list of chart elements:
1. Click a chart.
This displays the Chart Tools, adding the Design, Layout, and Format tabs.
2. On the Format tab, in the Current Selection group, click the arrow next to the
Chart Elements box, and then click the chart element that you want to use.
2. On the Format tab, in the Shape Styles group, click Shape Effects.
3. Click an available effect, and then select the type of effect that you want to use.
Note Available shape effects depend on the chart element that you selected. Preset, reflection,
and bevel effects are not available for all chart elements.
Tip If you don't like the change that you made, you can undo it immediately. On the Quick
Access Toolbar, click Undo , or press CTRL+Z.
D) USING TEXT TOOL, CREATING TEXT OBJECTS
Using Text Tools
There are two ways to edit a text object:
As with other object in Motion, you can edit text by using the parameters in the
Properties Inspector, or by using the onscreen controls.
You can edit the text characters using the Text parameters in the Text Inspector or in the
HUD.
The following interface tools are used to edit text in Motion:
Toolbar
Text HUDs
Text Inspector
This section discusses using the Text tool (in the toolbar) and the Text editor (in the Format pane
of the Text Inspector) to create and modify text.
Note: When text is selected with the default selection tool, you can use the standard onscreen
controls to move and animate the text in the Canvas.
Text Tools in the Toolbar
The Motion toolbar contains several tools that you can use to manipulate text.
Text tool: Use this tool to create text. Click the Text tool, then click or drag in the Canvas
to create a blank text object.
If you click in the Canvas, you activate the Type layout method (the default), which
requires that you insert manual line breaks (by pressing Return) to make text wrap to a
new line. If you drag in the Canvas, you activate the Paragraph layout method, which
wraps text into a column.
Select/Transform tool: Use this tool to select and transform text. After you finish typing
text, click the Select/Transform tool (or press Esc) to select the text as an object. To
select existing text, click the Select/Transform tool, then click the text in the Canvas.
Note: When the Select/Transform tool is active, you can double-click the text to enter
text-editing mode. When Motion is in text-editing mode, the Text tool is highlighted in
the toolbar.
Transform Glyph tool: Use this tool to select and transform glyphs (individual characters
of text objects). After you create text, click the Select/Transform tool and, holding the
mouse button down, choose the Transform Glyph tool from the pop-up menu.
E) HOW TO CHANGE FONT, FONT SIZE, COLOUR OF THE TEXT-
Most Web browsers include functionality to let you increase or decrease the text in a Web page.
For example, to increase text size:
Browse
r Example
Menu
Items
Macintos
h
Shortcut
Windo
ws
Shortc
ut
Interne
t
Explor
er
View
>
Text
Size >
Larges
t
. .
Firefox
,
Netsca
pe
View
>
Text
Size >
Increa
se
Comman
d+ Ctrl++
Opera
View
>
Zoom
>
%
Comman
d+
+
or
0
Safari
View
>
Make
Text
Bigger
Comman
d+ .
A) HOW TO USE ACROBAT FILE-
Most freelancer probably had to go through this at some point in their career, a client either gives
you a sheet of paper with the text on it and gets no digitalized version of it, or he gives you the
text as an image. You could install some open-source OCR programm or even pay for one, but
why would you do that when you can do it in Acrobat?
If you scan with Acrobat
If you are using Acrobat 8, I’d recommend that you scan your text directly from the software.
You should check the “Make searchable (Run OCR)” checkbox, this will run the OCR
programm and you’ll have your text ready right away (not available in previous versions of
Acrobat). Acrobat 8 will also rotate your file automatically if it can’t run the text recognition.
To scan from Acrobat, chose: File > Create PDF > From Scanner
B) HOW TO OPEN FILE IN ACROBAT-
In order to get started, you have to have a PDF file open in Adobe Acrobat 7.0 Professional.
Opening files using Adobe Acrobat or Adobe Reader is similar to opening files using the
majority of personal computer you are currently already familiar with.
Adobe Acrobat 7.0 Professional, Adobe Acrobat 7.0 Standard, and the Adobe Reader 7.0 are
applications from a Adobe Systems which allow you to open, view, and print PDF files. These
applications are referred to collectively as user agents for PDF files. In much the same way a
browser is a user agent for HTML files, these applications are user agents for the PDF format.
First, it is assumed that you have one of these applications installed on your computer. For the
purposes of this tutorial, we will be referring to Adobe Acrobat 7.0 Professional unless otherwise
noted.
Opening PDFs from the Desktop / File Folder
Using a mouse, simply double click on the PDF file you wish to open (PDF files have a
distinctive icon and possess the file extension .pdf (See Figure 2 - 2 PDF Files on the Desktop /
In a File Folder) ). Users who do not use a mouse would use the Windows convention to Tab to
the target folder and select the desired PDF by tabbing, typing the initial letters of the file name
or using the up or down arrow keys to navigate the file folder in order to select the desired PDF
file.
Figure 2 - 2 PDF Files on the Desktop / In a File Folder
Opening PDFs from Within Adobe Acrobat or Adobe Reader
Assuming Adobe Acrobat or the Adobe Reader is already running on your computer, from the
menu bar File>Open will allow you to browse to the desired PDF file. The keyboard shortcut is
Ctrl + O. The Accelerator Key Combination is Alt + F +O. Any one of these actions brings up
the Acrobat Open Dialog. You can either use the mouse to select the desired file or Tab over to
the desired file using the appropriate keystrokes. Opening files from within Adobe Acrobat /
Reader will limit the display of files to only those that have the PDF file extension (See Figure 2
- 3 The Adobe Acrobat Open Dialog) . If you would like to know what other types of files may
be in the selected folder, you would have to select "All Files" from the dropdown list of file
types that appears at the bottom of the Open Dialog.
Figure 2 - 3 The Adobe Acrobat Open Dialog
C) VIEWING OF FILE, ZOOMING, ADJUSTING, ROTATING OPENED ACROBAT DOCUMENT-
Lengthy documents stored on the Internet are sometimes saved as PDF (Portable
Document Format) files. Placing large amounts of text on an individual web page is
considered bad Internet practice since it causes users to scroll through a big web
page, which can become tedious. Instead, website creators can create downloadable
files of text saved in the PDF format. PDF files can be viewed or downloaded on the
Internet just as any other multimedia file, such as an HTML file, image, or movie.
However, in order to view PDF files, you'll need the necessary programs.
The advantage of PDF files comes in their universal look; no matter what platform
you open them on, they will look exactly the same. These create a much easier
distribution method for the author, knowing that no matter how many times the file
is duplicated, and in what manner, the look will remain the same. Another advantage
to PDF files is the small file size.
Opening Adobe Acrobat Reader: The program used to view PDF files is Adobe Acrobat Reader. Many computers
already come equipped with this software. To run Acrobat Reader on your computer:
Start >> Programs >> Adobe >> Adobe Acrobat. If you are using a current browser,
Acrobat Reader may be included. Click on a link to a PDF file and the reader will open
it within your browser.
Downloading Adobe Acrobat: If you're using a computer that doesn't have Acrobat Reader, you can download it for
free from Adobe's website, http://www.adobe.com. The free version of Adobe
Acrobat Reader can be downloaded from this web page:
http://www.adobe.com/products/acrobat/readstep2.html
Once you have downloaded the program, install Acrobat on your computer. It will
then be located in Start >> Programs >> Adobe >> Adobe Acrobat. At this point
you will be able to view PDF files on the Internet.
Viewing a PDF file in Adobe Acrobat Reader: Normal html web pages on the web display in a web browser when you click on a link
or enter a website URL in the browser address bar. When PDF files are opened,
however, they are automatically opened in Adobe Acrobat Reader.
As an example go to this web page in the Rutgers Writing Program website:
http://wp.rutgers.edu/courses/101/gradatorium/this_is_a.html
Then, click on the link near the top of the page that reads "PDF"
(http://wp.rutgers.edu/courses/101/gradatorium/media/a_paper.pdf). When you
click on the link to the PDF file, Adobe Acrobat Reader will automatically open within
your browser and the PDF file will display.
Downloading and viewing PDF files: In addition to clicking on a link to a PDF file on the web and viewing it through
Acrobat in your browser, you can also download the PDF file to your computer and Copyright © Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)
open it up using Acrobat Reader. To save a PDF file, right-click on the link to the file
and select "Save As" (in Netscape, select "Save Target As").
Save the file to a location on your computer. Then open up Adobe Acrobat on your
computer, navigate to the "File" menu, and select "Open." Browse to the saved PDF
file and open it. Your downloaded PDF file should now be opened in the Acrobat.
Navigating through a PDF file: Whether you have clicked on a link that opens a PDF file in Acrobat in your web
browser, or if you downloaded a PDF file to your computer, you should know how to
view and navigate the file in Acrobat Reader. Acrobat Reader features different tools
that allow you to view the file in various ways. You'll notice that in Acrobat Reader,
the PDF file looks very much like a standard Word document or a web page.
Therefore, you can view the file in ways similar to viewing a text document or web
page. The following is a list of important tools included in Adobe Acrobat Reader that
will help you in understanding the program and how to view PDF files:
1. Open: Like any other software that you may have encountered, the Open
folder icon browses your computer to open up a PDF file.
2. Print: Also self-explanatory, pressing the Print icon lets you print out the PDF
document to your printer. This may be useful if you wish to use a PDF
document as a handout.
3. Show / Hide Navigation Pane: By clicking on this icon, your view of the
document changes between the normal page view and a navigation view that
provides small "thumbnail" (preview) images of all of the pages in the
document. This way, if there is a page that you want to view in the file that is
many pages into the document, you can select a thumbnail image by double
clicking on it and be taken to that selected page. Clicking on the Show / Hide
Navigation Pane icon again reverts the page view back to normal.
4. Hand Tool: When Adobe Acrobat Reader launches, the default setting for
tools is the Hand Tool. This feature allows you to "grab" a part of the PDF file
and drag through one individual page of the document. The Hand Tool is
different from the normal scroll bar, which scrolls through the entire
document.
5. Zoom In Tool: The zoom in tool lets you focus in on one specific area of a
PDF file and zoom in on it to enlarge the area. You may find this tool useful if
you are having trouble reading the text in a PDF document. To zoom in on an
area, select the tool indicated by the magnifying glass icon with a "+" sign in
the middle, and click on an area as many times as needed to achieve the
desired size. If you want to zoom out of an area, go back to the tool bar, click
and hold down on the Zoom icon until you see the magnifying glass icon with Copyright © Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)
a "-" sign inside. Use this to zoom out of an area the same way you use the
default Zoom Tool to zoom in.
6. Text Select Tool: For selecting and copying text in a PDF file, you can use
the Text Select Tool. If you need to copy text from a PDF file and paste it into
another document, then this is the tool you'd use. You can't use any other
tool for the operation of copying or selecting text, such as the Hand Tool.
Only the Text Select Tool can be used. Keep in mind that text within a PDF file
cannot be changed.
7. First Page / Previous Page / Next Page / Last Page: These arrows allow
you to navigate through the PDF document without having to use the scroll
bar or Hand Tool. The arrows are more or less self explanatory: "First Page"
takes you to the very beginning of the PDF file, "Previous Page" navigates
through the document backwards, "Next Page" goes forward through the
document, and "Last Page" takes you to the end of the document.
8. Actual Size / Fit in Window / Fit Width: These are different modes of
viewing a PDF file that adjust to various selections. Actual Size displays the
file in its original state at 100% screen size. Fit in Window adjusts to show an
entire page in the screen without having to scroll. Fit Width adjusts the width
of the document to the entire length of the screen, without having to scroll
horizontally.
9. Rotate View 90 CCW / Rotate View 90 CW: If for whatever reason you
need to rotate a PDF file clockwise or counterclockwise, this feature allows
you to rotate the document as many times as needed to achieve the desired
view. This tool may be useful if there is an image on a page that you might
want to view differently.
10. Find: This helpful tool searches for words in a PDF document. Rather than
scrolling and searching through an entire document to find what you are
looking for, the Find tool allows you to input a word (or words) and finds the
term based on your specifications. The instance of text found will be
highlighted on the page. You can continue searching for more instances of
your search term.
D)TRANSFERRING TEXT AND IMAGES FROM ACROBAT TO NOTEPAD-
Instructions
1.
o 1
Launch Adobe Acrobat and open the PDF file that contains the information that
you want to copy. Please note that the following steps will work with all Acrobat
programs.
o 2
Click the "Select" tool on the main toolbar. Select the information you want to
copy. Click once at the beginning of the information and drag to the end while
holding down the mouse button. To select all of the text on the page, click the
"Edit" menu and select the "Select All" option.
o 3
Click the "Edit" menu and select the "Copy" option to copy the selected
information. The information may then be used in other programs that allow you
to use the "Paste" functions.
E) GRAPHICS APPLICATION USING TEXT AND IMAGE SELECTION TOOLS-
Creating, Resizing and Reshaping Text Frames
Open up your document. I am going to be using the document from the last post of this Getting
To Grips Series, so feel free to do the same! I’ve actually deleted everything from the original
document, but have kept the page layout, bleeds etc the same. This just saves setting it up all
over again!
When working with publications such as newspapers and magazines, you’ll find that you will
most probably have to work with text frames, therefore they are very widely used and powerful
feature offered in InDesign. Text frames are created using the Type Tool, and can be edited in
various different ways. The size, location and shape of a frame determines how the text is
displayed on the given page.
We’re going to create our own text frame right now. Create a new layer in the layers palette.
We’re going to use layers so that we can easily hide all of the text at once without having to
manually select it and then hide it. To create a new layer, just click on the new layer icon in the
layers palette – if you can’t see it, go to Window > Layers to open it up, or press the F7 key.
Rename the layer to Type. The layers are very similar to those we use in Photoshop and
Illustrator, so there’s no need for a detailed explanation!
With the new layer selected, select the Type Tool. Click and drag a new text frame from our
page margin on the left hand side, to the page margin on the right hand side.
Type something of your choice into the new text frame. I’m going to type “Spyre Studios
Rocks!”. If you have finished with this particular text frame, you can automatically adjust it to fit
it’s contents. Hover your mouse cursor over the bottom center handle (the little square we use to
resize the frame) and double-click. This will automatically make the height of the frame the
exact same size as the type that fills it.
We can also reshape a pre-existing frame. Select your frame again (with the Selection Tool).
With the frame now selected, change tools and use the Direct Selection Tool rather than the
Selection Tool (the white arrow rather than the black arrow). This tool is similar to the Selection
Tool, apart from it lets us edit/resize more accurately, for example, the Selection Tool can select
a path, whereas the Direct Selection Tool can select the anchors that make up that path.
With the Direct Selection Tool selected, the four handles in the corners of your frame should
have turned into even smaller handles. You can drag these little handles around, reshaping the
size of your text frame. The content inside it will automatically fit to this shape, as seen in the
screenshot below. Copy and paste your text a few times, and try reshaping your own frame.
Creating & Editing Graphics Frames
In this section we’re going to be learning how to draw graphics frames, place graphics into your
frames, edit existing frames, and replace a frames contents.
First of all, make another new layer and call it “Graphics”. Select the Rectangle Frame Tool from
your tools palette. This tool is basically like a standard rectangle shape tool, but allows us to
place graphics directly into it. With the tool selected, and us still viewing our graphics layer, drag
out a rectangle shape where you would like your image to be displayed.
Select the Selection Tool, and with the graphics frame still selected, go to File > Place and select
an image you would like to insert into your page layout. I’ll be using one of my own
photographs.
You’ll see from the screenshot above that the image has been placed into our graphics frame at
its full 100% size, which is clearly far to big for our tiny little frame. By enlarging the graphics
frame itself using the Selection Tool and its handles, you’ll notice that it just displays more of the
photograph it contains, rather than changing the actual size of the graphic.
You can also change the shape of the graphics frame by selecting the Direct Selection Tool and
then dragging the frames handles – just like we did earlier with the text frames.
Revert back to what we originally had a couple of screenshots ago, as we’re now going to learn
how to resize the image that the placeholder contains, rather than just resizing and reshaping the
frame itself.
Doing this is incredibly easy. Instead of using the Selection Tool to resize the photograph, we
will be using the Direct Selection Tool. Select the Direct Selection Tool and hover your cursor
over the graphics frame. A white hand should appear; by clicking and dragging, you can move
the frames contents around.
When clicking on the frames contents using the Direct Selection Tool, you probably noticed
another bounding box come up (the purple line seen in the screenshot below).
By clicking on this bounding boxes handles and then dragging, we can resize the frames
contents. Remember to hold the Shift-Key to keep the image in proportion.
The title “Graphics Frame” is pretty much just another way of describing a crop box, as you may
now have realised. The frame can give you the ability to resize graphics at any time, without
losing any detail, as well as having the power to easily change the shape of the image. Using the
Direct Selection Tool, change the shape of the frame.
Now we’re going to duplicate our frame and replace its contents, a good tip to know if you’re
going to be using a lot of images on your pages and want to keep the same style throughout.
Select the frame with your Selection Tool and, whilst holding the Alt-Key, drag your frame onto
another area of your page.
After resizing and moving your graphics frame using the Selection Tool, we can replace the
frames contents with a new image. To do this, all you need to is repeat the step we took to put
the original image in. Click on your frame using the Selection Tool, and then go to File > Place
and select your new image. I’m going to use a colored version of the same image. Use the
techniques we used earlier to resize the frames contents. You can also fill the frame with the
graphic by going to Object > Fitting and selecting one of the many options, although this is
sometimes only suitable for frames with 90 degree corners.
You can also change the frames shape using the Pen Tool. To do so, all you need to do is select
the graphics frame using the Selection Tool, and then select the Pen Tool and click on the frames
path to add a new anchor point. Still using the Pen Tool, you can then drag these anchor points
out, making them curve in the process. For more on the Pen Tool, check out this guide on
About.com.
Wrapping Text Around a Graphic
Wrapping text around a graphic is probably something you will have to do on a regular basis if
you are planning on going into the desktop publishing industry. Unlike simple word processing
applications, InDesign offers much more control over what you wrap around your graphics. You
have the ability to wrap your text around the frame, or the frames contents, as well as giving your
wrap an offset.
We’re going to be wrapping some text around one of the graphics frames we made earlier.
Before we start, we need some more text. Using the skills we learnt in the first “Getting to Grips
with InDesign” tutorial, insert some text into one of your pages. I’m going to use some Lorem
Ipsum dummy text.
Resize one of your graphics frames and its contents so that it is of a suitable size for what we’re
about to do, and place it into the middle of your new text.
Select your graphics frame with the Selection Tool and then go to Window > Text Wrap to open
up the Text Wrap window.
With the graphics frame still selected, select the Wrap Around Bounding Box option. This will
wrap the text around your photos bounding box (the actual size of the image) rather than the
graphics frame.
Select the Wrap Around Object Shape option, and the text will wrap around the Graphics Frame
rather than the frames content.
This option is clearly too squashed due to the odd shape of the frame, but is easily fixed. In your
Text Wrap window, you’ll notice several fields where you can put a digit in. The field we’re
going to be using is the “Top Offset” field, which will basically add a cushion between the
graphics frame and the text. Filling this field in will automatically change the others. I used an
offset of 6mm to give me the following results, but you may want to play around with the setting
to get a result that suits your frame shape.
You can also play with various settings which allow you to only wrap the text in certain areas of
your image, for example, you could make the text wrap on only the side that is away from the
spine by selecting the Side Away From Spine wrap to option.
Working with Frames & the Pathfinder Tool
The Pathfinder Tool is a powerful editing tool that allows you to subtract shapes from other
shapes, add shapes together and so on.
Select the Rectangle Tool and draw a shape over your text as seen below. Fill it with a color of
your choice.
With the Selection Tool selected, select your type and copy and paste it in place to make a
duplicate copy of it. With the Selection Tool still selected, click on your new text frame, and
whilst holding the Shift-Key, select your new (blue) rectangle. This will select both of your
objects at the same time. Go to Object > Pathfinder > Exclude Overlap. This will fill the text area
with blue, but subtract the blue rectangle that we already had. Try it out yourself to see what I
mean! Also, try giving the other Pathfinder options a go – this is usually a tool you need to
experiment with unless you know exactly what you want!
I have lowered the opacity of my new shape, and readjusted my type a little to fit its new
background. Remember, this isn’t meant to look good – it’s purely to teach you how to use the
different InDesign tools.
We’re now going to add a new image into our page, using another frame. This time we’re going
to be converting a shape (created using the shape tool) into a graphics frame. Click on the
Rectangle Tool and hold your click until a new group of tools appear. Select the Ellipse Tool and
whilst holding the Shift-Key, drag out a circle onto your page.
With the Selection Tool selected, select your new circle shape. Go to File > Place, and find a
graphic to place in to the circle. InDesign will recognize that you are treating the shape like a
graphics frame, and will automatically change it into one for you. Change the size of your
graphic inside the frame using the Direct Selection Tool like we did earlier on.
Our text is currently wrapped around our graphic, instead of our graphics frame. Change it so
that it wraps around our frame, and give it an offset of 3mm.
Rotating Graphics Frames & the Images Within Them
There are a couple of ways in which you can rotate a frame in InDesign; either from the control
panel, where you have a more control over the precise angles you rotate a frame by, or by using
the Rotate Tool, where you can literally click and drag, much like the Transform Tool in
Photoshop. Select one of your graphics frames, I’m going to be rotating the frame that contains
my black and white Beetle model photograph. With it selected, the control panel at the top
contains a bunch of fields, drop-down menus and icons. Locate the Rotation Angle field, and
enter a digit, I’ve entered 45 degrees, as seen in the screenshot below.
Frames can also be edited using the Rotate Tool which can be found in the Tools panel. To use
this tool, you simply need to select it, and then click and drag around an image. If you’re not sure
of the exact degree you want your frame to sit at, this is the tool to use.
Rotating the graphic within your frame is just as easy. Instead of selecting your whole frame, use
the Direct Selection Tool to select just your frames content. Once you have selected the graphic,
use the Rotate Tool to rotate it within the frame. You can also use the more precise Rotation
Angle field in the control panel.
Aligning & Scaling Multiple Objects
It’s always handy to be able to align objects to certain areas, whether it be a spread, a singe page
or a frame. I’ve purposely moved one of my images so I can teach you how to precisely center it
into the middle of the page. To get your alignment window open, go to Window > Object &
Layout > Align.
Select your image with the Selection Tool, and open up your alignment window. We have
several options. The first one we need to go to is actually half way down the window, and should
default to Align to Selection. Change this to Align to Page.
Click on both the Align Horizontal Centers and Align Vertical Centers to align our frame
directly into the middle of the page. By using different drop-down modes (i.e. page, spread,
margins etc) we can get different results.
To align multiple objects at the same time, it’s just a matter of selecting them all, and repeating
the process. To select them all, select the first object with the Selection Tool, and then select the
others whilst holding down the Shift-Key.
We can also group items together to not only align them, but to scale them down (or up), helping
to keep everything in proportion with the other elements of the design. Select your two images
using the Selection Tool and Shift-Click method, and go to Object > Group. Your objects are
now grouped together. With the Selection Tool still selected, you should now be able to rotate,
scale and align these items together, using the techniques demonstrated throughout this tutorial.
This is especially handy with objects such as icons that are equally spaced, and similar objects.
Recommended