Adobe Fireworks CS3 Ontwerpen van webillustraties voor niet-grafici p t t h m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : 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.
h p t t m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r .
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.
3.7.1 Union: ...........................................................................................................54 3.7.3 Punch: ...........................................................................................................55 3.7.4 Crop: .............................................................................................................55 3.7.5 Join en Split:..................................................................................................56 3.
.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.
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: .....................
13.7 De navigatiebalk positioneren..............................................................................210 13.8 De teksten vormgeven.........................................................................................212 13.9 Afbeeldingen positioneren. ..................................................................................212 13.10 Achtergrondafbeeldingen aanpassen. ...............................................................212 Index..............................................
p t t h m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r .
1 Inleiding. Adobe Fireworks is een grafisch pakket dat zich hoofdzakelijk richt tot de internetontwikkelaars. U kunt Fireworksdocumenten exporteren naar alle belangrijke webformaten zoals GIF, JPEG, animated GIF, PNG en WBMP. Verder beschikt het programma over verschillende tools om DHTML websites te ontwikkelen. DHTML maakt gebruik van JavaScript om dynamische effecten te genereren. U hoeft geen JavaScriptexpert te zijn om bijvoorbeeld rollovers of pop-upmenu's te creëren.
1.2 Inhoud van het boek. In het eerste deel (hoofdstuk 3 t.e.m. hoofdstuk 7) gaan we dieper in op de technische mogelijkheden van het pakket. Aan de hand van voorbeelden en oefeningen leert u verschillende objecten aanmaken, bewerken en vervolgens combineren tot één compilatie. Bij deze handelingen houden we voorlopig nog geen rekening met het medium waarop het resultaat van uw compilatie uiteindelijk gebruikt gaat worden.
» Hier volgt een actie die u zelf moet ondernemen. Snelmenu: klik op de rechtermuistoets of "ctrl" klik op een ééntoetsmuis (Mac). Alle verwijzingen naar menu-items worden door menu: vooraf gegaan. Objecten selecteren doet u met de Pointer tool. Net zoals alle onderdelen uit het Tools palet kan u de Pointer tool activeren via een toets. Klik op de V-toets om de Pointer tool te activeren. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : 1.5 Systeemvereisten. 1.5.
1.6.1 Lesmateriaal installeren op PC. Op de CD-ROM vindt u in de map Oefenbestanden PC installatiebestanden voor de handboeken uit de Studio 8 reeks. » Open de map Oefenbestanden PC op de CD-ROM. » Dubbelklik op Les FireworksCS3.exe. » Installeer de oefenbestanden op uw harde schijf. 1.6.2 Lesmateriaal installeren op Macintosh. De oefenbestanden voor Macintosh vindt u op de CD-ROM in de map Oefenbestanden Mac. » Kopieer de map Les FireworksCS3 naar uw harde schijf. m o 3 l.
is Fireworks een open werkomgeving. Dit wil zeggen dat iedereen die voldoende onderlegd is in HTML en JavaScript zelf uitbreidingen op het programma kan schrijven. Deze uitbreidingen of Extensions worden hoofdzakelijk via de Adobewebsite verdeeld en kan u meestal gratis - downloaden. ( http://www.adobe.com/exchange/.) m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : Geïnstalleerde extensies nestelen zich o.a. in het Commands menu.
1.9 Fireworks vs. Photoshop. Photoshop is het standaard beeldverwerkingspakket voor de professionele graficus. Photoshop bevat hoofdzakelijk tools voor het bewerken van bitmapobjecten (of foto’s) en enkele eenvoudige tools voor weboptimalisatie. Fireworks daarentegen werd speciaal ontwikkeld als grafische omgeving voor schermpresentaties (hoofdzakelijk webapplicaties). De basisobjecten binnen Fireworks zijn altijd vectorgebaseerd. Het bewerken van foto’s is daarentegen beperkter dan in Photoshop. m o 3 l.
1.10 Bronnen. • Fireworks homepage http://www.adobe.com/products/fireworks/ • Adobe extensies downloaden http://www.adobe.com/exchange/ • Adobe development centre http://www.adobe.com/devnet/ • Adobe design centre http://www.adobe.com/designcenter/ • Adobe forums http://www.adobe.com/support/forums/ • Spry framework for Ajax http://labs.adobe.com/technologies/spry/ • Fireworks voorbeelden en tutorials http://www.adobe.com/support/fireworks/ http://www.fwzone.net/ http://www.fireworkszone.com/ http://www.
p t t h m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r .
7 Maskers. De technieken die we tot hiertoe hebben besproken voor het bewerken van bitmapobjecten, hebben nog enkele beperkingen. • Meestal is een bitmapobject dat u in Fireworks inbrengt rechthoekig. Wenst u een andere vorm, dan kan u delen van de afbeelding weggommen, wat neerkomt op pixels verwijderen. • Een gekleurde rand rond de afbeelding aanbrengen, kan niet rechtstreeks vanuit het Properties palet. • Delen van een afbeelding van een Live filter voorzien, kan niet.
7.1 Maskeren met een vectorobject. Als u een foto wenst te maskeren, dan tekent u eerst het object dat als masker gaat fungeren. » Open hst07/masker_vector.png. In dit voorbeeld is het masker al getekend (rechthoek met afgeronde hoeken). » Knip de rechthoek uit (menu:Edit:Cut). » Selecteer het te maskeren object, hier de foto. » Plak de rechthoek als masker over de foto met menu:Edit:Paste as Mask. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r .
1. Hoe gedraagt het masker zich ten opzichte van het beeld? Met Path outline worden enkel de contouren van het masker gebruikt om de foto af te dekken. Vink Show fill and stroke aan als u ook de rand van het masker mee in beeld wenst te brengen. Met Grayscale appearance worden zowel de contouren van het masker als de vulling gebruikt om het beeld af te dekken. Hoe lichter de vulling, hoe doorlaatbaarder. Het masker in dit voorbeeld heeft een lineaire gradiënt van zwart naar wit.
» Open hst07/masker_vector2.png. Om deze specifieke vorm te bekomen, maakt u een compositie van 3 objecten. Eén rechthoek met afgeronde hoeken, en twee vierkanten. Met de hulplijnen kan u deze objecten perfect op de juiste plaats brengen. » Selecteer deze drie objecten en maak er één object van (menu: Modify:Combine Paths:Union). m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : » Knip het object uit, selecteer de foto en plak het als masker over de foto.
7.2 Maskeren met een tekstobject. Stel dat u een foto in de vorm van een letter of een woord wenst weer te geven, dan gebruikt u de tekst als masker op de foto. » » » » Open hst07/masker_txt.png. Selecteer de tekst. Knip de tekst uit (menu:Edit:Cut). Selecteer de foto en plak de tekst als masker over de foto met menu:Edit:Paste as Mask. » Klik op het masker (rechts in het Layers palet) en vink Show fill and stroke aan in het Properties palet. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r .
7.3 Maskeren met een bitmapobject. Stel dat u de achtergrond van een foto wenst te verwijderen, zonder de pixels te wissen. De ideale manier om dit op te lossen is door gebruik te maken van een bitmapmasker. » Open hst07masker_bitmap.png. » Selecteer de ballon in het Layers palet en voeg een leeg bitmapmasker toe. Klik op Add Mask, onderaan het Layers palet. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : U kan alle selectietools gebruiken om delen van de foto te selecteren.
Een bitmapmasker kan op twee manieren worden toegepast. » Open hst07/masker_bitmap2.png. » Selecteer de grijze ovaal en knip hem uit. » Selecteer de foto en plak de grijze cirkel als masker over de foto. Mask: Grayscale gebruikt de vulling van de ovaal om de doorlaatbaarheid te bepalen. Met Mask: Alpha channel worden de contouren gebruikt. Omdat de contouren zacht uitlopen, verschijnt dit effect ook op de foto. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : » Sluit het document.
» Klik op de foto in het Layers palet. » Klik en sleep met de Pointer tool als u de foto binnen het masker wil verplaatsen. » Klik en sleep met de Subselection tool als u het masker wil verplaatsen. De foto blijft staan. » Klik op het kettingicoon om de verbinding te verbreken. Zowel de foto als het masker zijn nu onafhankelijk van elkaar verplaatsbaar. 7.5 Masker en gemaskeerd object van elkaar scheiden. » Selecteer het masker en sleep dit net boven of onder de geselecteerde layer.
7.7 Voorbeelden. 7.7.1 Gesofisticeerd tekstmasker. » » » » » Open hst07/chairs.png. Selecteer de tekst. Kies menu:Text:Convert to Paths. Kies vervolgens menu:Modify:Ungroup. Selecteer alle letters en de grijze achtergrond. Kies menu:Modify:Combine Paths:Union. Het masker is klaar. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : » Selecteer het masker en kies menu:Edit:Cut. » Selecteer vervolgens de foto en kies menu:File:Paste as Mask.
7.7.2 Gekleurde pepers. In deze toepassing gaat u één van de pepers een andere kleur geven. Dit kan door de peper af te zonderen in een nieuwe layer en vervolgens de Hue aan te passen. Het perfect afzonderen van deze peper is niet zo eenvoudig indien u geen masker zou gebruiken. » Open hst07/pepers.jpg. » Selecteer met de Marquee tool de rode peper. » Kopieer de selectie en plak ze dadelijk terug in het document. De selectie komt in een nieuwe laag terecht. m o 3 l.
» Selecteer het masker (niet de foto) in het Layers palet. » Teken met de Brush tool binnen het masker. Gebruik zwart om delen van de foto af te dekken en wit om de dekking te verwijderen. » Sluit het document. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : 7.7.3 Gedeeltelijke lijntekening. In deze toepassing gaat u een deel van een foto omzetten in een lijntekening. » Open hst07/toren.png. In dit bestand is de toren reeds afgezonderd in een nieuwe laag.
» Selecteer het masker en vul dit met een lineaire gradiënt. Het masker wordt gevuld met een lineaire gradiënt van zwart naar wit. » Klik en sleep in de richting van de toren. m o 3 l.c e l S p e C f m s ta a k S or dia w e e m r . i F w w w / / : Ziehier het resultaat: » Sluit het document.
