Start learning with our library of video tutorials taught by experts. Get started

Creating an Online Resume: Hands-On Training

Optimizing and exporting background tiles in Fireworks


From:

Creating an Online Resume: Hands-On Training

with Laurie Burruss

Video: Optimizing and exporting background tiles in Fireworks

So we have completed steps one and two of creating the graphic and slicing the graphic, and now we're ready to optimize and export our graphics. In order to do this, we go up with our Selection tool, select the graphic, and it does help to see it a little bit larger. So I'm going to move this up to 300%. And then I'll take my Hand tool, by pressing on the spacebar, and move that up where you can see what I'm doing. And when I'm doing optimization you'll notice that as soon as I select an item, the Optimization panel is already showing that it's GIF Adaptive 256.
Expand all | Collapse all
  1. 9m 10s
    1. Welcome
      50s
    2. Using the exercise files
      4m 57s
    3. Creating a custom font list
      3m 23s
  2. 23m 7s
    1. Overview
      1m 52s
    2. Distributing your resume
      3m 29s
    3. Resume formats
      6m 43s
    4. Comparing good and bad resumes
      11m 3s
  3. 38m 0s
    1. Striving for fluidity, not rigidity
      5m 12s
    2. Font types, web-safe fonts, and font measurements
      10m 44s
    3. Principles of typography
      10m 35s
    4. Online resources and applications
      11m 29s
  4. 1h 26m
    1. Setting up the web site folder
      2m 46s
    2. Defining the web site
      3m 43s
    3. Setting up a custom workspace
      5m 26s
    4. Creating a new web page with resume content
      4m 56s
    5. Marking up header tags
      3m 53s
    6. Inserting tags for unordered lists
      3m 43s
    7. Inserting tags for definition lists
      3m 12s
    8. Formatting URLs
      5m 23s
    9. Creating and linking an external style sheet
      5m 9s
    10. Styling the body tag
      15m 31s
    11. Styling the header tags
      8m 6s
    12. Styling the paragraph tags
      4m 3s
    13. Styling an unordered list
      3m 48s
    14. Styling a definition list
      6m 1s
    15. Creating a custom class style
      4m 20s
    16. Creating a custom ID style
      3m 32s
    17. Applying a print-specific CSS layout
      2m 54s
  5. 52m 24s
    1. Creating a new document in Fireworks
      6m 15s
    2. Creating a background tile in Fireworks using Gradient Fill and Texture Fill
      5m 59s
    3. Slicing background tiles in Fireworks
      2m 37s
    4. Optimizing and exporting background tiles in Fireworks
      6m 12s
    5. Creating background tiles using online applications
      6m 5s
    6. Creating a page-like resume
      3m 50s
    7. Deleting unneeded CSS styles for this resume version
      1m 56s
    8. Adding a Wrapper div
      3m 33s
    9. Styling the Wrapper div
      8m 52s
    10. Controlling the vertical spacing
      1m 24s
    11. Zeroing out margins and creating a faux drop shadow
      5m 41s
  6. 1h 9m
    1. Setting up the HTML and CSS documents
      2m 15s
    2. Deleting unneeded CSS styles for the pro version
      1m 12s
    3. Creating the Header div
      3m 37s
    4. Creating the Content div
      2m 25s
    5. Creating the Sidebar div
      2m 20s
    6. Styling the Wrapper and Sidebar divs
      4m 56s
    7. Styling the Content div
      3m 7s
    8. Styling the Header div
      3m 33s
    9. Nesting a div tag inside the Sidebar div and styling the sidebar content
      6m 21s
    10. Inserting images to create rounded page edges
      4m 12s
    11. Styling images
      3m 59s
    12. Clearing floats
      3m 55s
    13. Creating font-size style for the Body tag
      2m 13s
    14. Fine-tuning resume styles
      4m 38s
    15. Adding a border to the Content div
      2m 38s
    16. Linking to a PDF
      4m 58s
    17. Organizing styles in the CSS panel and inserting comments in the style sheet
      4m 42s
    18. Creating and styling a print style sheet
      8m 56s
  7. 1m 33s
    1. Goodbye
      1m 33s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating an Online Resume: Hands-On Training
4h 40m Intermediate Sep 24, 2009

Viewers: in countries Watching now:

In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.

Topics include:
  • Creating a simple text document for use inside Dreamweaver
  • Formatting HTML tags with semantic or meaningful markup such as unordered and definition lists
  • Externally linking a Cascading Style Sheet to a web page
  • Creating and applying unique styles to XHTML documents using HTML tags, compound selectors, custom classes, and IDs
  • Creating tiling background images in Fireworks
  • Using the DIV tag in combination with CSS to create effective layouts that organize content
  • Applying principles of web typography
Subject:
Web
Author:
Laurie Burruss

Optimizing and exporting background tiles in Fireworks

So we have completed steps one and two of creating the graphic and slicing the graphic, and now we're ready to optimize and export our graphics. In order to do this, we go up with our Selection tool, select the graphic, and it does help to see it a little bit larger. So I'm going to move this up to 300%. And then I'll take my Hand tool, by pressing on the spacebar, and move that up where you can see what I'm doing. And when I'm doing optimization you'll notice that as soon as I select an item, the Optimization panel is already showing that it's GIF Adaptive 256.

Now this is just by accident it happens to be the right choice because this is the way Fireworks, in fact, ships. But I want to go into the 2-Up Preview mode, so that you can see that there is the original and then here is the one that I'm actually previewing for export. Now GIF Adaptive is the correct one because what I want to do is make sure that the colors that are actually used inside this graphic are the ones in fact that Dreamweaver selects out. That's what adaptive means. Pick the colors of the palette inside that graphic.

A lot of people get this confused with what we call 'Web Safe' or 'WebSnap 256.' This means you can only use the 256 colors that are Web Safe between Windows and Macintosh. This is not what we want. So make sure you keep it with GIF Adaptive. The other thing that's good about GIF Adaptive it is particularly good for solid colors and for transparency, which is exactly what I have in this graphic. After you have made that selection, go down to the bottom of your Preview Window and make sure that it's the right size for what your website or web development team require and that your download speeds are okay.

Then lastly come down to your Property Inspector. And down here make sure that this says GIF Adaptive 256 because whatever you have selected here is how Fireworks will export this graphic. I'm going to go back up here to my image and I'm going to put my finger on the spacebar and move it over so that we can select that gradient. Now at this point, you can see that GIF Adaptive is not a good choice for the gradient. The gradient is a continuous tone and typically continuous tone images or photographic images look much better using JPEG.

So I'm going to go up here and choose JPEG. And by default, again, Fireworks chooses JPEG-Better Quality, which is a quality setting of 80. Just to show you what happens if you move this down, I'm going to take that slider and move it down around 17 or 20 and notice I get banding. This is not what I want with the gradient, I want continuous tone. So this is too low a quality setting. It's always a hard choice when you're optimizing. You're trying to make the graphic image size as small as possible but make the quality of the image look as much like the original.

So I'm going to move this quality setting back up to 80 because I know this is a very small graphic and won't really affect its file size. 60 to 80 quality is often the selection that I make. Again, I'll go down and make sure this is JPEG. I'll check to see what size it is and how long it's going to take to download, and finally I'll check to make sure that JPEG-Better Quality is what I have selected down in the Property Inspector and that this is what I'm going to use for my export settings. Now I can go back to my original view and then double-click on the magnifying glass to set it back to 100%.

Now if I want to export a number of images and slices on this page, I need to select, with my Selection tool, anything I want to export, and by using my Shift-click, add that to the selection. Or I can simply draw a line around this to make sure that I have got them all selected. But if you want to export multiple selections, make sure that you have more than one selected on your page. Now I can go up to File > Export and this will be a daunting dialog box, but I'm going to lead you through it.

So you'll go back to your Desktop and you're going to locate your project file, which is called, in this case, online_resume_lb. Double-click. And then you're going this time to choose your images folder. We do not want our source folder because these exported images are the ones we want to use on our webpage. Now don't be surprised, but I have already pre-baked or pre-made a number of images that you can play around with in this exercise, and pretty soon you're going to be able to see the two that we've created also inside this folder. By default, Fireworks puts down here that you want to use your myResume file to export to a webpage and images.

But that's not what we're doing at all. We already have a webpage in Dreamweaver. All we want to do is export only the images. So click on the drop-down menu. Select Images Only. Now HTML is completely grayed out, which is great, and we want to export these slices. So let's check carefully here. We only want to export the selected slices, which is why I emphasize make sure that you have everything on the page you want selected before you go into the dialog box. But we do not want to include the gray area around those slices. So deselect this.

And by gray area, I mean any of these background areas. I don't need all these gray rectangles to be exported. And I only want the current page. This may not make sense to you, but in Fireworks you can have a multi-page document. And we only want this page to be exported. So I've made sure that my images are in the right folder. I have made sure that I'm only exporting slices that are selected, and only images. And I can go ahead and click Save. At this point, there is nothing more that I can do in Fireworks, other than save my document.

So I'm going to go up here and go File > Save and choose File > Exit. But I do want, just so we can ensure that our images are in that folder, to go check back at my root level folder. Go into my images folder, and there is our background gradient and our background texture, just like we thought. So we're ready to jump back into Dreamweaver and start creating our webpage using background tiles in our style sheets.

There are currently no FAQs about Creating an Online Resume: Hands-On Training.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating an Online Resume: Hands-On Training.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Creating an Online Resume: Hands-On Training will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked