Een rollover is een effect gebruikt op een afbeelding in een webpagina om te transformeren van de afbeelding als een muis rolt of overheen zweeft. Dit wordt vaak gebruikt om knoppen of menu's veranderen van kleur, maar kunnen worden gebruikt op een afbeelding. Met behulp van Photoshop, kunt u elke afbeelding snijd in plakjes en vervolgens een segment wijzigen zodat alleen dat gedeelte van de afbeelding in de rollover verandert, zoals het maken van woorden verschijnen op de onderkant, of de kleur van één item in de afbeelding wijzigen. Zodra de segmenten worden gemaakt moet u de juiste JavaScript-code in de webpagina toevoegen waarin de rollover-effect, met behulp van een Web ontwerp-software of de HTML-editor maken te plaatsen.
Start Photoshop en selecteer "Open" in het menu bestand. Ga naar een afbeelding die u wilt gebruiken voor de rollover en klik op 'Openen'. Klik op de "Slice"-knop in de werkset. Als u het niet ziet, klik en houd de "Bijsnijden" of "Gereedschap Segment selecteren" om het te onthullen.
Beslissen waar u wilt dat het effect van de rollover wilt weergeven. Merk op dat het gereedschap segment alleen rechthoekige segmenten maakt en dat extra segmenten van het resterende beeld zal worden gemaakt. Bijvoorbeeld, als u de bovenste helft van een afbeelding als het rollover-segment selecteert, zullen de andere helft van het beeld ook een segment. Als u knipt een vierkant in het midden van de afbeelding, vier andere segmenten worden gemaakt, een boven uw slice, hieronder en op elke zijde.
Sleep het gereedschap segment over het gebied dat u wilt gebruiken voor de rollover. De afbeelding wordt gesneden in plakjes, met een nummer in de linker bovenhoek.
Klik en houd de "segment Tool" in de werkset, klik de "Selecteer gereedschap segment." Dubbelklik op het segment dat u in stap 3 hebt gemaakt om de Segmentopties-venster te openen. Typ "Rollover" in het naamveld en klik op 'OK'. Dubbelklik op elk van de andere segmenten om hen juiste namen, zoals "Top", "Links", "Center", "Right" en "Bottom."
Druk op 'F7' te onthullen van het deelvenster Lagen. Sleep de laag"achtergrond" in het deelvenster Lagen op de "New Layer" knop aan de onderkant van het deelvenster. Breng de gewenste wijzigingen u de afbeelding wilt wijzigen van het "Rollover"-segment. U kunt tekst schrijven over het segment, tekent u een vorm of een andere afbeelding invoegen. U kunt effecten of beeldaanpassingen die de hele afbeelding veranderen toevoegen. Wijzigingen in alle andere segmenten zullen niet worden opgeslagen.
Klik op "Save For Web & Devices" onder het menu bestand. Sla de afbeelding in uw gewenste formaat - meestal waarschijnlijk JPEG of GIF - en klik op "Opslaan". Elk van de segmenten wordt opgeslagen met de naam die je gaf hen als een afzonderlijke afbeelding in een map genaamd "Image".
Sleep de "Achtergrond kopie" laag in het deelvenster Lagen naar de "Prullenbak" knop aan de onderkant van het deelvenster, evenals alle andere lagen die u hebt gemaakt toevoegen effecten of tekst, zodat u alleen de oorspronkelijke "Background" laag blijven hoeft.
Dubbelklik op de "Rollover"-segment met het gereedschap Segment selecteren en wijzig de naam in "Origineel." Klik op 'OK'.
Klik op "Opslaan of Web & apparaten" in het menu bestand. Gebruik dezelfde bestandsindeling en dezelfde doelmap evenals u in stap 6. Klik op "Opslaan". Er wordt een dialoogvenster geopend met de waarschuwing dat de andere segmenten worden vervangen. Dit zijn de versies die u wilt opslaan, dus klikt u op 'OK'.
Gebruik geen Web ontwerpsoftware samen te stellen de afbeeldingen op een website. U hebt nu alle segmenten met het "Oorspronkelijke" segment om straks van de oorspronkelijke afbeelding en het "Rollover"-segment in het rollover-effect op de webpagina te gebruiken.
- Je bent niet beperkt tot slechts één rollover-effect op een afbeelding als het wordt gesneden in plakjes. Ditzelfde proces kunt u een ander effect op elk segment maken indien gewenst.
