Sådan oprettes Rollovers i Photoshop CS3

Rollovers giver et strejf af interaktivitet til business website designs ved at ændre udseendet af en del af en webside, når en besøgendes pegeenhed glider på eller klikker på den. Når du opretter webstedsgrafik til din egen eller en kundes websted, kan du i Adobe Photoshop CS3 konfigurere de billeder, der understøtter rolloverfunktioner og gemme dem som individuelle filer. Når du har oprettet denne grafik, kan du bruge dit foretrukne webstedsdesignprogram til at udforme koden, som understøtter deres funktionalitet.

1.

Tryk på "Crtl-N" for at åbne dialogboksen Ny. Opret et Adobe Photoshop-dokument med RGB-tilstand på 72 punkter pr. Tommer, med dets baggrundsindhold sat til at være gennemsigtig. Størr din fil for at matche dimensionen af ​​de overførsler, du vil oprette i den.

2.

Opret udseendet af den grundlæggende tilstand af dit overflytningsbillede. Brug billed og form lag, gradienter, type og andre Photoshop værktøjer.

3.

Åbn menuen "Vindue" og vælg "Layer Comps" for at afsløre panelet Layer Comps. Åbn menuen Flyve i øverste højre hjørne af panelet og vælg "New Layer Comp." Navngiv din comp efter den rollover state den repræsenterer. Aktivér afkrydsningsfelterne "Anvend til lag" for synlighed, placering og udseende, så din lagkomposition afspejler tilstanden for alle tre af disse attributter.

4.

Tilføj lag stilarter, ekstra lag eller andre ressourcer til at opbygge udseendet af din mouseover eller anden overgangstilstand. Du kan også deaktivere synligheden af ​​eksisterende lag eller lagtyper i panelet Lag for at oprette din alternative tilstand. Når du opnår det ønskede resultat, skal du tilføje en anden tilstand til panelet Layer Comp, og aktivere indstillingerne "Apply to Layers". Fortsæt med at skabe udseende og tilføje comps, indtil du opbygger så mange overgangsstater som dit website design kræver.

5.

Klik på det umærkede "Apply Layer Comp" -ikon for den første overførsel, du oprettede. Photoshop ændrer tilstanden af ​​din sammensætning for at vise kombinationen af ​​lag- og effektvisibiliteter, du har etableret til denne overdragelse. Åbn menuen "Fil" og vælg "Gem til web og enheder" for at åbne dialogboksen med samme navn.

6.

Vælg eller tilpasse en forudindstillet fil, vælg GIF, JPEG eller PNG som filformat til din oprindelige rollover tilstand. Hver filtype passer til forskellige typer emner. GIF typisk bruger sig til grafik mere end at fotografere på grund af det smalle udvalg af farver, den understøtter. JPEG kan producere meget små filer, men høje kompressionsniveauer giver billedforvrængning. PNG producerer tab-mindre kompression uden reduceret farve. Brug fanerne 2 op og 4 op øverst på billedeksemplet i vinduet "Gem til web og enheder" for at sammenligne dit originale illustrationer med udseendet af forskellige filformater eller kvalitetsniveauindstillinger. Klik på det eksempel, der repræsenterer kombinationen af ​​muligheder, du vil bruge i din outputfil.

7.

Klik på "Gem" knappen for at hente dialogboksen "Gem optimeret som". Indstil filnavnet for at kombinere en grundlæggende identifikator til selve overførselsknappen med en kvalifikation, der angiver overgangstilstanden. Hvis din overførsel f.eks. Gælder for en galleri-knap, og din overgangstilstand repræsenterer "klik", skal du navngive din fil "Galleri-klik" og tilføje filudvidelsen til den. Da Adobe Photoshop ikke kan gemme HTML-koden til en overgang, skal du indstille rullemenuen Format til "Kun billeder", så programmet gemmer kun dit overførselsbillede. Vælg en placering, hvor du skal gemme din fil, og klik på "Gem" knappen for at oprette den.

8.

Klik på det umærkede "Apply Layer Comp" -ikon for den anden rollover-tilstand, du oprettede. Gå tilbage til dialogboksen "Gem til web og enheder" for at oprette filen for den. Gentag denne proces for hver ekstra rollover tilstand, du har bygget.

Tips

  • Smartfiltre skal gælde for alle layer comps i en individuel billedfil.
  • Hvis du åbner menuen Filer, finder du undermenuen "Scripts" og vælger menuen "Layer Comps to Files". Du kan eksportere alle dine comps som JPEG-filer i et trin, men ikke som GIF- eller PNG-filer. Denne funktion understøtter også PSD, TIFF, PDF, BMP og Targa filer, men du kan ikke bruge disse filtyper til online grafik.
  • Du kan gemme layer comps med din fil, hvis du gemmer det i Photoshop PSD-format.

Advarsel

  • Adobe Photoshop CS3 indeholder ikke længere det selvstændige ImageReady-program, der blev sendt sammen med tidligere versioner af Photoshop. I ImageReady kan du oprette og navngive overførsler ved hjælp af skiver og eksportruller i et trin.
 

Efterlad Din Kommentar