Oversikt over utsnitt

Når du utformer grafikk for web, må ofte ulike deler av et bilde fungere uavhengig av hverandre.Ett område kan kobles til en nettadresse, et annet kan lastes inn raskere, og et tredje kan trenge andre forbedringsinnstillinger. Stykkeverktøy deler ett enkelt bilde inn i et rutenett av mindre deler som fungerer sammen som en nettside, samtidig som du beholder kontrollen over hver seksjon.

Photoshop setter sammen oppdelte bilder på nettsider ved hjelp av HTML-tabeller eller CSS-lag. Når du eksporterer et oppdelt bilde med kommandoen Fil > Eksporter > Lagre for web, lagrer Photoshop hvert utsnitt som en egen fil.Det genererer også HTML- eller CSS-koden som trengs for å vise bildet som én samlet komposisjon i en nettleser.

Slik fungerer utsnitt

Utsnitt deler et bilde langs usynlige rutenettlinjer og oppretter rektangulære seksjoner som fungerer som uavhengige filer.Hvert utsnitt beholder plasseringen sin i den overordnede layouten, samtidig som det fungerer som et eget element med egne egenskaper, forbedringsinnstillinger og virkemåter.

Denne tilnærmingen gir noen praktiske fordeler:

• Tilordne ulike nettadresselenker for å opprett klikkbare navigasjonselementer
• Bruk ulike komprimeringsinnstillinger for å balansere kvalitet og filstørrelse på tvers av områder
• Oppdater enkeltseksjoner uten å eksportere hele komposisjonen på nytt

Utsnittstype etter opprettelse

Photoshop kategoriserer utsnitt etter hvordan de opprettes, og hver type oppfører seg forskjellig når du redigerer bildet.

• Brukerutsnitt: Seksjoner du definerer manuelt med Stykkeverktøy-verktøyet. Du har full kontroll over størrelse, plassering og egenskaper, og de blir værende på plass til du flytter eller endrer dem.
• Lagbaserte utsnitt: Utsnitt inkluderer alle piksler i et lag. Avgrensningene deres oppdateres automatisk når du flytter eller redigerer laget. De fungerer godt for innhold som endres ofte, men gir mindre kontroll over nøyaktig plassering enn brukerutsnitt.
• Automatiske utsnitt: Utsnitt som fyller den gjenværende plassen i et bilde som ikke dekkes av brukerutsnitt eller lagbaserte utsnitt. Photoshop genererer disse automatisk og regenererer dem når du legger til, fjerner eller endrer andre utsnitt.Alle automatiske utsnitt i et bilde deler de samme innstillingene for forbedring.
• Understykkeverktøy: En spesiell type automatisk stykkeverktøy som vises når stykkeverktøy overlapper hverandre.Underseksjoner viser hvordan Photoshop deler opp de overlappende områdene når du lagrer den forbedrede filen.Du kan ikke velge eller redigere undersnitt uavhengig av de underliggende snittene.

Stykkeverktøytype etter innhold

Utsnitt klassifiseres også etter typen innhold de inneholder.

• Bildestykkeverktøy: Standard stykkeverktøytype for visuelt innhold, som inneholder bildedata fra Photoshop-dokumentet ditt.
• Segmenter uten bilde: Tomme tabellceller for HTML-tekst eller heldekkende farger.Photoshop eksporterer ikke disse som bildefiler, noe som gjør dem nyttige for aktiv, valgbar tekst.
• Tabellseksjoner: Seksjoner som definerer hvordan Photoshop strukturerer HTML-tabellen som brukes til å sette sammen et oppdelt bilde i en nettleser.

Visuelle signaler for stykkeverktøy

Photoshop bruker visuelle signaler som hjelper deg å skille mellom stykktyper mens du arbeider.

• Stykkeverktøylinjer: Heltrukne linjer markerer brukerstykkeverktøy eller lagbaserte stykkeverktøy, og stiplede linjer markerer automatiske stykkeverktøy.
• Stykkeverktøyfarger: Blå symboler identifiserer brukerstykkeverktøy og lagbaserte stykkeverktøy, og grå symboler markerer automatiske stykkeverktøy.
• Stykkeverktøynumre: Tallene i det øvre venstre hjørnet av hvert stykkeverktøy går fra venstre til høyre og fra topp til bunn, og oppdateres automatisk når du ordner om eller endrer stykkeverktøy.
• Stykkeverktøymerker: Små ikoner identifiserer innholdet og typen til stykkeverktøyet.For eksempel markerer et bildeikon et brukerstykke med bildeinnhold, et overkrysset bildeikon markerer et brukerstykke uten bildeinnhold, og et lagikon markerer et lagbasert stykke.

Når du kjenner igjen disse visuelle forskjellene, kan du raskt identifisere stykkeverktøytyper og arbeide mer effektivt med komplekse stykkeverktøyoppsett når du deler opp nettsider.