Graphics & Images
Job Aid 7
In this job aid you will learn to :
Graphic/image types .................................................................................................... 1
How to insert a graphic/image/clipart from a file .......................................................... 2
How to insert clip art from clip art gallery ..................................................................... 3
How to add a border .................................................................................................... 4
How to hyperlink .......................................................................................................... 5
How to add text on graphic/image ............................................................................... 6
How to crop graphic/image .......................................................................................... 7
How to make graphic/image transparent ..................................................................... 9
How to bevel a graphic .............................................................................................. 10
How to move an graphic/image ................................................................................. 11
Graphic/image types
HTML code used on the web recognizes two basic graphic formats - GIF and
JPEG. All the images on your web page must be either of these formats.
JPEG (Joint Photographic Exchange Group) - As a general rule, photos
should be saved as JPEGs. This file type consists of 16 million colors.
GIF (Graphic Interchange Format) - These files contain 256 colors or less and
should generally be used for non-photo graphics. All of the images on these
tutorial pages are saved in GIF format.
Owner: Jona Titus Page 1 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to insert a graphic/image/clipart from a file
1. Go to Insert on the menu bar and go down to Picture and click on From File.
2. The Picture dialog box will open.
3. Click on the file for the image you want to use. You can use various file types
but once inserted into FrontPage they will be converted to either JPEG or
GIF.
4. Click on Insert.
5. Your image will be added to your page.
HINT- It is a good idea not to have spaces in your image file names.
Owner: Jona Titus Page 2 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to insert clip art from clip art gallery
Adding Clip art to your FrontPage web is a simple task. Follow the steps below.
1. Go to Insert on the menu bar and go down to Picture and click on Clip Art.
2. The Insert Clip Art will open. The gallery link is located at the bottom of the
[insert clip art] box.
3. Type a keyword in the search for clips box. Hit enter.
4. Right click on the image you want to use and click on insert or click on the
image you want to use and click on the insert clip icon.
5. Your image will appear on your page. (Images in Front Page work a lot like
text. You can align them, put them in a table or click and drag them to a
location.) You can resize them by clicking on the corner handle and moving
out to enlarge and in to decrease the size. (You do not need to hold the shift
key down it will keep the picture in proportion automatically.)
Owner: Jona Titus Page 3 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to add a border
If you want your image that you added to your FrontPage web to stand out you
can easily add a border to it. The border color will be black by default. To add the
border follow these steps"
1. Right click on the image that you want to add a border to and click on
picture properties.
2. Click on the appearance tab.
3. Click on the up arrow next to border thickness to choose a number other
than zero. The larger the number the thicker the border.
Owner: Jona Titus Page 4 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to hyperlink
1. Select the picture by clicking on it.
2. Click the Hyperlink button on the Standard toolbar. The Create Hyperlink
dialog box appears.
3. Find and click the file name of the page you want to link to. The file name
appears in the Address box.
4. Click OK in the Create Hyperlink dialog box.
Owner: Jona Titus Page 5 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to add text on graphic/image
1. Click on the image that you want to add text to.
2. Click on the text icon from the Pictures' toolbar on the bottom of your screen.
3. A text box will appear on your image. Type the text you want to add. You can
move the text and format it like you would any text box.
Graphic without text. Graphic with text added.
Owner: Jona Titus Page 6 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to crop graphic/image
You can crop images so that you eliminate sections of the image that you do not
want to display. There is a cropping tool built right into FrontPage that allows you
to do this. Follow these directions for cropping an image.
1. Click on an image that you want to crop.
2. Click on the cropping tool icon from the Pictures' toolbar which can be
found on the bottom of your screen.
3. Your image will now have a dotted line with handles around it.
4. Click on the handles and drag them until the dotted lines are around just
the portion of the image that you want to display.
Owner: Jona Titus Page 7 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
5. Click on the crop tool one more time to crop your image.
Image before cropping Image after cropping
Owner: Jona Titus Page 8 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to make graphic/image transparent
There are times that you insert an image like clip art and if you have a colored or
textured background you get a white box around the image. You can make this
transparent. You can also just make a certain color within the image transparent.
When you use the transparent tool that is built into FrontPage you will actually be
converting the image to a GIF. This is a file format for graphic images. Follow the
directions below to make your image transparent.
1. Click on the image that you want to make transparent.
2. Click on the transparent icon found on the pictures' toolbar on the bottom of
the screen.
3. You mouse now has the transparent tool on it. It looks like a pen. Click on the
area that you want to make transparent. In the sample below I clicked on the
green background to make that transparent.
4. A dialog box will open tell you that you will be converting the image to a gif.
Click on yes.
Owner: Jona Titus Page 9 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to bevel a graphic
You can take any image and bevel it. It adds a neat dimension to your image. It
is also a great way to give an image a button effect. To create a beveled image
follow these steps:
1. Click on the image that you want to add a bevel to.
2. Click on the bevel button from the Pictures' toolbar.
3. Your image will be beveled.
Non-beveled image Beveled image
Owner: Jona Titus Page 10 11/4/2011 Rev 1.0
Graphics & Images
Job Aid 7
How to move an graphic/image
1. Click the image to select it.
2. Click the Cut button on the Standard toolbar. The image disappears.
3. Place the cursor where you want the image to go. Note: You can place the
image on the same page you cut it from or on a different one.
4. Click the Paste button on the Standard toolbar. The image reappears in its
new location.
TIP: You can also use the 'drag and drop' method to move an image to a
different spot on the same Web page. Just click on the image and hold
down your mouse button. Drag the image to a different spot, then release
your mouse button to drop the image into place.
Owner: Jona Titus Page 11 11/4/2011 Rev 1.0