Tuning your image

blip

Pixel, the images you've put on our web page look great. But they're so big, I don't have much room to put text next to them.


No problem. I can resize the images so you'll have plenty of room.

pixel



Resizing an image
To resize an image:

    1. Select the image by clicking on it.

    2. You will see eight sizing dots at the corners and sides of the image. Move your mouse pointer over one of these dots. The pointer will turn into a two-headed arrow.

    The pointer will turn into a two-headed arrow

    3. Click and hold your mouse button, then drag your mouse to change the size of the image.

    Make your image smaller... ...or make it larger


blip

Resizing images makes them fit, but we sure lose a lot of details in the picture. We want to make sure that everyone can see those wild platform runners that kids wore in the 90s.


Well, we can always take out some of the space around the subject. I think we can do that using the crop button in FrontPage.

pixel



Cropping an image
To "crop" an image means to remove a portion of it. You may only want to show part - but not all - of a particular image. For example, you may want to crop an image in the following scenario: you have a close-up photo of yourself with many other people in the background. You can draw visual attention to yourself by cutting off the part of the photo that contains the other people.

Crop lines

To crop an image:

    1. Select the image by clicking on it.

    2. Click the Crop button on the Image toolbar.

    Crop button

    3. You will see eight small white dots at the corners and sides of the image. Move your mouse over one of these dots and see it turn into a two-way arrow.

    4. Hold down your mouse button and drag the arrow to outline the size you want the image to be. Let go of your mouse button when the correct area is outlined.

    5. Press the Enter key.

    Cropped image


blip

We still need to offset the photo more because the text is crowding it. Any suggestions, Pixel?


Borders and buffers. A border puts a set of lines around an image. A buffer creates a blank space around an image so it has room to breathe.

pixel



Adding borders and buffers
There are two ways to offset an image from the rest of the web page. You can use an image border, which is a set of lines that surround an image. You can also use an image buffer, which is a blank space that surrounds an image.

To add a border:

    1. Select the image by clicking on it.

    2. Click Edit on the Menu bar and select Image Properties.

    3. The Image Properties dialog box will appear. Select the Appearance tab.

    4. To make a thicker border, click the up-arrow on the Border Thickness spin control boxes. To make a thinner border, click the down-arrow.

    Enter a value or use the spin control to adjust the border size

    5. Click OK on the Image Properties dialog box.

To add a buffer:

    1. Select the image by clicking on it.

    2. Click Edit on the Menu Bar and select Image Properties.

    3. The Image Properties dialog box will appear. Select the Appearance tab.

    4. To make a thicker buffer, click the up-arrows on the Horizontal Spacing and Vertical Spacing spin control. To make a thinner buffer, click the down-arrows.

    5. Click OK on the Image Properties dialog box.

    You get a little more control with the buffer width

This page I'm doing on 90s fashion needs some work. The baggy pants are on top and the tiny t-shirt is on the bottom. I need to move them around. Plus, I want them on the left side of the page.

pixel



blip

We can take care of that with some dragging and clicking.



Hmmm. Sounds like a new dance craze, the "Drag and Click".



Moving an image
Images can be placed before or after text. You can also align text on the left or right, so the text wraps around the image.

To move an image:

    1. Select the image by clicking on it.

    2. Place the cursor on the image.

    3. Click and hold your left mouse button as you drag the image to a new place on the page.

    When you move the image, you will see a small rectangle attached to the cursor.

    4. Release the mouse button to position the image in its new location.

To right and left align the image:

    1. Select the image by clicking it.

    2. Click Edit on the Menu Bar and select Image Properties.

    3. The Image Properties dialog box will appear. Select the Appearance tab.

    4. Click the Alignment drop-down box and select either left or right.

    Select an alignment option

    5. Click OK on the Image Properties dialog box.

tip


Back
Quick Quiz
Next