Före Photoshop CS3 , skapade webbdesigners rollover knappar med Photoshop och Image Ready , som tidigare förpackade tillsammans . Adobe upphör med Image Ready när det köpte Macromedias Dreamweaver , förutsatt att webbdesigners kunde använda denna specialiserade program med Photoshop för att skapa sina rollovers . Du skapar rollover knappar i Photoshop på samma sätt . Sedan kan du använda Dreamweaver , andra webbredaktörer eller en textredigerare för att skapa rollover -koden . Lär dig att skapa rollover knappar i Photoshop CS3 . Saker du behöver
Webbredaktör
Visa fler instruktioner
1
Öppna ett nytt dokument som är lämplig storlek för dina knappar . Detta kan vara storleken på webbplatsen eller storleken på knappen banner . Klicka på " Arkiv > Nytt " och ange storlek i motsvarande rutor .
2
Skapa den första knappen som det kommer att se ut när det inte är markerat . Välj rätt form verktyget från " Tools Palette " och dra knappen . Välj sedan " Type " verktyget och skriv in texten i knappen .
3
Tillämpa de önskade effekterna på knappen eller texten . Adobe erbjuder flera sätt för dig att använda effekter . Att tillämpa dina egna effekter , markerar du lagret från " Layer " paletten . Därefter väljer du önskad effekt från " FX " drop -down box som ligger på botten av " Layer " palette.Photoshop CS3 erbjuder förinställda web stilar utformade specifikt för webb knappar . Om " Stilar " paletten inte visas väljer du "Windows > Styles . " Från " Styles " rullgardinsmenyn väljer du " Web Styles . " Se till att knappen lagret är markerat och välj det önskade lagret från " Styles " paletten .
4
Skapa de övriga knapparna . Håll ner "Control " för att markera text och knappen . Högerklicka inuti " Layer " paletten och välj " Duplicera lager . " Flytta den kopierade lager på platsen för nästa knappen . Ändra texten till den nya knappens namn . Upprepa detta steg för att skapa alla knappar .
5
Skär knapparna . Välj " Slice " verktyget och rita en ruta runt varje knapp . Dubbelklicka på varje knapp för att lägga slice alternativ . Kontrollera att " Image " är valt i " Slice Type " listrutan . Ange ett namn som beskriver knappen avstängd , t.ex. " [ knapp ] _off . " Ange all information som hänför sig till webbplatsen i de återstående rutorna .
6
Välj " Arkiv > Spara för webben ... " Tryck på knappen "Spara" . I " Spara optimerad som " dialogrutan , välja plats för dina bilder . Skapa en ny mapp som heter " Off ". Om du har angett informationen för webbplatsen , ändra " Format " till " HTML och bilder . " Klicka på " OK . "
7
Välj " Windows > Lagerkomposition . " Skapa ett nytt lager comp genom att välja " Skapa nytt lager Comp " -knappen . Name it något som beskriver nuvarande uppsättning knappar som " Off ".
8
Redigera knapparna för att applicera överrullningsläge . Applicera stilar , färger eller effekter på de aktuella knapparna . Skapa ett annat lagrar comp och döp den till " On . " Upprepa steg 7 för att spara på knapparna i en ny mapp som heter " On . " Öppna mappen som innehåller dessa knappar och döpa dem att återspegla den " på " läge.
9
Skapa rollover -koden i en webbredaktör . Använd Dreamweaver , annan webbredaktör eller en textredigerare för att skapa rollover -koden . Här är JavaScript -kod för hem-knappen i denna tutorial : 
< /a> Addera ditt
