Användarhandbok Avbryt

Segmentera webbsidor

Sök
  1. Användarhandbok för Photoshop
  2. Introduktion till Photoshop
    1. Föreställ det. Skapa det.
    2. Nyheter i Photoshop
    3. Redigera ditt första foto
    4. Skapa dokument
    5. Photoshop | Vanliga frågor
    6. Systemkrav för Photoshop
    7. Migrera förinställningar, funktionsmakron och inställningar
    8. Lär dig Photoshop
  3. Photoshop och andra Adobe-produkter och -tjänster
    1. Arbeta med Illustrator-bilder i Photoshop
    2. Arbeta med Photoshop-filer i InDesign
    3. Substance 3D-material för Photoshop
    4. Photoshop och Adobe Stock
    5. Använd apptillägget Capture i Photoshop
    6. Creative Cloud Libraries
    7. Creative Cloud Libraries i Photoshop
    8. Använda Touch Bar med Photoshop
    9. Stödraster och stödlinjer
    10. Skapa funktionsmakron
    11. Ångra och historik
  4. Photoshop på iPad
    1. Photoshop på iPad | Vanliga frågor
    2. Kom igång med arbetsytan
    3. Systemkrav | Photoshop på iPad
    4. Skapa, öppna och spara dokument
    5. Lägg till foton
    6. Arbeta med lager
    7. Rita och måla med penslar
    8. Gör markeringar och lägg till maskering
    9. Retuschera dina sammansatta bilder
    10. Arbeta med justeringslager
    11. Justera färgtonen i den sammansatta bilden med Kurvor
    12. Använda omformningsåtgärder
    13. Beskär och rotera dina sammansättningar
    14. Rotera, panorera, zooma och återställa arbetsytan
    15. Arbeta med textlager
    16. Arbeta med Photoshop och Lightroom
    17. Skaffa saknade typsnitt i Photoshop på iPad
    18. Japansk text i Photoshop på iPad
    19. Hantera appinställningar
    20. Tryckkortkommandon och gester
    21. Kortkommandon
    22. Redigera bildstorlek
    23. Livestreama samtidigt som du skapar i Photoshop på iPad
    24. Reparera defekter med verktyget Lagningspensel
    25. Skapa penslar i Capture och använd dem i Photoshop
    26. Arbeta med Camera Raw-filer
    27. Skapa och arbeta med smarta objekt
    28. Justera exponering i dina bilder med skugga och efterbelys
  5. Betaversion av Photoshop på webben
    1. Vanliga frågor | Betaversionen av Photoshop på webben 
    2. Introduktion till arbetsytan
    3. Systemkrav | Betaversionen av Photoshop på webben
    4. Kortkommandon | Betaversion av Photoshop på webben
    5. Filformat som stöds | Betaversion av Photoshop på webben
    6. Öppna och arbeta med molndokument
    7. Använda begränsade redigeringar i molndokument
    8. Samarbeta med intressenter
  6. Molndokument
    1. Photoshop-molndokument | Vanliga frågor
    2. Photoshop-molndokument | Arbetsflödesfrågor
    3. Hantera och arbeta med molndokument Photoshop
    4. Uppgradera molnlagringsutrymmet för Photoshop
    5. Det går inte att skapa eller spara ett molndokument
    6. Lös fel med Photoshops molndokument
    7. Samla in loggar för synkronisering av molndokument
    8. Dela åtkomst och redigera dina molndokument
    9. Dela filer och kommentera i appen
  7. Arbetsyta
    1. Grundläggande om arbetsytan
    2. Inställningar
    3. Lär dig snabbare med panelen Upptäck i Photoshop
    4. Skapa dokument
    5. Montera filer
    6. Standardkortkommandon
    7. Anpassa kortkommandon
    8. Verktygsgallerier
    9. Prestandainställningar
    10. Använda verktyg
    11. Förinställningar
    12. Stödraster och stödlinjer
    13. Tryckgester
    14. Använda Touch Bar med Photoshop
    15. Funktioner för pekskärmar och anpassningsbara arbetsytor
    16. Förhandstitt på teknik
    17. Metadata och anteckningar
    18. Funktioner för pekskärmar och anpassningsbara arbetsytor
    19. Montera Photoshop-bilder i andra program
    20. Linjaler
    21. Visa eller dölj extrainnehåll som inte skrivs ut
    22. Ange kolumner för en bild
    23. Ångra och historik
    24. Paneler och menyer
    25. Placera element med fästfunktionen
    26. Placera med linjalen
  8. Webb-, skärm- och appdesign
    1. Photoshop för design
    2. Ritytor
    3. Device Preview
    4. Kopiera CSS från lager
    5. Segmentera webbsidor
    6. HTML-alternativ för segment
    7. Ändra snittlayout
    8. Arbeta med webbilder
    9. Skapa webbfotogallerier
  9. Grundläggande om bilder och färger
    1. Så ändrar du storlek på bilder
    2. Arbeta med raster- och vektorbilder
    3. Bildstorlek och upplösning
    4. Hämta bilder från kameror och skannrar
    5. Skapa, öppna och importera bilder
    6. Visa bilder
    7. Fel ogiltig JPEG-markör | Öppna bilder
    8. Visa flera bilder
    9. Anpassa färgväljare och färgrutor
    10. High Dynamic Range-bilder
    11. Matcha färger i bilden
    12. Konvertera bilder till andra färglägen
    13. Färglägen
    14. Radera delar av en bild
    15. Blandningslägen
    16. Välja färger
    17. Anpassa indexerade färgtabeller
    18. Bildinformation
    19. Förvrängningsfilter är inte tillgängliga
    20. Färg
    21. Färg- och monokromjusteringar med kanaler
    22. Välja färger i Färgpanelen och Färgrutor
    23. Ta färgprov
    24. Färg- eller bildläge
    25. Färgskiftning
    26. Lägga till en villkorsstyrd lägesändring i ett funktionsmakro
    27. Lägga till färgrutor från HTML-, CSS- och SVG-dokument
    28. Bitdjup och inställningar
  10. Lager
    1. Grundläggande om lager
    2. Icke-förstörande redigering
    3. Skapa och hantera lager och grupper
    4. Markera, gruppera och länka lager
    5. Montera bilder i ramar
    6. Lageropacitet och -blandning
    7. Maskeringslager
    8. Använda smarta filter
    9. Lagerkompositioner
    10. Flytta, stapla och låsa lager
    11. Maskera lager med vektormasker
    12. Hantera lager och grupper
    13. Lagereffekter och lagerstilar
    14. Redigera lagermasker
    15. Extrahera resurser
    16. Visa lager med urklippsmasker
    17. Generera bildresurser från lager
    18. Arbeta med smarta objekt
    19. Blandningslägen
    20. Kombinera flera bilder till ett grupporträtt
    21. Kombinera bilder med Blanda lager automatiskt
    22. Justera och fördela lager
    23. Kopiera CSS från lager
    24. Läs in markering från ett lager eller en lagermasks gränser
    25. Med alternativen för ursparning kan du se innehåll från andra lager
  11. Markeringar
    1. Komma igång med markering
    2. Gör markeringar i din sammansatta bild
    3. Arbetsytan Markera och maskera
    4. Markera med hjälp av markeringsramsverktygen
    5. Markera med hjälp av lassoverktygen
    6. Justera pixelmarkeringar
    7. Flytta, kopiera och ta bort markerade pixlar
    8. Skapa en tillfällig snabbmask
    9. Markera ett färgintervall i en bild
    10. Konvertera mellan banor och markeringsgränser
    11. Grundläggande om kanaler
    12. Spara markeringar och alfakanalmasker
    13. Välja de bildområden som är i fokus
    14. Duplicera, dela och sammanfoga kanaler
    15. Kanalberäkningar
  12. Bildjusteringar
    1. Ersätt objektfärger
    2. Tänja perspektiv
    3. Reducera oskärpa från kameraskak
    4. Exempel med Lagningspensel
    5. Exportera tabeller för färgsökning
    6. Justera bildens skärpa och oskärpa
    7. Färgjusteringar
    8. Använda intensitets-/kontrastjusteringar
    9. Förbättra skugg- och högdagerdetaljer
    10. Nivåjustering
    11. Justera nyans och mättnad
    12. Justera lyster
    13. Justera färgmättnad i bildområden
    14. Göra snabba toningsjusteringar
    15. Använda färgeffekter på bilder
    16. Förbättra bilden med färgbalansjusteringar
    17. High Dynamic Range-bilder
    18. Visa histogram och pixelvärden
    19. Matcha färger i bilden
    20. Beskära och räta upp foton
    21. Konvertera en färgbild till en svartvit bild
    22. Justerings- och fyllningslager
    23. Kurvanpassning
    24. Blandningslägen
    25. Välja bilder för tryck
    26. Justera färg och ton med pipetterna Nivåer och Kurvor
    27. Justera HDR-exponering och HDR-toning
    28. Skugga eller efterbelysa bildområden
    29. Selektiv färgjustering
  13. Adobe Camera Raw
    1. Systemkrav för Camera Raw
    2. Nyheter i Camera Raw
    3. Introduktion till Camera Raw
    4. Skapa panoramor
    5. Objektiv som stöds
    6. Effekterna Vinjettering, Kornighet och Ta bort dis i Camera Raw
    7. Standardkortkommandon
    8. Automatisk perspektivkorrigering i Camera Raw
    9. Radiellt filter i Camera Raw
    10. Hantera Camera Raw-inställningar
    11. Öppna, bearbeta och spara foton i Camera Raw
    12. Reparera foton med hjälp av det förbättrade verktyget Fläckborttagning i Camera Raw
    13. Rotera, beskära och justera foton
    14. Justera färgåtergivning i Camera Raw
    15. Processversioner i Camera Raw
    16. Göra lokala justeringar i Camera Raw
  14. Reparera och återställa bilder
    1. Använda Innehållsanpassad fyllning till att ta bort objekt från foton
    2. Innehållsanpassad lappning och flytt
    3. Retuschera och reparera foton
    4. Korrigera förvrängning och brus
    5. Grundläggande felsökningssteg för att korrigera de flesta problem
  15. Bildförbättring och -omformning
    1. Ersätt himlen i dina bilder
    2. Omforma objekt
    3. Justera beskärning, rotation och storlek på arbetsyta
    4. Så beskär du och rätar upp foton
    5. Skapa och redigera panoramabilder
    6. Tänj bilder, former och banor
    7. Gränspunkt
    8. Innehållsmedveten skalning
    9. Omforma bilder, former och banor
  16. Rita och måla
    1. Måla symmetriska mönster
    2. Rita rektanglar och ändra linjealternativ
    3. Rita
    4. Rita och redigera former
    5. Målningsverktyg
    6. Skapa och ändra penslar
    7. Blandningslägen
    8. Lägga till färger till banor
    9. Redigera banor
    10. Måla med blandpenseln
    11. Penselförinställningar
    12. Övertoningar
    13. Övertoningsinterpolation
    14. Fylla i och rama in markeringar, lager och banor
    15. Rita med hjälp av ritstiftsverktygen
    16. Skapa mönster
    17. Skapa ett mönster med mönsterverktyget
    18. Hantera banor
    19. Hantera mönsterbibliotek och förinställningar
    20. Rita eller måla med hjälp av ett ritbord
    21. Skapa texturerade penslar
    22. Lägga till dynamiska element i penslar
    23. Övertoning
    24. Måla stiliserade penseldrag med hjälp av Konsthändelsepensel
    25. Måla med ett mönster
    26. Synkronisera förinställningar på flera enheter
  17. Text
    1. Lägga till och redigera text
    2. Unified Text Engine
    3. Arbeta med OpenType-teckensnitt med SVG-specialtecken
    4. Formatera tecken
    5. Formatera stycken
    6. Så här skapar du texteffekter
    7. Redigera text
    8. Rad- och teckenavstånd
    9. Arabisk och hebreisk text
    10. Teckensnitt
    11. Felsök teckensnitt
    12. Asiatisk text
    13. Skapa text
  18. Filter och effekter
    1. Använda filtret Gör flytande
    2. Använda Oskärpegalleri
    3. Grundläggande om filter
    4. Referens för filtereffekter
    5. Lägga till ljuseffekter
    6. Använda filtret Adaptiv vidvinkel
    7. Använda oljemålningsfilter
    8. Använda filtret Gör flytande
    9. Lagereffekter och lagerstilar
    10. Använda filter
    11. Smeta ut bildområden
  19. Spara och exportera
    1. Spara dina filer i Photoshop
    2. Exportera dina filer i Photoshop
    3. Filformat som stöds
    4. Spara filer med grafikformat
    5. Flytta designer mellan Photoshop och Illustrator
    6. Spara och exportera videofilmer och animeringar
    7. Spara PDF-filer
    8. Digimarc-copyrightskydd
  20. Färghantering
    1. Färghantering
    2. Bibehålla konsekventa färger
    3. Färginställningar
    4. Duplexfärgbilder
    5. Arbeta med färgprofiler
    6. Färghantera dokument för visning online
    7. Färghantera dokument vid utskrift
    8. Färghantera importerade bilder
    9. Granska korrektur av färger
  21. Webb-, skärm- och appdesign
    1. Photoshop för design
    2. Ritytor
    3. Device Preview
    4. Kopiera CSS från lager
    5. Segmentera webbsidor
    6. HTML-alternativ för segment
    7. Ändra snittlayout
    8. Arbeta med webbilder
    9. Skapa webbfotogallerier
  22. Video och animering
    1. Videoredigering i Photoshop
    2. Redigera video- och animeringslager
    3. Översikt över video och animering
    4. Förhandsvisa video och animeringar
    5. Måla bildrutor i videolager
    6. Importera videofiler och bildsekvenser
    7. Skapa bildruteanimeringar
    8. Creative Cloud 3D Animation (förhandstitt på teknik)
    9. Skapa tidslinjeanimeringar
    10. Skapa bilder för videofilmer
  23. Utskrift
    1. Skriva ut 3D-objekt
    2. Skriva ut från Photoshop
    3. Skriva ut med färghantering
    4. Kontaktkartor och PDF-presentationer
    5. Skriva ut foton i bildpaketslayout
    6. Skriva ut dekorfärger
    7. Skriva ut bilder till en kommersiell tryckpress
    8. Förbättra färgutskrifter från Photoshop
    9. Felsöka utskriftsproblem | Photoshop
  24. Automatisering
    1. Skapa funktionsmakron
    2. Skapa databaserade bilder
    3. Skript
    4. Bearbeta en grupp med filer
    5. Spela upp och hantera funktionsmakron
    6. Lägg till villkorstyrda funktionsmakron
    7. Funktionsmakron och panelen Funktionsmakron
    8. Spela in verktyg i funktionsmakron
    9. Lägga till en villkorsstyrd lägesändring i ett funktionsmakro
    10. Användargränssnittsverktygslåda för Photoshop för plugin-program och skript
  25. Autentisering av innehåll
    1. Läs mer om innehållsuppgifter
    2. Identitet och ursprung – NFT
    3. Anslut konton för kreativ tillskrivning
  26. Photoshop 3D
    1. Photoshop 3D | Vanliga frågor om borttagna 3D-funktioner

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.

Mer

Adobes logotyp

Logga in på ditt konto

Snabblänkar

Visa alla dina planer Hantera dina planer

Juridiska meddelanden    |    Policy för onlinesekretess