Webværktøjerne i Photoshop gør det lettere at bygge komponentdele til websider eller udskrive hele websider i forudindstillede eller tilpassede formater.

  • Brug lag og udsnit til at designe websider og grænsefladeelementer til websider. (Se Lag og Opdele websider i udsnit.)

  • Brug lagsammensætninger til at eksperimentere med forskellige sidesammensætninger eller til at eksportere forskellige versioner af en side. (Se Lagsammensætninger).

  • Opret overgangstekst eller knapgrafik til at importere til Dreamweaver eller Flash.

  • Opret webanimationer med animationspanelet, og eksporter dem derefter som animerede GIF-billeder eller QuickTime-filer. Se Oprettelse af rammeanimationer.

  • Brug Adobe Bridge til at oprette et webfotogalleri, så du hurtigt kan omdanne et sæt billeder til et interaktivt websted ved hjælp af en række skabeloner, der har et professionelt udseende.

Se en video om design af websites med Photoshop og Dreamweaver på Få adgang til Photoshop fra Dreamweaver for at forbedre webbillede.

Opret overgangsbilleder

En overgang er en knap eller et billede på en webside, der ændres, når musen placeres over den pågældende knap eller det pågældende billede. Hvis du vil oprette en overgang, skal du bruge mindst to billeder: et primært billede til normaltilstanden, og et sekundært billede til den ændrede tilstand.

Photoshop indeholder en række nyttige værktøjer til oprettelse af overgangsbilleder:

  • Brug lag til at oprette primære og sekundære billeder. Opret indhold på et lag, og dubler og rediger derefter laget for at oprette tilsvarende indhold, mens justeringen mellem lagene bevares. Når du opretter en overgangseffekt, kan du ændre lagets type, synlighed eller placering, foretage farve- eller tonejusteringer eller anvende filtereffekter. Se Dublere lag.

  • Du kan også bruge lagtyper til at anvende effekter, f.eks. farvemasker, slagskygger, glød eller prægning, på det primære lag. Hvis du vil oprette et overgangspar, skal du slå lagtypen til eller fra og gemme billedet i hver tilstand. Se Lageffekter og -typer.

  • Brug forudindstillede knaptyper fra panelet Typer til hurtigt at oprette overgangsknapper med normal, mouseover- og mousedown-tilstand. Tegn en grundlæggende form med rektangelværktøjet, og anvend en type, f.eks. normal med facet, til automatisk at ændre rektanglet til en knap. Kopier derefter laget, og anvend andre forudindstillede typer, f.eks. mouseover med facet, til at oprette yderligere knaptilstande. Gem hvert lag som et separat billede for at oprette et afsluttet sæt overgangsknapper.

  • Brug dialogboksen Gem til web og enheder til at gemme overgangsbilleder i et webkompatibelt format og med en optimeret filstørrelse. Se Optimere billeder.

Bemærk:

Når du gemmer overgangsbilleder, skal du bruge en navngivningskonvention til at skelne mellem det primære billede (ikke-overgangstilstand) fra det sekundære billede (overgangstilstand).

Når du har oprettet et overgangsbilledsæt i Photoshop, kan du bruge Dreamweaver til at placere billederne på en webside og automatisk tilføje JavaScript-koden til overgangshandlingen.

Eksporter til Zoomify

Du kan udsende billeder med høj opløsning på internettet, i hvilke brugere kan panorere og zoome ind og ud for at se flere detaljer. Et billede med en grundstørrelse bruger lige så lang tid på at indlæse som en JPEG-fil på samme størrelse. Photoshop eksporterer JPEG-filerne og HTML-filen, som du kan sende til din webserver.

  1. Vælg Filer > Eksporter > Zoomify, og angiv eksportindstillinger.

    Skabelon

    Indstiller baggrunden og navigationen for billedet, der vises i browseren.

    Outputplacering

    Angiver filens placering og navn.

    Billedfliseindstillinger

    Angiver billedkvaliteten.

    Browserindstillinger

    Angiver pixelbredde og -højde for basisbilledet i brugerens browser.

  2. Send HTML- og billedfilerne til din webserver.

Arbejd med hexadecimale farveværdier

Photoshop kan vise billedfarvers hexadecimale værdier eller kopiere en farves hexadecimale værdi til brug i en HTML-fil.

Få vist hexadecimale farveværdier i panelet Info

  1. Vælg Vindue > Info, eller klik på fanen for panelet Info for at få vist panelet.
  2. Vælg Panelindstillinger i panelmenuen. Vælg Webfarve i menuen Tilstand under Primær farveudlæsning eller Sekundær farveudlæsning, og klik på OK.
  3. Placer markøren over den farve, du vil have vist hexadecimale værdier for.

Kopiere en farve som hexadecimal værdi

I Photoshop kopieres farver som enten attributten HTML COLOR indeholdende den hexadecimale værdi (farve=#xxyyzz) eller som kun den hexadecimale værdi.

  1. Benyt en af følgende fremgangsmåder:
    • Vælg pipetten, og træk markøren hen over den farve, du vil kopiere. Højreklik (Windows) eller hold Ctrl nede og klik (Mac OS) og vælg Kopier farve som HTML eller Kopier farvens hexadecimale kode.

    • Angiv forgrundsfarven ved hjælp af panelet Farve, panelet Farveprøver eller Adobe Farvevælger. Du skal vælge Kopier farve som HTML eller Kopier farvens hexadecimale kode i panelmenuen Farve.

    • Klik på farveprøven, eller vælg Glansløs > Andet i dialogboksen Gem til web. Højreklik på den hexadecimale værdi i Adobe Farvevælger, og vælg Kopier.

  2. Åbn den ønskede fil i et HTML-redigeringsprogram, og vælg Rediger > Sæt ind.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online