En rollover -knapp är en knapp på hemsidan som ändrar sitt tillstånd när musen svävar över den. Staten förändring kan vara valfritt antal förändringar, bland annat färg , typsnitt , storlek eller en kombination av dessa . Rollover knappar finputsa och professionalism till din webbplats och kan skapas enkelt i Adobe Photoshop och ImageReady . Dessa steg detalj hur man skapar en enkel rollover knapp , men processen kan förändras för mer stiliserad grafik . Saker du behöver
Adobe Photoshop
ImageReady
Visa fler instruktioner
skapa knappen Bilder i Photoshop
1
Gå till Arkiv > Ny och ställ in bildstorleken till 80 av 25 pixlar med en upplösning på 72 pixlar per tum .
2
Klicka på förgrunden färgrutan nära botten av verktygspaletten på höger sida av skärmen . Välj en färg för texten på knappen . Klicka sedan på Bakgrundsruta och välj en färg .
3
Tryck " " Control + Backsteg för att fylla bildytan med din valda bakgrundsfärg .
4
Välj " Type " verktyget från verktygspaletten , och ställa in teckensnitt och storlek i verktygsmenyn längst upp på skärmen . Klicka på dokumentet , och skriv in knappen namn, till exempel " Portfolio " eller " Home ".
5
Använd " Flytta " verktyg för att anpassa texten till din böjelse .
6
Kopiera både bakgrunden och textlagret . Skapa en kopia av ett lager genom att högerklicka på ett lager i lager paletten och välja " Duplicera . "
7
Merge den ursprungliga bakgrund och lager text genom att hålla " Shift " -tangenten samtidigt som du klickar både lager i paletten Lager. Gå därefter till Redigera > Sammanfoga lager . Döp lagret " normala tillstånd. "
8
Dubbelklicka på " T " bilden till vänster om den kopierade textlagret för att markera texten . Klicka på färgrutan i verktygsmenyn längst upp på skärmen , och välja en annan färg för texten när musen svävar över knappen .
9
Ändra färgen i bakgrunden skiktet , om önskas .
10
slå samman de två kopierade skikten , och döp lagret " Rollover stat . " Din fil bör nu innehålla två skikt: " Normal staten " lager på botten och den " Rollover stat " lager ovanpå . Du kan förhandsgranska hur knappen förändringen kommer att se ut genom att vrida synlighet toppskiktet på och av . Klicka på ögat grafiken till vänster om lagret för att visa eller dölja den .
Skapa Rollover Knapp i ImageReady
11
Klicka på " Gå till ImageReady " knappen . längst ner på verktygspaletten med din knapp filen fortfarande är öppen
12
Gå till utseendet paletten ( i CS eller nyare ) eller välta paletten ( i äldre versioner ) , om det inte är redan är öppen , gå till menyn Fönster och välj paletten från rullgardinsmenyn
13
Dölj " Rollover stat " lagret , . detta kommer att sätta normala läget för knappen till " normal " skikt .
14
Klicka på " Skapa ny stat " längst ner på " Utseende " eller " Rollover " paletten . Slå på synlighet på " Rollover stat " lagret för att ställa in den som överrullningsläge
15
Gå till slice paletten , . Om det inte redan är öppet , kan det finnas i fönstret meny. Tilldela en URL till din rollover knapp , detta är webbsidan användaren kommer att vidtas för att när han klickar på knappen
16
Testa din rollover knapp genom att klicka på " Förhandsgranska i Default Browser " -knappen . nära botten av verktygspaletten .
17
Gå till Arkiv > Spara optimerad för att spara HTML-filen och bildmapp .
