Photoshop formed as the program intended for very narrow circle of customers, using desktop publishing systems. In those days equipment cost (computers, scanners, printers), necessary for the elementary operation with images, was measured tens thousand dollars. Prompt progress in sphere of computer technologies the last decade made such equipment accessible to all. Photoshop too turned from the program only for experts in publishing systems to the program of wide application.

With development and ubiquitous propagation Internet Photoshop turned to the program № 1 for those who creates the pages in WWW (World Wide Web). Language of the description of web pages, HTML (HyperText Markup Language), supports usage only bitmap images, and the best editor of bitmap images, is finite Photoshop. HTML it is is exceptional simple, and visual editors (Microsoft Frontpage, Adobe GoLive, Macromedia Dreamwaver, etc.) made imposition of web pages by so simple business, as typing by means of a word-processor. It caused avalanche growth WWW, and, as consequence, demand for tools of creation of web pages.

Developers perfectly understand the reasons of popularity of the child and with each version enter into it the possibilities oriented on a new layer of customers, web designers.

The overwhelming majority of users Internet in operation ordinary switched telephone lines and the modems supporting low (28 800-56 000 baud) till now apply transit velocity of the data. Transit velocity is frequently limited by quality of telephone lines and high loading of exterior channels that is especially actual for sew the countries. In that case this speed falls even below rated speed of the modem.

The graphic information is transferred much more slowly, than text. It defines necessity of the reasonable approach at creation of images for propagation on a network. The sizes of graphic files should be not too great, that the user-reader did not abandon page since to it bothered to wait for the termination of its loading.

Load time of images to proportionally size of their graphic files. It is possible to select some methods of minimization of these sizes:

• Lowering of the sizes and resolution of images
• Reduction of an amount of colors in the image
• Usage of the oblate and special formats of files, their optimization
• Optimization of parameters of compression for separate fragments of images

All these methods are used by preparation of images for web pages. It is important to find the compromise between speed and image quality that, without tiring the user the durable waiting, to present effective and informative page.

Unlike paper, the size of the web page is not restricted across, on a vertical. Nevertheless, at all do not do the pages which width is more than width of the screen. The length of page is less critical, but optimal value — two-three screens. As images on the web page are intended only for review on the screen, their resolution should coincide with screen resolution, and the sizes — not to exceed it. Resolution of monitors varies largely the same as also screen diagonal — on what parameters to calculate to the web designer? In page practice are projected, proceeding from average values. The most typical resolutions of monitors for today — 800х600 and 1024х768 пикселов. From these sizes it is necessary to subtract the area occupied with elements of the interface of the browser. Besides, the majority of users prefer to open a browser window not on all screen to have possibility quickly to switch between several simultaneously its open copies. In web design it is more convenient to apply other unit of measure to images — пиксел. Such unit relieves of necessity of usage of pair parameters the size/resolution and allows to correlate image size with page size easier. In the given chapter we will use this unit of measure.

The sizes of images on page are defined by its design. If you have a possibility to change design of page so that to reduce an amount of images and their sizes is mandatory use it.

For drawing representation in Internet indexed images are widely used. They, as you remember (see гл. 2), allow to transfer to 256 fixed colors. The color set images (palette) is stored in a file together with the image and used by the browser for demonstration.

Images with indexed color receive from полноцветных images by reduction of an amount of colors. The colors meeting in the image, make its palette. Colors missing in a palette are transferred by several adjacent пикселами the close colors. Nearby, they are perceived as a certain "average" color. Generation of such "pseudo-colors" (so-called hybrid colors) is fulfilled by programs automatically on special algorithm and is called as smoothing (dithering). In practice some smoothing algorithms which explicitly are considered in chapter 2 are used. The Most suitable is selected, proceeding from character of the image. In most cases the best results are given by diffusion smoothing. If in the image there are the smooth graded passages of colors the algorithm with "noise" generation is more preferable.

If the design of the web page demands strictly certain font or especial formatting it is necessary to translate the text in the bitmap image. Especially successful it is necessary to recognize usage for this purpose of indexed colors. For transmission of the text and pictures of 256 colors even излишни — it is possible to manage and their smaller amount. Indexed formats give you such possibility. The smaller amount of colors allows to create graphic files of the smaller size.

As soon as graphic information transmission on global networks became a commonplace, the CompuServe company (the largest online service) offered format GIF in which basis lies effective (unlike earlier formats, for example, PCX) algorithm of compression LZW. This format is used in Internet and till today. It works only with indexed images.

The second format of graphic files in WWW is JPEG which unique algorithm allows to achieve 15-fold density of compression. High densities of compression are reached by image deterioration that is unacceptable for publishing systems, but it is not so essential to web pages. In format JPEG are stored полноцветные and halftone images that perfectly well adds possibilities of format GIF. Both formats, GIF and JPEG, support interlaced scan when the image boots not successively, and in some (2—5) lines. It looks so as if in process of loading of page the image becomes more accurate and detailed.

The impossibility of creation полноцветных images with the transparent sections within the limits of formats GIF and JPEG led to appearance of a new format. Format PNG has been developed alternatively to format GIF and for representation of images in network World Wide Web and in other electronic networks. It saves the color information and one alpha channel of the image, and also the algorithm of multiplexing which is not leading to loss of the data is applied to minimization of volume of a file. The Alpha channel is used by the browser as a transparency mask. Density of compression of PNG-files is similar to density of TIFF-files as similar algorithms which do not lead to lowering of quality of images are applied. Unfortunately, old versions of some browsers do not support this format but if you are guided on Internet Explorer or Netscape Navigator can safely use it.

The ideal graphic format for Internet does not exist, as everyone urged to solve strictly certain circle of tasks.

That the part пикселов images was not visible on the web page, they should be transparent. Formats GIF and PNG support saving of the information on a transparency пикселов, but do it differently.

Format GIF allows to reserve one of colors of an indexed palette under "the transparent color". Those пикселы images which have this color, are interpreted by browsers as transparent. Instead of them the background which is on the web page under the image is shown. Obviously, a transparency in format GIF cannot be partial: пиксел either it is transparent, or is not present. For simulation of the partial transparency arrive the same as and at smoothing of indexed colors: the neighbourhood of transparent and opaque пикселов is perceived as half-transparency (fig. 11.1).

In format PNG the information on a transparency is stored in alpha channel. Thus, it is implemented not only for indexed, but also for полноцветных images. Besides shades of gray in alpha channel allow to use the partial transparency. Unfortunately, not all browsers completely and correctly interpret alpha channels in PNG-files.

Especially interesting unique application of format GIF for creation of animation effects. He allows to store some images in one file, and browsers can show them in turn. For each image it is possible to specify time of its demonstration. If these images stored in file GIF, represent animation phases the browser shows small "cartoon film". The given singularity of format GIF found very wide application in web design. Such animation effects can be met practically on each page WWW. Especially often animated images are used in banners (from English banner, the poster) — advertisements (fig. 11.2).

As optimization of images understand its such conversion and selection of parameters of a format which provides the minimum file size. By preparation of images for layout on web pages without careful optimization not to manage.

The size of a JPEG-file is influenced by preferentially installed level of compression. The it above, the a less resultant file. An underside of a high level of compression is quality lowering. Hence, the optimization task consists in finding the compromise between image quality and file size. Much less file size JPEG is influenced by character of the image. The level of compression increases a little, if the image does not contain the strong contrasts. Therefore before its saving it is useful to blur slightly.

The file size of the indexed image first of all depends on an amount of colors which in it are used, i.e. from the size of its palette. The it is less than colors, the there will be a graphic file less. Smoothing, on the contrary, increases file size and is sometimes considerable enough. Optimization of the indexed image is reduced to finding of minimum necessary amount of the colors giving at minimum smoothing the image of satisfactory quality.

Format PNG allows to store indexed and полноцветные images. In the first case the optimization task coincides with that for GIF-files. »«½¡«µóÑÔ¡ÙÑ images do not lose in quality at saving in format PNG and consequently do not demand optimization.

Photoshop has the powerful built in tools of optimization of the images, allowing to create effective web pages.

Set of heterogeneous graphic elements of the web page can demand for optimization of various parameters, or even formats. In such cases the big image can be cut on fragments and to set for each fragment individual parameters. The assembly of fragments in the uniform image is carried out by the page HTML-code. Image cutting also is convenient for the organization of links and it is necessary at creation ролловеров (see more low).

On fig. 11.3 the example of title of the web page where cutting leads to an essential scoring in size and quality is resulted. The main part of title полноцветная, also takes the least place at saving in format JPEG. In buttons-rolloverah only two colors are used. Format GIF is most favourable to them.

Recently in web design programming languages and scripting languages are even more often used: Java, JavaScript and ActiveX. The greatest popularity acquired JavaScript as it is supported by the overwhelming majority of new browsers on all platforms and does not demand the considerable resources of the computer. By means of JavaScript the diversified interactive elements are programmed: buttons, the menu, forms and etc. Not all designers-fans want to master in addition to the main trade absolutely not the area of programming not connected to it. ImageReady gives the chance to receive effective interactive elements of design of pages, without being engaged in programming and at all without typing code lines. For creation of such elements it is used JavaScript, but all.код the scenario is generated ImageReady automatically. It is necessary to interpose only it into the text of ready page or to add to the page created automatically the main content.

Ролловер represents the dynamic element changing appearance when on it there is a cursor of the mouse or click by it becomes. It is based on the several images corresponding to separate states: ролловер in rest, on ролловер the mouse cursor, and etc. Code JavaScript is directed processes driving of the mouse and shows depending on it different images. On determination ролловер should represent the whole image. If it is required to create it only on any fragment the image should be cut. As Photoshop offers convenient means for cutting of images and automatic generation of a HTML-code, creation ролловеров it appears absolutely simple business.

Images on web pages are often used as a reference map (image map). Clicks by the mouse cursor in a browser window on various sections of such image lead to loading of different pages. It is obvious that such image can be cut on the necessary amount of parts and to appropriate each of them a special hypertext link. And what to do if the form of fragments should be difficult, not square-topped? Then most easier to make the image a reference map. For implementation of this mechanism it is necessary for separate fragments of the image to compare various hypertext links.

The reference map is implemented in language HTML. The web page code turnes on the description of sections of the image and links corresponding to them. Reference maps can be processed or the server (demands the special scenario-output agent on the server), or the browser of the user. The HTML-code for these cases differs a little, but the result remains to the same. ImageReady generates for them the code automatically, and you should not master programming.

HTML allows to define sections of the round, square-topped and polygonal form. The last variant is used for representation of sections of the arbitrary form. A polygon with enough of the sides it is possible to describe a figure of as much as difficult form.

In recent times Photoshop though was, undoubtedly, one of principal tools of each professional web designer, could not solve many of daily tasks, first of all such, as:

• Creation of animation GIF-images.
• Creation of interactive elements of navigation: buttons and panels.
• Optimization of images at export to the formats accepted in Internet, — GIF and JPEG. "Regular" filters of export did not allow to reach demanded compactness of graphic files.
• Creation of reference maps on the basis of images.
• Cutting of images on fragments, their independent handling and the subsequent assembly on
To the web page.

For the decision of these tasks the web designer had to use or connected units for Photoshop indirect firms, or generally separate applications. Adobe firm, knowing about needs of web designers, offered them the separate editor of bitmap images ImageReady 1.0. It represented Photoshop, facilitated at the expense of exception of some tools and functions which are applied by preparation of images to polygraphic duplicating. Especially it concerns color and pitch correction, color management, operation with channels, the press. The program was essentially reduced the price and, besides, the additions necessary for the web designer, first of all, connected to optimization of images have been made to it. Apparently, the program did not use sufficient popularity as has been deprived that flexibility and riches of possibilities which provided Photoshop unconditional leadership in the market. The first version ImageReady became its last independent version. New variant ImageReady 2.0 has been included in Photoshop 5.5. Thus, users Photoshop had not to leave the favourite program for implementation of missing functions. New version Photoshop 6.0 contains also new version ImageReady 3.0.

About that, the course made Adobe is how much good, it is possible to argue. Instead of one program, the web designer all the same should use two. It is not simply insufficiently convenient, but also leads to unjustified expenditure of resources of the computer: developers recommend at simultaneous usage of both components additional 32 Mb of a random access memory and more than disk space (for layout of the virtual storage of both programs). Expenditure of resources is equivalent to additional nesting of money in the equipment and to dead times on switching between applications. Whatever told advertizing leaflets on integration Photoshop and ImageReady, it all the same separate programs. Even transmission of images from one program in another happens through a file on a disk though it and is hidden from the user.

1. Create in Photoshop the new document of the small size.

2. Push button Jump to Photoshop (to Open in Photoshop) on a toolbar or use key pattern Ctrl + Shift + M. Thus switching between programs is carried out.

3. Then it will automatically be launched ImageReady (if this program is not opened) and the document in it will be loaded.

Similar integration has also one more negative aspect. ImageReady does not support editing color and alpha channels of images though correctly them plays back, and even allows to create.

Despite the enumerated problems of the surface integration Photoshop and ImageReady, together they yield the web designer is exceptional powerful tool. When you we acquire sufficient experience with this set, limitation of their sharing seem a real trifle in comparison with unlimited technical possibilities.

As the majority of special functions of the packet oriented on web design, is concentrated in ImageReady, in the present chapter we consider this program, only marking presence of similar possibilities in Photoshop.