Scribd Logo
Upload

Welcome to Scribd!

  • 16 views

    Creating The Banner With Fireworks

    Uploaded by

    Carlos Moncadasuarez
    The document provides instructions for creating a banner and footer in Adobe Fireworks. It describes opening a new Fireworks document, setting dimensions and color, and saving files. It then guides creating shapes and text, applying styles and effects, combining images, slicing elements, and exporting files. Key steps include drawing rectangles, adding gradients and textures, inserting text with different fonts and styles, positioning elements, and exporting sliced components as separate graphics.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Creating The Banner With Fireworks

    Uploaded by

    Carlos Moncadasuarez
    16 views4 pages
    The document provides instructions for creating a banner and footer in Adobe Fireworks. It describes opening a new Fireworks document, setting dimensions and color, and saving files. It then guides creating shapes and text, applying styles and effects, combining images, slicing elements, and exporting files. Key steps include drawing rectangles, adding gradients and textures, inserting text with different fonts and styles, positioning elements, and exporting sliced components as separate graphics.

    Original Title

    FireworksExercise.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides instructions for creating a banner and footer in Adobe Fireworks. It describes opening a new Fireworks document, setting dimensions and color, and saving files. It then guides creating shapes and text, applying styles and effects, combining images, slicing elements, and exporting files. Key steps include drawing rectangles, adding gradients and textures, inserting text with different fonts and styles, positioning elements, and exporting sliced components as separate graphics.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    16 views4 pages

    Creating The Banner With Fireworks

    Uploaded by

    Carlos Moncadasuarez
    The document provides instructions for creating a banner and footer in Adobe Fireworks. It describes opening a new Fireworks document, setting dimensions and color, and saving files. It then guides creating shapes and text, applying styles and effects, combining images, slicing elements, and exporting files. Key steps include drawing rectangles, adding gradients and textures, inserting text with different fonts and styles, positioning elements, and exporting sliced components as separate graphics.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 4

    Creating the Banner with Fireworks

    1. Open a new Fireworks Document.


    a. Width: 750px
    b. Height: 128px
    c. Resolution: 72px
    d. Canvas color: White
    2. Save your graphic in the originals folder as banner.png

    3. On the Optimize Panel, Choose JPEG Better Quality, JPEG, and 80 for the Quality.

    4. Use the Rectangle Tool and draw a small rectangle on your canvas. With the rectangle selected, use the
    Properties Panel to:
    a. Make the width 750px
    b. Make the height 110px
    c. Have an X Position of 0
    d. Have a Y Position of 0
    e. Name the object Background

    1 of 4

    Creating the Banner with Fireworks


    5. With the rectangle selected make the following changes on the Properties Inspector:
    a. Texture: Line-Horiz 1
    b. Percentage: 88%
    c. Fill: Linear
    d. Edge: Anti-Alias

    6. Click on the Color Palette.


    a. Make your fill colors Dark Red (#990000) on left.
    b. Off-White (#FFFFCC) on right.
    c. Click below colored bar to add a gradient marker and set it about 2/3 to the right.

    7. Combine images to use on banner.


    a. In the images folder open the school.png graphic
    b. Open the elksign.png and Copy/Past on the school picture.
    c. Flatten layers
    d. Change the Opacity to 50%.
    e. Copy/paste the graphic to the banner graphic. Position the image as seen below.

    2 of 4

    Creating the Banner with Fireworks


    8. Use the Rectangle Tool and draw a small rectangle on your canvas. With the rectangle selected, use the
    Properties Panel to:
    a. Make the width 750px
    b. Make the height 18px
    c. Has a X Position of 0
    d. Has a Y Position of 110
    e. Make the fill color Solid and Red (#990000)
    f. Amount of Texture: 0

    9. Choose the text tool with the following specifications (make changes on the Properties Panel)
    a. Font Trebuchet MS
    b. Size 40
    c. Bold
    d. Color: White (#FFFFFF)
    e. Type: Burleson High School (Line 1) Home of the Elks (Line 2)
    f. Resize line 1 to 56px
    g. On the properties Panel, choose Filter > Shadow and Glow > Drop Shadow
    10. Choose the text tool with the following specifications (make changes on the Properties Panel)
    a. Font Verdana
    b. Size 11
    c. Italics
    d. Type: Our mission is to inspire, nurture and guide those around up to attain their true potential.
    e. Change the Horizontal Scale to 143%
    11. Position both text items as seen below. To align precisely, select both both text items (make sure nothing
    else is selected) Choose Modify > Align > Left.
    Your finished banner should look like the image below.

    3 of 4

    Creating the Banner with Fireworks


    Now it is time to break our graphic into parts with slicing. We want our large rectangle and small rectangle
    to be exported as separate graphics
    12. Select your large rectangle (It will have a blue border when it is selected.).
    a. Go to the Edit Menu > Insert > Rectangular Slice. A green slice now appears on your large
    rectangle.
    13. Right-click the slice. Choose Export Selected Slice. Export the slice as topbanner.jpg to the web_ready
    folder.
    14. Repeat steps 13 and 14 on your small rectangle. Export this slice as subbanner.jpg to the web_ready
    folder.
    15. Save your banner.png to the originals folder.

    Creating the Footer with Fireworks


    1. Open a new Fireworks Document.
    a. Width: 750px
    b. Height: 45px
    c. Resolution: 72px
    d. Canvas color: White
    2. Save your graphic in the originals folder as footer.png.
    3. Use the Rectangle Tool and draw a small rectangle on your canvas. With the rectangle selected, use the
    Properties Panel to:
    a. Width 750px
    b. Height 45px
    c. X Position of 0
    d. Y Position of 0
    e. Object name: Footer
    4. With the rectangle selected make the following changes on the Properties menu:
    a. Texture: Line-Horiz 1
    b. Percentage: 88%
    c. Fill: Linear
    d. Edge: Anti-Alias
    e. Make your fill colors Dark Red (#990000) on left.
    f. Off-White (#FFFFCC) on right.
    g. Click below colored bar to add a gradient marker and set it about 2/3 to the right.
    h. Click on the Pointer Tool and rotate your liner gradient to a vertical position Red at the top
    should fade to Off-White.
    5. Export a jpeg copy to the web_ready folder.
    6. Save your file as footer.png to the originals folder.

    4 of 4

    You might also like