Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Anyone looking for a fast and easy way to build a great web site can use iWeb to bring together and post photos and videos that were created using other iLife '09 applications. Instructor Garrick Chow demonstrates the basic functions and the new features of this application in iWeb '09 Essential Training. Garrick shows how to create and publish everything from basic web pages containing text and images to more involved pages with video. He also demonstrates how to create blogs and podcast pages. Exercise file accompany the course.
Once you have added an image to your web page in iWeb, they are some pretty cool things you can do to enhance or alter its appearance. Again, if you are experienced with web design, you are going to find that iWeb gives you the ability to quickly accomplish some effects that would normally take a long time with other web design programs or that would have required you to use separate applications. So let's start with the Image options in the Inspector. I'm going to go ahead and select this image here on my Welcome page, and I'll go to the Graphic Inspector, which is already selected. And we'll just work our way through it. The first available option here is to add a stroke to the object. That simply means putting a line of some sort around it as a border.
If you don't want to stroke around the image, you can choose None, but that's kind of boring. Now if you select Line, you have 10 different styles of strokes to choose from, add a simple hairline, dash line, and you can watch the changes around the image, dotted line. So all these different types of lines you can check out. You can also select a color for the stroke and a thickness setting. Each line has it's own default thickness setting but if you wanted to make it super thick line, you can do that as well. There are also Endpoint menus here, but those aren't available right now because I'm working with a closed object that has no endpoints.
A little later, we'll see that you can draw other shapes and objects like lines and you can add endpoints like arrowheads to them. We also have the option of 18 different picture frames. So if I choose Picture Frame, and I click the Frame menu down below, you can see all the different options we have. So these are for those times when you think simple straight-line borders are just too boring. So I'll just click around here and see what the different frames look like. I may want to click off the image to get the full effect and then select it again to pick something different, kind of like this make it look like it's taped on to your page or held on to your page by a push pin.
I'll just select this one here. Now you can also use the Scale slider to adjust the size of the frame. So if you don't want quite to stick a border around it, you can drag that down a bit. Notice that, it pretty much disappears at that point. Next, we have the Shadow settings, which allow you to create the effect of your image appearing to be sitting slightly above the surface of your page. This is commonly called a drop shadow. But if I turn this effect on, I can then adjust the appearance of the shadow by clicking the Offset arrows to make the image look further away or even closer to my page. I can use the Blur arrows to soften the shadow or to make it more definite, and you can use the Opacity slider to determine how strong the shadow appears.
And you can use the Angle dial to determine where the virtual light sources are placed to cast that shadow off. So you can see as I move that around, the direction of the shadow changes. Be aware though that if you are using a Picture Frame around your image, a lot of them already have drop shadows built-in as part of their design, for example, this picture frame here. Let me turn-off the Shadows, so you can see it. So it already kind of has a shadow underneath it. So you might not want to combine a Picture Frame Stroke with a shadow, it might ruin the effect. But as you can see, it's easy to experiment with all sort of looks. With other web design applications, you would normally have to create your images' drop shadows in some other image editing program before bringing them into your web design program.
But here in iWeb, we can do it all on the fly and see if you like the effect within the context of your page. And you can turn them on and off at a whim. Let me just switch back to No stroke for now, and No shadow, so I can show you the next area which is the Reflection slider. Checking the Reflection box places the appearance of the photos reflection below it making it look as it were propped up on a big shiny table. Again, for the full effect, you probably don't want have your stroke or shadow turned-on, and then you can use the slider here to determine how strong the Reflection is. I can have a very strong reflection or just a hint of a reflection. I can click off to see the full effect. So that looks okay in this theme, but I don't really like it all that much for my website, so I'm just going to uncheck Reflection to turn that off and maybe I'll just turn the Picture Frame stroke back on. I'll go with that one there.
Now the last effect we have in the Graphic Inspector is the Opacity slider. This lets you set how transparent or opaque your image is. Now in most cases, you are going to want full opacity, but there may be times when you will have images and objects stacked on top of each other, which we'll talk about in a little while. And you want to be able to see through one image into another. That's where the Opacity slider comes in. You can just drag it to the left to make the image a little more transparent. Again, I'll show you more about that in the next movie. So that's what you will find under Graphic Inspector. But what else can you do with your images? Well, another very cool and useful tool you will find in iWeb is the Adjust panel.
You can open that by clicking the Adjust button, and that's useful for color correction and fixing your photos from right here in iWeb. But I'm going to be showing you this panel in detail in the chapter on working with photos and movies. So I'm going skip that for now and just go ahead and close that. Now the last thing I want to mention in this movie about changing the appearance of your images is the idea of masking or cropping that I was talking about earlier. If you only want to use a portion of one of your images, for example, if you have a photo of yourself on vacation, and you want to crop out that stranger walking pass behind you, you can bring the picture into iWeb as is and then use the Mask tool to crop the image.
Let me show you what I mean. So this image on my Welcome page, it's a photo of the Grand Canyon, but I don't really like the composition as it is right now. You see a lot of the ground in the foreground here, and you've got this railing right here. What I really want to focus on is the Canyon in the distance. Now we have already seen that you can resize an image simply by dragging its handles like so, and you can reposition it just by dragging it around on your page. Let me undo that. But I want to focus again on the top portion of the image. All I have to do with the photo selected is click Edit Mask. Now it doesn't look like anything has happened, but watch what happens when I drag a handle now.
Notice I'm increasing the size of the mask itself. And we already know that I can resize the photo inside the mask, I just need to double-click it, and then dragging its handles to fill out the rest of the mask and I can drag to reposition it. I'll make that even larger, something like so. And then I can click outside the image to complete the mask, and there it is.
Now if you want to use an image completely unmasked, just select it and then click the Unmask button. But that's not what I want in this case. So let me undo that. Okay all right, there is one last thing I want to show you. In the Inspector panel, if you click the little ruler icon, you will bring the Metrics Inspector. This area just gives you some info like the images name. So if I select the image, you can see the name on the file here and it tells me its current dimensions. In this case, it's 440 pixels wide and 205 pixels tall. You can click the Original Size button if you want to see the image at full resolution, but iWeb usually does a pretty good job of sizing images when you bring them in. so let's undo that.
So you probably won't need the Original Size button too much. You can use the Position fields if you would want more precise control over exactly where the image sits on your page. The first field here is for its upper left hand corner distance from the left side of the page, and the second field is the corner distance from the top of the page. So currently in my selected image is 30 pixels form the left side of the page, and 170 pixels from top of the page. If I move the image around, you can see those numbers change. So undo that, and finally, you can use the controls at the bottom of the Metrics Inspector to rotate the image, and you can set it to any angle you like, or you can flip it horizontally or vertically.
So as you can see, there are a lot of very different and very cool things you can do to your image inside iWeb. Make sure to take some time and play around these effects on your own, and try out lots of combinations of effects to see what you can come up with.
There are currently no FAQs about iWeb '09 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.