Photoshops nettverktøy gjør det enkelt å bygge komponentstykker for nettsider eller lage fullstendige nettsider i forhåndsinnstilte eller egendefinerte formater.

  • Bruk lag og stykker til å utforme nettsider og grensesnittelementer for nettsider. (Se Lag og Stykke opp nettsider.)

  • Bruk lagsammensetninger til å eksperimentere med forskjellige sidekomposisjoner eller til å eksportere variasjoner av en side. (Se Lagsammensetninger.)

  • Lag overrullingstekst eller knappegrafikk som skal importeres i Dreamweaver eller Flash.

  • Opprett nettanimasjoner med animasjonspanelet, og eksporter dem deretter som animerte GIF-bilder eller QuickTime-filer. Se Opprette delbildeanimasjoner.

  • Bruk Adobe Bridge til å opprette et nettfotogalleri for raskt å gjøre om et sett med bilder til et interaktivt nettsted ved hjelp av et bredt utvalg profesjonelt utformede maler.

Hvis du vil se en video om utforming av nettsteder med Photoshop og Dreamweaver, kan du se Få tilgang til Photoshop fra Dreamweaver for å forbedre nettbilde.

Opprette overrullingsbilder

En overrulling på en nettside er en knapp eller et bilde som endres når du holder musen over. Du trenger minst to bilder for å opprette en overrulling: et primærbilde for normal status og et sekundærbilde for endret status.

Photoshop inneholder flere nyttige verktøy for å opprette overrullingsbilder:

  • Bruk lag til å opprette primær- og sekundærbilder. Opprett innhold på ett lag, dupliser deretter laget, og rediger det for å opprette lignende innhold samtidig som justeringen mellom lagene opprettholdes. Når du oppretter en overrullingseffekt, kan du endre lagets stil, synlighet eller plassering, gjøre farge eller tonejusteringer eller bruke filtereffekter. Se Duplisere lag.

  • Du kan også bruke lagstiler til å legge til effekter, for eksempel fargeoverlappinger, skygger, glød eller preg, på primærlaget. Hvis du vil opprette et overrullingspar, må du aktivere eller deaktivere lagstilen og lagre bildet i hver status. Se Lageffekter og -stiler.

  • Bruk forhåndsinnstilte knappestiler fra stilpanelet til raskt å opprette overrullingsknapper med statusene normal, mus over og mus ned. Tegn en grunnform med rektangelverktøyet, og legg til en stil, for eksempel Skråkant, normal, for automatisk å gjøre om rektanglet til en knapp. Deretter kopierer du laget og bruker andre forhåndsinnstilte stiler, for eksempel Skråkant, mus over, for å opprette flere knappestatuser. Lagre hvert lag som et separat bilde for å opprette et ferdig sett med overrullingsknapper.

  • Bruk dialogboksen Lagre for Web og enheter til å lagre overrullingsbilder i et nettkompatibelt format og med en optimalisert filstørrelse. Se Optimalisere bilder.

Merk:

Når du lagrer overrullingsbilder, bør du bruke en navnekonvensjon for å skille primærbildet (ikke overrulling) fra sekundærbildet (overrulling).

Når du har opprettet et sett med overrullingsbilder i Photoshop, bruker du Dreamweaver til å plassere bildene på en nettside og automatisk legge til JavaScript-koden for overrullingshandlingen.

Eksportere til Zoomify

Du kan publisere bilder med høy oppløsning på nettet og la brukerne panorere og zoome bildene for å se flere detaljer. Bildet i grunnstørrelse lastes ned like raskt som en JPEG-fil i samme størrelse. Photoshop eksporterer JPEG-filene og HTML-filen som du kan laste opp til nettserveren.

  1. Velg Fil > Eksporter > Zoomify, og angi eksportalternativer.

    Mal

    Angir bakgrunn og navigasjon for bildet som vises i nettleseren.

    Utdataplassering

    Angir filens plassering og navn.

    Alternativer for bildeflislegging

    Angir bildekvalitet.

    Alternativer for leser

    Angir bildepunktbredde og -høyde for basisbildet i brukerens nettleser.

  2. Last opp HTML- og bildefilene til nettserveren.

Arbeide med heksadesimale fargeverdier

Photoshop kan vise de heksadesimale verdiene for bildefarger eller kopiere en farges heksadesimale verdi for bruk i en HTML-fil.

Vise heksadesimale fargeverdier i infopanelet

  1. Velg Vindu > Info, eller klikk på panelfanen Info for å vise panelet.
  2. Velg Panelvalg på panelmenyen. Under Første fargeavlesning eller Andre fargeavlesning velger du Web-farger på Modus-menyen og klikker OK.
  3. Plasser pekeren over fargen du vil vise heksadesimale verdier for.

Kopiere en farge som en heksadesimal verdi

Photoshop kopierer farger enten som en HTML COLOR-attributt med den heksadesimale verdien (color=#xxyyzz), eller kun som den heksadesimale verdien alene.

  1. Gjør ett av følgende:
    • Bruk pipetteverktøyet til å flytte markøren over fargen du vil kopiere. Høyreklikk (Windows) eller Ctrl+klikk (Mac) og velg deretter Kopier farge som HTML eller Kopier fargens hex-kode.

    • Angi forgrunnsfargen ved hjelp av fargepanelet, fargekartpanelet eller Adobes fargevelger. Velg enten Kopier farge som HTML eller Kopier fargens hex-kode fra fargepanelmenyen.

    • I dialogboksen Lagre for web klikker du på fargekartet, eller du velger Maske > Andre. I Adobe-fargevelgeren høyreklikker du på den heksadesimale verdien og velger Kopier.

  2. Åpne den ønskede filen i en HTML-redigeringsapplikasjon, og velg Rediger > Lim inn.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet