Creating a Banner For the Rooftop Restaurant

Introduction

The image above is a scaled down version of the banner that you will be creating in this tutorial. You will need the two files contained in this zip file for this tutorial. Be prepared to download the zip file and then use the files when instructed to do so.

• Download Fireworks and the rest of the Creative Cloud if you have not already done so for a different exercise.
• Important: You must finish this and the other Adobe exercises before the 30 day trial version expires.
• NOTE: This tutorial ought to work properly with versions CS4, CS5, CS6.
• If you have any problems using this with Fireworks Creative Cloud please let me know (students, you ought to have my email address).

Remember that if you are a student, you are entitled to steep discounts at the UCLA campus bookstore (bring your course receipt) or at online sites that offer educational discounts. The Adobe site has a store for students.

A standard part of most web pages is a top banner. This is what most people will notice and read first when they come to the page.

In this exercise you will use Fireworks to build a banner for a fictitious restaurant, The Rooftop Restaurant. The banner you will create would be used on the page that describes one of the restaurant's specials.

This exercise will cover the following tools, techniques or topics:

• File naming conventions
• Setting up a simple web site folder structure
• The color palette
• Creating rectangles, copying them, and setting their color
• Specifying the size and position of a shape
• Creating and kerning text
• Importing and combining multiple images
• Creating a transparent GIF file
• What slicing an image means and why it is used
• Slicing an image with Fireworks
• Assigning a URL to a slice
• Setting export options on a per slice basis
• Exporting sliced images along with an html file that has the code needed to reassemble the pieces of the image into what will appear to be one image.
• Testing a sliced file's reassemble code

File and folder names

It is a good idea to establish and consistently use file naming conventions. These are rules that are established to help minimize confusion. When your site grows to dozens, hundreds, or even thousands of files, it is good to name the files and their folders systematically so that they are easier to locate and also easier to identity without needing to open them up and inspect them.

First and foremost: never have any blank spaces in your file or folder names. This is because many web servers use the UNIX operating system (instead of Windows or Mac) and UNIX can have big problems with spaces in file and folder names.

UNIX interprets spaces as delineations between things: if there's a space in a folder or file name, UNIX assumes that the name of one thing has ended and the next word is the name of something different.

Also, UNIX is "case-sensitive" - meaning it sees an upper case (capital) letter as a different character than the lower case of the same letter (small letter). If you stick to generally using lower case letters, there is less of a chance for confusion. Traditionally, lower case is used but there are many naming conventions that mix the two.

The most important thing about file naming conventions is to establish rules and then stick to them consistently. Also, use words that will make it easy to determine the type of information that is in the file.

For example, if you needed to save an html file for the page that will have this banner on it, you might want to combine the words: Special and Page. Here are examples of several possibilities for naming such a file, each using a different file naming convention. Note how an underscore ( _ ) or a capital letter can be used to indicate the start of a new word:

• special-page.html
• special_page.html
• spcl-pg.html
• specialPage.html

Lay the foundation

Let us now create the folder structure that we will use for this exercise's files. This will be a very simple yet sensible folder structure. The way that you name and structure the hierarchy (arrangement) of your folders needs to be easily understood by you and any others who work on your site.

1. Using whatever method you're accustomed to, create the following folders...
• For example, on a PC: you can use Windows Explorer (and that's not the same thing as Internet Explorer) or My Computer.
• On a Mac, use the Finder.
2. Create a folder named: rooftop.
3. Inside of the new rooftop folder create two new folders. Name one of the folders html and the other one images.
4. Note that we will actually only use the images folder during the rest of this exercise; this part of the exercise was meant to acquaint you with a very simple web site folder structure and file naming rules and restrictions.

Create the file and background

Start Fireworks. In the File menu select New. Then follow the seven steps in the illustration below:

If you are using Fireworks CS6...

Make the following setting if you want to prevent a blue border around a section of your banner and general misalignment, particularly when seen in Internet Explorer.

This option will not be available if you do not have a file open:

File menu > HTML Setup > HTML Style > Generic XHTML

Save Your File

Take a moment to save your file in Fireworks' default format PNG. Save it in your images folder. Name it: BNR_yourlastname (replace "yourlastname" with your actual last name). The .png file extension will get added automatically. PNG stands for Portable Network Graphics and is usually pronounced "ping".

Make the rectangular background shapes

We will now make some decorative rectangles for the background of our banner.

1. Select the Rectangle tool. It is in the Tools panel in the Vector section, below the tool with the diagonal line (see illustration). It has a square icon (not the one with the dashed line).
   • If you don't see the Tools panel, use the Window menu to select Tools (not Toolbars).
   • If you don't see the Rectangle tool on the Tools panel where indicated in the illustration, then either:
     • press the letter U on your keyboard repeatedly until you see the rectangle.
       or...
     • click and hold on whatever icon is currently being displayed at the location illustrated. A menu will appear. Select the Rectangle tool in that menu.
       • Note that whenever you see a little black triangle at the bottom right corner of a tool, it means that there are other tools there in addition to the one that you see.
2. Next, set the Fill color:
   1. Look in the Tools panel for the Colors section, near the bottom. (see illustration)
   2. There are two bucket icons in that section.
   3. Click the Color Box (the square) to the right of the lower bucket icon.
   4. The Pop-up Color Palette will appear.
   5. Set the color to #FFCC99, which is a tan color that is slightly different than our yellow-gold background color. This can be done two ways, as mentioned previously:
      • You can use the eyedropper that appears to select the color from the palette: this time it will be the color in the second column from the right, three rows up, or...
      • Manually type into the box at the top of the palette the characters #FFCC99 then press the Enter key on your keyboard to set it.
      • Please also check that the Stroke color has a red diagonal line going through it.
        • The stroke color selector is in the Toolbar above the fill color - there is a pencil icon to the left of the stroke color selector.
        • The stroke color determines the color of the border around a shape. If there is no color (as indicated by the red line), then there is no border. We do not want a border.

3. With the rectangle tool selected, hover your pointer over the background. The pointer will look like a plus sign (+). Click and drag diagonally to form a rectangle anywhere over the yellow background. It doesn't matter what size the rectangle is or where it is located, but keep it within the edges of the background. Make a shape roughly like the one pictured here:
   
4. Immediately after forming the rectangle, select the Pointer Tool which is the black arrow in the upper left corner of the Toolbar.
5. Then select the rectangle with the Pointer Tool by clicking on the rectangle. Tiny light blue squares will appear on the rectangle's corners indicating that it is selected.
6. We will now adjust the rectangle's size and position using the Properties panel (see it in the illustration above). The Properties panel ought to be visible underneath the image area. If you don't see it there, then select from the main menu: Window -> Properties.
7. The Properties panel displays the dimensions and location of any selected object. With the rectangle selected, just click in the height and width windows to modify the size. Set it to 215 W (wide) by 80 H (high). Note that the height is the same as the background's height - this will provide a perfect fit.
   • Also note that all sizes are in pixels, the basic and smallest unit of all digital images.
   • They are the tiny squares that all digital images consist of. They are usually too tiny to see without magnification. Each pixel contains specific color information that determines its color.
   • Pixels are the de facto measurement standard for images on the Web.
   • A pixel is a relative size. The size that a pixel appears is based on the display resolution that one's monitor is set to.
   • For example, if your monitor resolution is set to 800x600, a rectangle of those dimensions will fill the entire display. However, if your monitor is set to 1600x1024, then that same rectangle will occupy only half the width of the display.
   • With higher resolutions you can see more things, but they will appear smaller (and will often be harder to see).
   • If you wish to check or change your monitor resolution (Windows):
     Start button -> Settings -> Control Panel -> Display -> Settings -> Screen resolution
   • FYI: the word pixel is derived from the words: Picture Element.
8. Set the position of the rectangle to be Y = 0, if it isn't already. This will position the rectangle's top and bottom edges to be flush with the top and bottom boundaries of the background.
9. You will now use the arrow keys to position the rectangle so that it is in a position about one third from the left edge of the background.
• In order to maintain the vertical position (Y = 0), do not click on and drag the shape. Instead, use the left or right arrow keys on your keyboard to move the selected rectangle horizontally. Using the arrow keys to move shapes gives you precision control when positioning objects. Clicking and dragging does not.
• Press the left or right arrow key repeatedly until you have the rectangle in roughly in position. Each click moves the shape one pixel. If you press and hold down the Shift key, then each time you press an arrow key the shape will move 10 pixels.
• You can also position the rectangle by entering an X position of about 250.
10. We will now copy the rectangle and give the copy a different color and a different horizontal position. Again, these rectangles are being used purely for design, their horizontal position is not critical. The original rectangle should still be selected, displaying the little light blue squares on each corner.
11. Using the Edit menu, select Copy to copy the rectangle.
• Then select Paste.
• It will seem as if nothing has happened.
• This is because the new rectangle will be directly on top of the one you copied, so you won't see it. However, the new rectangle ought to be automatically selected as soon as it has been pasted.
12. Leave the new rectangle selected.
• Now set its color using the fill color picker in the Tools panel that you used before.
• Specify #FF9966 in the pop-up color palette that opens.
  • This color is four rows up from the bottom and in the third column from the right.
• Alternatively, you can manually type the color number in, then press the Enter key on your keyboard to set it.
• This is what your rectangle ought to look like:
  
13. Using the arrow keys on your keyboard, move the new rectangle to a position slightly to the right of the first rectangle.
14. Now you should have two rectangles with slightly different colors. The horizontal ("X") position of the rectangles is not too important, but the "Y" value of each rectangle in the Properties panel ought to be 0 (zero) and their "W" (width) and "H" (height) of each ought to be the same: 215 and 80 respectively . Your file ought to look something like the following (but not as small as this reduced image size):
    
15. You have now learned how to use your keyboard to do precision positioning and sizing. You are also done with this part of the exercise!

Top

Making the text

1. Set your view magnification to 100% by clicking on Ctrl-1 (that's a one) or using the menu: View -> Magnification -> 100%.
• ALWAYS judge the appearance of text at 100%, otherwise you will be seeing a distortion of the way the text will appear, particularly along the edges of the letters.
2. Select the Text tool. It is the button with the T icon in the Tools panel (see illustration of Tools panel above).
3. Click anywhere in the image area.
4. Type the words: Today's Special.
• For now, it does not matter what size the text is, where it is located, or the font that is being used.
5. After you type the words, select the Pointer tool (black arrow). Make sure that the text you just created is selected (blue outline), if not, click once on it..
6. In the Properties panel set the following in this order (as per the illustration):
   1. Set the font to one of your choosing. Times New Roman is a good choice, but try others if you like.
   2. To the right of the setting Regular, set the size of the font to 72 or a size that you like.
   3. Set the color of the text using the color selector to the right of the size setting. The setting in the illustration is #660000 but you can pick any color that you like, just be sure that the color you select will stand out against the background so that it is clearly legible.
   4. Enable the bold (B) and italics (I) buttons.
   5. Next, look for the A with arrows pointing both left and right underneath it. This sets the width of the words. Set it to 84% of the width of the normal characters.
   6. Now double click on the words and you will be put into the text edit mode, the text tool (the T) will become enabled. Then click-drag over the three characters: y's ...of the word Today's. You may notice that the distance between those characters is a bit too wide. Therefore you will adjust the kerning (the gap) between those characters. This is important to do with large text such as what you have created. Now look on the Properties panel for AV with arrows pointing both left and right underneath it. Set it to -9.
   7. Find the drop down menu that controls the text's Anti-Aliasing Level setting.
      • Anti-aliasing means creating a blend of color between the foreground (text) color and the background (Canvas) color to give the visual illusion of smoother edges on the diagonal and curved edges in the text.
      • IMPORTANT: As mentioned previously, you can only view the effect of the Anti-Aliasing Level in the main window of Fireworks, not in the Text Editor. (Also, your view size must be 100% in order for you to make an accurate judgment, as specified in Step 1).
      • Change the Anti-Aliasing Level to one that you think makes the text look the best. Choose from the top four options in the drop-down menu. Those options are listed below:
        • No Anti-Alias (this will probably appear the worst of the four)
        • Crisp Anti-Alias
        • Strong Anti-Alias
        • Smooth Anti-Alias
7. Now your settings ought to be the same as the ones in the illustration of the Properties panel.

Position the Text

1. Use the Pointer tool to select and position the entire block of text where you want it.
   • You can refer to the illustration of the banner in the "Add another picture" section further down on this page for an approximate position. NOTE that the example image is reduced in size and therefore will appear much smaller than your file will appear.
   • If you cannot see your entire banner but would like to do so in order to make it easier to position the objects, do the following:
     • Ctrl + 5 will reduce the magnification of your image to 50%. This should allow you to see the entire banner.
     • Then use your Pointer tool or arrow keys to position the rectangles or text to where you would like them to go.
       • You may want to temporarily use the Select Behind tool to make it easier to select the rectangles that are behind the text in order to move them. You can get this tool by clicking and holding on the Pointer tool in the Tools panel and selecting it from the menu that appears.
       • To use the Select Behind tool to select a rectangle (in order to move the rectangle), click once or twice on the rectangle until you see the little blue squares on the rectangle's corners, indicating that it is selected. Then use the arrow keys on your keyboard to move the rectangle left or right into an appropriate position.
       • When done using the Select Behind tool, re-select the Pointer tool in the same way that you selected the Select Behind tool.
     • Return magnification to 100% using Ctrl + 1 (that's a number one).
2. Save the changes that you have made so far by using:
• Ctrl + S or...
• File -> Save

Top

Adding transparency to a GIF file

Next, we will take an old-fashioned illustration of the sun and remove the lighter colors from it so that we can see our yellow background color come through while retaining the darker colors to keep the image looking like the sun. See the group of three illustrations below of the sun. It shows the progression of the image as it has color removed from it replaced by transparency. The transparency allows the yellow background to come through.

The GIF image file format allows you to select one or more of the colors in an image and remove them, leaving transparency where the color had been. If the image is then superimposed over a color background, the background color will be seen through those transparent areas.

Note that GIF = Graphics Interchange Format. It is pronounced "giff" with a hard or a soft G.

We want the yellow color of our banner's background to be seen through all but the darkest parts of the old-style illustration of the sun that initially has a white background.

1. Download the zip file linked to at the very beginning of this tutorial.
2. Put the two files that are inside of it (asparagus.jpg and SunBefore.gif) into the images folder you created.
3. Using Fireworks' File menu, open the image file of the sun: SunBefore.gif
   • Leave the BNR_yourlastname.png file open.
4. Then, go to menu: File -> Image Preview
5. In the Image Preview dialog box that opens, in the upper left section, from top to bottom make these settings if needed:
   1. Format: GIF
   2. Palette: WebSnap Adaptive, Web Adaptive, or Adaptive.
6. Then, underneath the color palette area, select: Index Transparency. Your settings should look like the following illustration. Note that one of the small color swatches now has a light gray checkerboard pattern in it. That is the universal graphics symbol for transparency:
   
   

Fireworks assumed that we wanted to make only the white color transparent, because it is the predominant color in the illustration. Therefore, initially, only the white area has been made transparent.

As mentioned above, transparency is traditionally represented in graphics programs such as Fireworks by a gray and white checkerboard pattern. If you look closely you will notice that not only does the small color swatch have that gray and white checkerboard, but that the pattern also appears behind the sun in the image preview area on the right side of the Image Preview dialog box.

There is a problem with setting only the white area to be transparent. This problem becomes very apparent when the image is seen against our dark yellow background color - there will be a light colored fringe around the dark colors. This is what would happen if we were to use only the preliminary transparency setting (see the middle illustration):

The fringe consists of the light gray color pixels that remained in the image after only the pure white pixels were replaced initially by transparency. Those light grays can be seen on the left side of the Image Preview dialog box in the color swatches. All of the gray color swatches that the image now consists of are represented there.

You may not think that there are that many colors in the image because it looks as if the remaining shapes are a uniform dark gray. However, if you were to look closely at the edges of the dark gray shapes, you would see pixels with those colors. Here is a picture of some of those remaining pixels greatly enlarged:

Because of this, we need to select the light grays that remain in the image and designate that they too be made transparent. The darker grays that remain will be enough to adequately represent the image of the sun.

1. Click on the "+" eyedropper tool on the left side of the Image Preview dialog box.
• It is the middle eyedropper, the one that will display the tool tip "add color to transparency" when you hover over it.
  
2. Then use that tool to make transparent the lighter colors by clicking on them. Click on all but the three or four darkest grays in the group of color swatches.
• This step will make the gray colors that get clicked on transparent.
• The color swatches will change to the light gray and white checkerboard pattern as you click on them, indicating that those color pixels have been made transparent.
• Again, this is being done because removing the lighter grays by converting them to being transparent will prevent the fringe of light pixels from being seen when we put this image on top of the banner's yellow background color.
• All but the three or four darkest grays ought to remain. The rest ought to have the gray and white checkerboard pattern in each of their swatch sections.
3. Luckily for you, this file is already the exact size for the height of the banner: 80 pixels high, so you need not be concerned with changing the image size.
4. Click on the Export button in the bottom right corner of the Image Preview dialog box.
5. In the Export dialog box that appears:
   • Change the File name to: Sun
     • The .gif file extension will be added automatically therefore you do not need to add it unless you want to (another .gif would not be added to the end of the file name if you did).
   • Save the file in your images folder.
6. Click on Save.
7. If the Image Preview dialog box remains open, click on OK to save the export settings that you made.
8. Save SunBefore.gif and close it.

Top

Put the sun on your banner

1. Open the file you just made (Sun.gif) in Fireworks using File -> Open.
2. Press Ctrl + A on your keyboard to select the image. A thin light blue borderline indicates that the sun is selected.
3. Then use Edit -> Copy to copy it, or else simply use Ctrl + C.
4. In Fireworks, use the bottom of the Window menu to select to the file BNR_yourlastname.png or click on its tab.
5. Paste the sun on the banner using Edit -> Paste, or Ctrl + V .
6. With the image of the sun that you just pasted selected (blue outline), use the Properties panel, to set both the X and the Y to 0 (zero). This will move the sun image to the far left edge of the banner and position it flush with the top and bottom edges of the banner.
7. Note that you should not see any fringe. If you do, try setting the transparency again by starting at the beginning of the prior section.
   

Add another picture

1. Using Fireworks' File -> Open menu, open the other file that was originally in the zip file: asparagus.jpg. It should be in your images folder.
2. Use Ctrl + A to select the image. It should have a thin, light blue borderline around it indicating that it is selected.
3. Use the Edit menu to Copy the image.
4. Go to your banner file.
5. Use Edit -> Paste to paste the image of the asparagus down. It will probably be put on the far left edge of the banner, directly on top of the sun image.
6. Using the Properties panel, set its position to be X = 108 and Y = 0.
7. Now use the Pointer tool to select and the arrow keys to position the rectangles and text into positions that you are happy with.
• You can use the illustration below as a guide if you are not sure what you like.
8. Now use Ctrl + S to save the BNR_yourlastname.png file. It should look something like the image below (but larger).

Top

Slicing the banner

Image slicing carves up an image into smaller pieces. It is used for a few reasons, including these, which are what we will be using it for:

• Slicing can divide up a single image into parts so that links may be added to a section(s) of the image.
• It can be used to optimize (set the file type and size in KB) different parts of an image by using different settings for the different slices.
• It can also help the overall image seem to load faster because smaller images load in their entirety faster than larger ones. The viewer will begin seeing a part of the image sooner than if the viewer waited to see the original, whole image download.

Slicing divides up the image into several smaller image files. It also generates an html file with coded instructions on how the slices are to be reassembled using an html table.

An html table is a set of rows and columns created in html that you can use to hold images, text, and other objects. Each compartment of it is called a cell (similar to Excel).

You may be interested to know that there are three html tags used to make a table. All of them must be used in order to form a table. They are: <table>, <tr> (table row), and <td>, which stands officially for table data, but simply means a single cell.

The table (the html code and images) that we will create using slicing can be used in other html pages if so desired. That is what might be done in a situation such as this. Our sliced banner could be placed in another page that has additional content such as a picture and description of the day's special.

1. The first step is to select the image of the sun on the left end of your banner by clicking on it with the Pointer (black arrow) tool.
2. Then go to: Edit -> Insert -> Rectangular slice.
3. As soon as you have made the slice, select the Pointer (black arrow) tool by pressing the V key on your keyboard or selecting it from the Tools Panel.
4. The image area over the sun ought to now be a transparent green (see illustration above), indicating that it will be made into a slice of the banner and also making it available for linking to another web page, which we will do.
5. Select the green slice using the Pointer tool. The green area should have a light blue borderline if it is selected (see illustration above).
6. Look at your Properties panel.
• If for some reason you do not see your Properties panel, go to Window -> Properties.
7. Create a link to Google by entering the full web address into the Link field in the Properties panel. Be sure to include the prefix: http://
   • http://www.google.com
   • Note that typically clicking on this part of a web page (the upper left corner) will usually go to the site's home page. We are using Google only for testing the link.
8. Also in the Properties panel is a Target drop down menu. Set it to _blank. This will cause the link to open in a new browser window.
9. Press F12 (Option-F12 Mac) on your keyboard to test if the link works in your browser. Fireworks should generate a TMP (temporary) html file to allow you to view the sliced image in a web page. Don't be alarmed if there is a large yellow area around it, Fireworks will, by default, extend your background color to the rest of the web page. Click on the link. The Google site ought to open in a separate window.
10. Now use your Pointer tool to click on the image of the asparagus.
11. Then once again go to: Edit -> Insert -> Rectangular slice.
12. This will put a transparent green slice over the asparagus.
13. Select the Slice tool (see illustration).
14. Now we want to make one more slice that includes the remainder of the banner which is the entire right side of it: click and drag over the remainder of the banner trying not to overlap the other slices. This will create a third slice. If you want to change the slice you made you can use the Pointer tool to drag on its corners to position or resize it.
15. Immediately select the Pointer tool so that you do not inadvertently create new tiny slices.
16. Now you ought to have a total of three (possibly more if your slices were not perfectly touching each other, which is OK) green slices with every part of the banner covered by one of them.
17. Set the optimization settings using the Optimize panel. If you don't see it, go to the Window menu and select Optimize.
    • Using the Pointer tool, click on each sliced section, one at a time, and check its settings.
      • Using the menu at the top of the Optimize panel set the slice over the photo of the asparagus to JPEG - Better Quality
      • Set the other two other slices to GIF WebSnap 128.
    • Leave the other settings as you found them.
18. Once that's done, go to File -> Export which will open the Export dialog box.
19. In the Export dialog box, make the following settings (and don't save the file until you are told to do so!):
    • At the top is: Save in:
      • Create a new folder inside your images folder.
      • Name the new folder slices.
      • Then open the slices folder so that you will save the exported files in it.
    • Continue to set the Export dialog box as follows (some of these settings may already be established so you probably won't need to change them all):
      • File name: banner (you don't need to add file extensions, Fireworks does it for you).
      • Export: HTML and Images
      • HTML: Export HTML File
      • Slices: Export Slices
      • De-select the checkbox for Selected slices only.
      • The checkbox for Include Areas without Slices ought to be checked.
      • Leave the other settings at their defaults.
20. Click on Save and remember the location where you are exporting the files to.
21. Save your Fireworks file using File -> Save or Ctrl-S.
22. Open in your Web browser (Internet Explorer, Firefox, Safari, or any other) the html file that was just created in the slices folder, using the browser's menu: File -> Open.
23. You should see it all perfectly reassembled and the link ought to work.
• Again, please note that the area outside of the banner will probably be colored the same as the banner's yellow background color. This is normal. Under normal circumstances this would not matter because our intention is to insert only the banner's table into another html file and not the rest of the yellow background.

Submitting Your Work:

• Save and then send me the Fireworks .png file only. It should be named (unless instructed in a classroom course to name it differently): BNR_yourlastname.png (substitute your last name).
  • Do not send me the html or other files.
  • I only want your final Fireworks png file.
• In your email subject line please include:
  • Include the course code you have been given in the course outline or rules section.
  • Include the subject line the letters: BNR

Congratulations, you did it!

*gulp*...you did, didn't you? ;-)

Top

© 2012 Dan Hitchcock Vaughan and its licensors. All rights reserved.