Open een nieuw document dat is maat geschikt is voor uw knoppen . Dit kan de grootte van de website of de grootte van de knoppenbanners zijn . Klik op " Bestand > Nieuw ' en voer het formaat in de desbetreffende vakken . Kopen van 2

Maak de eerste knop als het zal verschijnen wanneer deze niet is geselecteerd . Selecteer de juiste vorm tool van de " Hulpmiddelen Palette " en trek de knop . Selecteer dan de functie " Type" en voer de tekst in de knop .
3

Breng de gewenste effecten op de knop of de tekst . Adobe heeft een aantal manieren om effecten toe te passen . Om uw eigen aangepaste effecten toe te passen , selecteert u de laag van de " Layer " palet. Vervolgens selecteert u het gewenste effect van de " FX " drop - down box , dat is gelegen aan de onderkant van de " Layer " palette.Photoshop CS3 biedt voorgeprogrammeerde web stijlen speciaal ontworpen voor web knoppen . Als de " Stijlen " palet niet zichtbaar is , selecteert u " Windows > Stijlen . " Vanuit de " Stijlen " drop - down menu , selecteer " Web Styles . " Zorg ervoor dat de knop laag is geselecteerd en kies de gewenste laag van de " Stijlen " palette .
4

Maak de overige knoppen . Houd de toets " Control" aan de tekst en op de knop te selecteren . Klik met de rechtermuisknop in het "Lagen " palet en kies " Laag dupliceren . " Verplaats de gekopieerde lagen naar de locatie van de volgende knop . Verander de tekst om de naam van de nieuwe knop . Herhaal deze stap om alle knoppen te maken .
5

Snijd de knoppen . Selecteer het gereedschap " Slice " en trek een kader rond elke knop . Dubbelklik op elke knop om slice opties toe te voegen . Zorg ervoor dat de " Beeld " is geselecteerd in het " Slice Type " drop - down box . Voer een naam die beschrijft de knop uitgezet , zoals ' [ knop ] _off . " Voer alle informatie met betrekking tot de website in de overige vakken .
6

Selecteer " Bestand > Opslaan voor web ... " Druk op de knop "Opslaan" . In de "Save Optimized As" dialoog venster, selecteer de locatie voor uw afbeeldingen . Maak een nieuwe map met de naam "Off . " Indien u ingevoerde informatie voor de website , verander de " Format " op " HTML en afbeeldingen . " Klik op "OK . "
7

Selecteer " Windows > Layer Comp . " Maak een nieuwe layer comp door het selecteren van de " Layer Comp New Create" knop . Noem maar iets dat de huidige set knoppen zoals beschreven " Off".
8

Bewerk de knoppen om de rollover staat toe te passen . Breng de stijlen , kleuren of effecten aan de huidige knoppen . Maak een nieuwe laag comp en noem maar op " On . " Herhaal stap 7 om de knoppen te slaan in een nieuwe map met de naam " On . " Open de map met deze knoppen en hernoem ze naar de " aan"-toestand weerspiegelen .
9

Maak de rollover -code in een web -editor . Gebruik Dreamweaver , een andere web -editor of een tekstverwerker om de rollover code te creëren . Hier is de JavaScript- code voor de home-knop in deze tutorial : < a href = " index.html " onmouseover = " home_off.src = ' images /op /home_on.jpg ' ; " onmouseout = " home_off.src = ' images /off /home_off.jpg ' ; " > < img alt = " home_off " name = " home_off " src = " images /off /home_off.jpg "width = " 130 " height = " 47 " class = " style9 " border = " 0 " /> < /a >