Candyce Mairs

Candyce Mairs

Preparing a PNG File for Export

Slide Duration:

Table of Contents

Section 1: Becoming Familiar with Fireworks
Exploring the Fireworks: Web Workflow Project

2m

Getting to Know the Fireworks Interface

5m 26s

Fireworks CS6 New Features

5m 20s

Section 2: Working with Web Pages
Why Do I Need an HTML Editor?

7m 1s

What Does CSS Do?

2m 49s

Defining a Local Site in Dreamweaver

5m 56s

Becoming Familiar With the Dreamweaver Interface

7m 54s

Section 3: Planning the Page Layout
What is a Wireframe?

6m

Web Typography

4m 46s

Section 4: It all begins with Slicing
What is Slicing?

5m 4s

Learning About The Slice Tool

5m 52s

Slicing Techniques

6m 1s

Section 5: Optimizing Images
What is Optimization?

7m

Using Image Formats for the Web

6m 10s

Exploring How to Optimize an Image

8m 49s

Exporting an Optimized Image

3m 59s

Section 6: Preparing for Export
Preparing a PNG File for Export

8m 28s

Working with the Common Library

13m 13s

Adding Slices to the Design

5m 54s

Optimizing Design Slices

8m 36s

Setting up the Navigation Bar

4m 59s

Section 7: The Export Process
Exporting the PNG File

6m 2s

Correcting the Export Issues

8m 6s

Fixing Final Code

7m 58s

Fine Tuning the Layout

6m 54s

Adding Drop Shadows using CSS

8m 32s

Adding Background Gradients using CSS

7m 56s

Working with Curved Corners

5m

Browser Support for CSS3 Properties

4m 7s

Section 8: Working with the Pages Panel
Exploring the Pages Panel

4m 24s

Creating a Master Page

5m 31s

Creating Pages from a Master Page

7m 13s

Exporting Individual Pages from a PNG File

5m 2s

Section 9: Adding a Popup Menu
What is a Popup Menu?

3m 24s

Creating a Popup Menu

8m 22s

Adding Additional Popup Menus

5m 19s

Section 10: Exporting Popup Menus
Exporting Popup Menus

4m 29s

Exporting as HTML and Images

6m 12s

Copying the Coding Part 1

6m 59s

Copying the Coding Part 2

6m 47s

Correcting the Image Location

2m 8s

Adjusting and Previewing Our Final File

7m 11s

Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Fireworks: Web Workflow
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
  • Discussion

  • Study Guides

  • Table of Contents

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Preparing a PNG File for Export

  • It is always a good idea to organize your png file before you begin the export process
  • Be sure to eliminate any layers you no longer need
  • Be sure all slices have descriptive names with no spaces
  • Check all the rectangles to confirm that they are set up & spaced correctly
  • Convert any heading text to heading symbols in HTML
  • Think about what we want to be HTML elements
  • We need to optimize all slices within the graphic design
    Educator®

    Please sign in to participate in this lecture discussion.

    Resetting Your Password?
    OR

    Start Learning Now

    Our free lessons will get you started (Adobe Flash® required).
    Get immediate access to our entire library.

    Membership Overview

    • Available 24/7. Unlimited Access to Our Entire Library.
    • Search and jump to exactly what you want to learn.
    • *Ask questions and get answers from the community and our teachers!
    • Practice questions with step-by-step solutions.
    • Download lecture slides for taking notes.
    • Track your course viewing progress.
    • Accessible anytime, anywhere with our Android and iOS apps.