Användarhandbok Avbryt

Segmentera webbsidor

Segment delar en bild i mindre bilder som sätts ihop igen på en webbsida med en HTML-tabell eller CSS-lager. Genom att dela upp bilden kan du tilldela olika webbadresslänkar för att skapa en sidnavigering eller optimera varje del av en bild med egna optimeringsinställningar.

Använd kommandot Spara för webben om du vill exportera och optimera en segmenterad bild. Photoshop sparar varje segment som en separat fil och skapar den HTML- eller CSS-kod som behövs för att visa den segmenterade bilden.

Photoshop: Webbsida indelad i segment
Webbsida indelad i segment.

Kom ihåg det här när du arbetar med segment:

  • Du kan skapa ett segment med hjälp av segmentverktyget eller genom att skapa lagerbaserade segment.

  • När du har skapat ett segment kan du markera det med hjälp av verktyget Markera segment och sedan flytta det, ändra storlek på det eller justera det med andra segment.

  • Du kan ange alternativ för varje segment – som segmentstyp, namn och webbadress – i dialogrutan Segmentalternativ.

  • Du kan optimera varje segment med de olika optimeringsinställningarna i dialogrutan Spara för webben.

Segmenttyper

Segment kategoriseras efter innehållstyp (Tabell, Bild, Ingen bild) och efter sättet som de skapades på (användare, lagerbaserat, auto).

Segment som skapas med segmentverktyget kallas användarsegment, och segment som skapats från ett lager kallas lagerbaserade segment. När du skapar ett nytt användarsegment eller lagerbaserat segment skapas andra automatiska segment som hanterar de återstående områdena i bilden. Automatiska segment fyller alltså det utrymme i bilden som inte definieras av användarsegment eller lagerbaserade segment. Automatiska segment skapas på nytt varje gång du lägger till eller redigerar användarsegment eller lagerbaserade segment. Du kan konvertera automatiska segment till användarsegment.

Användarsegment, lagerbaserade segment och automatiska segment ser olika ut: användarsegment och lagerbaserade segment avgränsas av en heldragen linje, medan automatiska segment avgränsas av en prickad linje. Dessutom har användarsegment och lagerbaserade segment en tydlig ikon. Du kan välja att visa eller dölja automatiska segment, vilket kan göra att ditt arbete med användar- och lagerbaserade segment blir lättare att se.

Ett delsegment är en typ av automatiskt segment som genereras när du skapar överlappande segment. Delsegmenten visar hur bilden delas upp när du sparar den optimerade filen. Delsegmenten numreras och får en segmentsymbol, men du kan inte markera eller redigera dem oberoende av det underliggande segmentet. Delsegmenten genereras om varje gång du ändrar segmentens staplingsordning.

Det går att skapa segment med hjälp av olika metoder:

  • Automatiska segment genereras automatiskt.

  • Användarsegment skapas med segmentverktyget.

  • Lagerbaserade segment skapas med panelen Lager.

Segmentera en webbsida

Du kan använda segmentverktyget för att rita segmenteringslinjer direkt på en bild, eller skapa din egen grafik med lager och sedan skapa segment baserade på lagren.

Skapa ett segment med segmentverktyget

  1. Välj segmentverktyget . (Om du trycker på C-tangenten kan du bläddra igenom verktygen under Beskär också.)

    Alla befintliga segment visas automatiskt i dokumentfönstret.

  2. Välj en stilinställning i alternativfältet.

    Normal

    Segmentproportionerna avgörs när du drar.

    Fasta proportioner

    Anger ett förhållande mellan höjd och bredd. Ange heltal eller decimaltal för proportionerna. Om du t.ex. vill skapa ett segment som är dubbelt så brett som högt anger du bredden 2 och höjden 1.

    Fastställd storlek

    Anger segmentets höjd och bredd. Ange pixelvärden i heltal.

  3. Dra med verktyget över det område där du vill skapa ett segment. Håll ned Skift medan du drar om du vill att segmentet ska vara kvadratiskt. Håll ned Alt och dra om du vill rita segmentet från mitten. Använd Visa > Fäst mot om du vill justera ett nytt segment mot en stödlinje eller ett annat segment i bilden. Se Flytta, ändra storlek på och fästa användarsegment.

Skapa segment från stödlinjer

  1. Lägga till stödlinjer i en bild.
  2. Markera segmentverktyget och klicka på Segment från stödlinjer i alternativfältet.

    När du skapar segment från stödlinjer tas alla befintliga segment bort.

Skapa ett segment av ett lager

Ett lagerbaserat segment omfattar alla pixeldata i lagret. Om du flyttar lagret eller redigerar innehållet i det justeras segmentområdet automatiskt så att det innefattar de nya pixlarna.

Photoshop: Skapa ett segment av ett lager
Ett lagerbaserat segment uppdateras när källagret ändras.

Lagerbaserade segment är mindre flexibla än användarsegment, men du kan konvertera (”flytta upp”) ett lagerbaserat segment till ett användarsegment. Se Konvertera automatiska och lagerbaserade segment till användarsegment.

  1. Markera ett lager på panelen Lager.
  2. Välj Lager > Nytt lagerbaserat segment.
Obs!

Du bör emellertid inte använda ett lagerbaserat segment om du tänker flytta lagret över ett stort område i bilden i en animering, eftersom segmentet kan bli så stort att det är oanvändbart.

Konvertera automatiska och lagerbaserade segment till användarsegment

Ett lagerbaserat segment är knutet till ett lagers pixelinnehåll och det enda sättet att flytta, kombinera, dela, justera och ändra storlek på det är därför att redigera lagret – om du inte konverterar det till ett användarsegment.

Alla automatiska segment i en bild är länkade till varandra och har samma optimeringsinställningar. Om du vill göra olika optimeringsinställningar för ett automatiskt segment måste du höja upp det till ett användarsegment.

  1. Använd segmentmarkeringsverktyget och markera det eller de segment du vill konvertera.
  2. Klicka på Höj upp i alternativfältet.

Visa segment och segmentalternativ

Du kan visa segment i dialogrutan Spara för webben i Photoshop. Följande kännetecken kan hjälpa dig att identifiera och skilja mellan olika segment:

Segmentlinjer

Definierar segmentets gränser. Heldragna linjer visar att segmentet är ett användarsegment eller lagerbaserat segment, medan prickade linjer visar att segmentet är ett automatiskt segment.

Segmentfärger

Skiljer användarsegment och lagerbaserade segment från automatiska segment. Som standard har användarsegment och lagerbaserade segment blå symboler medan automatiska segment har grå symboler.

Dessutom används färgjusteringar för att tona ned omarkerade segment i dialogrutan Spara för webben. De här justeringarna är bara till för visningen och påverkar inte färgen i den slutliga bilden. Som standard är färgjusteringen för automatiska segment två gånger högre än för användarsegment.

Segmentnummer

Segmenten numreras från vänster till höger och uppifrån och ned med början i bildens övre vänstra hörn. Om du ändrar ordningen på segmenten eller det sammanlagda antalet segment uppdateras segmentnumren enligt den nya ordningen.

Segmentemblem

Följande emblem, eller ikoner, visar vissa tillstånd.

Användarsegmentet har bildinnehåll.

Användarsegmentet har inget bildinnehåll.

Segmentet är lagerbaserat.

Visa eller dölja segmentgränser

  1. Välj Visa > Visa > Segment. Om du vill visa och dölja segment tillsammans med andra objekt använder du kommandot Extras. Se Visa eller dölja Extras.

Visa eller dölj automatiska segment

  1. Gör något av följande:
    • Välj verktyget Markera segment och klicka på Visa automatiska segment eller Dölj automatiska segment i alternativfältet.

    • Välj Visa > Visa > Segment. Automatiska segment visas tillsammans med de andra segmenten.

Visa eller dölja segmentnummer

  1. Gör något av följande:
    • Välj Redigera > Inställningar > Stödlinjer, stödraster och segment i Windows.

    • I Mac OS väljer du Photoshop > Inställningar> Stödlinjer, stödraster och segment.

  2. Klicka på Visa segmentnummer under Segment.

Ändra färgen på segmentlinjer

  1. Välj Redigera > Inställningar > Stödlinjer, stödraster och segment i Windows, och Photoshop > Inställningar > Stödlinjer, stödraster och segment i Mac OS.
  2. Välj en färg på menyn Linjefärg under Segmentlinjer.

    Efter färgförändringen så visas markerade segmentlinjer automatiskt i en kontrasterande färg.

Få hjälp snabbare och enklare

Ny användare?