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

Web Slices–fireworks CS5

http://bestwebdesignz.com/tips/fireworks/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