Now that you've successfully created the navigation bar for the Jade Valley Web site, your next task is to develop a site banner that consists of both the navigation bar and the Jade Valley logo. Let's get started.
1.
| Still in interface.png, choose File > Import to import logo.png from Lesson 2's Start folder to interface.png.
|
Because of their high quality, PNG files are good for sharing graphics for the Web or screen (but not for printing). The graphic looks as good here as it did when you first created it. The same cannot always be said of GIF and JPEG files.
2.
| With every element of the file logo.png still selected, choose Modify > Group to group them into one entity.
|
When you first import the logo each of the elements within the larger graphic is separate (see the figure on the left), making it difficult to keep the logo together as a unit. To avoid missing any elements of the logo when you relocate it, it's best to group all the elements together into one (see the figure on the right).
After you group all the elements of the logo, you'll see four handles in the corners of the logo. The handles indicate that the elements have been grouped into one entity.
Note
The grouping action you just performed affects only the file you imported; the original is not changed. Groups are flexible. You can group groups, creating nested groups. And you can ungroup graphics at any time.
3.
| Select the Jade Valley Web site logo and use the arrow keys on your keyboard to move the logo to the top-left corner of the canvas. The final X and Y coordinates of the logo should be 2 and 2.
|
Because the navigation bar takes up the top-right portion of the canvas, we will place the logo at the top-left corner to complete the banner for the Jade Valley Web site, leaving only a 2-pixel border around it.
4.
| Select the Line tool in the Tools panel. Holding down the Shift key, draw a horizontal line just below the logo and the navigation buttons.
|
The horizontal line creates a visual division between the site banner and the content area.
5.
| With the line still selected, use the Property inspector to format this line. Set the W, H, X, and Y coordinates to 680, 1, 10, and 113, respectively. Change the stroke thickness to 4 pixels.
|
With the line's width set to 4 pixels, you now have a horizontal bar as the divider.
6.
| With the bar selected, use the Property inspector to further format the divider, and make the Fill Color #CCCCCCC with No stroke.
|
To be consistent throughout the interface, you'll make the divider a light gray colorthe same color (#CCCCCC) used in the navigation buttons' outlines.
7.
| Save interface.png.
|
![[View full size image]](/image/library/english/13887_057fig01_alt.jpg){kind=link}