• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 6. Creating the Tour Assets > Creating the Oakbridge Community Center M...

Creating the Oakbridge Community Center Masthead

The design calls for a picture of the community center's administrative building to appear as though it merges into a blue sky with clouds. This should give your Fireworks skills a workout. Follow these steps to create the masthead:

Open the Community_Center.png file located in the CommCenter folder of your Chapter 6 Exercise folder. If you don't have the Chapter 6 folder, download it from the book's web site to your desktop.

As is typical, you will never get what you want. The image was taken on an overcast day, and there is no blue sky to be found. To fix that, select the Magic Wand tool and set the Tolerance to 15 in the Fireworks Property Inspector. Click once anywhere in the sky area of the image above the roof. A large chunk of the sky is selected, but there are still quite a few areas that aren't selected.

To select the rest of the sky, you have to choose whether to “work hard” or “work smart.” The former would require you zoom in on the various areas of the sky that aren't selected, and with the Shift key held down, click on them with the Magic Wand tool. If you want to “work smart,” you let the software do the work. The sky is a uniform dull color. Why not let Fireworks select it for you? Select Select Similar from the Select menu. Other than a couple of small areas on the building, all of the sky including that between the leaves of the trees is selected.

To remove the selections on the building, select the Lasso tool, and with the Option/Alt key pressed (a minus sign, indicating removal of a selection, will appear under the lasso icon), circle the areas you don't need.

To remove the selection you just made, press the delete key. Deselect and set the Canvas Color to Transparent as shown in Figure 6.14. Save the image.

Figure 6.14. The Oakbridge Community Center masthead image is prepared for a sky transplant.

Open the Clouds.png image in you CommCenter folder. When it opens, select File, Import, or press Control-R (PC) or Command-R (Mac). When the Import dialog box opens, navigate to the folder where you saved your community center image, select the image, and click Open. This will place the building over the clouds image.

The imported image is quite a bit larger than the clouds image. Select View, Magnification, 25%. Select the Scale tool, press the Shift Key, and with the Shift key pressed, move the bottom-right corner of the community center up until it touches the bottom of the clouds image. The height of the building image should be 200 pixels. When finished, double-click the Magnifying Glass tool to zoom the image to actual size.

When the image is properly sized, select Effect, Adjust Color, Brightness and Contrast on the Property Inspector. When the Brightness and Contrast dialog box opens, set the Brightness to 20 and the Contrast value to –2. Click OK. Your image should resemble Figure 6.15.

Figure 6.15. The building image is placed over the clouds image, and the building's brightness is increased and its contrast decreased.

With the photograph selected, select Modify, Mask, Reveal All. This turns the image into a mask.

In the tools, click and hold on the Paint Bucket. When the pop-down appears, select the Gradient tool. Choosing this tool will enable you to create a gradient that will actually fade the image into the clouds.

Click the Gradient Paint Chip in the Property Inspector to open the Gradient dialog box. The gradient currently runs from white on the left to black on the right. The order needs to be switched. Drag the black swatch on the right to the left slider of the gradient bar and drag the white slider to the right side. Click outside of the dialog box to accept the change and to close the box.

Select the Gradient tool. Select the locked mask rectangle next to the building layer to add the gradient to the mask and not “over” the building. Place the cursor somewhere in the center of the image and drag the mouse from left to right across the image. When you release the mouse, the image will fade in the direction the mouse was dragged. If you don't like the effect, undo (Control-Z (PC) or Command-Z (Mac)) and repeat until you get a result that meets your expectations.

The decision is also made to leave an area at the bottom of the image to accommodate the addition of a navigation bar. Select the Rectangle tool, draw a small rectangle, and use these values in the Property Inspector:

  • Width: 800

  • Height: 20

  • X: 0

  • Y: 101

  • Fill Color: 0099FF

  • Fill Type: Solid

  • Stroke: None



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint