The main element of raster graphics. Electronic textbook for the course “Advanced training for managers, specialists and university teachers in the field of ICT.” Advantages of raster graphics

In computer graphics, the concept of resolution tends to be the most confusing, since we have to deal with multiple properties of different objects at once. It is necessary to clearly distinguish between screen resolution, printing device resolution and image resolution. All these concepts refer to different objects. These types of resolutions are in no way related to each other, until you need to know what physical size the picture on the monitor screen, print on paper or file on the hard drive will have. Screen resolution is a property of the computer system (depending on the monitor and video card) and the operating system. Screen resolution is measured in pixels and determines the size of the image that can fit entirely on the screen.

Printer resolution is a property of the printer that expresses the number of individual dots that can be printed in a unit length area. It is measured in units of dpi (dots per inch) and determines the size of an image at a given quality or, conversely, the quality of an image at a given size.

Image resolution is a property of the image itself. It is also measured in dots per inch and is set when creating an image in a graphics editor or using a scanner. The image resolution value is stored in the image file and is inextricably linked to another property of the image - its physical size. The physical size of an image can be measured in either pixels or length units (millimeters, centimeters, inches). It is set when the image is created and is stored with the file. If an image is being prepared for display on a screen, then its width and height are specified in pixels in order to know how much of the screen it occupies.

If an image is being prepared for printing, then its size is specified in length units in order to know how much of the sheet of paper it will occupy. It is not difficult to convert the image size from pixels to length units or vice versa if the image resolution is known.

Table 1. Relationship between linear illustration size and file size

Table 2. Relationship between illustration size (in pixels) and print size (in mm)

Color resolution and color models

When working with color, the concepts of color resolution (also called color depth) and color model are used. Color resolution determines how color information is encoded and determines how many colors a screen can display at once. To encode a two-color (black and white) image, it is enough to allocate one bit to represent the color of each pixel. Allocation of one byte allows you to encode 256 different colors. Two bytes (16 bits) allow you to define 65,536 different colors. This mode is called High Color. If three bytes (24 bits) are used to encode color, 16.5 million colors can be displayed simultaneously. This mode is called True Color.

Colors in nature are rarely simple. Most color shades are formed by mixing primary colors. The method of dividing a color shade into its component components is called a color model. There are many different types of color models, but computer graphics typically use no more than three. These models are known by the names: RGB, CMYK and HSB. The RGB color model is the easiest and most obvious to understand. This model works with monitors and household TVs. Any color is considered to consist of three main components: red (Red), green (Green) and blue (Blue). These colors are called primary. It is also believed that when one component is superimposed on another, the brightness of the total color increases. The combination of the three components gives a neutral color (gray), which tends to white at high brightness. This corresponds to what we see on the monitor screen, so this model is always used when preparing an image intended to be reproduced on the screen. If the image undergoes computer processing in a graphics editor, then it should also be presented in this model. Graphic editors have tools for converting images from one color model to another.

The method of obtaining a new shade by summing the brightness of the constituent components is called the additive method. It is used wherever a color image is viewed in transmitted light (“through transmission”): in monitors, slide projectors, etc.

It is not difficult to guess that the lower the brightness, the darker the shade. Therefore, in the additive model, the central point, which has zero component values (0, 0, 0), has a black color (no glow on the monitor screen). White color corresponds to the maximum values of the components (255, 255, 255). The RGB model is additive, and its components - red, green and blue - are called primary colors.

The CMYK color model is used to prepare printed images rather than screen ones. They differ in that they are seen not in transmitted light, but in reflected light. The more ink you put on the paper, the more light it absorbs and the less it reflects. The combination of the three primary colors absorbs almost all the incident light, and from the outside the image looks almost black. Unlike the RGB model, increasing the amount of paint does not lead to an increase in visual brightness, but rather to its decrease. Therefore, to prepare printed images, not an additive (summative) model is used, but a subtractive (subtractive) model. The color components of this model are not the primary colors, but those resulting from subtracting the primary colors from white:

* blue (cyan)=white?red=green+blue;

* magenta = white? green = red + blue;

* yellow = white? blue = red + green.

These three colors are called complementary colors because they complement the primary colors to white.

A significant difficulty in printing is the color black. Theoretically, it can be obtained by combining three primary or additional colors, but in practice the result turns out to be unsuitable. Therefore, a fourth component has been added to the CMYK color model - black. This system owes the letter K in its name (blacK) to him.

In printing houses, color images are printed in several stages. By placing cyan, magenta, yellow and black prints on paper in turn, a full-color illustration is obtained. Therefore, the finished image obtained on a computer is divided into four components of a single-color image before printing. This process is called color separation. Modern graphic editors have tools to perform this operation. Unlike the RGB model, the center point is white (no dyes on white paper). To the three color coordinates a fourth has been added - the intensity of the black paint. The black axis looks isolated, but that makes sense: when you add the colored components to black, you still get black. Anyone can check the addition of colors in the CMYK model by picking up blue, pink and yellow pencils or felt-tip pens. A mixture of blue and yellow on paper produces green, pink and yellow produces red, etc. When all three colors are mixed, an indefinite dark color is obtained. Therefore, in this model black color was needed additionally.

Some graphic editors allow you to work with the HSB color model. If the RGB model is most convenient for computers, and the CMYK model is most convenient for printing houses, then the HSB model is most convenient for humans. It is simple and intuitive. The HSB model also has three components: color hue (Hue), color saturation (Saturation) and color brightness (Brightness). By adjusting these three components, you can create just as many random colors as with other models.

The HSB color model is convenient for use in those graphic editors that are focused not on processing ready-made images, but on creating them with your own hands. There are programs that allow you to simulate various artist tools (brushes, pens, felt-tip pens, pencils), paint materials (watercolor, gouache, oil, ink, charcoal, pastel) and canvas materials (canvas, cardboard, rice paper, etc.). When creating your own artwork, it is convenient to work in the HSB model, and once finished, it can be converted to an RGB or CMYK model, depending on whether it will be used as screen or printed illustration.

A color palette is a data table that stores information about how a particular color is encoded. This table is created and stored along with the graphic file. The most computer-friendly color encoding method is 24-bit, True Color. In this mode, one byte (8 bits) is allocated for encoding each color component R (red), G (green) and B (blue). The brightness of each component is expressed as a number from 0 to 255, and any color out of 16.5 million can be reproduced by a computer using three codes. In this case, a color palette is not needed, since three bytes already contain enough information about the color of a particular pixel.

The situation is much more complicated when the image has only 256 colors encoded in one byte. In this case, each color shade is represented by one number, and this number does not express the color of the pixel, but the color index (its number). The color itself is searched for by this number in the accompanying color palette attached to the file. Such color palettes are also called index palettes. Different images may have different color palettes. For example, in one image the color green might be coded at index 64, while in another image that index might be assigned to the color pink. If you reproduce an image with a “foreign” color palette, the green tree on the screen may turn out to be pink. In cases where the image color is encoded in two bytes (High Color mode), 65 thousand colors can be displayed on the screen. Of course, these are not all possible colors, but only one two hundred and fifty-sixth of the total continuous spectrum of colors available in True Color mode. In such an image, each two-byte code also expresses some color from the general spectrum. But in this case, it is impossible to attach an index palette to the file, which would record which code corresponds to which color, since this table would have 65 thousand entries and its size would be hundreds of thousands of bytes. It hardly makes sense to attach a table to a file that may be larger in size than the file itself. In this case, the concept of a fixed palette is used. It does not need to be attached to the file, since in any graphic file that has a sixteen-bit color encoding, the same code always expresses the same color.

Computer graphics have quietly but firmly entered our everyday lives. It has long ceased to be the lot of the elite. Every time you transfer photos from a digital camera to a computer or simply click on the “save” button to add a picture you like to your collection, you are working with computer graphics.

Is it worth spending time on theory?

Knowing the basics of how image manipulation works will serve you well. Extensions after the file name will no longer be some kind of magical gobbledygook for you, but will begin to properly supply important information. You can consciously decide which images are best to compress so as not to waste space on your hard drive, and wisely choose which way to do this.

Editing your own photos will also move from the “scientific poking method” to a completely new level. And for some, innocent fun with images on the screen gradually turned into quite profitable work.

Difference between raster and vector graphics

At the moment, vector and raster graphics are mainly used in the computer environment. They differ radically from each other in the way they encode information.

It's no secret that all data on a computer is recorded using binary code. Thus, any information, be it text, picture or sound, is encrypted in a certain way. In order to save a vector image, it is divided into elementary geometric figures, which, in turn, are described by the simplest mathematical formulas. Thus, for example, the letter “and” for a graphic editor will be described by two parallel segments of a given length, which are connected by a line at an angle of 45 degrees.

A raster image is divided according to a different principle. The computer splits the image into many dots, called pixels, and remembers the color and location of each pixel.

Advantages and Disadvantages

If you are working with a vector drawing, you can theoretically enlarge it indefinitely. Moreover, this will in no way affect the quality of the image. Since the parameters are given in the form of geometric formulas, the computer simply processes them and fills all the spaces with the required colors. As a result, you have a clear image.

The disadvantages of raster graphics lie precisely in the fact that during compression (which in the vast majority of cases occurs when saving a file) the quality can significantly suffer. So-called graininess appears. However, it is raster graphics that are used in complex images. In vector drawings you can only create very simple pictures. So for now we'll focus on where raster graphics are used.

Applications

Raster images perfectly convey the content of scanned objects. With their help you can work with halftones and smooth color transitions. Photos taken with a digital camera also use raster images exclusively. This format also serves as an indispensable tool in the field of web design.

Raster graphics formats

Recall that image information in our case is encoded using dots. The unit of measurement in this encoding is the pixel. It is the smallest point that cannot be divided either in size or color.

The number of these points per given unit area is called resolution. In an image with higher resolution (a large number of individual dots), we will see a clear pattern and smooth color transitions. However, in the case when the resolution is small, the quality of the picture can suffer greatly (after all, the computer simply displays the number of pixels available in its memory on the screen and stretches them to the requested size).

It can be roughly compared to language. In order to convey the same information in different languages, different numbers of letters, sounds and words are required. Also, in most cases the grammatical construction will differ. And the “translators” from these “languages” in our computers are specialized programs that either “read” it or convert it into the required format.

The main difference between the formats remains the way information is stored. Let's look at the most common ones.

BMP

This is one of the pioneers. When it was developed, raster graphics were, one might say, at the very origins of their existence. The creators didn’t bother too much and programmed the BMP to memorize each pixel sequentially. In fact, this is just copying, but with some loss of color, since the BMP format only has 256 colors.

TIFF

Quite cumbersome on the scale of digital storage, but simply irreplaceable when outputting information to print. Unlike BMP, it supports information capability. Moreover, for this you can use not one, but several different algorithms. However, unless you work in the printing industry or at least some kind of publishing, you won't really need the serious power of this format.

GIF

This is a format closer to real use (for non-specialists). It is especially famous for its ability to use animation sequences. Computer graphics made in this format also allows you to create translucent images. However, you will not be able to convey smooth color transitions. The most common use of raster graphics in GIF format can be seen in web design. It is compatible with all platforms and also compresses information quite compactly, which is an important factor in the speed of opening Internet pages.

JPEG

The most popular format. And this is well deserved. Any raster graphics editors undoubtedly support this format. It was designed with the specific goal of getting rid of the limitations imposed by GIF file compression. in this format reaches a coefficient of 100 units. This is a big indicator. However, such compression still has its drawbacks - some data loss occurs, and it is possible that the saved image will become somewhat blurry. Because this format simply discards information it considers unimportant, there is always a risk that some details will be distorted.

JPEG 2000

An improved version of an earlier version. Image information is compressed even more compactly, and there are significantly fewer losses in quality. Most often, this format is used to store photos on a computer’s hard drive and on the Internet. However, keep in mind that if you repeatedly save the same image in JPEG or JPEG 2000 formats, it will lose bits of information each time, and you will end up with a significantly distorted image compared to the original.

PNG

A significantly improved quality counterpart to the GIF format. Having retained literally all the advantages of its predecessor, it is devoid of its disadvantages. Used both for and in web page design. In addition, PNG, unlike GIF, is officially freely available.

PSD

Raster graphics in PSD format are processed exclusively in Adobe Photoshop. This is an internal package of this program. It supports working with layers of an edited image.

CDR

It is also an internal package for a raster graphics program. Typically, this program is used by graphic designers to create images from scratch. But the editing function is undoubtedly supported.

Raster graphics editors

And now a little about programs that work with image editing.

The most popular program among users at the moment is the Adobe Photoshop program, commonly referred to simply as “Photoshop”. This development, in fact, monopolized the work with raster images among design specialists. However, this program is paid and it does not cost that little. Therefore, developments from other companies began to appear. Some of them have already been widely used.

As for Photoshop itself, this did not affect its popularity in any way. The program is quite simple, and there is no shortage of various video courses and tutorials.

In Photoshop, you can not only make a collage of photos or add built-in effects to the image. The simplest functions of this program can be mastered very quickly, and this will open the door to unbridled flights of imagination. You can correct defects in appearance, adjust the color scheme, change the background and much, much more.

Graphics editor GIMP

As for free programs, we can safely recommend GIMP. This graphic editor can easily supplant the popular Photoshop. It excels at all the tasks needed for raster image editing and has some introductory features for working with vector graphics.

The GIMP program allows you to make photos more rich and vibrant, it easily removes unnecessary elements from the image and can be used for preparing professional design projects. Computer graphics created with this program look natural and fit seamlessly into the overall picture.

Graphics editor Corel DRAW

It would be wrong to ignore Corel products. In Corel DRAW, you can easily work with both raster and vector images. The capabilities of this tool are so numerous that studying the Corel DRAW program is included in the mandatory training course for graphic designers in colleges.

This program is also paid, and the arsenal of its products is replenished with enviable regularity. But, despite the wide range of possibilities that this graphic editor provides the user, its intuitive interface turns the work process into a pleasure.

Free graphic editors

And just a few more words about alternative image editing programs. In most cases, they cope well with the needs of the average user, and take up much less space and resources on your computer. And it’s generally easier to work with them, since you won’t be overloaded with the need to choose among all sorts of functions, the purpose of which remains unclear.

If you like unusual and mostly humorous photographs, try using the Funny Photo Maker program. There you will find many original frames and fun visual effects.

For more serious work, Picasa is suitable. This editor is designed for use in computer networks. Its new features will make it even easier for you to design your pages on social networks. And the built-in effects for editing will not disappoint even a seasoned specialist.

Another interesting program is Paint.NET. It is very similar in its functions and capabilities to Adobe Photoshop. And the tools used in Paint.NET can seriously compete with the mentioned commercial analogue.

In order to have a discussion about graphics programs, you first need to understand the concepts and differences between the two main types of 2D graphics: raster and vector images. This is a very important lesson, especially if you intend to work with graphics.

The concept of a raster image

Raster images are images that are made up of tiny rectangular dots of individual color - pixels - strung together. Each pixel has its own special location in the picture and its own individual color value.

Each image has a fixed number of pixels. You can see them on your monitor screen, most of which display approximately 70 to 100 pixels per inch (the actual number depends on your monitor and the settings of the screen itself).

To illustrate this, let's take a look at a typical desktop icon, My Computer, which is typically 32 pixels wide by 32 pixels tall. In other words, there are 32 points of color in each direction that combine to form the image of such an icon.

When you enlarge this drawing as in the example, you will be able to clearly see each individual square of a specific color. Note that the white areas in the background are also individual pixels, although they represent one solid color.

Image size and resolution

Raster images are resolution dependent. Image resolution is the number of pixels in an image per unit length. It is a measure of the clarity of detail in a raster image and is usually referred to as dpi (dots per inch) or ppi (pixels per inch). These terms are somewhat synonymous, except that ppi refers to images and dpi refers to output devices. This is why you can find dpi in the description of monitors, digital cameras, etc.

The higher the resolution, the smaller the pixel size and the more of them there are per 1 inch, and accordingly, the better the picture quality.

The resolution is selected for each image individually and depends on where you plan to use it:

if you plan to use it for posting on the Internet, then the resolution is selected at 72 ppi, since the main criterion for the Internet is the speed of loading images, and not their amazing quality, which is why appropriate file saving formats are selected, where quality is not in the first place.
if you want to print an image, the resolution should be much higher than 72 ppi. So, in order to print an image in good quality, its resolution should be in the range of 150-300 ppi. This is the main requirement for photo printing houses that print magazines, catalogs and small-format products (booklets, flyers, advertising leaflets).

As mentioned above, raster images are very dependent on their resolution. That is why, when scaling, due to their pixel nature, such images always lose quality. However, if you still decide to increase the image size, then it is best to use the interpolation method, with which you can achieve very good results. We will talk about this method in the next lesson.

The size of an image in raster graphics is the physical size of the file in which the image is stored. It is proportional to the size of the image in pixels.

Photoshop shows the relationship between image size and resolution. This can be viewed by opening the Image Size dialog box found in the Image menu. When changes are made to one of these values, all others will automatically be adjusted in accordance with the changed value.

To sum up, we can say that main characteristics of raster images speakers:

image size in pixels
bit depth
color space
image resolution

An example of a raster image is any photograph or picture created by scanning, photographing or drawing in a raster editor, or created by converting a vector image to a raster image.

Raster image formats

The most common raster image formats include:

JPEG, JPG

Converting between raster image formats is very easy, using the “Save As ...” command, in the menu of which, after the file name, you select the format in which you want to save the image.

Some formats, namely GIF and PNG, support background transparency. At the same time, do not forget that the transparent background will not be transparent if the GIF or PNG image is saved in any other format or copied and pasted into another image.

Programs for working with raster graphics

The most popular programs for working with raster graphics:

Adobe Photoshop
Adobe Fireworks
Corel Photo-Paint
Corel Paint Shop Pro
Corel Painter
Paint

As for me, the Adobe Photoshop editor is the best of the programs.

Compared to this type of graphics, vector graphics also have many advantages. Let's look at them.

What are vector images

Vector is an image, consisting of many individual, scalable objects (lines and curves) that are defined using mathematical equations.

Objects can consist of lines, curves, and shapes. In this case, changing the attributes of a vector object does not affect the object itself, i.e. You can freely change any number of object attributes without destroying the main object.

In vector graphics, image quality does not depend on resolution. This is all explained by the fact that vector objects are described by mathematical equations, so when scaling they are recalculated and, accordingly, do not lose quality. Based on this, you can increase or decrease the size to any extent, and your image will remain as clear and sharp, it will be visible both on the monitor screen and when printing. Thus, vector is the best choice for illustrations that are displayed on various media and the size of which must be changed frequently, such as logos.

Another advantage of images is that they are not limited to a rectangular shape like raster images. Such objects can be placed on other objects (placement in the foreground or background is chosen by you personally).

For clarity, I have provided a drawing in which a circle is drawn in vector format and a circle in raster format. Both are placed on white backgrounds. But when you place a raster circle on top of another similar circle, you will see that this circle has a rectangular frame, which, as you see in the picture, is not present in the vector.

Today, vector images are becoming more and more photorealistic, this is due to the constant development and implementation of various tools in programs, for example, such as a gradient mesh.

Vector images are usually created using special programs. You cannot scan an image and save it as a vector file without using conversion by tracing the image in Adobe Illustrator.

On the other hand, a vector image can be converted to a raster image quite easily. This process is called rasterization. Also, during conversion, you can specify any resolution of the future raster image.

Vector formats

The most common vector formats include:

AI (Adobe Illustrator);
CDR (CorelDRAW);
CMX (Corel currency);
SVG (scalable vector graphics);
CGM Computer Graphics Metafile;
DXF AutoCAD.

The most popular programs for working with vectors : Adobe Illustrator, CorelDRAW and Inkscape.

So what is the difference between vector and raster images?

Summing up the article about raster and vector images, we can say with confidence that vector images have many advantages over raster images, namely.

Let's start getting acquainted with raster computer graphics. Its software tools are the most developed and easy to learn. The method of making an image allows you to imitate the usual work using graphic tools such as pencil, charcoal, sanguine, eraser, brush and many others, and also allows you to convey the texture of paper or canvas, fabric or metal. Using raster graphics, you can perform educational and creative tasks in composition and drawing. In addition, the wide graphic, color and coloristic capabilities of raster graphics software tools allow you to easily change color and tone relationships, which is valuable for solving painting problems.

Raster graphics - you already know that raster images resemble a sheet of checkered paper or a chessboard, on which each cell is painted with a certain color, together forming a pattern. Pixel- the main element of raster images, this is one cell. It is the collection of pixels that makes up a raster image.

Raster images have many characteristics that must be captured by the computer. Dimensions images and location The pixels in it are the two main characteristics that a raster image file must store in order to create a picture. One more - color. For example, an image is described by the specific location and color of each grid point, creating an image much like a mosaic.

Raster graphics depend on permissions, because information describing the image is attached to a grid of a certain size. Resolution is the number of pixels per unit length, most often per inch - dpi, and the higher the resolution, the more pixels fit in an inch and the better the image. Color depth determines the number of shades within the range of which a point can change its color.

Depth is encoded 24 bit per point - this is approximately 16 500 000 flowers. This mode is called "True Color". Encoding in 16 bit per point allows you to distinguish 65 536 shades of color. This mode is called "Quality color". Encoding in 8 bit on a point allows you to distinguish everything 256 shades of color. This mode is known as "Fixed Colors". These concepts are directly related to the second group of concepts "Color Formats", which we will talk about in the next lessons.

When editing raster graphics, the quality of its presentation may change because the pixels themselves change. In particular, resizing raster graphics can cause the edges of the image to become frayed as the pixels are redistributed on the grid. Unfortunately, scaling such images in any direction also usually degrades the quality. When the number of dots is reduced, small details are lost and the inscriptions are deformed (although this may not be so noticeable if the visual size of the image itself is reduced - i.e., the resolution is maintained).

Adding pixels leads to a deterioration in the sharpness and brightness of the image, because new points have to be given shades that are average between two or more adjacent colors. Outputting raster graphics to devices with a lower resolution than the resolution of the image itself will also reduce its quality. Despite these shortcomings, only raster graphics effectively represent real images. The real world is made up of billions of tiny objects, and the human eye is precisely designed to perceive the huge range of discrete elements that make up objects, so raster images look real, of course, if they were captured at high resolution.

Besides their natural appearance, raster images have other advantages. Output devices such as printers use sets of dots to create images, so bitmap images can be printed very easily.

Thus, raster representation is usually used when scanning and processing graphic images with a lot of detail and shades, such as photographs, when creating images for use in other programs, in particular for transmission to other users over the network Internet, when creating various artistic effects that are possible thanks to special software filters. The most famous raster graphics programs are: Adobe Photoshop And Corel PHOTO-PAINT.

When is it better to use raster graphics?

Firstly, as already mentioned, the method of creating images in this type of graphics allows you to imitate the usual work using graphic tools: pencil, charcoal, sanguine, eraser, brush. In a raster image you can convey the texture of paper or canvas, fabric or metal. Secondly, the wide graphical, color and coloristic capabilities of raster graphics make it easy to change the color or tonal relationships of an image - usually when scanning and processing graphic images with a lot of detail and shades. For example, photographs.

Note that this type of graphics is often used when creating images for other programs. For example, to transmit to other users over the network Internet. Thirdly, raster graphics are indispensable when creating a wide variety of artistic effects, which are possible only thanks to special software filters. Each raster image object is located in one of the layers, which have a rectangular shape. A layer can be represented as a set of small square cells, identical in size, in which some image (raster object) can be formed, consisting of mosaic elements (pixels).

A pixel is characterized not only by color, but also by transparency when elements are superimposed on each other. In the case where a raster image consists of one layer, it can be compared to a stained glass window consisting of small square colored glasses, or to a cross-stitched pattern. Raster file formats are designed solely for saving raster images. Some of the most popular include the following: BMP, PCX, TIFF, CPT, PSD,GIF And JPEG.

Formats SRT And PSD are used to save multi-layer images, and formats GIF And JPEG mainly used when working in Internet, (they provide acceptable image quality with small file sizes). Depending on what kind of image processing you plan to perform, there may be a need to present it in one form or another (raster or vector). To convert raster images into vector images and vice versa, the corresponding functions of vector graphics programs, as well as specialized tracing programs, are used Adobe Streamline 4.0, CorelTRACE 9. The tracing operation consists of generating, automatically or manually, a vector image that is a copy of the original raster image. The created image consists of individual vector objects, painted with certain colors and located in a certain way relative to each other. The operation of converting a vector image into a raster image is called rasterization.