Brukerveiledning Avbryt

Arbeide med nettgrafikk

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

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

  • 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 webanimasjoner med animasjonspanelet, og eksporter dem deretter som animerte GIF-bilder eller QuickTime-filer. Se Opprette delbildeanimasjoner.

  • Bruk Adobe Bridge til å opprette et webfotogalleri for raskt å gjøre om et sett med bilder til et interaktivt webområde 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. 

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 webside 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 webserveren.

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

    Mal

    Angir bakgrunn og navigasjon for bildet som vises i webleseren.

    Utdataplassering

    Angir filens plassering og navn.

    Alternativer for bildeflislegging

    Angir bildekvalitet.

    Alternativer for leser

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

  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.

Få hjelp raskere og enklere

Ny bruker?