Using Graphics in Web Pages

Using Graphics in Web Pages
Types of graphics
Web browsers support many types of graphics in web pages, including the following:
GIF
• Limited to 256 different colors
• Best for drawings and logos
• Can include transparent sections
• Can be saved interlaced so the image loads in passes
• Can be animated
Example of a GIF, 18.6k
JPEG
• Uses millions of colors
• Best for photographs
• Can be compressed to load faster
Example of an optimized JPEG, 4.52k
PNG
• Portable Network Graphics (pronounced “ping”) format
• Designed to replace the older and simpler GIF format
• Intended to be a single-image format only
• Fully lossless compression
• Supports up to 48-bit truecolor or 16-bit grayscale—this allows saving, restoring and resaving without degrading quality
DOC077 Using Graphics in Web Pages
1
Example of PNG8, 18.3k
Example of PNG24, 36.9k
Insert Images in Web Pages
There are different ways to insert images in FrontPage®. Below are three methods:
Using Images from Your Web
1. From the Insert menu, click Picture, and then click From File.
The Picture window appears.
2. Find and select a graphic from the box. Click OK.
The image inserts into your document.
Using Images from the Missouri State Server
Use your web
browser to
select a page
or file button
1.
From the Insert menu, click Picture, and then click From File.
The Picture window appears.
2.
Click the Use your web browser to find a page or file button.
Internet Explorer opens. If Internet Explorer is already open, the button on the task bar will
blink. Click the button to switch to the browser.
3.
In the Address field of Internet Explorer, enter the following address then press Enter:
http://www.missouristate.edu/graphics The graphics directory appears.
4.
Find the graphic you would like to insert. When the graphic is displayed on the screen, click
the FrontPage button on the taskbar.
5.
You return to FrontPage. The address of the image inserts into the URL field. Click OK.
The image inserts into your document.
Using Images from Microsoft® Clip Art or Your Computer
1.
2.
Select a File
on Your
Computer
3.
4.
From the Insert menu, click Picture and Clip Art.
The Clip Art Gallery appears.
To insert a file from your computer, click the Select a file on your computer
button.
The Select File window appears.
Find and select the image you wish to insert. Then click OK.
The image inserts into your document.
When you save a file that includes an image from your computer or the Clip Art
Gallery, FrontPage displays the Save Embedded window. This screen is asking you
DOC077 Using Graphics in Web Pages
2
5.
to save the image into your web.
Make sure each graphic action is set to Save, and then click OK.
FrontPage saves the images into your web.
Position Images
Once you’ve inserted the graphic into your page, you may set the alignment or position of the
graphic. To adjust the position, follow these steps:
1.
Click once on the image to select it.
Handles (or dots) appear around the graphic.
2.
Right-click on the image, and click Picture Properties.
The Picture Properties window appears.
3.
Click the Appearance tab.
A new section appears that lists the layout of the graphic.
4.
Change the Alignment option to the desired position. The options are described below:
Default aligns the image using the default settings of the Web browser. This is the
same as the baseline option.
Left aligns the image in the left margin and wraps the text that follows the image
down the image's right side.
Right aligns the image in the right margin and wraps the text that precedes the image
down the image's left side.
Top aligns the top of the image with the surrounding text.
Texttop aligns the top of the image with the top of the tallest text in the line.
Middle aligns the middle of the image with the surrounding text.
Absmiddle aligns the image with the middle of the current line.
Baseline aligns the image with the baseline of the current line.
Bottom aligns the bottom of the image with the surrounding text.
Absbottom aligns the image with the bottom of the current line.
Center aligns the center of the image with the surrounding test.
5. Click OK.
The alignment of the image changes.
Set the Background Image
FrontPage also allows you to set the background image, which displays behind the text and
content of the web page. All background images automatically tile to fill the screen, regardless of
the screen size, shape, or resolution.
To set the background image, follow these steps:
1.
Right click on the screen, and click Page Properties.
The Page Properties window appears.
2.
Click the Background tab.
The section about background information appears.
3.
Mark the Background Picture checkbox. Then either enter the address of the background
image or click Browse to find the desired image.
4.
If you would like the background image to remain stationary when the web page scrolls,
mark the Watermark checkbox. Click OK.
The background of the web page changes to your image.
DOC077 Using Graphics in Web Pages
3
Note: The Browse feature for background images works the same as with regular images.
Find and Save Free Graphics for Your Website
The Web includes many sites that offer free graphics to all web developers. When you save a
graphic, follow these guidelines:
• Attain author permission before saving graphics.
• If the author offers you graphics with contingencies, make sure to follow the author’s
requests.
• If in doubt, contact the author and ask for permission.
Save a Graphic
To save a graphic from the Web, follow these steps:
1.
From Internet Explorer, right-click the image you wish to save. Mac users can click and hold
the mouse button on the image.
A menu appears.
2.
Click Save Picture As.
The Save Picture window appears.
3.
Pick a location to save the picture on your computer. (Remember where you saved the
image!) Click Save.
Internet Explorer saves the picture to your computer.
Tips for Optimizing Graphics
When you are optimizing a graphic, it’s important to keep in mind the following tips:
Always make a copy of your original before you do anything else.
Never compress a file that has already been compressed. For example, if you want to
compress a 100 KB image to 20 KB, you will get a cleaner result by compressing
directly from 100 KB to 20KB than by compressing first from 100 KB to 50 KB and
then to 20 KB.
If you want to use a large graphic, consider creating a thumbnail that leads to the
graphic. Use the Autothumbnail button on the Pictures toolbar in FrontPage to create
both the thumbnail and a hyperlink to the full-sized picture.
Use only as many colors as your audience can see. If your audience consists of people
whose computers can only display 8-bit color, use no more than 256 colors.
Slicing Graphics
There are several reasons for slicing a graphic for a web page:
If you wish to animate part of the graphic.
To increase download time or a very large graphic by slicing it into several pieces and
optimizing the pieces.
If you want to create rollovers or a site map in the graphic.
Go to www.download.com for a free imaging tool called “Serif PhotoPlus5.5™.”
For more information about slicing graphics and for some examples of slicing, go to:
DOC077 Using Graphics in Web Pages
4
http://graphicssoft.about.com/library/weekly/aa000808a.htm This guide will help you
to get started.
To Slice an Image with PhotoPlus 8:
Choose the Image Slice tool from the Standard toolbar.
To place a horizontal slice guide on the image, click witht the tool. Shift-click to place a
vertical guide.
To Create an Image Map:
Open Microsoft FrontPage and then choose File from the menu and New Page.
To insert your graphic that you want to make an image map, click the Insert Menu
button and select Picture, From File, and then select the location of your file and click
Insert.
Click the image and the Picture tool window should appear.
Picture Toolbar in Microsoft FrontPage
To draw a Hot Spot on the image you can choosethe rectangular hotspot tool, the
circular hot spot tool or the polygonal hotspot tool. Choose a tool and draw the tool
over the section of the image you want to be a link.
Example of hotspots in Microsoft FrontPage
DOC077 Using Graphics in Web Pages
5
Once you have drawn the image, the Edit Hyperlink window appears, either type the
address of the link or browse to it the Look In section if the link resides in your web site.
To add an alt tag, click the Screen Tip button in the upper-right corner, the Set
Hyperlink Screen Tip window appears . Click OK. Then Click OK again in the Edit
Hyperlink window.
Edit Hyperlink window
Click Save.
Getting Started with PhotoPlus
If you have worked with PhotoShop before, this program will look very familiar to you. Serif has made their
imaging software mimic many of the features that PhotoShop has. If there is any tool you do not know how to
use, Serif has created an excellent Help menu with visual examples to help you learn to use the tool effectively.
You may also want to look in the program folder on your hard drive for the Serif folder which has a few tutorials
to also get you started.
DOC077 Using Graphics in Web Pages
6
The PhotoPlus layout:
Standard Toolbar
Tools Toolbar
Startup Wizard
Instant Effects window
Layers Window
The Layers tab includes controls for creating, deleting, arranging, merging, and setting properties
of layers in the image. A thumbnail image next to the layer's name represents its bitmap content.
(See the series of topics starting with Basics of using layers.)
Layer Name
Typically, each image has a Background layer, and may also have one or more standard
(transparent) layers. To work on a layer, click its name; the currently active layer is highlighted.
The ordering of layer names reflects how layers are stacked in the image. To change a layer's
position in the stack, drag its name up or down. Right-click layer names for more options.
Layer Symbol
Special layers include a symbol to denote their properties.
· "S" represents a shape layer. Shape layers also include a path thumbnail depicting the outline of
DOC077 Using Graphics in Web Pages
7
shape(s) on the layer. (See Using paths.)
· "T" represents a text layer.
Hide/Show Layer
Click (push button down) to make a layer's contents visible; click again to make the layer invisible.
Protect Transparency
Click (push button down) to prevent further editing of transparent regions on a layer.
Link/Unlink Layer
Click (push button down) to link a layer to the active layer. When two or more layers are linked,
they move as one when manipulated with the Move tool.
Blend Mode
Click to choose a layer's blend mode—how its pixels interact with those on the layers below it—from
the drop-down list. (See the topic Using blend modes.)
Opacity
Enter a value (from 0-100), or click the down arrow and use the popup slider, to set the layer's
overall opacity. Note that this setting does not affect the transparency of individual pixels on the
layer. (See the topic Adjusting opacity/transparency.)
New Layer
Click to display a dialog that lets you set properties (name, blend mode, and opacity) for a new
layer. The new, empty layer appears above the active layer in the stack.
Tip: You can also right-click a layer name and choose New..., or choose New from the Layers menu.
New Adjustment Layer
Click to display a submenu of adjustment layers, which let you insert any number of effects
experimentally. (For details and examples, see the topic Using adjustment layers.)
Add Layer Mask
Click to create a transparent (Reveal All, or Reveal Selection if there's a selection) mask over the
whole active layer and switch to Edit Mask mode. A thumbnail representing the mask appears next
to the layer name.
· Click the preview thumbnail to enter Edit Mask mode (same as Layers/Edit Mask) and reveal the
selection, if any. Click the bitmap thumbnail to switch out of Edit Mask mode.
· Shift-click to disable/enable the mask (same as Layers/Disable Mask).
· Alt-click to enter View Mask mode (same as Layers/View Mask).
· Ctrl-click to create a selection from the mask (same as Select/Create from Mask).
· If the mask preview thumbnail is selected, clicking on the layer tab’s Delete button deletes the
mask. (See the topic Basics of using masks.)
Add Layer Depth Map
Click to create a depth map on the active layer. Depth maps use lightness values to encode Z-axis
or "elevation" data, and let you add remarkable 3D realism to ordinary images. A thumbnail
representing the depth map appears next to the layer name.
· To switch the depth map off and on, Shift-click the depth map thumbnail. (See the topic Using
depth maps.)
Layer Effects
Click to display a dialog that lets you apply a variety of special effects to the layer. Standard or
"2D" effects are especially useful for text layers, while "3D" effects simulate surface texture.
(For details and examples, see the topics, Applying 2D layer effects and Applying 3D layer effects.)
Delete
Click to delete the active layer.
Tip: You can also right-click a layer name and choose Delete or choose Delete from the Layers
menu.
DOC077 Using Graphics in Web Pages
8
For hints on using toolbars and tabs, see the topic Working with the toolbars and tabs.
Undo History
The tools:
Manipulating Photographs
Most of the time, a photograph will not be of the best quality, scanning a photograph in will distort
color or the image is too large or damaged. PhotoPlus has many tools to help you manipulate your
photos so they are a better quality. Cropping unneeded elements out of a photo or just to keep a file
size small for the web are reasons to use the crop feature.
Photo Enhancement Options:
Levels...
Displays a dialog that lets you view a histogram plot of lightness (luminance) values in the image or
color channel, and adjust the contrast and tonal range by shifting dark, light, and gamma values.
(See topic or example.)
Tip: You can also create a Levels adjustment layer.
Curves...
Displays a dialog that lets you fine-tune lightness (luminance) values in the image or color channel
using a line graph. (See topic or example.)
DOC077 Using Graphics in Web Pages
9
Tip: You can also create a Curves adjustment layer.
Color Balance...
Displays a dialog that lets you adjust color and tonal balance for general color correction in the
image. (See topic or example.)
Tip: You can also create a Color Balance adjustment layer.
Brightness/Contrast...
Displays a dialog that lets you vary the brightness and/or contrast. (See topic or example.)
Tip: You can also create a Brightness/Contrast adjustment layer.
Hue/Saturation/Lightness...
Displays a dialog that lets you vary the hue, saturation, and/or lightness values. You can also
colorize an image; this varies only the hue. (See topic or example.)
Tip: You can also create a Hue/Saturation/Lightness adjustment layer.
Replace Color...
Displays a dialog that lets you vary the hue, saturation, and/or lightness of a portion of the color
range. (See topic or example.)
Selective Color
Displays a dialog that lets you add or subtract a certain percentage of cyan, magenta, yellow, and/or
black ink. (See topic or example.)
Channel Mixer...
Displays a dialog that lets you modify a color channel using a mix of the current color channels.
(See topic or example.)
Tip: You can also create a Channel Mixer adjustment layer.
Gradient Map
Displays a dialog that lets you remap grayscale (lightness) information in the image to a selected
gradient. (See topic or example.)
Tip: You can also create a Gradient Map adjustment layer.
Threshold...
Displays a dialog that lets you create a monochromatic (black and white) representation. You can
adjust the threshold or transition point while viewing a plot of lightness levels. (See topic or
example.)
Tip: You can also create a Threshold adjustment layer.
Equalization
Applies a filter that evenly distributes the lightness levels. (See topic or example.)
Stretch
Applies a filter that spreads out the lightness levels. (See topic or example.)
Negative Image
Inverts each color, replacing it with an "opposite" value. Especially useful for creating a positive
image from a scanned photographic negative. (See topic or example.)
Tip: You can also create a Negative Image adjustment layer.
Grayscale
Removes color information while retaining light and dark gradations, yielding a 256-shade grayscale
image. (See topic or example.)
Posterize
Displays a dialog that lets you apply the Posterize effect. You can specify the number of tonal levels
(lightness values). PhotoPlus then maps pixels to the nearest level. (See topic or example.)
Tip: You can also create a Posterize adjustment layer.
Cropping a Photo
1.
2.
3.
Open your photo in PhotoPlus, use File, open.
Choose the Crop tool from the Tools toolbar and drag out a box over the region you want
to crop. You can drag the handles on the selection to adjust.
Double-click in the selection to crop the picture.
Adjusting the Levels
1.
2.
Open your photo in PhotoPlus, use File, open.
From the Image menu, choose Adust, Levels. The levels dialog box opens.
DOC077 Using Graphics in Web Pages
10
Adjusting Brightness
1.
2.
From the Image menu, choose Adjust, Brightness/Contrast. The Brightness and Contrast
dialog box opens.
Move the brightness and Contrast tabs to get the image the way you want, you can see the
changes as you move the sliders. Click OK when you are finished.
Adding Text to Images
1.
2.
3.
4.
5.
Click on the picture in the area you wish to place the text. The Add Text dialog box
appears.
Type your text in the box provided and change the font type, size and other options to
whatever you desire. Click OK.
Click the Move button to move the text around.
To adjust the text properties further, click the layer with text in the Layer window. This
will open the Add Text dialog box again. If the Layers tab is not on your screen, go to the
View menu and click Layers tab so that a checkmark appears next to it and it will pop up on
your screen.
To add special effects to your text, first make sure your text layer is selected in the Layer
Tab. In the Effects Tab, choose one of the options provided. You will see the effect added
to your text. You can keep clicking different effects until you get the one that you want.
Creating A photo montage using Layers
1.
2.
Click on the picture in the area you wish to place the text. The Add Text dialog box
appears.
Type your text in the box provided and change the font type, size and other options to
whatever you desire. Click OK.
Reducing the Size of JPEG Files
The JPEG file format works best with large numbers of colors in graphics that are photographic in
quality. You can often compress JPEG files significantly without a noticeable degradation in
quality. However, compression of JPEG images is "lossy." This means that some data in the image
is lost during compression, so the image quality degrades at high compression levels.
The following figures show an uncompressed original photograph that was taken from Microsoft
PhotoDraw™ and compressed versions of the photograph, with file size and download time at 28.8
Kbps connection speed.
Original photo (200 x 161 pixels) 10 KB,
12 seconds
DOC077 Using Graphics in Web Pages
11
At 20% compression 8 KB,
5 seconds
•
•
•
At 70% compression 6 KB,
2 seconds
At 90% compression 3 KB,
1 second
As you can see, at 20% compression, the file is less than half the size of the original, and
download time is less than half.
At 70% compression, there is still no noticeable degradation of the image, and the download
time is greatly reduced.
At 90% compression, color banding is visible, and although the file size is half the size at 70%
compression, the download time is only 1 second less. Consequently, there is no real advantage
to compressing the file by 90%.
Using PhotoPlus’ Export Optimizer
PhotoPlus has a feature called the Export Optimizer to help you choose the compression of the picture you are saving.
To optimize a graphic for the Web, follow these steps:
1.
Open PhotoPlus and then open your image that you want to resize.
2.
Click File, then choose Export Optimizer. The Export Optimizer window appears.
The Export Optimizer Window
DOC077 Using Graphics in Web Pages
12
3.
Click the window pane button in the upper left hand corner to preview a variety of file sizes and the differences. An
example is shown above.
4.
Select the quality using the slider bar to select the quality you wish to save the graphic as.
5.
Click Export. The Export window appears. Pick a location to save the picture on your computer. Click Save.
PhotoPlus Resources
Tutorials, Forums and Manuals
There are several tutorials available from Serif for PhotoPlus and can be found here:
http://www.serif.com/community/tutorials/index.asp
There are a few Tutorials on this website for PhotoPlus:
http://www.tutsuite.com/modules.php?name=Web_Links&l_op=viewlink&cid=48
Although they may say they have been developed for PhotoPlus 8.0, they will still work for
PhotoPlus 5.5.
A tutorial on backlighting with PhotoPlus: http://www.nuws.net/guides/serif/pp5/x-text.shtml
A tutorial on fixing red eye: http://www.nuws.net/guides/serif/pp5/redeye.shtml
Fix an underexposed image: http://www.calcaria.co.uk/calcaria/serif/photoplus/light.htm
Using the Instant Artist feature: http://www.calcaria.co.uk/calcaria/serif/photoplus/instart.htm
There is also a forum for users on this site:
http://www.tutsuite.com/modules.php?name=Forums&file=viewforum&f=23
The Serif PhotoPlus 8.0 manual is available here:
http://www.serif.com/community/productmanuals.asp
Photoshop Filters that work with PhotoPlus:
Eye Candy 3.1
Filters Unlimited 2.0 - The proper preview cannot be seen before applying the effects.
Flaming Pear Freebies Only Kyoto Color works
Auto FX freebies
Ulead freebies
Unplugged -The MSVCRT10.DLL file is needed in your windows/system folder. This file
can be found in a number of places on the net.
Dragonfly's Sinedots 1, II & Retrodots
Fantastic Machine
KPT
Primus by Flaming Pear
•
•
•
•
•
•
•
•
•
Sample Web Sites
Many authors offer their graphics free to web developers. Below is a small listing:
Designed to a “T”
www.designedtoat.com
Includes free graphics arranged alphabetically and by categories. This site also explains
how to manipulate graphics with Paint Shop Pro.
Art Today
www.arttoday.com
Professional web site for online images and fonts. This site includes search capabilities
DOC077 Using Graphics in Web Pages
13
and indexes by topic and file type. Art Today offers a limited free section or a
membership subscription to the full site.
Buttons, Bullets, and Backgrounds
www.rewnet.com/bbb
Arranges graphics into buttons, bullets, or backgrounds, and then classifies them based
on shape, size, or texture.
AAA Free Clip Art and Backgrounds
www.AAAClipArt.com
Arranges clip art by topic, including animals, food, and buildings.
www.AAABackgrounds.com
Arranges backgrounds by color or texture
Absolute Background Textures Archive
www.grsites.com/textures
Contains over 2800 background images organized by texture and color. Each
background can be previewed full screen before saving.
Free Graphics
www.freegraphics.com
Contains links to other graphics sites. Each linked site is categorized and then rated for
quality and quantity.
Computer Services
Missouri State University
http://computerservices.missouristate.edu
901 S. National
Springfield, MO 65804
DOC077 Using Graphics in Web Pages
14
Download PDF