Operation Manual

503
Laatst bijgewerkt 8/6/2011
Hoofdstuk 16: Webafbeeldingen
Werken met webafbeeldingen
Met de webgereedschappen van Photoshop kunt u heel eenvoudig de elementen van uw webpagina's maken of
volledige webpagina's uitvoeren in vooraf ingestelde of aangepaste indelingen.
• Met lagen en segmenten kunt u webpagina's en de interface-elementen voor deze pagina's ontwerpen.
• Met laagsamenstellingen kunt u experimenteren met verschillende paginasamenstellingen of kunt u verschillende
versies van een pagina exporteren.
• Maak rollovertekst of knopillustraties en importeer deze naar Dreamweaver of Flash.
• Maak webanimaties met het deelvenster Animatie en exporteer deze animaties als geanimeerde GIF-afbeeldingen
of QuickTime-bestanden. Zie “Frameanimaties maken” op pagina 538.
• Gebruik Adobe Bridge om een webfotogalerie te maken, zodat u een reeks afbeeldingen met gebruik van
professioneel ogende sjablonen snel kunt omzetten in een interactieve website.
Op www.adobe.com/go/lrvid4043_dw_nl vindt u een video over het ontwerpen van websites met Photoshop en
Dreamweaver.
Rolloverafbeeldingen maken
Een rollover is een knop of afbeelding op een webpagina die verandert wanneer u de muis erboven plaatst. U hebt
minstens twee afbeeldingen nodig om een rollover te maken: een primaire afbeelding voor de normale staat en een
secundaire afbeelding voor de gewijzigde staat.
Photoshop beschikt over een aantal nuttige gereedschappen voor het maken van rolloverafbeeldingen:
• U kunt primaire of secundaire afbeeldingen maken met lagen. Maak de inhoud op één laag en dupliceer en bewerk
deze laag om vergelijkbare inhoud te maken waarbij de uitlijning tussen de twee lagen behouden blijft. U maakt het
rollovereffect door de laagstijl, zichtbaarheid of positie van de laag te wijzigen, kleur- of toonaanpassingen aan te
brengen of filtereffecten toe te passen. Zie “Lagen dupliceren” op pagina 268.
• U kunt laagstijlen ook gebruiken om effecten, zoals bijvoorbeeld kleurbedekkingen, slagschaduwen, gloed of reliëf
toe te passen op de primaire laag. Als u een rolloverpaar wilt maken, schakelt u de laagstijl in of uit en slaat u beide
staten van de afbeelding op. Zie “Laageffecten en laagstijlen” op pagina 286.
• Gebruik de vooraf ingestelde knopstijlen in het deelvenster Stijlen om snel rolloverknoppen te maken met de staten
normaal, muisbeweging en muisklik. Teken een vorm met het gereedschap Rechthoek en pas een stijl toe, zoals
Schuine kant - normaal, om de rechthoek automatisch om te zetten in een knop. Kopieer de laag en pas andere
vooraf ingestelde stijlen toe, zoals Schuine kant - muisbeweging om de andere knopstaten te maken. Sla iedere laag
op als een afzonderlijke afbeelding om de set met rolloverknoppen te voltooien.
• In het dialoogvenster Opslaan voor web en apparaten kunt u rolloverafbeeldingen met een optimale
bestandsgrootte opslaan in een indeling die compatibel is met het web. Zie Afbeeldingen optimaliseren.
Wanneer u rolloverafbeeldingen opslaat, maakt u aan de hand van een naamgevingsconventie onderscheid tussen
de primaire afbeelding (niet-rolloverstaat) en de secundaire afbeelding (rolloverstaat).
Nadat u een set rolloverafbeeldingen hebt gemaakt in Photoshop, kunt u de afbeeldingen met gebruik van
Dreamweaver op een webpagina plaatsen en automatisch de Javascript-code voor de rolloveractie toevoegen.