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

Lesson 2. Designing a Page Interface > Developing a Site Banner

Developing a Site Banner

Now that you have successfully created the navigation bar for the Jade Valley Web site, the next task is to develop a site banner that consists of both the navigation bar and the Jade Valley logo. Let's get started.

Open interface.png. Choose File > Import to import logo.png from Lesson 2's Start folder to interface.png.

Due to their high quality, PNG files are good for sharing graphics for the Web or screen (but not for printing). This graphic looks as good here as it did when you first created it. The same cannot always be said of GIF and JPEG files.

With every element of the file logo.png still selected, choose Modify > Group to group them into one entity.

As shown in the first screenshot, when you first import the logo each of the elements within the larger graphic maintain their separate individuality, 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, as shown in the second screenshot.

Once you group all 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.


The grouping action you just performed affects only the file you imported into the current file—the original is not changed. Groups are flexible: You can group groups, creating nested groups. And you can ungroup graphics at any time.

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 coordinate of the logo should be 2 and 2, respectively.

Since 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's Web site, leaving only a 2-pixel border around it.

Select the Line tool from the Tools panel. Holding down the Shift key, draw a horizontal line right below the logo and the navigation buttons.

The horizontal line creates a visual division between the site banner and the content area.

With the line still selected, use the Property inspector to format this line. Set the W, H, X, and Y coordinates to 680, 4, 10, and 111, respectively.

Since you made the line's height 4-pixels high, we now have a horizontal bar as the divider.

Again, 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, we choose to make the divider a light gray color—the same color (#CCCCCC) used in the navigation buttons' outlines.

Save interface.png.



Not a subscriber?

Start A Free Trial

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