Adobe Fireworks CS3 Ontwerpen van webillustraties voor niet-grafici

Adobe Fireworks CS3

Ontwerpen van webillustraties voor niet-grafici

Versie 1.0 - juni 2007 Adobe, Macromedia, Dreamweaver, Fireworks en Flash zijn handelsmerken of gedeponeerde handelsmerken van Adobe Systems, Inc. in de Verenigde Staten en/of andere landen. Alle overige handelsmerken en merknamen zijn eigendom van hun respectieve eigenaars. Speciale dank aan Lieve en Guy voor hun meer dan gewaardeerde medewerking. 1

Verhaert, Patrick – Fireworks CS3 / Patrick Verhaert; Geel: Campinia Media vzw, 2007; 220 p; index; 25 cm; gelijmd. ISBN: 97890.356.1216.7; NUGI 854; UDC 681.3.06; Wettelijk depot België: D/2007/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: URL: <www.campiniamedia.be> Copyright 2007:

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.

Inhoud 1 Inleiding. ................................................................................................................9 1.1 Nieuw in Fireworks CS3. ...........................................................................................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. ................................................................................................................12 1.9 Fireworks vs. Photoshop. ........................................................................................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, layers en sublayers. ................................................................................23 2.4 Het canvas...............................................................................................................26 2.5 Het kleurenpalet.......................................................................................................29 2.6 Linialen, grid en hulplijnen. ......................................................................................32 2.7 Resolutie van naderbij bekeken...............................................................................34

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................................................................................43 3.3.1 Basiseigenschappen. ....................................................................................43 3.3.2 Filters. ...........................................................................................................45 3.3.3 Het styles palet..............................................................................................46 3.3.4 Menging (Blending). ......................................................................................48 3.4 De pen tool. .............................................................................................................48 3.4.1 Rechte lijnen tekenen:...................................................................................49 3.4.2 Lijnen met een richtingscoëfficiënt: ...............................................................49 3.4.3 Bézierpunten toevoegen: ..............................................................................49 3.4.4 Van gebogen naar rechte curves: .................................................................50 3.4.5 Bézierpunten verwijderen:.............................................................................50 3.4.6 Van rechte naar gebogen curves: .................................................................50 3.4.7 Bézierpunt verplaatsen: ................................................................................50 3.4.8 Richtingscoëfficiënt van een Bézierpunt aanpassen:....................................51 3.4.9 Verschillende richtingscoëfficiënten in één Bézierpunt: ................................51 3.5 Objecten groeperen. ................................................................................................51 3.6 Objecten binnen een groep selecteren....................................................................52 3.7 Objecten combineren...............................................................................................53 Inhoud - 3

3.7.1 Union: ...........................................................................................................54 3.7.3 Punch: ...........................................................................................................55 3.7.4 Crop: .............................................................................................................55 3.7.5 Join en Split:..................................................................................................56 3.8 Objecten vervormen. ...............................................................................................57 3.9 Werken met symbolen. ............................................................................................58 3.10 9-slice scaling. .......................................................................................................61 3.11 Gemeenschappelijke symbolen. ............................................................................62 3.12 Voorbeelden...........................................................................................................62 3.12.1 Aqua buttons. ..............................................................................................62 3.12.2 Vectorieel Fireworks logo. ...........................................................................65 3.12.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 4.7.3 Sheriff ster. ....................................................................................................77 4.7.4 Gecombineerde letters..................................................................................78

5 Bitmapobjecten. ..................................................................................................81 5.1 Een bitmapobject importeren...................................................................................81 5.1.1 Open: ............................................................................................................81 5.1.2 Import: ...........................................................................................................81 5.1.3 Drag en drop: ................................................................................................81 5.2 Van vector- naar bitmapobject. ...............................................................................82 5.3 Overzicht van de verschillende Select tools. ...........................................................83 5.4 Bitmapobjecten en filters. ........................................................................................84 5.5 Een gebied binnen een bitmapobject selecteren.....................................................84 5.5.1 Marquee tool: ................................................................................................84 5.5.2 Lasso en Polygon Lasso tool: .......................................................................86 5.5.3 Magic Wand tool: ..........................................................................................86 5.6 Een selectie binnen een bitmapobject manipuleren. ..............................................87 5.6.1 Een selectie ongedaan maken:.....................................................................87 5.6.2 Een tweede selectie toevoegen: ...................................................................87 5.6.3 Een deel van de selectie verwijderen:...........................................................87 5.6.4 Een selectie verplaatsen: ..............................................................................87 5.6.5 De inhoud van een selectie verplaatsen: ......................................................87 5.6.6 De inhoud van een selectie dupliceren : .......................................................88 5.6.7 Een inverse selectie maken: .........................................................................88 5.6.8 Een selectie met enkele pixels vergroten of verkleinen: ...............................88 5.6.9 Enkel de rand van een selectie selecteren: ..................................................88 5.6.10 Een selectie bewaren :................................................................................88 5.7 Filters op bitmapobjecten.........................................................................................88 5.8 Een selectie naar een vectorobject converteren......................................................90 4 - Fireworks CS3

5.9 Bitmapobjecten tekenen. .........................................................................................91 5.9.1 Pencil en Brush tool: .....................................................................................92 5.9.2 Paint Bucket en Gradient tool: ......................................................................92 5.9.3 Eraser tool:....................................................................................................93 5.9.4 Tekenen in combinatie met een selectie: ......................................................94

6 Bitmapobjecten retoucheren. ............................................................................95 6.1 Foto's retoucheren met behulp van een Live filter. ..................................................95 6.1.1 Filters: Adjust Color. ......................................................................................95 6.1.2 Filters:Blur. ..................................................................................................100 6.1.3 Filters:Sharpen............................................................................................101 6.1.4 Filters: Other................................................................................................102 6.2 Photoshop Live Effects. ........................................................................................103 6.3 Menu:Filters. ..........................................................................................................103 6.4 Overige tools..........................................................................................................103 6.4.1 Blur en Sharpen tool. ..................................................................................104 6.4.2 Dodge en Burn tool. ....................................................................................104 6.4.3 Smudge tool. ...............................................................................................104 6.4.4 Rubber Stamp tool. .....................................................................................104 6.4.5 Replace Color tool.......................................................................................106 6.4.6 Red Eye Removal tool. ...............................................................................107 6.5 Gescande beelden ontrasteren. ............................................................................107 6.6 Voorbeeld...............................................................................................................109 6.6.1 Gescande postkaart bijwerken....................................................................109

7 Maskers. .............................................................................................................111 7.1 Maskeren met een vectorobject.............................................................................112 7.2 Maskeren met een tekstobject. ..............................................................................115 7.3 Maskeren met een bitmapobject............................................................................116 7.4 Masker en gemaskeerd object verplaatsen. ..........................................................117 7.5 Masker en gemaskeerd object van elkaar scheiden..............................................118 7.6 Masker verwijderen................................................................................................118 7.7 Voorbeelden...........................................................................................................119 7.7.1 Gesofisticeerd tekstmasker. ........................................................................119 7.7.2 Gekleurde pepers........................................................................................120 7.7.3 Gedeeltelijke lijntekening. ...........................................................................121

8 Bestanden optimaliseren en exporteren. .......................................................123 8.1 Het GIF-formaat.....................................................................................................124 8.2 Het JPEG-formaat. ................................................................................................130 8.3 Progressive JPEG en Interlaced GIF. ....................................................................132 8.3.1 Progressive JPEG:......................................................................................132 8.3.2 Interlaced GIF: ............................................................................................132 8.4 Optimalisatie-instellingen bewaren. ......................................................................132 8.5 GIF of JPEG? ........................................................................................................133 8.6 Het PNG-formaat. ..................................................................................................135 8.7 Een afbeelding exporteren.....................................................................................137 8.7.1 Optimize en Export:.....................................................................................137 8.7.2 Image Preview: ...........................................................................................137 8.7.3 Export area tool:..........................................................................................138 8.7.4 Save As: ......................................................................................................138 Inhoud - 5

8.8 Andere exportformaten. .........................................................................................138 8.8.1 Animated GIF: .............................................................................................138 8.8.2 WBMP: ........................................................................................................138 8.8.3 TIFF:............................................................................................................139 8.8.4 BMP: ...........................................................................................................139 8.8.5 PICT: ...........................................................................................................139 8.8.6 Macromedia Flash SWF:.............................................................................139 8.8.7 Adobe Photoshop PSD: ..............................................................................140 8.8.8 Adobe Illustrator 7: ......................................................................................140

9 Animaties. ..........................................................................................................141 9.1 Frames...................................................................................................................141 9.2 Animatie met symbolen..........................................................................................141 9.3 Animatie met onafhankelijke objecten. ..................................................................147 9.4 Animated GIF exporteren.......................................................................................148 9.5 Animated GIF openen in Fireworks. ......................................................................148 9.6 Animated GIF of Flashbanner. ...............................................................................148 9.7 Oefening. ...............................................................................................................150 9.7.1 Saturnus......................................................................................................150

10 Hotspots en Slices..........................................................................................151 10.1 Imagemaps en hotspots. .....................................................................................151 10.2 Slices. ..................................................................................................................154 10.3 Fireworks-HTML importeren in Dreamweaver. ....................................................157 10.4 Een eenvoudige rollover. .....................................................................................159 10.5 Slices in het Preview venster. ..............................................................................162 10.6 Behavior aanpassen en verwijderen....................................................................163

11 Knoppen en pop-upmenu's............................................................................165 11.1 Knoppenbalk. .......................................................................................................165 11.2 Voorgedefinieerde knoppen. ...............................................................................170 11.3 Pop-upmenu. .......................................................................................................171 11.4 Pop-upmenu in combinatie met frames. ..............................................................176

12 Productieproces versnellen...........................................................................179 12.1 Zoek en vervang. .................................................................................................179 12.2 Batch processing. ................................................................................................181 12.3 Data-Driven Graphics Wizard. .............................................................................185 12.4 Dynamische symbolen.........................................................................................190 12.5 Een fotoalbum in Flash en JavaScript (Spry). .....................................................193 12.5.1 Een fotoalbum in Flash. ............................................................................193 12.5.2 Een fotoalbum in JavaScript (Spry)...........................................................196 12.6 Een voorontwerp exporteren. ..............................................................................197

13 Van voorontwerp naar website. .....................................................................201 13.1 Dreamweaver configureren. ................................................................................201 13.2 Over de website...................................................................................................202 13.3 Fireworks als Primary Editor instellen..................................................................203 13.4 De achtergrondafbeeldingen voor de website exporteren. ..................................204 13.5 De achtergrondafbeeldingen aan de div-tags koppelen. .....................................206 13.6 De titel in de hoofding onzichtbaar maken...........................................................209 6 - Fireworks CS3

13.7 De navigatiebalk positioneren..............................................................................210 13.8 De teksten vormgeven.........................................................................................212 13.9 Afbeeldingen positioneren. ..................................................................................212 13.10 Achtergrondafbeeldingen aanpassen. ...............................................................212

Index......................................................................................................................215

Inhoud - 7