Creating Graphics - HTML

If you want to create top-notch graphics, the tool of choice among professionals is Adobe Photoshop, available for the Mac and the PC (see Figure ). Freeware and shareware software programs also are available that perform subsets of the functions performed by Photoshop. Photoshop LE, the lite version, ships with many scanners.

Essential functions
What should your graphics package be able to do? For existing images, such as photographs, you want to sharpen, blur, and perform some special effects on the image (for example, posterize, swirl, and mosaic). For images you create on the screen, you want to create your own custom palette (so you can send as few colors as you need). You also need some basic artist tools, such as a paintbrush, a pencil, a spray can, and a magnifying glass for magnifying part of the image to see it better.

Adobe Photoshop.

Adobe Photoshop

Regardless of whether the image is made by hand or based on a photograph or clipart, you need the following capabilities:

  • Reduce the bit-depth of any image you want to save as GIF.
  • Index the color of the image so you can save the image to GIF.
  • Save the image as an interlaced GIF.
  • Save the image as a transparent GIF.
  • Save the image as a PNG file.
  • Save the image as a progressive JPEG, which is discussed at the end of this chapter.

Note: Progressive JPEGs are a nice addition to a Web page. They work the same as interlaced GIFs. Before the entire image has been downloaded, you can begin to see the image. Then the images slowly come into focus.

Free alternatives
If you aren’t ready to commit to a $500 software package to get all these great functions, you can work with a number of small, free software packages and services that do many of the things previously listed for you. On the Web, you can find sites that turn your TIF file into a GIF, or make your GIF an interlaced GIF. The trade-off is the time. Finding, learning, and using a variety of small packages to solve all your imaging needs obviously takes longer than learning one package and using it on your desktop.

Capturing Graphics From Other Sites
What about taking graphics you like from another site? This is generally not an okay thing to do. Unless you have explicit permission from the creator of the images—say, you are taking graphics from a site that makes free images available or you have written permission from the owner of the site—you are essentially stealing the images from the legitimate owner.Images are intellectual property and are protected by copyright laws, and using them without permission could get you an invitation to court.

Just because an image is on a Web page doesn’t mean it is in the public domain. Yes, it gets downloaded onto your own computer (into cache), and, yes, your browser gives you the ability to save the image as a local file (using the right mouse button or prolonged clicking on a Mac), but it still doesn’t mean you own the image or the right to use the image. If you see something you like on another page, write to the page owner and ask if he or she owns the image and if you can use it. Chances are, the owner will be flattered by your request. Be sure that person owns the image or permission won’t mean anything (if the image was stolen from somewhere else).

Progressive JPEGs and interlaced GIFs
Once upon a time on the Web, you had to wait for an image to finish loading before you knew what it was. Today, you can save your files using the progressive JPEG format or the interlaced GIF format and watch the image come into focus as it loads.

The advantage to this approach is a visitor to your site knows roughly what an image is before the entire image has downloaded. If download times are long, due to a poor Internet connection, for example, the visitor to the site can actually take a link off the page before the image has finished loading without missing anything.

Finally, these two image formats are good because the visitor participates in the download time. Instead of waiting for the page to download—sitting idly by—the visitor waits for the page to download while watching the images become clearer. This is more of a reward for waiting—and less of a sense of waiting—for the visitor.

Note:Specifying the size of the image in the image tag can also speed up the display of your Web pages. See the Size and scaling section later in this chapter for more information.

The sense of “coming into focus” that these types of images provide is the result of the way the images are stored. Progressive JPEGs and interlaced GIFs download only every eighth line at first, then every fourth line, then every second line, and then, finally, the odd-numbered lines. The result is the image goes from blurry to focused.

You create a progressive JPEG or an interlaced GIF by saving it into this format. In Paint Shop Pro, when you save a file as a GIF file you can choose whether you want the file to be normal or interlaced (see Figure). Freeware packages are also available that convert your regular JPEGs and GIFs into progressive JPEGs and interlaced GIFs.

Paint Shop Pro allows you to choose whether you want your GIF to be interlaced or not.

Paint Shop Pro allows you to choose whether you want your GIF to be interlaced or not

Using Transparency
Two of the Web-supported graphics formats, GIF and PNG, support transparency, the ability for parts of images to be completely transparent. Typically, transparency is used to soften the edge of images, creating an illusion that the image is not rectangular.

Transparency can soften an image, giving the appearance that the image is not rectangular.

Transparency can soften an image, giving the appearance that the image is not rectangular.

which shows an image with a standard opaque background and the same figure with a transparent background. The image with transparency allows the page background to show through.

Using transparency can open up the design of a document, making it more airy and less “blocky.” It gives the document a more professional appearance, looking more like a published document than a Web page of the 1980s.

Different graphic editing programs handle transparency differently—some assign transparency to the background layer, some allow you to pick one color that should be transparent, some programs allow multiple colors to be transparent. Check the Help file for your editor to determine how to accomplish transparency.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics