Macromedia Fireworks 8 Ontwerpen van webillustraties voor niet-grafici Versie 1.1 - januari 2006 Macromedia, Dreamweaver, Fireworks, Flash, Contribute, FlashPaper en FreeHand zijn handelsmerken of gedeponeerde handelsmerken van Macromedia, Inc. in de Verenigde Staten en/of andere landen. Alle overige handelsmerken en merknamen zijn eigendom van hun respectieve eigenaars. Speciale dank aan Lieve, Hilde en Guy voor hun meer dan gewaardeerde medewerking. 1
Inhoud 1 Inleiding....9 1.1 Nieuw in Fireworks 8....9 1.2 Inhoud van het boek....10 1.3 Voor wie is dit boek bedoeld?...10 1.4 Conventies...10 1.5 Systeemvereisten....11 1.5.1 Microsoft-Windows:...11 1.5.2 Mac-OSX:...11 1.6 Lesmateriaal bij dit handboek....11 1.6.1 Lesmateriaal installeren op PC....12 1.6.2 Lesmateriaal installeren op Macintosh...12 1.7 De helpfunctie...12 1.8 Extensies....13 1.9 Tips voor Adobe Photoshop gebruikers....14 1.10 Bronnen....15 2 Werkomgeving....17 2.1 Lay-out van het programma...17 Het werkblad (1):...17 Het Tools palet (2):...18 Het Properties palet (3):...18 2.2 Bitmap- vs. vectorobjecten....21 2.3 Objecten en layers...23 2.4 Het canvas...26 2.5 Het kleurenpalet...30 2.6 Linialen, grid en hulplijnen....33 2.7 Resolutie van naderbij bekeken...35 3 Vectorobjecten....41 3.1 Overzicht van de verschillende gereedschappen (tools)....41 3.2 Een nieuw object aanmaken...42 3.3 Eigenschappen van een object...44 3.3.1 Basiseigenschappen...44 3.3.2 Filters....45 3.3.3 Het styles palet...46 3.3.4 Menging (Blending)...48 3.4 De pen tool....49 3.4.1 Rechte lijnen tekenen:...49 3.4.2 Lijnen met een richtingscoëfficiënt:...50 3.4.3 Bézierpunten toevoegen:...50 3.4.4 Van gebogen naar rechte curves:...50 3.4.5 Bézierpunten verwijderen:...51 3.4.6 Van rechte naar gebogen curves:...51 3.4.7 Bézierpunt verplaatsen:...51 3.4.8 Richtingscoëfficiënt van een Bézierpunt aanpassen:...51 3.4.9 Verschillende richtingscoëfficiënten in één Bézierpunt:...52 3.5 Objecten groeperen....52 3.6 Objecten binnen een groep selecteren...53 3.7 Objecten combineren...54 Inhoud - 3
3.7.1 Union:...55 3.7.3 Punch:...56 3.7.4 Crop:...57 3.7.5 Join en Split:...58 3.8 Objecten vervormen....58 3.9 Werken met symbolen....60 3.10 Voorbeelden...62 3.10.1 Aqua buttons....62 3.10.2 Vectorieel Fireworks logo...65 3.10.3 Fotokader....66 4 Tekstobjecten....71 4.1 Tekst toevoegen...71 4.2 Overzicht van de verschillende eigenschappen....71 4.3 Teksteigenschappen bewaren....72 4.4 Tekstobject vervormen...72 4.5 Tekst aan een vectorobject verbinden....73 4.6 Tekst naar een pad converteren....74 4.7 Voorbeelden...74 4.7.1 Saturnus...74 4.7.2 Tekst rond foto...76 5 Bitmapobjecten....79 5.1 Een bitmapobject importeren...79 5.1.1 Open:...79 5.1.2 Import:...79 5.1.3 Drag en drop:...79 5.2 Van vector- naar bitmapobject....80 5.3 Overzicht van de verschillende Select tools....81 5.4 Bitmapobjecten en filters....82 5.5 Een gebied binnen een bitmapobject selecteren...82 5.5.1 Marquee tool:...82 5.5.2 Lasso en Polygon Lasso tool:...84 5.5.3 Magic Wand tool:...84 5.6 Een selectie binnen een bitmapobject manipuleren....85 5.6.1 Een selectie ongedaan maken:...85 5.6.3 Een deel van de selectie verwijderen:...85 5.6.4 Een selectie verplaatsen:...85 5.6.5 De inhoud van een selectie verplaatsen:...85 5.6.6 De inhoud van een selectie dupliceren :...86 5.6.7 Een inverse selectie maken:...86 5.6.8 Een selectie met enkele pixels vergroten of verkleinen:...86 5.6.9 Enkel de rand van een selectie selecteren:...86 5.6.10 Een selectie bewaren :...86 5.7 Filters op bitmapobjecten...87 5.8 Een selectie naar een vectorobject converteren...89 5.9 Bitmapobjecten tekenen....90 5.9.1 Pencil en Brush tool:...90 5.9.2 Paint Bucket en Gradient tool:...90 5.9.3 Eraser tool:...92 5.9.4 Tekenen in combinatie met een selectie:...92 4 - Fireworks 8
6 Bitmapobjecten retoucheren....93 6.1 Foto's retoucheren met behulp van een Live filter....93 6.1.1 Filters: Adjust Color....93 6.1.2 Filters:Blur....98 6.1.3 Filters:Sharpen...99 6.1.4 Filters: Other...100 6.2 Menu:Filters....101 6.3 Overige tools...101 6.3.1 Blur en Sharpen tool....102 6.3.2 Dodge en Burn tool....102 6.3.3 Smudge tool...102 6.3.4 Rubber Stamp tool....102 6.3.5 Replace Color tool...104 6.3.6 Red Eye Removal tool....105 6.4 Gescande beelden ontrasteren....105 6.5 Voorbeeld...107 6.5.1 Gescande postkaart bijwerken...107 7 Maskers...109 7.1 Maskeren met een vectorobject...110 7.2 Maskeren met een tekstobject....113 7.3 Maskeren met een bitmapobject...114 7.4 Masker en gemaskeerd object verplaatsen....115 7.5 Masker en gemaskeerd object van elkaar scheiden...116 7.6 Masker verwijderen...116 7.7 Voorbeelden...117 7.7.1 Gesofisticeerd tekstmasker....117 7.7.2 Gekleurde pepers...118 7.7.3 Gedeeltelijke lijntekening...119 8 Bestanden optimaliseren en exporteren....121 8.1 Het GIF-formaat...122 8.2 Het JPEG-formaat....128 8.3 Progressive JPEG en Interlaced GIF....130 8.3.1 Progressive JPEG:...130 8.3.2 Interlaced GIF:...130 8.4 Optimalisatie-instellingen bewaren....131 8.5 GIF of JPEG?...132 8.6 Een afbeelding exporteren...134 8.6.1 Optimize en Export:...134 8.6.2 Image Preview:...134 8.6.3 Export area tool:...135 8.6.4 Save As:...135 8.7 Andere exportformaten....135 8.7.1 Animated GIF:...135 8.7.2 PNG:...136 8.7.3 WBMP:...136 8.7.4 TIFF:...136 8.7.5 BMP:...136 8.7.6 PICT:...136 8.7.7 Macromedia Flash SWF:...137 Inhoud - 5
8.7.8 Adobe Photoshop PSD:...137 8.7.9 Adobe Illustrator 7:...137 9 Animaties....139 9.1 Frames...139 9.2 Animatie met symbolen...139 9.3 Animatie met onafhankelijke objecten....145 9.4 Animated GIF exporteren...146 9.5 Animated GIF openen in Fireworks....146 9.6 Animated GIF of Flash banner....146 9.7 Oefening....148 9.7.1 Saturnus...148 10 Hotspots en Slices...149 10.1 Imagemaps en hotspots....149 10.2 Slices....153 10.3 Fireworks-HTML importeren in Dreamweaver....156 10.4 Een eenvoudige rollover....158 10.5 Slices in het Preview venster....161 10.6 Behavior aanpassen en verwijderen...162 11 Knoppen en pop-up menu's...163 11.1 Knoppenbalk....163 11.2 Voorgedefinieerde knoppen....169 11.3 Pop-up menu....170 11.4 Pop-up menu in combinatie met frames....174 12 Productieproces versnellen...177 12.1 Zoek en vervang....177 12.2 Batch processing....179 12.3 Data-Driven Graphics Wizard....183 12.4 Reconstitute Table....188 13 Dreamweaver - Fireworks integratie....191 13.1 Dreamweaver configureren....191 13.2 Fireworks als Primary Editor instellen...192 13.3 Over de website...193 13.4 Achtergrond voor de website ontwerpen....194 13.5 De hoofding aanmaken...196 13.6 De navigatiebalk ontwerpen....199 Index...207 6 - Fireworks 8