mac

rom

edia

©

MET CD

Patrick Verhaert

F I R E W O R K S ©

Over het boek:

Fireworks MX 2004 is uitermate geschikt voor het ontwerp van webillustraties. Met talrijke voorbeelden en oefeningen maakt en bewerkt u de verschillende objecten (vectorobjecten, tekst en bitmapobjecten), en combineert u tot één compositie.In het tweede deel ligt de nadruk hoofdzakelijk op de op-timalisatie van Fireworksbestanden, zodat u deze later kan verwerken in website.

Waarschijnlijk koos u voor dit boek voor de aanmaak van webillustraties, en nadien de verwerking in Dreamweaver. In het laatste hoofdstuk gaat daarom extra aandacht naar de doorgedreven integratie tussen Fireworks en Dreamweaver.

Dit boek is een ideale aanvulling op “Dreamweaver MX 2004 – Initiatie” (ISBN 90.356.1175.6).

Voor wie is dit boek bedoeld?Dit boek is in eerste instantie bedoeld voor niet-grafi cus die zelf instaat voor het beeldmateriaal op zijn website. Met de technieken uit dit boek maakt u eenvoudige webillustraties professioneel aan, en integreert u ze in een website.

Over de auteur:

Patrick Verhaert studeerde in 1986 af als Industrieel Ingenieur Elektriciteit-Elektronica en is sindsdien als lector verbonden aan de Katholieke Hogeschool Kempen. Als docent “digitale technieken” raakte hij gefascineerd door de mogelijkheden van het Internet in het onderwijs. Dit resulteerde in de educatieve website “DigiTech”, waarmee hij verschillende awards behaalde.De laatste jaren heeft Patrick zich volledig omgeschoold tot webdesigner. Naast het ontwikkelen van websites en het verzorgen van Dreamweaver- en Fireworks-opleidingen, was hij mee actief in verschillende multimedia-projecten aan de KH Kempen. Patrick behaalde in 2003 het “Macromedia Dreamweaver MX 2004 Developer” certifi caat.

F I R E W O R K S ©

Volgende onderwerpen komen aan bod:• Vector-, bitmap- en tekstobjecten• Live effecten• Beelden retoucheren• Beelden maskeren• Bestanden optimaliseren (GIF, JPEG, ...)• Animaties• Hotspots en slices• Rollover-effecten en pop-up menu’s• Productieproces versnellen en automatiseren• Dreamweaver – Fireworks integratie

Besturingssystemen:• Mac OSX• Windows

De CD-ROM bevat:• “Trial” versies van Dreamweaver, Fireworks , Flash en

Contribute• Lesmateriaal• Links naar websites Patrick Verhaert

on

twer

p: w

ww

.art

loo

k.b

e

FIREW

OR

KS

© MX

2004

9 789035 611818

ISBN: 90.356.1181.0

Verhaert, Patrick – Macromedia Fireworks MX 2004 / Patrick Verhaert; Geel: Campinia Media vzw, 2004; 213 p; index; 24 cm; gelijmd. ISBN: 90.356.1181.0; NUGI 854; UDC 681.3.06 Wettelijk depot België: D/2004/3941/4 Campinia Media vzw Kleinhoefstraat 4 B – 2440 – GEEL (Belgium) Tel.: (+32) 014/59 09 59 Fax: (+32) 014/59 03 44 e-Mail: <info@campiniamedia.be> URL: <www.campiniamedia.be> Copyright 2004: No part of this book may be reproduced in any form, by print,

photoprint, microfilm or any other means without written permission of the publisher.

Niets uit deze uitgave mag worden verveelvoudigd en/of

openbaar gemaakt door middel van druk, fotokopie, print, microfilm of op welke andere wijze ook, zonder voorafgaande schriftelijke toestemming van de uitgever.

Macromedia Fireworks MX 2004

Ontwerpen van webillustratiesvoor niet-grafici

Macromedia, Dreamweaver, Fireworks, Flash, Contribute 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. ................................................................................................................91.1 Nieuw in Fireworks MX 2004. ....................................................................................91.2 Inhoud van het boek. ...............................................................................................101.3 Voor wie is dit boek bedoeld? ..................................................................................101.4 Conventies...............................................................................................................101.5 Systeemvereisten. ...................................................................................................11

1.5.1 Microsoft-Windows: .......................................................................................111.5.2 Mac-OS: ........................................................................................................11

1.6 Lesmateriaal bij dit handboek. .................................................................................111.6.1 Lesmateriaal installeren op PC. ....................................................................121.6.2 Lesmateriaal installeren op Macintosh..........................................................12

1.7 De helpfunctie..........................................................................................................121.8 Extensies. ................................................................................................................131.9 Tips voor Adobe Photoshop gebruikers. ..................................................................141.10 Bronnen. ................................................................................................................15

2 Werkomgeving. ...................................................................................................172.1 Lay-out van het programma.....................................................................................17

Het werkblad (1): ...................................................................................................17Het Tools palet (2): .................................................................................................18Het Properties palet (3): .........................................................................................18

2.2 Bitmap- vs. vectorobjecten. .....................................................................................212.3 Objecten en layers...................................................................................................232.4 Het canvas...............................................................................................................262.5 Het kleurenpalet.......................................................................................................302.6 Linialen, grid en hulplijnen. ......................................................................................332.7 Resolutie van naderbij bekeken...............................................................................35

3 Vectorobjecten. ...................................................................................................413.1 Overzicht van de verschillende gereedschappen (tools). ........................................413.2 Een nieuw object aanmaken....................................................................................423.3 Eigenschappen van een object................................................................................44

3.3.1 Basiseigenschappen. ....................................................................................443.3.2 Effecten. ........................................................................................................453.3.3 Het styles palet..............................................................................................463.3.4 Menging (Blending). ......................................................................................48

3.4 De pen tool. .............................................................................................................483.4.1 Rechte lijnen tekenen:...................................................................................493.4.2 Lijnen met een richtingscoëfficiënt: ...............................................................493.4.3 Bézierpunten toevoegen: ..............................................................................493.4.4 Van gebogen naar rechte curves: .................................................................503.4.5 Bézierpunten verwijderen:.............................................................................503.4.6 Van rechte naar gebogen curves: .................................................................503.4.7 Bézierpunt verplaatsen: ................................................................................503.4.8 Richtingscoëfficiënt van een Bézierpunt aanpassen:....................................513.4.9 Verschillende richtingscoëfficiënten in één Bézierpunt: ................................51

3.5 Objecten groeperen. ................................................................................................523.6 Objecten binnen een groep selecteren....................................................................533.7 Objecten combineren...............................................................................................53

Inhoud - 3

3.7.1 Union: ...........................................................................................................543.7.3 Punch: ...........................................................................................................563.7.4 Crop: .............................................................................................................563.7.5 Join en Split:..................................................................................................57

3.8 Objecten vervormen. ...............................................................................................583.9 Werken met symbolen. ............................................................................................603.10 Voorbeelden...........................................................................................................62

3.10.1 Aqua buttons. ..............................................................................................623.10.2 Vectorieel Fireworks logo. ...........................................................................643.10.3 Fotokader. ...................................................................................................65

4 Tekstobjecten. .....................................................................................................714.1 Tekst toevoegen.......................................................................................................714.2 Overzicht van de verschillende eigenschappen. .....................................................714.3 Teksteigenschappen bewaren. ................................................................................724.4 Tekstobject vervormen.............................................................................................724.5 Tekst aan een vectorobject verbinden. ....................................................................734.6 Tekst naar een pad converteren. .............................................................................744.7 Voorbeelden.............................................................................................................74

4.7.1 Saturnus........................................................................................................744.7.2 Tekst rond foto...............................................................................................76

5 Bitmapobjecten. ..................................................................................................795.1 Een bitmapobject importeren...................................................................................79

5.1.1 Open: ............................................................................................................795.1.2 Import: ...........................................................................................................795.1.3 Drag en drop: ................................................................................................79

5.2 Van vector- naar bitmapobject. ...............................................................................805.3 Overzicht van de verschillende Select tools. ...........................................................815.4 Bitmapobjecten en effecten. ....................................................................................825.5 Een gebied binnen een bitmapobject selecteren.....................................................82

5.5.1 Marquee tool: ................................................................................................825.5.2 Lasso en Polygon Lasso tool: .......................................................................845.5.3 Magic Wand tool: ..........................................................................................84

5.6 Een selectie binnen een bitmapobject manipuleren. ..............................................855.6.1 Een selectie ongedaan maken:.....................................................................855.6.3 Een deel van de selectie verwijderen:...........................................................855.6.4 Een selectie verplaatsen: ..............................................................................855.6.5 De inhoud van een selectie verplaatsen: ......................................................855.6.6 De inhoud van een selectie dupliceren : .......................................................865.6.7 Een inverse selectie maken: .........................................................................865.6.8 Een selectie met enkele pixels vergroten of verkleinen: ...............................865.6.9 Enkel de rand van een selectie selecteren: ..................................................865.6.10 Een selectie bewaren :................................................................................86

5.7 Filters en effecten op bitmapobjecten......................................................................875.8 Bitmapobjecten tekenen. .........................................................................................89

5.8.1 Pencil en Brush tool: .....................................................................................895.8.2 Paint Bucket en Gradient tool: ......................................................................895.8.3 Eraser tool:....................................................................................................915.8.4 Tekenen in combinatie met een selectie: ......................................................91

4 - Fireworks MX 2004

6 Bitmapobjecten retoucheren. ............................................................................936.1 Foto's retoucheren met behulp van effecten............................................................93

6.1.1 Effecten: Adjust Color....................................................................................936.1.2 Effecten:Blur..................................................................................................986.1.3 Effecten:Sharpen. .........................................................................................996.1.4 Effecten: Other. ...........................................................................................100

6.2 Filters. ....................................................................................................................1016.3 Overige tools..........................................................................................................101

6.3.1 Blur en Sharpen tool. ..................................................................................1026.3.2 Dodge en Burn tool. ....................................................................................1026.3.3 Smudge tool. ...............................................................................................1026.3.4 Rubber Stamp tool. .....................................................................................1026.3.5 Replace Color tool.......................................................................................1046.3.6 Red Eye Removal tool. ...............................................................................105

6.4 Gescande beelden ontrasteren. ............................................................................1056.5 Voorbeeld...............................................................................................................107

6.5.1 Gescande postkaart bijwerken....................................................................107

7 Maskers..............................................................................................................1097.1 Maskeren met een vectorobject. ............................................................................1107.2 Maskeren met een tekstobject. ..............................................................................1137.3 Maskeren met een bitmapobject. ...........................................................................1147.4 Masker en gemaskeerd object verplaatsen. ..........................................................1157.5 Masker en gemaskeerd object van elkaar scheiden..............................................1167.6 Masker verwijderen................................................................................................1167.7 Voorbeelden...........................................................................................................117

7.7.1 Gesofisticeerd tekstmasker. ........................................................................1177.7.2 Gekleurde pepers........................................................................................1187.7.3 Gedeeltelijke lijntekening.............................................................................119

8 Bestanden optimaliseren en exporteren. .......................................................1218.1 Het GIF-formaat.....................................................................................................1228.2 Het JPEG-formaat. ................................................................................................1288.3 Progressive JPEG en Interlaced GIF. ....................................................................130

8.3.1 Progressive JPEG:......................................................................................1308.3.2 Interlaced GIF: ............................................................................................130

8.4 Optimalisatie-instellingen bewaren. ......................................................................1318.5 GIF of JPEG? ........................................................................................................1328.6 Een afbeelding exporteren.....................................................................................134

8.6.1 Optimize en Export:.....................................................................................1348.6.2 Export Preview: ...........................................................................................1348.6.3 Export area tool:..........................................................................................135

8.7 Andere exportformaten. .........................................................................................1358.7.1 Animated GIF: .............................................................................................1358.7.2 PNG: ...........................................................................................................1358.7.3 WBMP:........................................................................................................1358.7.4 TIFF:............................................................................................................1358.7.5 BMP: ...........................................................................................................1368.7.6 PICT: ...........................................................................................................1368.7.7 Macromedia Flash SWF:.............................................................................1368.7.8 Adobe Photoshop PSD: ..............................................................................136

Inhoud - 5

8.7.9 Adobe Illustrator 7: ......................................................................................137

9 Animaties. ..........................................................................................................1399.1 Frames...................................................................................................................1399.2 Animatie met symbolen..........................................................................................1399.3 Animatie met onafhankelijke objecten. ..................................................................1459.4 Animated GIF exporteren.......................................................................................1469.5 Animated GIF openen in Fireworks. ......................................................................1469.6 Animated GIF of Flash banner. ..............................................................................1469.7 Oefening. ...............................................................................................................148

9.7.1 Saturnus......................................................................................................148

10 Hotspots en Slices..........................................................................................14910.1 Imagemaps en hotspots. .....................................................................................14910.2 Slices. ..................................................................................................................15310.3 Fireworks-HTML importeren in Dreamweaver. ....................................................15610.4 Een eenvoudige rollover. .....................................................................................15810.5 Slices in het Preview venster. ..............................................................................16110.6 Behavior aanpassen en verwijderen....................................................................161

11 Knoppen en pop-up menu's...........................................................................16311.1 Knoppenbalk. .......................................................................................................16311.2 Voorgedefinieerde knoppen. ...............................................................................16911.3 Pop-up menu. ......................................................................................................17011.4 Pop-up menu in combinatie met frames. .............................................................174

12 Productieproces versnellen...........................................................................17712.1 Zoek en vervang. .................................................................................................17712.2 Batch processing. ................................................................................................17912.3 Data-Driven Graphics Wizard. .............................................................................18312.4 Reconstitute Table. ..............................................................................................188

13 Dreamweaver - Fireworks integratie. ............................................................19113.1 Dreamweaver configureren. ................................................................................19113.2 Fireworks als Primary Editor instellen..................................................................19213.3 Over de website...................................................................................................19313.4 Achtergrond voor de website ontwerpen. ............................................................19413.5 De hoofding aanmaken........................................................................................19613.6 De navigatiebalk ontwerpen. ...............................................................................199

Index......................................................................................................................207

6 - Fireworks MX 2004