Stykker deler opp et bilde i mindre bilder som settes sammen igjen på en webside ved hjelp av en HTML-tabell eller CSS-lag. Ved å dele opp bildet kan du tilordne forskjellige URL-koblinger for å opprette sidenavigering, eller optimalisere hver del av bildet ved hjelp av separate optimaliseringsinnstillinger.

Du eksporterer og optimaliserer et oppstykket bilde ved hjelp av kommandoen Lagre for Web og enheter. Photoshop lagrer hvert stykke som en egen fil og genererer HTML- eller CSS-koden som trengs for å vise det oppstykkede bildet.

Photoshop-webside delt opp i stykker
Webside delt opp i stykker.

Når du arbeider med stykker, bør du være oppmerksom på følgende:

  • Du kan opprette et stykke ved hjelp av stykkeverktøyet eller ved å opprette lagbaserte stykker.

  • Når du har opprettet et stykke, kan du velge det med stykkemarkeringsverktøyet  og deretter flytte det, endre størrelse på det eller justere det etter andre stykker.

  • Du kan angi alternativer for hvert stykke, for eksempel stykketype, navn eller URL-adresse, i dialogboksen Alternativer for stykke.

  • Du kan optimalisere hvert stykke ved hjelp av ulike optimaliseringsinnstillinger i dialogboksen Lagre for Web og enheter.

Stykketyper

Stykker kategoriseres etter innholdstype (Tabell, Bilde, Ikke noe bilde) og etter måten de opprettes på (bruker, lagbasert, automatisk).

Stykker som opprettes med stykkeverktøyet, kalles brukerstykker. Stykker som opprettes fra et lag, kalles lagbaserte stykker. Når du oppretter et nytt brukerstykke eller lagbasert stykke, genereres flere autostykker for å ta høyde for de gjenværende områdene av bildet. Autostykker fyller med andre ord områder av bildet som ikke er definert av brukerstykker eller lagbaserte stykker. Autostykker genereres på nytt hver gang du legger til eller redigerer brukerstykker eller lagbaserte stykker. Automatiske stykker kan konverteres til brukerstykker.

Brukerstykker, lagbaserte stykker og automatiske stykker har ulikt utseende. Brukerstykker og lagbaserte stykker defineres av en heltrukket linje, mens automatiske stykker defineres av en prikkete linje. Brukerstykker og lagbaserte stykker viser i tillegg et eget ikon. Du kan velge å vise eller skjule automatiske stykker, noe som kan gjøre det enklere å se arbeidet med brukerstykker og lagbaserte stykker.

Et delstykke er en type automatisk stykke som genereres når du oppretter overlappende stykker. Delstykker indikerer hvordan bildet deles inn når du lagrer den optimaliserte filen. Selv om delstykker er nummererte og det vises et stykkesymbol, kan du ikke merke eller redigere dem separat fra det underliggende stykket. Delstykker genereres på nytt hver gang du endrer stablingsrekkefølgen for stykker.

Stykker opprettes på ulike måter:

  • Autostykker genereres automatisk.

  • Brukerstykker opprettes med stykkeverktøyet.

  • Lagbaserte stykker opprettes med lagpanelet.

Stykke opp en webside

Du kan bruke stykkeverktøyet til å dra stykkelinjer på et bilde, eller du kan utforme grafikken ved hjelp av lag og deretter opprette stykker basert på disse lagene.

Opprette et stykke med stykkeverktøyet

  1. Velg stykkeverktøyet . (Trykk på C-tasten for å gå gjennom verktøyene som er gruppert sammen med beskjæringsverktøyet.)

    Eventuelle eksisterende stykker vises automatisk i dokumentvinduet.

  2. Velg en stilinnstilling på alternativlinjen:

    Normal

    Bestemmer stykkeproporsjonene mens du drar.

    Faste proporsjoner

    Angir forholdet mellom høyde og bredde. Angi sideforholdet i hele tall eller desimaler. Hvis du for eksempel vil opprette et stykke som er dobbelt så bredt som det er høyt, skriver du inn 2 for bredde og 1 for høyde.

    Fast størrelse

    Angir høyde og bredde for stykket. Skriv inn bildepunktverdier i hele tall.

  3. Dra over området der du vil opprette et stykke. Skift-dra for å begrense stykket til et kvadrat. Alt-dra (Windows) eller Tilvalg-dra (Mac OS) for å tegne fra midten. Velg Vis > Fest til for å justere et nytt stykke til en hjelpelinje eller et annet stykke i bildet. Se Flytte, endre størrelse på og feste brukerstykker.

Opprette stykker fra hjelpelinjer

  1. Legg til hjelpelinjer i bildet.
  2. Velg stykkeverktøyet, og klikk Stykker fra hjelpelinjer på alternativlinjen.

    Når du oppretter stykker fra hjelpelinjer, slettes eksisterende stykker.

Opprette et stykke fra et lag

Et lagbasert stykke omfatter alle bildepunktdataene på laget. Hvis du flytter laget eller redigerer laginnholdet, justeres stykkeområdet automatisk slik at det omfatter de nye bildepunktene.

Opprette et stykke fra et lag i Photoshop
Et lagbasert stykke oppdateres når kildelaget endres.

Lagbaserte stykker er mindre fleksible enn brukerstykker, men du kan konvertere ("heve") et lagbasert stykke til et brukerstykke. Se Konvertere automatiske og lagbaserte stykker til brukerstykker.

  1. Velg et lag i lagpanelet.
  2. Velg Lag > Nytt lagbasert stykke.

Merk:

Ikke bruk et lagbasert stykke når du skal flytte laget over et stort område av bildet under en animasjon, fordi stykkedimensjonene kan bli så store at resultatet ikke blir optimalt.

Konvertere automatiske og lagbaserte stykker til brukerstykker

Et lagbasert stykke er knyttet til bildepunktinnholdet på et lag, og den eneste måten å flytte, sette sammen, dele opp, endre størrelse på og justere det på, er derfor å redigere laget – med mindre du konverterer stykket til et brukerstykke.

Alle automatiske stykker i et bilde er koblet til og deler de samme optimaliseringsinnstillingene. Hvis du vil angi andre optimaliseringsinnstillinger for et automatisk stykke, må du heve det til et brukerstykke.

  1. Bruk stykkemarkeringsverktøyet, , til å velge stykket eller stykkene du vil konvertere.
  2. Klikk Hev på alternativlinjen.

    Merk:

    I dialogboksen Lagre for Web og enheter kan du heve et automatisk stykke ved å fjerne koblingen til det. Se Arbeide med stykker i dialogboksen Lagre for Web og enheter

Vise stykker og stykkealternativer

Du kan vise stykker i Photoshop og dialogboksen Lagre for Web og enheter. Følgende egenskaper kan hjelpe deg med å identifisere og skille mellom stykker:

Stykkelinjer

Definer stykkerammen. Heltrukkede linjer angir at stykket er et brukerstykke eller lagbasert stykke, mens prikkete linjer angir at stykket er et automatisk stykke.

Stykkefarger

Skill brukerstykker og lagbaserte stykker fra autostykker. Som standard har brukerstykker og lagbaserte stykker blå symboler, mens autostykker har grå symboler.

I tillegg bruker dialogboksen Lagre for Web og enheter fargejusteringer for å tone ned stykker som ikke er merket. Disse justeringene utføres utelukkende av hensyn til visningen og har ingen innvirkning på den endelige bildefargen. Fargejusteringen for automatiske stykker er som standard dobbelt så stor som for brukerstykker.

Stykkenumre

Stykker nummereres  fra venstre til høyre og fra topp til bunn, med start i bildets øvre venstre hjørne. Hvis du endrer rekkefølgen eller det totale antallet stykker, oppdateres stykkenumrene slik at de gjenspeiler den nye rekkefølgen.

Stykkemerker

Følgende merker, eller ikoner, angir bestemte betingelser.

Brukerstykket har bildeinnhold.

Brukerstykket har ikke bildeinnhold.

Stykket er lagbasert.

Vise eller skjule stykkerammer

  1. Velg Vis > Vis > Stykker. Hvis du vil skjule og vise stykker sammen med andre elementer, bruker du kommandoen Tillegg. Se Vise eller skjule tillegg.

Vise eller skjule automatiske stykker

  1. Gjør ett av følgende:
    • Velg stykkemarkeringsverktøyet, , og klikk Vis automatiske stykker eller Skjul automatiske stykker på alternativlinjen.

    • Velg Vis > Vis > Stykker. Automatiske stykker vises sammen med resten av stykkene.

Vise eller skjule stykkenumre

  1. Gjør ett av følgende:
    • I Windows velger du Rediger > Innstillinger > Hjelpelinjer, rutenett og stykker.

    • I Mac OS velger du Photoshop > Innstillinger > Hjelpelinjer, rutenett og stykker.

  2. Klikk Vis stykkenummer under Stykker.

Endre farge på stykkelinjer

  1. I Windows velger du Rediger > Innstillinger > Hjelpelinjer, rutenett og stykker. I Mac OS velger du Photoshop > Innstillinger > Hjelpelinjer, rutenett og stykker.
  2. Velg farge på Linjefarge-menyen under Stykkelinjer.

    Etter fargeendringen vises merkede stykkelinjer automatisk i en kontrasterende farge.

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