[Label] [Fireworks] Reproduced Web Slices-fireworks CS5

Source: Internet
Author: User

Web Slices–fireworks CS5


Need a Website? Contact Us now!

This entry was part of the series Fireworks CS5 Tutorial

it is time-to-slice up the layout of the Web now, that It's ready.

slicing is a process where we decide which parts of the layout need to stay as images and which parts could be recreated In HTML. The more the images, the more the file size and so, the loading time.

some images that would need to be sliced is:

    • logo
    • Photos
    • background gradients

if we decide that something needs to remain a image in our final Web page we need to decide which format would suit it be St (i.e. gif, JPG, PNG). We need to optimize these images to load quickly on the web (smaller files size) and look good at the same time.

some points to keep in mind while optimizing images is:

    • images with flat colors would be the best optimized as. gif files. Gif files also allow transparency. Gif files can also be animated.
    • images with many colors e.g. photos, would be better optimized as. jpg Files.
    • .png files can retain vector information and  transparency

What's our layout looks like now:

Let us first slice the logo. To does this follow these steps:

  • Select The Slice tool
  • Create a rectangle around the logo
  • You has now created a slice
  • You'll be able to see a green tansparent rectangle over the logo.
  • You'll also notice a new layer in the WEB layer in the Layers panel, called ' Slice '. Rename this to ' logo '.
  • You'll notice that the name on the slice would also become ' logo '
  • Now optimize the slice by selecting ' jpeg–better quality ' from the ' Properties ' panel.
  • Export this slice is clicking on it and selecting ' Export Selected slice '.

Similarly slice and export the photo and a thin slice of the header background gradient.

You can optimize the slices by comparing the quality and file size with various options by using the 2-up and 4-up Previe Tool.

you can also export all the sliced images together by:

    • from the main menu select ' File '

in the window that opens, select:

    • export:images only
    • slices:export Slices

Now there is a images you need to begin creating your webpage using an HTML editor.

Fireworks Source File (Save as onto your computer)

[Label] [Fireworks] Reproduced Web Slices-fireworks CS5

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.